<!--
|
* @Author: 小明丶
|
* @Date: 2020-11-26 16:45:20
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-10 09:35:07
|
* @Description: 商户收款二维码页面
|
-->
|
<template>
|
<div class="getShskQRCode-page">
|
<van-nav-bar
|
title="生成二维码"
|
left-text="返回"
|
left-arrow
|
@click-left="onClickLeft"
|
style="line-height: 43px"
|
>
|
<i
|
class="iconfont iconzuojiantou"
|
slot="left"
|
style="font-size: 25px"
|
></i>
|
</van-nav-bar>
|
<div
|
class="bc-box"
|
:style="{ background: $store.state.defaultBgColor }"
|
></div>
|
<div class="qr-box">
|
<div class="border-box">
|
<img :src="qrCodeBase64Url" alt="" />
|
</div>
|
<p>二维码失效时间为半小时</p>
|
<p>请尽快提供给用户进行扫码</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
import html2canvas from "html2canvas";
|
import QRCode from "qrcode";
|
|
export default {
|
data() {
|
return {
|
qrCodeBase64Url: "",
|
timeId:'',
|
};
|
},
|
created() {
|
console.log(this.$route.query.orderId)
|
QRCode.toDataURL(
|
this.$route.query.url,
|
{
|
margin: 1,
|
width: 400
|
},
|
(err, url) => {
|
if (err) console.error(err);
|
this.qrCodeBase64Url = url;
|
// this.search_status();
|
this.timeId = setInterval(() => {
|
this.search_status();
|
}, 2000);
|
}
|
);
|
},
|
methods: {
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
// 轮询 支付状态
|
search_status() {
|
this.$api.facepay_getStatus(
|
this.$route.query.orderId
|
).then((res) => {
|
let orderStatus = res.body.orderStatus;
|
if(orderStatus !== 0){
|
clearInterval(this.timeId);
|
this.$router.push(
|
`/shsk-payResult?orderStatus=${orderStatus}`
|
);
|
}
|
});
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
clearInterval(this.timeId);
|
next();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.getShskQRCode-page {
|
& {
|
background: #f5f5f5;
|
min-height: 100vh;
|
}
|
.bc-box {
|
width: 100%;
|
height: 150px;
|
}
|
.qr-box {
|
width: 335px;
|
height: 300px;
|
background: #fff;
|
position: absolute;
|
top: 86px;
|
left: 5.5%;
|
box-sizing: border-box;
|
padding: 29px 73px;
|
.border-box {
|
padding: 5px;
|
border: 3px solid #dfd4ff;
|
border-radius: 4px;
|
margin-bottom: 22px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
p {
|
text-align: center;
|
font-weight: 500;
|
color: #999999;
|
line-height: 17px;
|
}
|
}
|
}
|
</style>
|
