138 lines
4.9 KiB
HTML
138 lines
4.9 KiB
HTML
<style>
|
||
body {
|
||
background-color: #f5f5f5;
|
||
}
|
||
.layui-container {
|
||
width: 100% !important;
|
||
padding: 20px;
|
||
background-color: #ffffff;
|
||
}
|
||
h2 {
|
||
color: #333;
|
||
font-size: 24px;
|
||
}
|
||
.layui-table {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
}
|
||
.layui-table tbody tr:nth-child(odd) {
|
||
background-color: #f9f9f9;
|
||
}
|
||
.layui-table tbody tr:nth-child(even) {
|
||
background-color: #eaf6f6;
|
||
}
|
||
.stats-container {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
}
|
||
.stats-container p {
|
||
margin: 0 20px;
|
||
font-size: 14px;
|
||
}
|
||
.stats-container span {
|
||
color: #2de5cf;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="layui-container">
|
||
<h2>订单列表</h2>
|
||
|
||
<table id="orderTable" lay-filter="orderTable"></table>
|
||
|
||
<div class="stats-container">
|
||
<p>总订单数量: <span id="totalCount">0</span></p>
|
||
<p>支付宝订单数量: <span id="alipayCount">0</span>--¥：<span id="alipaySum"></span>人民币</p>
|
||
<p>贝宝订单数量: <span id="paypalCount">0</span>--$：<span id="paypalSum"></span>美金</p>
|
||
<p>待处理订单: <span id="pendingCount">0</span></p>
|
||
<p>已完成订单: <span id="completedCount">0</span></p>
|
||
<p>已取消订单: <span id="canceledCount">0</span></p>
|
||
<p>失败订单: <span id="failedCount">0</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
layui.use(['jquery', 'table', 'layer'], function() {
|
||
const $ = layui.jquery;
|
||
const table = layui.table;
|
||
const layer = layui.layer;
|
||
|
||
// 加载订单列表
|
||
function loadOrderList() {
|
||
table.render({
|
||
elem: '#orderTable',
|
||
url: '/custom_admin/home/order-list/',
|
||
method: 'post',
|
||
page: true, // 开启分页
|
||
limit: 10, // 每页显示的数量
|
||
cols: [[
|
||
{field: 'order_id', title: '订单号', width: '20%'},
|
||
{field: 'username', title: '用户名', width: '15%'},
|
||
{field: 'plan__title', title: '购买套餐', width: '10%'},
|
||
{field: 'amount', title: '金额', width: '10%', templet: function(d) {
|
||
// 根据支付方式设置金额前面的符号
|
||
return d.payment_method === '支付宝' ? `¥${d.amount}` : `$${d.amount}`;
|
||
}},
|
||
{field: 'payment_method', title: '支付方式', width: '10%'},
|
||
{field: 'status', title: '订单状态', width: '10%'},
|
||
{field: 'created_at', title: '创建时间', width: '15%'},
|
||
{title: '操作', width: '10%', toolbar: '#actionToolbar'}
|
||
]],
|
||
done: function(res) {
|
||
$('#totalCount').text(res.count); // 更新总订单数
|
||
res.payment_method_count.forEach(item => {
|
||
if (item.payment_method === 'alipay') {
|
||
$('#alipayCount').text(item.count);
|
||
} else if (item.payment_method === 'paypal') {
|
||
$('#paypalCount').text(item.count);
|
||
}
|
||
|
||
});
|
||
|
||
$('#alipaySum').text(res.total_income_by_payment_method[0].total_income);
|
||
$('#paypalSum').text(res.total_income_by_payment_method[1].total_income);
|
||
$('#pendingCount').text(res.status_count.pending);
|
||
$('#completedCount').text(res.status_count.completed);
|
||
$('#canceledCount').text(res.status_count.canceled);
|
||
$('#failedCount').text(res.status_count.failed);
|
||
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
// 删除订单功能
|
||
table.on('tool(orderTable)', function(obj) {
|
||
const data = obj.data;
|
||
const layEvent = obj.event;
|
||
|
||
if (layEvent === 'delete') {
|
||
deleteOrder(data.id);
|
||
}
|
||
});
|
||
|
||
function deleteOrder(id) {
|
||
layer.confirm('确定删除该订单吗？', function(index) {
|
||
$.post(`/api/delete-order/${id}/`, function(res) {
|
||
if (res.code === 200) {
|
||
layer.msg('删除成功');
|
||
loadOrderList();
|
||
} else {
|
||
layer.msg('删除失败: ' + res.message);
|
||
}
|
||
});
|
||
layer.close(index);
|
||
});
|
||
}
|
||
|
||
loadOrderList();
|
||
});
|
||
</script>
|
||
|
||
<script type="text/html" id="actionToolbar">
|
||
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
|
||
</script>
|
||
|