575 lines
24 KiB
HTML
575 lines
24 KiB
HTML
|
|
<title>月卡配置</title>
|
|
|
|
<div class="layui-card layadmin-header">
|
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
|
<a lay-href="">主页</a>
|
|
<a><cite>游戏管理</cite></a>
|
|
<a><cite>月卡配置</cite></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-fluid">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<table id="table-monthcard" lay-filter="table-monthcard"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/html" id="toolbar-monthcard">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-filter="init-monthcard"><i class="layui-icon layui-icon-refresh"></i> 初始化配置</button>
|
|
<button class="layui-btn layui-btn-sm" lay-filter="save-monthcard"><i class="layui-icon layui-icon-ok"></i> 保存配置</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-filter="reload-monthcard"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
|
|
<button class="layui-btn layui-btn-sm" lay-filter="add-monthcard">添加月卡</button>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/html" id="monthcard-bar">
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
<a class="layui-btn layui-btn-xs" lay-event="gift">礼包</a>
|
|
<a class="layui-btn layui-btn-xs" lay-event="daily">每日</a>
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
</script>
|
|
|
|
<script type="text/html" id="gift-dialog-tpl">
|
|
<div class="gift-container">
|
|
<div class="gift-left">
|
|
<div class="gift-toolbar">
|
|
<button class="layui-btn layui-btn-sm" id="btn-add-gift"><i class="layui-icon layui-icon-add-1"></i> 新增</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" id="btn-delete-gift"><i class="layui-icon layui-icon-delete"></i> 删除</button>
|
|
</div>
|
|
<div class="gift-table-wrap">
|
|
<table id="table-gift-list"></table>
|
|
</div>
|
|
</div>
|
|
<div class="gift-right">
|
|
<h4>礼包项详情</h4>
|
|
<div class="layui-form" id="gift-form">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">类型</label>
|
|
<div class="layui-input-block">
|
|
<select name="giftType" id="giftType" lay-filter="giftType">
|
|
<option value="1">金币</option>
|
|
<option value="2">钻石</option>
|
|
<option value="3">道具</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">数量</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="giftCount" id="giftCount" class="layui-input" placeholder="请输入数量">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">随机</label>
|
|
<div class="layui-input-block">
|
|
<input type="checkbox" name="giftIsRandom" lay-skin="switch" lay-text="是|否" id="giftIsRandom">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">最小值</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="giftMinCount" id="giftMinCount" class="layui-input" placeholder="最小值">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">最大值</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="giftMaxCount" id="giftMaxCount" class="layui-input" placeholder="最大值">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item gift-prop-select" style="display:none;">
|
|
<label class="layui-form-label">道具</label>
|
|
<div class="layui-input-block">
|
|
<select name="giftProductNumber" id="giftProductNumber" lay-search>
|
|
<option value="">请选择道具</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" style="margin-top:20px;">
|
|
<button class="layui-btn layui-btn-normal" id="btn-save-gift" style="width:100%;">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
layui.use(['admin', 'table', 'form', 'layer'], function () {
|
|
var $ = layui.$,
|
|
admin = layui.admin,
|
|
table = layui.table,
|
|
form = layui.form,
|
|
layer = layui.layer,
|
|
setter = layui.setter;
|
|
|
|
var gameConfig = null;
|
|
var currentMcIndex = -1;
|
|
var currentGiftIndex = -1;
|
|
var currentGiftType = 'gift';
|
|
var propList = [];
|
|
var currentDialogData = null;
|
|
|
|
setTimeout(function() {
|
|
if (window.parent && window.parent.$ && window.parent.layer) {
|
|
window.parent.$('.layui-layer-shade').remove();
|
|
window.parent.layer.closeAll();
|
|
}
|
|
$('.layui-layer-shade').remove();
|
|
layer.closeAll();
|
|
}, 100);
|
|
|
|
function loadConfig() {
|
|
admin.req({
|
|
method: "get",
|
|
url: setter.baseurl + "adminapi/GameConfig",
|
|
done: function (res) {
|
|
if (res.code === 0 && res.data) {
|
|
gameConfig = res.data;
|
|
propList = (gameConfig.propConfig || []).map(function(p) {
|
|
return { number: p.number, name: p.name, type: p.type };
|
|
});
|
|
renderTable();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderTable() {
|
|
table.render({
|
|
elem: '#table-monthcard',
|
|
data: gameConfig ? (gameConfig.monthCardConfigs || []) : [],
|
|
cols: [[
|
|
{ type: 'numbers', title: '序号', width: 60 },
|
|
{ field: "type", title: "类型", width: 80, templet: function(d) {
|
|
var map = {1: '周卡', 2: '月卡', 3: '年卡'};
|
|
return map[d.type] || '月卡';
|
|
}},
|
|
{ field: "name", title: "名称", width: 120 },
|
|
{ field: "remark", title: "备注", minWidth: 150 },
|
|
{ field: "signInAdd", title: "签到加成", width: 100 },
|
|
{ field: "gold", title: "金币", width: 100 },
|
|
{ field: "money", title: "现金价格", width: 100 },
|
|
{ field: "giftList", title: "礼包", width: 80, templet: function(d) {
|
|
return (d.giftList && d.giftList.length) ? d.giftList.length + '项' : '无';
|
|
}},
|
|
{ field: "dailyGift", title: "每日", width: 80, templet: function(d) {
|
|
return (d.dailyGift && d.dailyGift.length) ? d.dailyGift.length + '项' : '无';
|
|
}},
|
|
{ title: "操作", width: 250, fixed: 'right', toolbar: '#monthcard-bar' }
|
|
]],
|
|
toolbar: '#toolbar-monthcard',
|
|
defaultToolbar: ['filter', 'exports', 'print']
|
|
});
|
|
}
|
|
|
|
function initConfig() {
|
|
layer.confirm('确定要初始化全部配置数据吗？此操作将清空现有数据！', function(idx) {
|
|
layer.close(idx);
|
|
admin.req({
|
|
method: "get",
|
|
url: setter.baseurl + "adminapi/GameConfig/init-game",
|
|
done: function (res) {
|
|
if (res.code === 0 || res.code === 200) {
|
|
layer.msg('初始化成功');
|
|
loadConfig();
|
|
} else {
|
|
layer.msg(res.info || '初始化失败');
|
|
}
|
|
},
|
|
fail: function(res) {
|
|
layer.msg(res.info || '初始化失败');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '[lay-filter="init-monthcard"]', function() {
|
|
if (window.parent && window.parent.$ && window.parent.layer) {
|
|
window.parent.$('.layui-layer-shade').remove();
|
|
window.parent.layer.closeAll();
|
|
}
|
|
initConfig();
|
|
});
|
|
|
|
$(document).on('click', '[lay-filter="reload-monthcard"]', function() {
|
|
loadConfig();
|
|
layer.msg('刷新成功');
|
|
});
|
|
|
|
$(document).on('click', '[lay-filter="save-monthcard"]', function() {
|
|
if (window.parent && window.parent.$ && window.parent.layer) {
|
|
window.parent.$('.layui-layer-shade').remove();
|
|
window.parent.layer.closeAll();
|
|
}
|
|
admin.req({
|
|
method: "post",
|
|
contentType: "application/json;charset=UTF-8",
|
|
url: setter.baseurl + "adminapi/GameConfig/Update",
|
|
data: JSON.stringify(gameConfig),
|
|
done: function (res) {
|
|
if (res.code === 0 || res.code === 200) {
|
|
layer.msg('保存成功');
|
|
loadConfig();
|
|
} else {
|
|
layer.msg(res.info || '保存失败');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
table.on('tool(table-monthcard)', function(obj) {
|
|
var data = obj.data;
|
|
var trIndex = obj.tr.index();
|
|
if (trIndex < 0) trIndex = gameConfig.monthCardConfigs.findIndex(function(x) { return x.cardId === data.cardId; });
|
|
|
|
if (obj.event === 'del') {
|
|
layer.confirm('确定删除该配置吗？', function(idx) {
|
|
if (trIndex > -1) gameConfig.monthCardConfigs.splice(trIndex, 1);
|
|
obj.del();
|
|
layer.close(idx);
|
|
});
|
|
} else if (obj.event === 'edit') {
|
|
showEditDialog(data, false, trIndex);
|
|
} else if (obj.event === 'gift') {
|
|
currentMcIndex = trIndex;
|
|
currentGiftType = 'gift';
|
|
showGiftDialog(data, '月卡礼包');
|
|
} else if (obj.event === 'daily') {
|
|
currentMcIndex = trIndex;
|
|
currentGiftType = 'daily';
|
|
showGiftDialog(data, '月卡每日');
|
|
}
|
|
});
|
|
|
|
function showAddDialog() {
|
|
if (!gameConfig.monthCardConfigs) gameConfig.monthCardConfigs = [];
|
|
var newData = {
|
|
type: 2,
|
|
name: '',
|
|
remark: '',
|
|
signInAdd: 0,
|
|
gold: 0,
|
|
money: 0,
|
|
giftList: [],
|
|
dailyGift: []
|
|
};
|
|
showEditDialog(newData, true);
|
|
}
|
|
|
|
$(document).on('click', '[lay-filter="add-monthcard"]', function() {
|
|
showAddDialog();
|
|
});
|
|
|
|
function showEditDialog(data, isAdd, rowIndex) {
|
|
var dialogTitle = isAdd ? '添加月卡' : '编辑月卡';
|
|
var html = '<div style="padding:20px;">' +
|
|
'<form class="layui-form">' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">类型</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<select name="type">' +
|
|
'<option value="1"' + (data.type === 1 ? ' selected' : '') + '>周卡</option>' +
|
|
'<option value="2"' + (data.type === 2 ? ' selected' : '') + '>月卡</option>' +
|
|
'<option value="3"' + (data.type === 3 ? ' selected' : '') + '>年卡</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">名称</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<input type="text" name="name" value="' + (data.name || '') + '" class="layui-input">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">备注</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<input type="text" name="remark" value="' + (data.remark || '') + '" class="layui-input">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">签到加成</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<input type="number" name="signInAdd" value="' + (data.signInAdd || 0) + '" class="layui-input">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">金币</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<input type="number" name="gold" value="' + (data.gold || 0) + '" class="layui-input">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="layui-form-item">' +
|
|
'<label class="layui-form-label">现金价格</label>' +
|
|
'<div class="layui-input-block">' +
|
|
'<input type="number" name="money" value="' + (data.money || 0) + '" class="layui-input">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</form>' +
|
|
'</div>';
|
|
|
|
layer.open({
|
|
type: 1,
|
|
title: dialogTitle,
|
|
area: ['500px', '450px'],
|
|
content: html,
|
|
btn: ['保存', '取消'],
|
|
shadeClose: true,
|
|
success: function(layero) {
|
|
form.render('select');
|
|
},
|
|
yes: function(idx, layero) {
|
|
if (isAdd) {
|
|
var newItem = {
|
|
type: parseInt(layero.find('select[name="type"]').val()),
|
|
name: layero.find('input[name="name"]').val(),
|
|
remark: layero.find('input[name="remark"]').val(),
|
|
signInAdd: parseFloat(layero.find('input[name="signInAdd"]').val()) || 0,
|
|
gold: parseInt(layero.find('input[name="gold"]').val()) || 0,
|
|
money: parseFloat(layero.find('input[name="money"]').val()) || 0,
|
|
giftList: [],
|
|
dailyGift: []
|
|
};
|
|
gameConfig.monthCardConfigs.unshift(newItem);
|
|
} else {
|
|
var original = gameConfig.monthCardConfigs[rowIndex];
|
|
if (!original) {
|
|
original = gameConfig.monthCardConfigs.find(function(x) { return x.cardId === data.cardId; });
|
|
}
|
|
if (!original) { layer.msg('数据异常，请刷新后重试'); return; }
|
|
original.type = parseInt(layero.find('select[name="type"]').val());
|
|
original.name = layero.find('input[name="name"]').val();
|
|
original.remark = layero.find('input[name="remark"]').val();
|
|
original.signInAdd = parseFloat(layero.find('input[name="signInAdd"]').val()) || 0;
|
|
original.gold = parseInt(layero.find('input[name="gold"]').val()) || 0;
|
|
original.money = parseFloat(layero.find('input[name="money"]').val()) || 0;
|
|
}
|
|
layer.close(idx);
|
|
table.reload('table-monthcard', {
|
|
data: gameConfig.monthCardConfigs
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function showGiftDialog(data, title) {
|
|
currentDialogData = data;
|
|
currentGiftIndex = -1;
|
|
|
|
var dialogContent = $('#gift-dialog-tpl').html();
|
|
|
|
layer.open({
|
|
type: 1,
|
|
title: title + ' - ' + data.name,
|
|
area: ['1000px', '620px'],
|
|
content: dialogContent,
|
|
shadeClose: true,
|
|
success: function(layero) {
|
|
var propOptions = '<option value="">请选择道具</option>';
|
|
propList.forEach(function(p) {
|
|
propOptions += '<option value="' + p.number + '">' + p.number + ' - ' + p.name + '</option>';
|
|
});
|
|
layero.find('#giftProductNumber').html(propOptions);
|
|
form.render();
|
|
|
|
renderGiftTable(layero);
|
|
|
|
layero.find('#btn-add-gift').on('click', function() {
|
|
addGiftItem(layero);
|
|
});
|
|
|
|
layero.find('#btn-delete-gift').on('click', function() {
|
|
deleteGiftItem(layero);
|
|
});
|
|
|
|
layero.find('#btn-save-gift').on('click', function() {
|
|
saveGiftItem(layero);
|
|
});
|
|
|
|
form.on('select(giftType)', function(obj) {
|
|
if (obj.value === '3') {
|
|
layero.find('.gift-prop-select').show();
|
|
} else {
|
|
layero.find('.gift-prop-select').hide();
|
|
}
|
|
layero.find('#giftCount').val(0);
|
|
layero.find('#giftIsRandom')[0].checked = false;
|
|
form.render('checkbox');
|
|
});
|
|
|
|
layero.find('#giftCount').on('input', function() {
|
|
layero.find('#giftIsRandom')[0].checked = false;
|
|
layero.find('#giftIsRandom').prop('checked', false);
|
|
form.render('checkbox');
|
|
});
|
|
|
|
layero.on('click', '#giftIsRandom + .layui-form-switch', function() {
|
|
var checkbox = layero.find('#giftIsRandom')[0];
|
|
setTimeout(function() {
|
|
if (checkbox.checked) {
|
|
layero.find('#giftCount').val(0);
|
|
}
|
|
}, 10);
|
|
});
|
|
|
|
form.on('switch(giftIsRandom)', function(data) {
|
|
if (data.elem.checked) {
|
|
layero.find('#giftCount').val(0);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function getGiftList() {
|
|
if (!currentDialogData) return [];
|
|
if (currentGiftType === 'gift') {
|
|
return currentDialogData.giftList || [];
|
|
} else {
|
|
return currentDialogData.dailyGift || [];
|
|
}
|
|
}
|
|
|
|
function addGiftItem(layero) {
|
|
var list = getGiftList();
|
|
list.push({ type: 1, count: 100, isRandom: false, minCount: 0, maxCount: 0, otherId: '' });
|
|
currentGiftIndex = list.length - 1;
|
|
renderGiftTable(layero, currentGiftIndex);
|
|
loadFormData(list[list.length - 1], layero);
|
|
}
|
|
|
|
function deleteGiftItem(layero) {
|
|
if (currentGiftIndex < 0) {
|
|
return layer.msg('请先选择要删除的项');
|
|
}
|
|
var list = getGiftList();
|
|
if (list.length > currentGiftIndex) {
|
|
list.splice(currentGiftIndex, 1);
|
|
currentGiftIndex = -1;
|
|
clearForm(layero);
|
|
renderGiftTable(layero, -1);
|
|
}
|
|
}
|
|
|
|
function saveGiftItem(layero) {
|
|
if (currentGiftIndex < 0) {
|
|
return layer.msg('请先选择要编辑的项');
|
|
}
|
|
var list = getGiftList();
|
|
var giftType = parseInt(layero.find('#giftType').val()) || 1;
|
|
list[currentGiftIndex] = {
|
|
type: giftType,
|
|
count: parseInt(layero.find('#giftCount').val()) || 0,
|
|
isRandom: layero.find('#giftIsRandom')[0].checked,
|
|
minCount: parseInt(layero.find('#giftMinCount').val()) || 0,
|
|
maxCount: parseInt(layero.find('#giftMaxCount').val()) || 0,
|
|
otherId: giftType === 3 ? layero.find('#giftProductNumber').val() : ''
|
|
};
|
|
renderGiftTable(layero, currentGiftIndex);
|
|
layer.msg('保存成功');
|
|
}
|
|
|
|
function clearForm(layero) {
|
|
layero.find('#giftType').val('1');
|
|
layero.find('#giftCount').val('0');
|
|
layero.find('#giftIsRandom')[0].checked = false;
|
|
layero.find('#giftMinCount').val('0');
|
|
layero.find('#giftMaxCount').val('0');
|
|
layero.find('#giftProductNumber').val('');
|
|
layero.find('.gift-prop-select').hide();
|
|
form.render('checkbox');
|
|
form.render('select');
|
|
}
|
|
|
|
function loadFormData(data, layero) {
|
|
layero.find('#giftType').val(data.type || 1);
|
|
layero.find('#giftCount').val(data.count || 0);
|
|
layero.find('#giftIsRandom')[0].checked = data.isRandom || false;
|
|
layero.find('#giftMinCount').val(data.minCount || 0);
|
|
layero.find('#giftMaxCount').val(data.maxCount || 0);
|
|
layero.find('#giftProductNumber').val(data.otherId || '');
|
|
|
|
if (data.type === 3) {
|
|
layero.find('.gift-prop-select').show();
|
|
} else {
|
|
layero.find('.gift-prop-select').hide();
|
|
}
|
|
form.render('checkbox');
|
|
form.render('select');
|
|
}
|
|
|
|
function getPropName(number) {
|
|
var prop = propList.find(function(p) { return p.number === number; });
|
|
return prop ? prop.number + ' - ' + prop.name : number || '';
|
|
}
|
|
|
|
function renderGiftTable(layero, selectIndex) {
|
|
var list = getGiftList();
|
|
|
|
table.render({
|
|
elem: layero.find('#table-gift-list'),
|
|
data: list,
|
|
page: false,
|
|
height: 380,
|
|
cols: [[
|
|
{ type: 'numbers', title: '序号', width: 60 },
|
|
{ field: "type", title: "类型", width: 80, templet: function(d) {
|
|
var map = {1: '金币', 2: '钻石', 3: '道具'};
|
|
return map[d.type] || '金币';
|
|
}},
|
|
{ field: "count", title: "数量", width: 80 },
|
|
{ field: "minCount", title: "最小值", width: 80 },
|
|
{ field: "maxCount", title: "最大值", width: 80 },
|
|
{ field: "isRandom", title: "随机", width: 70, templet: function(d) {
|
|
return d.isRandom ? '是' : '否';
|
|
}},
|
|
{ field: "otherId", title: "道具编号", minWidth: 150, templet: function(d) {
|
|
return d.type === 3 ? getPropName(d.otherId || '') : '';
|
|
}}
|
|
]],
|
|
done: function() {
|
|
if (list.length > 0 && selectIndex < 0) {
|
|
selectIndex = 0;
|
|
}
|
|
if (selectIndex >= 0 && selectIndex < list.length) {
|
|
currentGiftIndex = selectIndex;
|
|
var $tr = layero.find('#table-gift-list + .layui-table-view tr[data-index="' + selectIndex + '"]');
|
|
if ($tr.length) {
|
|
$tr.addClass('layui-table-click');
|
|
loadFormData(list[selectIndex], layero);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
layero.find('#table-gift-list + .layui-table-view').on('click', 'tr[data-index]', function() {
|
|
var index = parseInt($(this).attr('data-index'));
|
|
if (index >= 0 && index < list.length) {
|
|
currentGiftIndex = index;
|
|
layero.find('tr[data-index]').removeClass('layui-table-click');
|
|
$(this).addClass('layui-table-click');
|
|
loadFormData(list[index], layero);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadConfig();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.gift-container { display: flex; height: 480px; padding: 10px; }
|
|
.gift-left { flex: 1; margin-right: 15px; }
|
|
.gift-table-wrap { height: 400px; overflow: auto; }
|
|
.gift-right { width: 280px; border-left: 1px solid #e6e6e6; padding-left: 15px; }
|
|
.gift-right h4 { margin-bottom: 15px; color: #333; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
|
|
.gift-toolbar { margin-bottom: 10px; }
|
|
.gift-toolbar .layui-btn { margin-right: 5px; }
|
|
.gift-right .layui-form-item { margin-bottom: 12px; }
|
|
.gift-right .layui-form-label { padding: 9px 0; width: 60px; }
|
|
.gift-right .layui-input-block { margin-left: 70px; }
|
|
</style>
|