mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-09-17 09:16:40 +08:00
274 lines
11 KiB
HTML
274 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>收银台</title>
|
|
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
|
<style>
|
|
body {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.card {
|
|
margin: 18px auto 18px;
|
|
padding: 38px 16px 0px;
|
|
background: #fff;
|
|
-webkit-box-shadow: 0 3px 3px 0 hsla(0, 0%, 92.5%, .44);
|
|
box-shadow: 0 3px 3px 0 hsla(0, 0%, 92.5%, .44);
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
padding-bottom: 38px;
|
|
}
|
|
|
|
.order {
|
|
width: 340px;
|
|
margin: 15px auto 21px;
|
|
background: #fbfbfb;
|
|
border-radius: 6px;
|
|
line-height: 42px;
|
|
text-align: left;
|
|
}
|
|
|
|
.order span {
|
|
color: #999;
|
|
font-size: 15px;
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.goods_name {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #999;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.price {
|
|
color: #386cfa;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.price>span:first-child {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.price>span:last-child {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.price span {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.qrcode>img {
|
|
height: 200px;
|
|
}
|
|
|
|
.msg {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.msg>p {
|
|
color: red;
|
|
font-weight: 700;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.msg>p:nth-child(1) {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.shanxinzha {
|
|
margin-top: 32px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.shanxinzha p {
|
|
color: #999;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.note {
|
|
color: red;
|
|
font-size: 22px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" class="layui-container">
|
|
<div class="layui-row">
|
|
<div class="card" style="padding-bottom: 18px;padding-top: 15px;">
|
|
<div style="text-align: center;">
|
|
<svg style="vertical-align: middle;" t="1610806307396" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="6171" width="26" height="26">
|
|
<path
|
|
d="M1024 199.18v410.38c0 110-89.54 199.18-200 199.18H200c-110.46 0-200-89.18-200-199.18V199.18C0 89.17 89.54 0 200 0h624c110.46 0 200 89.17 200 199.18z m-553.95 317v46.72q0.9 19.32 12 28.75t30.9 9.43q40.14 0 41.95-38.18v-47.58l86.6 0.45q11.73-0.9 18.49-8.76t7.67-19.54a33.48 33.48 0 0 0-7.67-19.32q-6.77-8.09-18.49-9h-86.6v-27.4l86.15-0.45q11.73-0.9 18.72-9a33.26 33.26 0 0 0 7.89-19.76q-0.9-11.23-7.67-18.42t-18.49-8.09h-66.3l69.91-113.2q9-11.68 9-24.71a50.37 50.37 0 0 0-4.28-15.27 24.48 24.48 0 0 0-7.22-9 27.29 27.29 0 0 0-9.92-4.49 74.75 74.75 0 0 0-12.4-1.8 43.43 43.43 0 0 0-19.4 7.19 54.51 54.51 0 0 0-14 13.48l-75.34 125.83L443 229.18A65.48 65.48 0 0 0 429 215a36.39 36.39 0 0 0-19.4-7.41q-18.49 2.25-25.26 10.11t-9 20.44a36.94 36.94 0 0 0 3.61 18.19 67.53 67.53 0 0 0 8.57 13.7l60.44 106H383q-12.18 0.9-18.72 8.09t-7.89 18.42q1.35 11.68 7.89 19.32t18.72 8.56l87.05 0.45v28.3H383q-12.18 0.9-18.72 8.09t-7.89 18.42a43.81 43.81 0 0 0 7.89 20.44q6.54 9.21 18.72 10.11h87.05z"
|
|
fill="#4375ff" p-id="6172"></path>
|
|
<path
|
|
d="M264.96 903.6m60.2 0l373.67 0q60.2 0 60.2 60.2l0 0q0 60.2-60.2 60.2l-373.67 0q-60.2 0-60.2-60.2l0 0q0-60.2 60.2-60.2Z"
|
|
fill="#4375ff" p-id="6173"></path>
|
|
</svg>
|
|
<img id="payType" style="vertical-align: middle;" src="" style="height:30px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row">
|
|
<div class="card">
|
|
<div class="order"><span>商户订单号：<span id="order">
|
|
<?php echo htmlentities($out_trade_no); ?>
|
|
</span></span></div>
|
|
<div class="goods_name"><span>商品名称：<span id="goods_name">
|
|
<?php echo htmlentities($name); ?>
|
|
</span></span></div>
|
|
<div class="price"><span id="money">
|
|
<?php echo htmlentities($really_price); ?>
|
|
</span><span>元</span></div>
|
|
<div class="qrcode"><img id="qrcode" src="/static/img/loading.gif">
|
|
</div>
|
|
<div class="msg">
|
|
<p>请付款 <span class="note">
|
|
<?php echo htmlentities($really_price); ?>
|
|
</span> 元，注意不能多付或少付</p>
|
|
<p>付款后，请等待 5 秒查看</p>
|
|
<p id="divTime"></p>
|
|
</div>
|
|
<div class="shanxinzha">
|
|
<p id="payTypeText"></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/component/layui/layui.js"></script>
|
|
<script src="/static/js/awesome-qr.min.js"></script>
|
|
<script>
|
|
const payCode = '<?php echo htmlentities($payUrl); ?>';
|
|
const codeType = '<?php echo htmlentities($code_type); ?>';
|
|
const payType = '<?php echo htmlentities($type); ?>';
|
|
const order = '<?php echo htmlentities($order_id); ?>';
|
|
const QR = AwesomeQR.AwesomeQR;
|
|
(async () => {
|
|
// 支付类型
|
|
const payTpeyImg = document.getElementById('payType');
|
|
const payTypeText = document.getElementById('payTypeText');
|
|
if (payType === 'wxpay') {
|
|
payTpeyImg.src = '/static/img/weixin.jpg';
|
|
payTypeText.innerText = '请使用微信扫码支付'
|
|
} else if (payType === 'alipay') {
|
|
payTpeyImg.src = '/static/img/alipay.jpg';
|
|
payTypeText.innerText = '请使用支付宝扫码支付'
|
|
}
|
|
// 生成二维码
|
|
if (codeType == 0) {
|
|
document.getElementById('qrcode').src = await getQrcode(payCode, QR);
|
|
} else {
|
|
document.getElementById('qrcode').src = payCode;
|
|
}
|
|
// 订单过期时间
|
|
let passtime = 0;
|
|
// 订单状态查询
|
|
let orderTimer = 0;
|
|
const queryOrder = async (url) => {
|
|
if (orderTimer) { clearTimeout(orderTimer); }
|
|
const res = await fetch(url);
|
|
const jsonData = await res.json();
|
|
orderTimer = setTimeout(() => { queryOrder(url) }, 1000);
|
|
if (jsonData.state === 1) {
|
|
clearTimeout(orderTimer);
|
|
layer.closeAll();
|
|
document.getElementById('divTime').innerHTML = '<small class="note">订单支付成功</small>';
|
|
document.getElementById('qrcode').src = '/static/img/pay_ok.png';// 输出支付成功提示图片
|
|
setTimeout(() => {
|
|
location.href = jsonData.return_url;
|
|
}, 1500);
|
|
}
|
|
passtime = jsonData.passtime;
|
|
if (passtime <= 0) {
|
|
clearTimeout(orderTimer);
|
|
}
|
|
timer(passtime);
|
|
}
|
|
queryOrder(`/getOrderState/${order}`);
|
|
})();
|
|
/* <?php if ($patt == 0 && $passtime > 0) { ?> */
|
|
// 验证支付结果
|
|
const id = '<?php echo htmlentities($id);?>';
|
|
const reVali = (step) => {
|
|
setTimeout(() => {
|
|
layer.confirm('是否已支付？', { icon: 3, title: '提示', closeBtn: 0 },
|
|
(index) => {
|
|
(async () => {
|
|
const res = await validatePayResult(id, 1);
|
|
if (res) { reVali(8000) }
|
|
})()
|
|
layer.close(index);
|
|
}, (index) => {
|
|
reVali(5000);
|
|
layer.close(index);
|
|
})
|
|
}, step);
|
|
}
|
|
reVali(10000);
|
|
// 验证支付结果
|
|
async function validatePayResult(id, patt) {
|
|
const lay = layer.load(2);
|
|
let data = { id: id, patt: patt };
|
|
const res1 = await fetch(`/validatePayResult`, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
|
|
const rec1_info = await res1.json();
|
|
const info = await new Promise((resolve, reject) => {
|
|
setTimeout(() => {
|
|
data.patt = 0;
|
|
fetch(`/validatePayResult`, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
|
|
.then((res2) => { return res2.json() }).then((rec2_info) => {
|
|
if (rec2_info.code == 0) {
|
|
layer.close(lay);
|
|
layer.msg('验证失败，稍后重新验证！');
|
|
resolve(true);
|
|
} else {
|
|
layer.close(lay);
|
|
layer.msg(rec2_info.msg);
|
|
resolve(false);
|
|
}
|
|
});
|
|
}, 5000);
|
|
})
|
|
return info;
|
|
}
|
|
/* <?php } ?> */
|
|
// 生成二维码
|
|
async function getQrcode(text, QR) {
|
|
const qrcodeUrl = await new Promise((resolve) => {
|
|
new QR({
|
|
text: text,
|
|
size: 500,
|
|
}).draw().then((dataURL) => { resolve(dataURL); });
|
|
})
|
|
return qrcodeUrl;
|
|
}
|
|
// 倒计时
|
|
function timer(passtime) {
|
|
let minute = 0, second = 0; // 时间默认值
|
|
if (passtime > 0) {
|
|
minute = Math.floor(passtime / 60);
|
|
second = Math.floor(passtime) - (minute * 60);
|
|
}
|
|
if (passtime <= 0) {
|
|
document.getElementById('divTime').innerHTML = '<small class="note">订单二维码已过期</small>';
|
|
document.getElementById('qrcode').src = '/static/img/qrcode_timeout.png';// 输出过期二维码提示图片
|
|
} else {
|
|
document.getElementById('divTime').innerHTML = `二维码有效时间：<small class="note">${minute}</small>分<small class="note">${second}</small> 秒，失效勿付`;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |