mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-09-20 10:46:38 +08:00
239 lines
9.3 KiB
HTML
239 lines
9.3 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="/static/css/layui.min.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: 1.5em;
|
||
}
|
||
|
||
.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: 24px;
|
||
}
|
||
</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 id="s_money" 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="/static/js/layui.min.js"></script>
|
||
<script src="/static/js/awesome-qr.min.js"></script>
|
||
<script>
|
||
const payCode = '<?php echo $payUrl; ?>';
|
||
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 = '请使用支付宝扫码支付'
|
||
}
|
||
// 生成二维码
|
||
document.getElementById('qrcode').src = await getQrcode(payCode, QR);
|
||
// 订单倒计时
|
||
const intDiff = <?php echo strtotime($close_time) - time() > 0 ? strtotime($close_time) - time() : 0; ?>;
|
||
const timerId = timer(intDiff);
|
||
// 订单状态查询
|
||
let orderTimer = null;
|
||
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) {
|
||
clearInterval(timerId);
|
||
clearTimeout(orderTimer);
|
||
document.getElementById('divTime').innerHTML = '<small class="note">订单支付成功</small>';
|
||
document.getElementById('qrcode').src = '/static/img/pay_ok.png';// 输出支付成功提示图片
|
||
setTimeout(() => {
|
||
location.href = jsonData.return_url;
|
||
}, 1500);
|
||
}
|
||
if (jsonData.state === 2) {
|
||
clearTimeout(orderTimer);
|
||
}
|
||
}
|
||
if (intDiff > 0) {
|
||
queryOrder(`/getOrderState/${order}`);
|
||
}
|
||
|
||
})();
|
||
// 生成二维码
|
||
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(intDiff) {
|
||
const timerId = setInterval(() => {
|
||
let day = 0, hour = 0, minute = 0, second = 0;//时间默认值
|
||
if (intDiff > 0) {
|
||
day = Math.floor(intDiff / (60 * 60 * 24));
|
||
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
|
||
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
|
||
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
|
||
}
|
||
if (minute <= 9) minute = '0' + minute;
|
||
if (second <= 9) second = '0' + second;
|
||
if (hour <= 0 && minute <= 0 && second <= 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 style="color:red; font-size:24px">${second}</small> 秒,失效勿付`;
|
||
}
|
||
if (intDiff < 0) {
|
||
clearInterval(timerId);
|
||
}
|
||
intDiff--;
|
||
}, 1000);
|
||
return timerId;
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |