330 lines
15 KiB
HTML
330 lines
15 KiB
HTML
<body>
|
||
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn layui-btn-sm" id="addMembershipType">添加</button>
|
||
</div>
|
||
|
||
<div class="layui-tab layui-tab-brief" lay-filter="membershipTab">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" lay-id="membership">会员充值</li>
|
||
<li lay-id="quota">额度充值</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
<table class="layui-hide" id="membershipTable" lay-filter="membershipTableFilter"></table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table class="layui-hide" id="quotaTable" lay-filter="quotaTableFilter"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/html" id="operationBar">
|
||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
|
||
</script>
|
||
|
||
<script>
|
||
layui.use(['table', 'layer', 'element',['form']], function(){
|
||
var table = layui.table;
|
||
var layer = layui.layer;
|
||
var element = layui.element;
|
||
var form = layui.form;
|
||
// 初始化会员充值表格
|
||
table.render({
|
||
elem: '#membershipTable',
|
||
url: '/admin/membership-types/', // 数据接口URL
|
||
page: true, // 开启分页
|
||
method: 'post', // 使用POST请求
|
||
where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
|
||
action: 'fetch', // 指定操作类型
|
||
is_quota: false // 仅获取会员充值数据
|
||
},
|
||
contentType: 'application/json', // 设置发送请求的内容类型为JSON
|
||
cols: [[
|
||
{field: 'id', title: 'id'},
|
||
{field: 'type', title: '卡类型'},
|
||
{field: 'title', title: '标题'},
|
||
{field: 'description', title: '描述'},
|
||
{field: 'price', title: '价格'},
|
||
{field: 'duration_days', title: '有效天数'},
|
||
{field: 'coins', title: '额度'}, // 修改字段
|
||
{title: '操作', align: 'center', toolbar: '#operationBar'}
|
||
]]
|
||
});
|
||
|
||
// 初始化额度充值表格
|
||
table.render({
|
||
elem: '#quotaTable',
|
||
url: '/admin/membership-types/', // 数据接口URL
|
||
page: true, // 开启分页
|
||
method: 'post', // 使用POST请求
|
||
where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
|
||
action: 'fetch', // 指定操作类型
|
||
is_quota: true // 仅获取额度充值数据
|
||
},
|
||
contentType: 'application/json', // 设置发送请求的内容类型为JSON
|
||
cols: [[
|
||
{field: 'id', title: 'id'},
|
||
{field: 'type', title: '卡类型'},
|
||
{field: 'title', title: '标题'},
|
||
{field: 'description', title: '描述'},
|
||
{field: 'price', title: '价格'},
|
||
{field: 'coins', title: '充值额度'}, // 修改字段
|
||
{title: '操作', align: 'center', toolbar: '#operationBar'}
|
||
]]
|
||
});
|
||
|
||
// 监听工具条
|
||
table.on('tool(membershipTableFilter)', function(obj){
|
||
var data = obj.data; // 获得当前行数据
|
||
if(obj.event === 'edit'){
|
||
// 编辑操作
|
||
console.log('编辑会员卡类型', data);
|
||
|
||
// 打开编辑窗口的代码
|
||
layer.open({
|
||
type: 1,
|
||
zIndex: 999,
|
||
title: '编辑会员卡类型',
|
||
area: ['500px', '600px'],
|
||
content: '<div id="editMembershipTypeForm" style="padding:20px;">'+
|
||
'<form class="layui-form" lay-filter="editMembershipTypeForm">'+
|
||
'<input type="text" name="id" value="'+data.id+'" lay-verify="required" style="display: none" class="layui-input">'+
|
||
'<div class="layui-form-item">'+
|
||
' <label class="layui-form-label">卡类型</label>'+
|
||
' <div class="layui-input-block">'+
|
||
'<input type="text" name="type" value="'+data.type+'" lay-verify="required" placeholder="请输入卡类型" autocomplete="off" 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="title" value="'+data.title+'" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'<div class="layui-form-item">'+
|
||
'<label class="layui-form-label">描述</label>'+
|
||
' <div class="layui-input-block">'+
|
||
' <textarea name="description" lay-verify="required" placeholder="请输入描述" class="layui-textarea">'+data.description+'</textarea>'+
|
||
'</div>'+
|
||
' </div>'+
|
||
' <div class="layui-form-item">'+
|
||
' <label class="layui-form-label">价格</label>'+
|
||
' <div class="layui-input-block">'+
|
||
' <input type="text" name="price" value="'+data.price+'" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" 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="duration_days" value="'+data.duration_days+'" lay-verify="required|number" placeholder="请输入有效天数" autocomplete="off" 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="coins" value="'+data.coins+'" lay-verify="required|number" placeholder="请输入额度" autocomplete="off" class="layui-input">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'<div class="layui-form-item">'+
|
||
' <label class="layui-form-label">会员/额度</label>'+ // 新增字段
|
||
' <div class="layui-input-block">'+
|
||
' <input type="checkbox" name="is_quota" lay-skin="switch" lay-text="是|否" '+(data.is_quota ? 'checked' : '')+'>'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'</form>'+
|
||
'</div>',
|
||
success: function(layero, index){
|
||
// 将当前行数据填充到表单中
|
||
form.render();
|
||
},
|
||
btn: ['保存', '取消'],
|
||
yes: function(index, form){
|
||
axios.post('/admin/membership-types/', {
|
||
action: 'edit',
|
||
id: $('input[name="id"]').val(),
|
||
type: $('input[name="type"]').val(),
|
||
title: $('input[name="title"]').val(),
|
||
description: $('textarea[name="description"]').val(),
|
||
price: $('input[name="price"]').val(),
|
||
duration_days: $('input[name="duration_days"]').val(),
|
||
coins: $('input[name="coins"]').val(), // 修改字段
|
||
is_quota: $('input[name="is_quota"]').prop('checked') // 新增字段
|
||
},{
|
||
headers: {'Content-Type': 'application/json'}
|
||
})
|
||
.then(function(response) {
|
||
// 编辑成功后的操作...
|
||
if(response.data.status === 'success'){
|
||
layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
|
||
layer.close(index); // 关闭弹窗
|
||
table.reload('membershipTable'); // 重载表格
|
||
table.reload('quotaTable'); // 重载表格
|
||
});
|
||
} else {
|
||
layer.msg(response.data.message, function(){
|
||
layer.close(index); // 关闭弹窗
|
||
});
|
||
}
|
||
})
|
||
.catch(function(error) {
|
||
console.error('编辑失败:', error);
|
||
});
|
||
},
|
||
btn2: function(index, layero){
|
||
// 取消操作
|
||
layer.close(index);
|
||
}
|
||
});
|
||
} else if(obj.event === 'delete'){
|
||
// 删除操作
|
||
layer.confirm('真的删除行么', function(index){
|
||
axios.post('/admin/membership-types/', {
|
||
action: 'delete',
|
||
id: data.id
|
||
},{
|
||
headers: {'Content-Type': 'application/json'}
|
||
})
|
||
.then(function(response) {
|
||
if(response.data.status === 'success'){
|
||
layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
|
||
table.reload('membershipTable'); // 重载表格
|
||
table.reload('quotaTable'); // 重载表格
|
||
});
|
||
} else {
|
||
layer.msg(response.data.message, function(){
|
||
table.reload('membershipTable'); // 重载表格
|
||
table.reload('quotaTable'); // 重载表格
|
||
});
|
||
}
|
||
})
|
||
.catch(function(error) {
|
||
console.error('删除失败:', error);
|
||
});
|
||
|
||
layer.close(index);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 监听添加会员卡类型按钮点击事件
|
||
document.getElementById('addMembershipType').onclick = function() {
|
||
// 打开添加会员卡类型窗口的代码...
|
||
layer.open({
|
||
type: 1,
|
||
zIndex: 999,
|
||
title: '添加会员卡类型',
|
||
area: ['500px', '600px'],
|
||
content: '<div id="addMembershipTypeForm" style="padding:20px;">'+
|
||
'<form class="layui-form" lay-filter="addMembershipTypeForm">'+
|
||
'<div class="layui-form-item">'+
|
||
' <label class="layui-form-label">卡类型</label>'+
|
||
' <div class="layui-input-block">'+
|
||
'<input type="text" name="type" lay-verify="required" placeholder="请输入卡类型" autocomplete="off" 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="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'<div class="layui-form-item">'+
|
||
'<label class="layui-form-label">描述</label>'+
|
||
' <div class="layui-input-block">'+
|
||
' <textarea name="description" lay-verify="required" placeholder="请输入描述" class="layui-textarea"></textarea>'+
|
||
'</div>'+
|
||
' </div>'+
|
||
' <div class="layui-form-item">'+
|
||
' <label class="layui-form-label">价格</label>'+
|
||
' <div class="layui-input-block">'+
|
||
' <input type="text" name="price" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" 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="duration_days" lay-verify="required|number" placeholder="请输入有效天数" autocomplete="off" 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="coins" lay-verify="required|number" placeholder="请输入额度" autocomplete="off" class="layui-input">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'<div class="layui-form-item">'+
|
||
' <label class="layui-form-label">会员/额度</label>'+ // 新增字段
|
||
' <div class="layui-input-block">'+
|
||
' <input type="checkbox" name="is_quota" lay-skin="switch" lay-text="是|否">'+
|
||
'</div>'+
|
||
' </div>'+
|
||
'</form>'+
|
||
'</div>',
|
||
success: function(layero, index){
|
||
// 将当前行数据填充到表单中
|
||
form.render();
|
||
},
|
||
btn: ['保存', '取消'],
|
||
yes: function(index, form){
|
||
axios.post('/admin/membership-types/', {
|
||
action: 'add',
|
||
type: $('input[name="type"]').val(),
|
||
title: $('input[name="title"]').val(),
|
||
description: $('textarea[name="description"]').val(),
|
||
price: $('input[name="price"]').val(),
|
||
duration_days: $('input[name="duration_days"]').val(),
|
||
coins: $('input[name="coins"]').val(), // 修改字段
|
||
is_quota: $('input[name="is_quota"]').prop('checked') // 新增字段
|
||
},{
|
||
headers: {'Content-Type': 'application/json'}
|
||
})
|
||
.then(function(response) {
|
||
// 添加成功后的操作...
|
||
if(response.data.status === 'success'){
|
||
layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
|
||
layer.close(index); // 关闭弹窗
|
||
table.reload('membershipTable'); // 重载表格
|
||
table.reload('quotaTable'); // 重载表格
|
||
});
|
||
} else {
|
||
layer.msg(response.data.message, function(){
|
||
layer.close(index); // 关闭弹窗
|
||
});
|
||
}
|
||
})
|
||
.catch(function(error) {
|
||
console.error('添加失败:', error);
|
||
});
|
||
},
|
||
btn2: function(index, layero){
|
||
// 取消操作
|
||
layer.close(index);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 监听选项卡切换
|
||
element.on('tab(membershipTab)', function(data){
|
||
if(data.index === 0){
|
||
table.reload('membershipTable', {
|
||
where: {
|
||
action: 'fetch',
|
||
is_quota: false
|
||
}
|
||
});
|
||
} else if(data.index === 1){
|
||
table.reload('quotaTable', {
|
||
where: {
|
||
action: 'fetch',
|
||
is_quota: true
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|