mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-09-17 09:16:40 +08:00
387 lines
14 KiB
HTML
387 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>订单明细</title>
|
|
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
|
<style>
|
|
.paytype {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 34px;
|
|
}
|
|
|
|
.paytype>span {
|
|
margin-left: 3px;
|
|
line-height: normal;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="pear-container">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<form class="layui-form layui-form-pane" action="" id="serch-form">
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">订单号</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="order_id" 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="out_trade_no" 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="platform_order" 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="name" autocomplete="off" class="layui-input" placeholder="请输入">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">支付状态</label>
|
|
<div class="layui-input-inline">
|
|
<select name="state">
|
|
<option value="">请选择</option>
|
|
<option value="1">支付成功</option>
|
|
<option value="0">等待/过期</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">支付平台</label>
|
|
<div class="layui-input-inline">
|
|
<select name="type">
|
|
<option value="">请选择</option>
|
|
<option value="wxpay">微信支付</option>
|
|
<option value="alipay">支付宝</option>
|
|
<option value="unionpay">云闪付</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">收款平台</label>
|
|
<div class="layui-input-inline">
|
|
<select name="platform">
|
|
<option value="">收款平台</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">创建时间</label>
|
|
<div class="layui-inline" id="create_time">
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="create_time_start" autocomplete="off" placeholder="开始"
|
|
class="layui-input">
|
|
</div>
|
|
<div class="layui-form-mid">-</div>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="create_time_end" autocomplete="off" placeholder="结束"
|
|
class="layui-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" style="text-align:right;">
|
|
<div class="layui-form-item layui-inline">
|
|
<button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit
|
|
lay-filter="order-query">
|
|
<i class="layui-icon layui-icon-search"></i>
|
|
查询
|
|
</button>
|
|
<button type="button" lay-on="reset" class="pear-btn pear-btn-md">
|
|
<i class="layui-icon layui-icon-refresh"></i>
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<table id="orders-table" lay-filter="orders-table"></table>
|
|
</div>
|
|
</div>
|
|
<script type="text/html" id="order-toolbar">
|
|
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
|
<i class="layui-icon layui-icon-delete"></i>
|
|
批量删除
|
|
</button>
|
|
<button class="pear-btn pear-btn-warming pear-btn-md" lay-event="batchTimeout">
|
|
<i class="icon pear-icon pear-icon-history"></i>
|
|
清空过期
|
|
</button>
|
|
</script>
|
|
<script type="text/html" id="platformTpl">
|
|
<div>
|
|
{{#
|
|
let platforms = JSON.parse(sessionStorage.getItem('platforms')) || {};
|
|
let platformName = platforms[d.platform] || '已卸载';
|
|
return `${platformName} [${d.aid}:${d.cid}]`;
|
|
}}
|
|
</div>
|
|
</script>
|
|
<script src="/component/layui/layui.js"></script>
|
|
<script src="/component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(['table', 'form', 'common', 'dropdown', 'laydate', 'util'], function () {
|
|
let table = layui.table;
|
|
let form = layui.form;
|
|
let common = layui.common;
|
|
let dropdown = layui.dropdown;
|
|
let laydate = layui.laydate;
|
|
let util = layui.util;
|
|
// 渲染时间选择器
|
|
laydate.render({
|
|
elem: '#create_time',
|
|
range: ['input[name="create_time_start"]', 'input[name="create_time_end"]'],
|
|
rangeLinked: true,
|
|
type: 'datetime',
|
|
fullPanel: true,
|
|
weekStart: 1,
|
|
shortcuts: [{
|
|
text: "今天",
|
|
value: function () {
|
|
let now = new Date(); let today = new Date(); today.setHours(0, 0, 0, 0);
|
|
return [today, now];
|
|
}
|
|
}, {
|
|
text: "昨天",
|
|
value: function () {
|
|
let yesterday_start = new Date();
|
|
yesterday_start.setDate(yesterday_start.getDate() - 1);
|
|
yesterday_start.setHours(0, 0, 0, 0);
|
|
let yesterday_end = new Date()
|
|
yesterday_end.setDate(yesterday_end.getDate() - 1);
|
|
yesterday_end.setHours(23, 59, 59, 999);
|
|
return [yesterday_start, yesterday_end];
|
|
}
|
|
}, {
|
|
text: "近七天",
|
|
value: function () {
|
|
let today = new Date();
|
|
let endOfDayToday = new Date(today);
|
|
endOfDayToday.setDate(endOfDayToday.getDate() - 1);
|
|
endOfDayToday.setHours(23, 59, 59, 999);
|
|
let startSevenDaysAgo = new Date(today);
|
|
startSevenDaysAgo.setDate(startSevenDaysAgo.getDate() - 7);
|
|
startSevenDaysAgo.setHours(0, 0, 0, 0);
|
|
return [startSevenDaysAgo, endOfDayToday];
|
|
}
|
|
}, {
|
|
text: "本月",
|
|
value: function () {
|
|
let today = new Date();
|
|
let year = today.getFullYear();
|
|
let month = today.getMonth();
|
|
let startOfMonth = new Date(year, month, 1);
|
|
startOfMonth.setHours(0, 0, 0, 0);
|
|
return [startOfMonth, today];
|
|
}
|
|
}, {
|
|
text: "上个月",
|
|
value: function () {
|
|
let today = new Date();
|
|
let year = today.getFullYear();
|
|
let month = today.getMonth();
|
|
let startOfMonth = new Date(year, month - 1, 1);
|
|
startOfMonth.setHours(0, 0, 0, 0);
|
|
let thisMonthFirstDay = new Date(year, month, 1);
|
|
let endOfMonth = new Date(thisMonthFirstDay - 1);
|
|
endOfMonth.setHours(23, 59, 59, 999);
|
|
return [startOfMonth, endOfMonth];
|
|
}
|
|
}]
|
|
});
|
|
// 渲染插件选项
|
|
(async () => {
|
|
const data = await fetch('/api/Plugin/pluginOption').then(res => res.json());
|
|
let option_str = `<option value="">收款平台</option>`;
|
|
let platforms = {};
|
|
data.forEach(val => {
|
|
option_str += `<option value="${val.platform}">${val.name}</option>`;
|
|
platforms[val.platform] = val.name;
|
|
});
|
|
const select = document.querySelector('select[name="platform"]');
|
|
select.innerHTML = option_str;
|
|
form.render('select');
|
|
// 会话存储
|
|
sessionStorage.setItem('platforms', JSON.stringify(platforms));
|
|
// 表格列参数
|
|
let cols = [[
|
|
{ type: 'checkbox' },
|
|
{ title: '订单号', field: 'order_id', align: 'center', minWidth: 165, templet: '<div><a href="javascript:;" class="layui-font-blue" lay-event="showOrder">{{= d.order_id }}</a></div>' },
|
|
// { title: '用户', field: 'pid', align: 'center', width: 85 },
|
|
{ title: '商家订单号', field: 'out_trade_no', align: 'center', minWidth: 180 },
|
|
{ title: '商品', field: 'name', align: 'center', minWidth: 180 },
|
|
{ title: '订单金额', field: 'money', align: 'center', minWidth: 85 },
|
|
{ title: '成交金额', field: 'really_price', align: 'center', minWidth: 85 },
|
|
{ title: '支付状态', field: 'state', align: 'center', minWidth: 85, templet: '<div>{{# if(d.state==1){return`<span class="layui-badge layui-bg-green">成功</span>`}else{if(new Date(d.close_time)>new Date("<?php echo $servertime ?>")){return`<span class="layui-badge layui-bg-orange">等待</span>`}else{return`<span class="layui-badge layui-bg-gray">过期</span>`} } }}</div>' },
|
|
{ title: '支付时间', field: 'pay_time', align: 'center', minWidth: 160, templet: '<div>{{= d.pay_time == d.create_time ? "- -" : d.pay_time}}</div>' },
|
|
{ title: '支付平台', field: 'type', align: 'center', width: 120, templet: '<div>{{# if(d.type=="wxpay"){return`<div class="paytype"><img src="/static/img/wxpay.ico"width="15"><span>微信支付</span></div>`}if(d.type=="alipay"){return`<div class="paytype"><img src="/static/img/alipay.ico"width="15"><span>支付宝</span></div>`}if(d.type=="unionpay"){return`<div class="paytype"><img src="/static/img/unionpay.ico"width="15"><span>云闪付</span></div>`} }}</div>' },
|
|
{ title: '收款平台[账号:终端]', field: 'platform', align: 'center', minWidth: 160, templet: '#platformTpl' },
|
|
{ title: '操作', align: 'center', width: 120, fixed: 'right', templet: '<div><strong><a href="javascript:;" data-id="{{= d.id }}" class="layui-font-green {{= d.state==1 ? "orderSet-paid" : "orderSet-paying" }}">设置</a></strong></div>' }
|
|
]]
|
|
// 表格渲染
|
|
table.render({
|
|
id: 'orders-table',
|
|
elem: '#orders-table',
|
|
url: '/api/Order/getOrders',
|
|
page: true,
|
|
cols: cols,
|
|
skin: 'line',
|
|
toolbar: '#order-toolbar',
|
|
defaultToolbar: [{
|
|
title: '刷新',
|
|
layEvent: 'refresh',
|
|
icon: 'layui-icon-refresh',
|
|
}, 'filter', 'print', 'exports'],
|
|
done: function () {
|
|
dropdown.render({
|
|
elem: '.orderSet-paying',
|
|
data: [{ title: '改已支付', type: 1 }, { type: '-' }, { title: '手动补单', type: 3 }, { title: '删除订单', type: 0 }],
|
|
click: function (data, othis) {
|
|
order.setOrder(data, this.elem);
|
|
}
|
|
});
|
|
dropdown.render({
|
|
elem: '.orderSet-paid',
|
|
data: [{ title: '改未支付', type: 2 }, { type: '-' }, { title: '重新通知', type: 4 }, { title: '删除订单', type: 0 }],
|
|
click: function (data, othis) {
|
|
order.setOrder(data, this.elem);
|
|
}
|
|
});
|
|
},
|
|
});
|
|
})()
|
|
// 事件处理
|
|
|
|
// 表格单元格事件
|
|
table.on('tool(orders-table)', function (obj) {
|
|
if (obj.event === 'showOrder') {
|
|
order.showOrder(obj.data.id);
|
|
}
|
|
});
|
|
// 表格头部按钮事件
|
|
table.on('toolbar(orders-table)', function (obj) {
|
|
if (obj.event === 'refresh') {
|
|
table.reload('orders-table');
|
|
} else if (obj.event === 'batchRemove') {
|
|
layer.confirm('批量删除订单?', { icon: 3, title: '提示' },
|
|
function (index) {
|
|
const pagedata = table.checkStatus(obj.config.id)
|
|
let select_id = [];
|
|
pagedata.data.forEach(val => {
|
|
select_id.push(val.id);
|
|
});
|
|
httpJSON('/api/Order/batchRemove', { ids: select_id });
|
|
layer.close(index);
|
|
});
|
|
} else if (obj.event === 'batchTimeout') {
|
|
layer.confirm('确定清空超时订单?', { icon: 3, title: '提示' },
|
|
function (index) {
|
|
httpJSON('/api/Order/batchTimeout', { action: 'batchTimeout' })
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
// 表单自定义事件监听
|
|
form.on('submit(order-query)', function (obj) {
|
|
const field = obj.field;
|
|
let new_field = {};
|
|
for (const key in field) {
|
|
if (field.hasOwnProperty.call(field, key)) {
|
|
const value = field[key];
|
|
if (value) {
|
|
new_field[key] = value;
|
|
}
|
|
}
|
|
}
|
|
table.reload('orders-table', { where: new_field });
|
|
return false;
|
|
});
|
|
// 监听重置按钮
|
|
util.on({
|
|
reset: function () {
|
|
document.querySelector('#serch-form').reset();
|
|
table.reload('orders-table', { where: {} });
|
|
}
|
|
});
|
|
|
|
// 操作方法
|
|
let order = {};
|
|
|
|
// 操作菜单
|
|
order.setOrder = function (data, elem) {
|
|
const dotype = data.type;
|
|
const id = elem.attr("data-id");
|
|
if (dotype == 1 || dotype == 2) {
|
|
// 更改支付状态
|
|
const state = dotype == 1 ? 1 : 0;
|
|
httpJSON('/api/Order/changeOrderState', { id: id, state: state })
|
|
} else if (dotype == 3) {
|
|
// 手动补单
|
|
layer.confirm('无论是否真实支付，直接确认支付?', { icon: 3, title: '提示' },
|
|
function (index) {
|
|
const state = 1;
|
|
httpJSON('/api/Order/doPayOrder', { id: id, state: state })
|
|
layer.close(index);
|
|
});
|
|
} else if (dotype == 4) {
|
|
// 重新通知
|
|
httpJSON('/api/Order/redoPayOrder', { id: id })
|
|
} else if (dotype == 0) {
|
|
//删除订单
|
|
layer.confirm('确定删除订单?', { icon: 3, title: '提示' },
|
|
function (index) {
|
|
httpJSON('/api/Order/deleteOrder', { id: id })
|
|
layer.close(index);
|
|
});
|
|
}
|
|
}
|
|
// 订单详细
|
|
order.showOrder = function (id) {
|
|
layer.open({
|
|
id: 'iframe-show-order',
|
|
type: 2,
|
|
title: '订单详细',
|
|
shade: 0.1,
|
|
offset: '10px',
|
|
area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '640px'],
|
|
content: `/Order/showOrder?id=${id}`,
|
|
});
|
|
}
|
|
async function httpJSON(url, info) {
|
|
const res = await fetch(url, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(info) });
|
|
if (res.status !== 200) {
|
|
layer.msg('请求失败，请重试！', { tips: 2, time: 1200 });
|
|
return false;
|
|
}
|
|
const rec_info = await res.json();
|
|
if (rec_info.code === 0) {
|
|
layer.msg(rec_info.msg, { icon: 1, time: 1200 }, () => { table.reload('orders-table') });
|
|
} else {
|
|
layer.msg(rec_info.msg, { icon: 2, time: 1200 });
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |