Files
peko-admin-web/src/views/game/GameActivityRankView.vue
2024-04-22 10:45:13 +08:00

795 lines
40 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section class="content">
<div class="box box-primary">
<section class="content-header">
<h1 id="itemTitle">游戏榜单配置</h1>
</section>
<section class="content">
<div id="table"></div>
<div id="toolbar">
<button id="addBtn" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>新增
</button>&nbsp;&nbsp;&nbsp;
<!--厂商id: <input type="text" id='channelId' placeholder=''>-->
活动名称: <input type="text" id='actName' placeholder=''> &nbsp;&nbsp;&nbsp;
游戏ID: <input type="text" id='gameId' placeholder=''>
<button id="btnSearch" class="btn btn-sm btn-primary" data-id=" + word + ">查询</button>
</div>
</section>
</div>
</section>
<div class="modal fade" id="actModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">x</span></button>
<h4 class="modal-title" id="addModalLabel">榜单配置新增</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="actForm">
<input type="hidden" name="id" id="actId" value="0">
<div class="form-group">
<div class="form-group">
<label for="actName" class="col-sm-3 control-label">活动名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="actName" id="actName1"
style="width:400px">
</div>
</div>
<div class="form-group">
<label for="gameId" class="col-sm-3 control-label">游戏ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="gameId" id="gameId1"
style="width:400px">
</div>
</div>
<div class="form-group">
<label for="cycleType" class="col-sm-3 control-label">统计类型:</label>
<select name="cycleType" id="cycleType" class="col-sm-2">
<option value="week">week</option>
<option value="delta">delta</option>
<!-- <option value="dayn">dayn</option>
<option value="month">month</option>-->
</select>
</div>
<div class="form-group">
<label for="winType" class="col-sm-3 control-label">胜利类型:</label>
<select name="winType" id="winType" class="col-sm-2">
<option value="1">连胜</option>
<option value="2">累计获胜</option>
<option value="3">连胜和累积获胜</option>
</select>
</div>
<div class="form-group">
<label for="rankShow" class="col-sm-3 control-label">榜单入口是否展示:</label>
<select name="rankShow" id="rankShow" class="col-sm-2">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
<!--<div class="form-group">-->
<!--<label for="code" class="col-sm-3 control-label">code:</label>-->
<!--<div class="col-sm-9">-->
<!--<input type="text" class="form-control validate[required]" name="code" id="code"-->
<!--style="width:400px">-->
<!--</div>-->
<!--</div>-->
<div class="form-group">
<label for="status" class="col-sm-3 control-label">状态:</label>
<select name="status" id="status" class="col-sm-2">
<option value="0">无效</option>
<option value="1">有效</option>
</select>
</div>
<div id="addCycleTypeDiv" style="display:none">
<div class="form-group">
<label for="scriptContent" class="col-sm-3 control-label">脚本内容:</label>
<div class="col-sm-9">
<textarea id="scriptContent" name="scriptContent" style="height:150px; width:400px"
class="form-control "></textarea>
</div>
</div>
<div class="form-group">
<label for="functionName" class="col-sm-3 control-label">调用的函数:</label>
<div class="col-sm-9">
<input type="text" class="form-control " name="functionName" id="functionName"
style="width:400px">
</div>
</div>
<div class="form-group">
<label for="functionParams" class="col-sm-3 control-label">函数的参数:</label>
<div class="col-sm-9">
<input type="text" class="form-control " name="functionParams" id="functionParams"
style="width:400px">
</div>
</div>
</div>
<div class="form-group">
<label for="expireTime" class="col-sm-3 control-label">榜单过期时间:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="expireTime"
id="expireTime" style="width:400px">
</div>
</div>
<!--<div class="form-group">
<label for="cronExpression" class="col-sm-3 control-label">表达式:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="cronExpression" id="cronExpression"
style="width:400px">
</div>
</div>-->
<!-- <div class="form-group">
<label for="rankType" class="col-sm-3 control-label">榜单类型:</label>
<select name="rankType" id="rankType" class="col-sm-2">
<option value="total">总量</option>
<option value="peak">峰值</option>
<option value="incr">增量</option>
</select>
</div>-->
<div class="form-group">
<label for="showType" class="col-sm-3 control-label">展示类型(多个用逗号隔开):</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="showType" id="showType"
placeholder="1连胜 2累计获胜 3连胜和累积获胜 4闯关数/分数 5所有类型" style="width:400px">
</div>
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="startTime" class="col-sm-3 control-label">活动开始时间:</label>
<div class="col-sm-8">
<input id="startTime" type="text" name="startTime"
class="form-control validate[required]">
</div>
</div>
<div class="form-group">
<label for="endTime" class="col-sm-3 control-label">活动结束时间:</label>
<div class="col-sm-8">
<input id="endTime" type="text" name="endTime"
class="form-control validate[required]">
</div>
</div>
</form>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">x</span></button>
<h4 class="modal-title" id="editModalLabel">游戏榜单编辑</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="editForm">
<input type="hidden" name="id" id="id">
<!-- <input type="hidden" name="status" id="editStatus">-->
<!--<div class="form-group">
<label for="channelId" class="col-sm-3 control-label">厂商渠道ID:</label>
<div class="col-sm-9">
<input type="hidden" class="form-control validate[required]" name="channelId" id="e_channelId"
style="width:400px">
</div>
</div>-->
<div class="form-group">
<label for="actName" class="col-sm-3 control-label">活动名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="actName" id="e_actName"
style="width:400px">
</div>
</div>
<div class="form-group">
<label for="gameId" class="col-sm-3 control-label">游戏ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="gameId" id="e_gameId"
style="width:400px">
</div>
</div>
<div class="form-group">
<label for="cycleType" class="col-sm-3 control-label">统计类型:</label>
<select name="cycleType" id="e_cycleType" class="col-sm-2">
<option value="week">week</option>
<option value="delta">delta</option>
<!-- <option value="dayn">dayn</option>
<option value="month">month</option>-->
</select>
</div>
<div class="form-group">
<label for="winType" class="col-sm-3 control-label">胜利类型:</label>
<select name="winType" id="e_winType" class="col-sm-2">
<option value="1">连胜</option>
<option value="2">累计获胜</option>
<option value="3">连胜和累积获胜</option>
</select>
</div>
<div class="form-group">
<label for="rankShow" class="col-sm-3 control-label">榜单入口是否展示:</label>
<select name="rankShow" id="e_rankShow" class="col-sm-2">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">状态:</label>
<select name="status" id="e_status" class="col-sm-2">
<option value="0">无效</option>
<option value="1">有效</option>
</select>
</div>
<div id="e_CycleTypeDiv" style="display:none">
<div class="form-group">
<label for="scriptContent" class="col-sm-3 control-label">脚本内容:</label>
<div class="col-sm-9">
<textarea id="e_scriptContent" name="scriptContent" style="height:150px; width:400px"
class="form-control validate[required]"></textarea>
</div>
</div>
<div class="form-group">
<label for="functionName" class="col-sm-3 control-label">调用的函数:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="functionName"
id="e_functionName" style="width:400px">
</div>
</div>
<div class="form-group">
<label for="functionParams" class="col-sm-3 control-label">函数的参数:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="functionParams"
id="e_functionParams" style="width:400px">
</div>
</div>
</div>
<div class="form-group">
<label for="expireTime" class="col-sm-3 control-label">榜单过期时间:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="expireTime"
id="e_expireTime" style="width:400px">
</div>
</div>
<!--<div class="form-group">
<label for="cronExpression" class="col-sm-3 control-label">表达式:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="cronExpression" id="e_cronExpression"
style="width:400px">
</div>
</div>-->
<!-- <div class="form-group">
<label for="rankType" class="col-sm-3 control-label">榜单类型:</label>
<select name="rankType" id="e_rankType" class="col-sm-2">
<option value="total">总量</option>
<option value="peak">峰值</option>
<option value="incr">增量</option>
</select>
</div>-->
<div class="form-group">
<label for="showType" class="col-sm-3 control-label">展示类型(多个用逗号隔开):</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="showType" id="e_showType"
style="width:400px">
</div>
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="startTime" class="col-sm-3 control-label">活动开始时间:</label>
<div class="col-sm-8">
<input id="e_startTime" type="text" name="startTime"
class="form-control validate[required]">
</div>
</div>
<div class="form-group">
<label for="endTime" class="col-sm-3 control-label">活动结束时间:</label>
<div class="col-sm-8">
<input id="e_endTime" type="text" name="endTime"
class="form-control validate[required]">
</div>
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="edit">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="sure">确定</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
export default {
name: "GameActivityRankView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
initTable();
// 查询刷新
$('#btnSearch').on('click', function () {
$('#table').bootstrapTable('destroy');
initTable();
});
$('#addBtn').on('click', function () {
cleanModal();
$("#actForm")[0].reset();
$('#actModal').modal('show');
});
$("#cycleType").on('change', function (e) {
var value = $(this).val();
// console.log(value);
if (value == 'delta') {
$("#addCycleTypeDiv").show();
} else {
$("#addCycleTypeDiv").hide();
}
});
$("#e_cycleType").on('change', function (e) {
var value = $(this).val();
// console.log(value);
if (value == 'delta') {
$("#e_CycleTypeDiv").show();
} else {
$("#e_CycleTypeDiv").hide();
}
});
$('#table').on('click', '.opt-edit', function () {
cleanModal($("#editForm"));
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/gameActivityRank/getById",
data: { "id": id },
dataType: "json",
success: function (json) {
if (json) {
var date = json.endTime ? new Date(json.endTime).format("yyyy-MM-dd hh:mm:ss") : '';
var startDate = new Date(json.startTime).format("yyyy-MM-dd hh:mm:ss");
$('#id').val(json.id);
$('#e_actName').val(json.actName);
$('#e_gameId').val(json.gameId);
$('#e_status').val(json.status);
$('#e_scriptContent').val(json.scriptContent);
$('#e_functionName').val(json.functionName);
$('#e_functionParams').val(json.functionParams);
$('#e_expireTime').val(json.expireTime);
$('#e_cronExpression').val(json.cronExpression);
$('#e_rankType').val(json.rankType);
$('#e_cycleType').val(json.cycleType);
$('#e_winType').val(json.winType);
$('#e_rankShow').val(json.rankShow);
$('#e_showType').val(json.showType);
$('#e_endTime').val(date);
$('#e_startTime').val(startDate);
$("#editModal").modal('show');
if (json.cycleType == 'delta') {
$("#e_CycleTypeDiv").show();
} else {
$("#e_CycleTypeDiv").hide();
}
picker1.datetimepicker('setStartDate', startDate);
} else {
$("#tipMsg").text("获取信息出错");
$("#tipModal").modal('show');
}
}
});
});
$('#save').on('click', function () {
if ($('#actForm').validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/gameActivityRank/add",
data: $('#actForm').serialize(),
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#actModal").modal('hide');
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("保存失败,错误码:" + json.message);
$("#tipModal").modal('show');
}
}
})
}
});
$('#edit').on('click', function () {
if ($('#editForm').validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/gameActivityRank/update",
data: $('#editForm').serialize(),
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#editModal").modal('hide');
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("修改失败,错误码:" + json.message);
$("#tipModal").modal('show');
}
}
});
}
});
$("#table").on("click", '.opt-del', function () {
var id = $(this).attr("data-id");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除吗?")) {
$.ajax({
type: 'post',
url: '/admin/gameActivityRank/delete',
data: { 'id': id },
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败,错误码:" + json.message);
$("#tipModal").modal('show');
}
}
});
}
});
var picker1 = $("#endTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
var picker2 = $('#startTime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
var picker3 = $('#endTime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
picker3.on('changeDate', function () {
var date = $('#endTime').datetimepicker('getDate');
console.log(date);
picker2.datetimepicker('setEndDate', date);
});
picker2.on('changeDate', function () {
var date = $('#startTime').datetimepicker('getDate');
picker3.datetimepicker('setStartDate', date);
});
picker3 = $("#e_endTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
var picker4 = $('#e_startTime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
var picker5 = $('#e_endTime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
})
picker5.on('changeDate', function () {
var date = $('#e_endTime').datetimepicker('getDate');
console.log(date);
picker4.datetimepicker('setEndDate', date);
});
picker4.on('changeDate', function () {
var date = $('#e_startTime').datetimepicker('getDate');
picker5.datetimepicker('setStartDate', date);
});
$('#table').on('mouseenter', 'img', function (e) {
console.log($(this), e.clientX);
var src = $(this).attr('src');
$('#imgMask img').attr('src', src);
$('#imgMask').show();
$('#imgMask').css({
top: e.clientY + 20,
left: e.clientX + 20
})
})
$('#table').on('mouseleave', 'img', function (e) {
console.log('移出');
$('#imgMask').hide();
})
function cleanModal() {
$('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
$(this).val('');
})
$('#actForm').find('img').attr('src', '');
}
function initTable() {
$('#table').bootstrapTable({
columns: [
/*{field: 'tmp1', title: 'id', align: 'center', checkbox: true, width: '5%'},*/
{ field: 'actName', title: '活动名称', align: 'center', valign: 'middle', width: '10%' },
{ field: 'gameId', title: '游戏ID', align: 'center', valign: 'middle', width: '10%' },
{
field: 'status',
title: '状态',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
console.log(val);
switch (val) {
case 0:
return '无效';
case 1:
return '有效';
}
}
},
/* {field: 'scriptContent', title: '脚本内容', align: 'center', valign: 'middle', width: '10%'},*/
{ field: 'functionName', title: '调用的函数', align: 'center', valign: 'middle', width: '10%' },
/*{
field: 'rankType',
title: '榜单类型',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
console.log(val);
switch (val) {
case 'total':
return '总量';
break;
case 'peak':
return '峰值';
break;
case 'incr':
return '增量';
break;
}
}
},*/
{ field: 'cycleType', title: '统计类型', align: 'center', valign: 'middle', width: '10%' },
{
field: 'winType',
title: '胜利类型',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
console.log(val);
switch (val) {
case 1:
return '连胜';
case 2:
return '累计获胜';
case 3:
return '连胜和累积获胜';
}
}
},
{ field: 'expireTime', title: '榜单的过期时间', align: 'center', valign: 'middle', width: '10%' },
{
field: 'rankShow',
title: '榜单入口是否展示',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
console.log(val);
switch (val) {
case 0:
return '否';
case 1:
return '是';
}
}
},
{
field: 'showType',
title: '展示类型',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
console.log(val);
switch (val) {
case "1":
return '连胜';
case "2":
return '累计获胜';
case "3":
return '连胜和累积获胜';
case "4":
return '闯关数或者分数';
case "5":
return '所有类型';
}
}
},
{
field: 'startTime',
title: '活动开始时间',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var date = new Date(val);
return date.format("yyyy-MM-dd hh:mm:ss");
} else {
return '-';
}
}
},
{
field: 'endTime',
title: '活动结束时间',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var date = new Date(val);
return date.format("yyyy-MM-dd hh:mm:ss");
} else {
return '-';
}
}
},
{
field: 'createTime',
title: '创建时间',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var date = new Date(val);
return date.format("yyyy-MM-dd hh:mm:ss");
} else {
return '-';
}
}
},
{
field: 'tmp',
title: '操作',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
var id = row.id;
return '<button class="btn btn-sm btn-success opt-edit" data-id="' + id + '">' +
'编辑</button>' + "&nbsp;&nbsp;&nbsp;" +
"<button class='btn btn-sm btn-danger opt-del' data-id=" + id + ">删除</button>";
}
}
],
cache: false,
striped: true,
showRefresh: false,
pageSize: 20,
pagination: true,
pageList: [10, 20, 30, 50],
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageSize: params.pageSize,
pageNumber: params.pageNumber,
actName: $("#actName").val(),
gameId: $("#gameId").val()
};
// console.log(param);
return param;
},
uniqueId: 'id',
toolbar: '#toolbar',
url: '/admin/gameActivityRank/list',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
})
}
})
}
},
};
</script>
<style scoped>
#imgMask {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 600px;
padding: 4px;
background: #fff;
z-index: 999;
display: none;
}
#imgMask img {
width: 100%;
height: 100%;
vertical-align: top;
}
</style>