117 lines
5.7 KiB
HTML
117 lines
5.7 KiB
HTML
<body>
|
||
|
||
|
||
<div class="layui-row">
|
||
<div class="layui-col-md4">
|
||
<button class="layui-btn layui-btn-danger layui-btn-sm" id="batchDeleteTransaction">批量删除</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table id="transactionLogTable" lay-filter="transactionLogTable"></table>
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
|
||
</script>
|
||
|
||
<script>
|
||
layui.use(['table', 'layer'], function(){
|
||
var table = layui.table;
|
||
var layer = layui.layer;
|
||
|
||
// 渲染表格
|
||
table.render({
|
||
elem: '#transactionLogTable',
|
||
url: '/admin/transaction-logs/', // 数据接口URL
|
||
page: true, // 开启分页
|
||
limit: 10, // 每页显示的条数
|
||
method: 'post', // 使用POST请求
|
||
where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
|
||
action: 'fetch', // 指定操作类型
|
||
},
|
||
contentType: 'application/json', // 设置发送请求的内容类型为JSON
|
||
cols: [[
|
||
|
||
{type: 'checkbox', fixed: 'left'},
|
||
{field: 'transaction_no', title: '交易编号', sort: true},
|
||
{field: 'transaction_status', title: '交易状态', templet: function(d){
|
||
return d.transaction_status === 'pending' ? '待处理' : (d.transaction_status === 'completed' ? '完成' : '失败');
|
||
}},
|
||
{field: 'user_openid', title: '用户OpenID'},
|
||
{field: 'transaction_type', title: '交易类型',templet: function(d){
|
||
return d.transaction_type === 'member' ? '开通会员' : '续费会员'
|
||
}},
|
||
{field: 'transaction_amount', title: '交易金额'},
|
||
{field: 'remark', title: '备注', templet: function(d){
|
||
var remarkMap = {
|
||
'day': '一天会员充值',
|
||
'week': '一周会员充值',
|
||
'month': '一月会员充值',
|
||
'season': '三月会员充值',
|
||
'year': '一年会员充值'
|
||
};
|
||
return remarkMap[d.remark] || '未知';
|
||
}},
|
||
|
||
{field: 'created_at', title: '创建时间', templet: function(d){
|
||
return layui.util.toDateString(d.created_at, 'yyyy-MM-dd HH:mm:ss');
|
||
}},
|
||
{field: 'updated_at', title: '更新时间', templet: function(d){
|
||
return layui.util.toDateString(d.updated_at, 'yyyy-MM-dd HH:mm:ss');
|
||
}},
|
||
{title: '操作', toolbar: '#barDemo'}
|
||
]]
|
||
});
|
||
|
||
// 监听工具条
|
||
table.on('tool(transactionLogTable)', function(obj){
|
||
var data = obj.data; // 获得当前行数据
|
||
if(obj.event === 'delete'){
|
||
// 删除操作
|
||
layer.confirm('真的删除行么', function(index){
|
||
axios.post('/admin/transaction-logs/', 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('transactionLogTable'); // 重新加载表格
|
||
} else {
|
||
layer.msg('删除失败', {icon: 2});
|
||
}
|
||
}).catch(function(error){
|
||
layer.msg('删除过程中出错', {icon: 2});
|
||
console.error('删除失败', error);
|
||
});
|
||
layer.close(index); // 关闭确认弹窗
|
||
// 向服务端发送删除指令的代码...
|
||
});
|
||
}
|
||
});
|
||
|
||
// 监听批量删除按钮点击事件
|
||
document.getElementById('batchDeleteTransaction').onclick = function() {
|
||
var checkStatus = table.checkStatus('transactionLogTable');
|
||
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/transaction-logs/', 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('transactionLogTable'); // 重新加载表格
|
||
} else {
|
||
layer.msg('批量删除失败', {icon: 2});
|
||
}
|
||
}).catch(function(error){
|
||
console.error('批量删除失败', error);
|
||
});
|
||
});
|
||
}
|
||
};
|
||
});
|
||
</script>
|