191 lines
8.6 KiB
HTML
191 lines
8.6 KiB
HTML
|
|
|||
|
|
|
|||
|
|
<div class="layui-row">
|
|||
|
|
<div class="layui-col-md4">
|
|||
|
|
<button class="layui-btn layui-btn-sm" id="addRedemptionCard">增加</button>
|
|||
|
|
<button class="layui-btn layui-btn-danger layui-btn-sm" id="batchDeleteRedemptionCard">批量删除</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table id="redemptionCardTable" lay-filter="redemptionCardTable">
|
|||
|
|
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<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',['form']], function(){
|
|||
|
|
var table = layui.table;
|
|||
|
|
var layer = layui.layer;
|
|||
|
|
var form = layui.form;
|
|||
|
|
// 渲染表格
|
|||
|
|
table.render({
|
|||
|
|
elem: '#redemptionCardTable',
|
|||
|
|
url: '/admin/redemption-cards/', // 数据接口URL
|
|||
|
|
page: true, // 开启分页
|
|||
|
|
limit: 10, // 每页显示的条数
|
|||
|
|
method: 'post', // 使用POST请求
|
|||
|
|
where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
|
|||
|
|
action: 'fetch', // 指定操作类型
|
|||
|
|
},
|
|||
|
|
contentType: 'application/json', // 设置发送请求的内容类型为JSON
|
|||
|
|
cols: [[
|
|||
|
|
{type: 'checkbox', fixed: 'left'},
|
|||
|
|
{field: 'code', title: '卡密', sort: true},
|
|||
|
|
{field: 'card_type', title: '卡类型', templet: function(d){
|
|||
|
|
return d.card_type === 'member' ? '会员卡' : '额度卡';
|
|||
|
|
}},
|
|||
|
|
{field: 'created_date', title: '生成日期', sort: true, templet: function(d){
|
|||
|
|
return layui.util.toDateString(d.created_date, 'yyyy-MM-dd HH:mm:ss');
|
|||
|
|
}},
|
|||
|
|
{field: 'expiry_date', title: '到期时间', sort: true, templet: function(d){
|
|||
|
|
return layui.util.toDateString(d.expiry_date, 'yyyy-MM-dd HH:mm:ss');
|
|||
|
|
}},
|
|||
|
|
{field: 'is_used', title: '是否已使用', templet: function(d) { return d.is_used ? '是' : '否'; }},
|
|||
|
|
|
|||
|
|
{field: 'validity_period', title: '额度'},
|
|||
|
|
{field: 'used_by_openid', title: '使用者OpenID'},
|
|||
|
|
{title: '操作', toolbar: '#barDemo'}
|
|||
|
|
]]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听工具条
|
|||
|
|
// 监听工具条
|
|||
|
|
table.on('tool(redemptionCardTable)', function(obj){
|
|||
|
|
var data = obj.data; // 获得当前行数据
|
|||
|
|
if(obj.event === 'edit'){
|
|||
|
|
// 编辑操作
|
|||
|
|
console.log('编辑卡密', data);
|
|||
|
|
// 打开编辑窗口的代码...
|
|||
|
|
} else if(obj.event === 'delete'){
|
|||
|
|
// 删除操作
|
|||
|
|
layer.confirm('真的删除行么', function(index){
|
|||
|
|
axios.post('/admin/redemption-cards/', JSON.stringify({action: 'delete', id: data.id}), {
|
|||
|
|
headers: {'Content-Type': 'application/json'}
|
|||
|
|
}).then(function(response){
|
|||
|
|
if(response.data.status === 'success'){
|
|||
|
|
layer.msg('删除成功', {icon: 1});
|
|||
|
|
layui.table.reload('redemptionCardTable'); // 重新加载表格
|
|||
|
|
} else {
|
|||
|
|
layer.msg('删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
}).catch(function(error){
|
|||
|
|
layer.msg('删除过程中出错', {icon: 2});
|
|||
|
|
console.error('删除失败', error);
|
|||
|
|
});
|
|||
|
|
layer.close(index); // 关闭确认弹窗
|
|||
|
|
// 向服务端发送删除指令的代码...
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听添加卡密按钮点击事件
|
|||
|
|
document.getElementById('addRedemptionCard').onclick = function() {
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '添加卡密管理',
|
|||
|
|
area: ['500px', '400px'],
|
|||
|
|
content: '<form class="layui-form" lay-filter="addRedemptionCardForm">' +
|
|||
|
|
'<div class="layui-form-item">' +
|
|||
|
|
'<label class="layui-form-label">卡密前缀</label>' +
|
|||
|
|
'<div class="layui-input-inline">' +
|
|||
|
|
'<input style="display: none" type="text" name="action" value="add">' +
|
|||
|
|
'<input type="text" name="code_prefix" 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-inline">' +
|
|||
|
|
'<select name="card_type" lay-verify="required">' +
|
|||
|
|
'<option value="">请选择卡类型</option>' +
|
|||
|
|
'<option value="member">会员卡</option>' +
|
|||
|
|
'<option value="quota">额度卡</option>' +
|
|||
|
|
'</select>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<div class="layui-form-item">' +
|
|||
|
|
'<label class="layui-form-label">数量</label>' +
|
|||
|
|
'<div class="layui-input-inline">' +
|
|||
|
|
'<input type="number" name="quantity" 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-inline">' +
|
|||
|
|
'<input type="date" name="expiry_date" 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-inline">' +
|
|||
|
|
'<input type="text" name="validity_period" lay-verify="required" placeholder="额度" autocomplete="off" class="layui-input">' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<div class="layui-form-item">' +
|
|||
|
|
'<div class="layui-input-block">' +
|
|||
|
|
'<button class="layui-btn" lay-submit lay-filter="addRedemptionCard">添加</button>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</form>',
|
|||
|
|
success: function(layero, index) {
|
|||
|
|
form.render();
|
|||
|
|
layui.form.on('submit(addRedemptionCard)', function(data){
|
|||
|
|
axios.post('/admin/redemption-cards/', JSON.stringify(data.field), {
|
|||
|
|
headers: {'Content-Type': 'application/json'}
|
|||
|
|
}).then(function(response){
|
|||
|
|
if(response.data.status === 'success'){
|
|||
|
|
layer.msg('操作成功', {icon: 1, time: 1000}, function(){
|
|||
|
|
layer.close(index); // 关闭弹窗
|
|||
|
|
layui.table.reload('redemptionCardTable'); // 重新加载表格
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 操作失败
|
|||
|
|
layer.msg(response.data.message, {icon: 2});
|
|||
|
|
layer.close(index); // 关闭弹窗
|
|||
|
|
}
|
|||
|
|
}).catch(function(error){
|
|||
|
|
layer.msg('服务器出错了', {icon: 2});
|
|||
|
|
console.error('操作失败', error);
|
|||
|
|
});
|
|||
|
|
return false; // 阻止表单跳转。
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听批量删除按钮点击事件
|
|||
|
|
document.getElementById('batchDeleteRedemptionCard').onclick = function() {
|
|||
|
|
var checkStatus = table.checkStatus('redemptionCardTable');
|
|||
|
|
var selectedData = checkStatus.data;
|
|||
|
|
var ids = selectedData.map(function(item) {
|
|||
|
|
return item.id;
|
|||
|
|
});
|
|||
|
|
if (selectedData.length === 0) {
|
|||
|
|
layer.msg('请选择要删除的卡密', {icon: 5});
|
|||
|
|
} else {
|
|||
|
|
layer.confirm('确认删除选中的卡密吗？', function(index){
|
|||
|
|
// 发送批量删除请求...
|
|||
|
|
axios.post('/admin/redemption-cards/', JSON.stringify({ids: ids,action:'batch_delete'}), {
|
|||
|
|
headers: {'Content-Type': 'application/json'}
|
|||
|
|
}).then(function(response){
|
|||
|
|
if(response.data.status === 'success'){
|
|||
|
|
layer.msg('批量删除成功', {icon: 1});
|
|||
|
|
layui.table.reload('redemptionCardTable'); // 重新加载表格
|
|||
|
|
} else {
|
|||
|
|
layer.msg('批量删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
}).catch(function(error){
|
|||
|
|
console.error('批量删除失败', error);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
</script>
|