baji/app/admin/view/User/user_box.html
2025-03-20 18:52:46 +00:00

228 lines
9.1 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">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">奖品状态</label>
<div class="layui-input-inline">
<select name="status" lay-filter="status">
<option value="">全部状态</option>
<option value="0">盒柜中</option>
<option value="1">已回收</option>
<option value="2">选择发货</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">奖品名称</label>
<div class="layui-input-inline">
<input type="text" name="goodslist_title" autocomplete="off" class="layui-input"
placeholder="奖品名称">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">盒子名称</label>
<div class="layui-input-inline">
<input type="text" name="good_title" autocomplete="off" class="layui-input"
placeholder="盒子名称">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">获取时间</label>
<div class="layui-input-inline">
<input type="text" id="addtime" name="addtime" autocomplete="off" class="layui-input"
placeholder="获取时间范围">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit lay-filter="boxSearch">
搜索
</button>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="layui-card-body">
<table id="user-box-table" lay-filter="user-box-table"></table>
</div>
</div>
</div>
<!-- 定义复制按钮模板 -->
<script type="text/html" id="copyOrderNumTpl">
<a class="layui-btn layui-btn-xs" lay-event="copyOrderNum">复制订单号</a>
</script>
<!-- 定义发货状态模板 -->
<script type="text/html" id="fhStatusTpl">
{{# if(d.status == 2) { }}
{{# if(d.fh_status == 1) { }}
<span class="layui-badge layui-bg-green">已发货</span>
{{# } else if(d.fh_status == 2) { }}
<span class="layui-badge layui-bg-red">未发货</span>
{{# } else { }}
<span class="layui-badge layui-bg-gray">待处理</span>
{{# } }}
{{# } else { }}
-
{{# } }}
</script>
<!-- 定义发货备注模板 -->
<script type="text/html" id="fhRemarksTpl">
{{# if(d.status == 2 && d.fh_remarks) { }}
<div class="layui-elip" title="{{d.fh_remarks}}">{{d.fh_remarks}}</div>
{{# } else { }}
-
{{# } }}
</script>
{include file="Public:footer"/}
<script>
layui.use(['table', 'form', 'laydate'], function () {
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
// 初始化日期范围选择器
laydate.render({
elem: '#addtime',
type: 'datetime',
range: true
});
// 获取URL参数
var user_id = '{$user_id}';
var nickname = '{$nickname}';
// 设置页面标题
document.title = nickname + ' 的盒柜';
// 初始化盒柜表格
var boxTable = table.render({
elem: '#user-box-table',
url: '{:url("/admin/user_box_list")}',
where: { user_id: user_id },
height: 'full-140',
cols: [[
{ field: 'good_title', title: '盒子名称', width: 140 },
{ field: 'goodslist_title', title: '奖品名称', width: 200 },
{ field: 'shang_title', title: '奖品类型', width: 120 },
{ field: 'goodslist_money', title: '回收价格', width: 100 },
{ field: 'goodslist_price', title: '售价', width: 100 },
{ field: 'order_num', title: '订单编号', width: 240 },
{
field: 'status', title: '状态', width: 100, templet: function (d) {
var statusText = '';
switch (parseInt(d.status)) {
case 0: statusText = '<span class="layui-badge layui-bg-blue">盒柜中</span>'; break;
case 1: statusText = '<span class="layui-badge layui-bg-orange">已回收</span>'; break;
case 2: statusText = '<span class="layui-badge layui-bg-green">选择发货</span>'; break;
default: statusText = '<span class="layui-badge layui-bg-gray">未知</span>';
}
return statusText;
}
},
{ field: 'fh_status', title: '发货状态', width: 80, templet: '#fhStatusTpl' },
{ field: 'fh_remarks', title: '发货备注', width: 120, templet: '#fhRemarksTpl' },
{
field: 'addtime', title: '获得时间', width: 160, templet: function (d) {
return timestampToDatetime(d.addtime);
}
},
{ title: '操作', toolbar: '#copyOrderNumTpl', width: 120 }
]],
page: true,
limit: 50,
text: {
none: '暂无盒柜数据'
}
});
// 监听搜索按钮
form.on('submit(boxSearch)', function (data) {
boxTable.reload({
where: {
user_id: user_id,
status: data.field.status,
goodslist_title: data.field.goodslist_title,
good_title: data.field.good_title,
addtime: data.field.addtime
},
page: { curr: 1 }
});
return false;
});
// 监听表格工具条事件
table.on('tool(user-box-table)', function (obj) {
var data = obj.data;
if (obj.event === 'copyOrderNum') {
copyToClipboard(data.order_num);
}
});
// 复制到剪贴板函数
function copyToClipboard(text) {
// 创建临时文本区域
var textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
try {
// 执行复制命令
document.execCommand('copy');
layer.msg('订单编号复制成功: ' + text, {icon: 1});
} catch (err) {
layer.msg('复制失败,请手动复制', {icon: 2});
}
// 移除临时文本区域
document.body.removeChild(textarea);
}
// 时间戳转日期时间格式
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;
}
});
</script>
<style>
.layui-form-label {
width: 90px;
}
.layui-table thead th {
background-color: #f8f8f8;
font-weight: bold;
}
.layui-table-page {
text-align: center;
}
/* 添加发货备注的样式 */
.layui-elip {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</body>
</html>