<template>
|
<!-- 商户收款：扫描二维码页面 -->
|
<div class="contract-qrcode-page">
|
<x-header title="扫码收款" :left-options="{backText:''}"></x-header>
|
<div class="order-info">
|
<div v-if="qrCodeBase64Url" class='canvasImg'>
|
<img :src="qrCodeBase64Url" alt="qrcode">
|
</div>
|
<div id="QRCode" v-else class='qr-code'>
|
<div class='qeimg'>
|
<img :src="dataUrl" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import html2canvas from 'html2canvas';
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'facepay_code',
|
data() {
|
return {
|
dataUrl: '',
|
qrCodeBase64Url: '',
|
params: '',
|
timeId: null
|
}
|
},
|
computed: {
|
orderId() {
|
let id = this.$route.query.id;
|
return id;
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
clearInterval(this.timeId);
|
next()
|
},
|
methods: {
|
// 轮询 支付状态
|
search_status() {
|
this.$api.facepay_getStatus(this.orderId).then(res => {
|
let orderStatus = res.body.orderStatus;
|
if (orderStatus !== 0) {
|
if (orderStatus === 1) {
|
// 成功
|
this.$router.replace(
|
`/facepay/details?orderStatus=1&page=facepay_code&orderId=${this.orderId}`)
|
} else if (orderStatus === 2) {
|
// 失败
|
this.$router.replace(
|
`/facepay/details?orderStatus=2&page=facepay_code&orderId=${this.orderId}`)
|
}
|
}
|
})
|
}
|
},
|
created() {
|
QRCode.toDataURL(this.$route.query.url, {
|
margin: 0,
|
width: 400
|
},
|
(err, url) => {
|
this.dataUrl = url;
|
setTimeout(() => {
|
html2canvas(document.getElementById('QRCode')).then(
|
canvas => {
|
this.qrCodeBase64Url = canvas.toDataURL(
|
'image/jpeg'
|
);
|
this.timeId = setInterval(() => {
|
this.search_status();
|
}, 2000);
|
}
|
);
|
}, 100);
|
}
|
);
|
}
|
}
|
|
</script>
|
<style lang="less" scoped>
|
|
|
|
.contract-qrcode-page {
|
.order-info {
|
padding-top: 46px;
|
|
.canvasImg {
|
margin: 0 auto;
|
width: 220px;
|
height: 220px;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.notice {
|
padding-top: 40px;
|
text-align: center;
|
color: #666;
|
}
|
|
.qr-code {
|
background: #fff;
|
width: 220px;
|
height: 220px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
border: 4px solid @color-text-three;
|
color: @color-text-three;
|
|
.qeimg {
|
width: 200px;
|
height: 200px;
|
padding: 5px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
