manghe/app/admin/view/User/user_order.html
2025-03-21 18:43:39 +08:00

185 lines
7.3 KiB
HTML

{include file="Public:header2"/}
<body>
<div class="layui-fluid">
<div class="layui-card">
<!-- 搜索表单 -->
<div class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">订单状态</label>
<div class="layui-input-inline">
<select name="status">
<option value="">全部</option>
<option value="0">未支付</option>
<option value="1">已支付</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">盒子标题</label>
<div class="layui-input-inline">
<input type="text" name="goods_title" placeholder="请输入盒子标题" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">支付时间</label>
<div class="layui-input-inline">
<input type="text" id="pay_time" name="pay_time" class="layui-input" placeholder="支付时间范围">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-useradmin" data-type="search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 搜索
</button>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="layui-card-body">
<table id="user-order-table" lay-filter="user-order-table"></table>
</div>
</div>
</div>
<!-- 订单状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 0) { }}
<span class="layui-badge layui-bg-gray">未支付</span>
{{# } else if(d.status == 1) { }}
<span class="layui-badge layui-bg-green">已支付</span>
{{# } else { }}
<span class="layui-badge layui-bg-black">未知状态</span>
{{# } }}
</script>
<!-- 时间格式化模板 -->
<script type="text/html" id="timeTpl">
{{# if(d.addtime) { }}
{{ timestampToDatetime(d.addtime) }}
{{# } else { }}
-
{{# } }}
</script>
<script type="text/html" id="payTimeTpl">
{{# if(d.pay_time) { }}
{{ timestampToDatetime(d.pay_time) }}
{{# } else { }}
-
{{# } }}
</script>
{include file="Public:footer"/}
<script>
// 时间戳转日期时间格式
function timestampToDatetime(timestamp) {
var date = new Date(timestamp * 1000);
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
layui.use(['table', 'form', 'laydate'], function () {
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
var userId = '{$user_id}'; // 从控制器传过来的用户ID
var nickname = '{$nickname}'; // 从控制器传过来的用户昵称
// 渲染日期时间范围选择器
laydate.render({
elem: '#pay_time',
type: 'datetime',
range: true
});
// 表格实例
table.render({
elem: '#user-order-table',
url: '{:url("/admin/user_order_list")}?user_id=' + userId,
cellMinWidth: 80,
height: 'full-' + Math.floor($('#searchForm').height() + 100),
cols: [[
{ field: 'id', title: 'ID', width: 80, sort: true, hide: false },
{ field: 'order_num', title: '订单编号', width: 240 },
{ field: 'goods_title', title: '盒子标题', width: 200 },
{ field: 'num', title: '箱数', width: 80 },
{ field: 'goods_price', title: '单价', width: 100 },
{ field: 'order_total', title: '订单金额', width: 100 },
{ field: 'order_zhe_total', title: '实际支付金额', width: 120 },
{ field: 'price', title: '微信支付', width: 100 },
{ field: 'use_money', title: '余额支付', width: 100 },
{ field: 'use_integral', title: '货币支付', width: 100 },
{ field: 'use_score', title: '积分支付', width: 100 },
{ field: 'status', title: '订单状态', width: 100, templet: '#statusTpl' },
{ field: 'addtime', title: '发起时间', width: 160, templet: '#timeTpl', sort: true },
{ field: 'pay_time', title: '支付时间', width: 160, templet: '#payTimeTpl', sort: true }
]],
page: true,
limit: 20,
text: {
none: '该用户暂无订单记录'
}
});
// 搜索和重置表单
var active = {
search: function () {
var status = $('select[name="status"]').val();
var goods_title = $('input[name="goods_title"]').val();
var pay_time = $('input[name="pay_time"]').val();
table.reload('user-order-table', {
where: {
status: status,
goods_title: goods_title,
pay_time: pay_time
},
page: {
curr: 1
}
});
},
reset: function () {
$('#searchForm')[0].reset();
form.render('select');
table.reload('user-order-table', {
where: {
status: '',
goods_title: '',
pay_time: ''
},
page: {
curr: 1
}
});
}
};
$('.layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
<style>
.layui-form-label {
width: 80px;
}
.layui-input-inline {
width: 180px;
}
</style>
</body>
</html>