<!--
|
* @Date: 2019-08-30 14:08:02
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 16:44:00
|
* @Description:
|
-->
|
<template>
|
<div class="getQRCode">
|
<!-- <x-header title="扫码办理" :left-options="{backText:''}" style="background-color:#3A3A3A;"></x-header> -->
|
<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="black-block" :style="{background:$store.state.backColor}"></div>
|
<div class="order-info">
|
<div style="text-align: center;">
|
<img class="qrcodeImg" :src="qrCode" alt="qrCode">
|
</div>
|
<!-- <p class="notice">扫一扫，办理分期业务</p> -->
|
<div class="cell-cont-item-style">
|
<span class="title">活动名称</span>
|
<span class="value">{{params.contName}}</span>
|
</div>
|
<div class="cell-item-style">
|
<span class="title">合约期</span>
|
<span class="value">{{params.term}}</span>
|
</div>
|
<div class="cell-item-style">
|
<span class="title">担保金额</span>
|
<span class="value">{{params.guaranteedAmt}}</span>
|
</div>
|
</div>
|
<f-confirm v-model="showModal" showIcon iconClass='scene_Staging-shenhezhong' iconColor='#fff' @on-confirm='onSubmit' :showCancelBtn='false'>
|
<div>支付完成</div>
|
</f-confirm>
|
<f-confirm v-model="Invalid" showIcon iconClass='scene_Staging-shenhezhong' iconColor='#fff' :showCancelBtn='false'>
|
<div>当前二维码已经失效，请重新下单</div>
|
</f-confirm>
|
</div>
|
</template>
|
<script>
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'getQRCode',
|
data() {
|
return {
|
qrCode: '',
|
orderId:"",
|
timer: '', //轮询定时器
|
showModal: false, //模态窗提示
|
Invalid: false, //模态窗提示
|
params: {
|
contName: '',
|
guaranteedAmt:0,
|
term: 0,
|
monGiftAmt:0
|
}
|
}
|
},
|
methods:{
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//轮询查询订单状态
|
orderSts() {
|
this.timer = setInterval(() => {
|
this.$api.wxScoreOrderStatus({ id: this.orderId }).then(
|
res => {
|
let orderStatus = res.body.orderStatus;
|
if (orderStatus != 2&& orderStatus != 0) {
|
clearInterval(this.timer);
|
this.showModal = true;
|
} else if (orderStatus == 2) {
|
clearInterval(this.timer);
|
this.Invalid = true;
|
}
|
},
|
err => {
|
err, clearInterval(this.timer);
|
}
|
);
|
}, 3000);
|
},
|
// 支付成功确定
|
onSubmit() {
|
let queryObj = { orderId: this.orderId};
|
this.$router.push({
|
path: '/product/wxScore-detail',
|
query: queryObj
|
});
|
}
|
},
|
created() {
|
this.params = { ...this.$route.query };
|
this.orderId = this.$route.query.orderId;
|
let url = this.$route.query.qrCode;
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
QRCode.toDataURL(
|
url,
|
{
|
margin: 1,
|
width: 400
|
},
|
(err, url) => {
|
this.qrCode = url;
|
this.orderSts();
|
}
|
);
|
},
|
beforeRouteLeave (to, from, next) {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
next()
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
@import '../../../style/mixin';
|
|
.getQRCode {
|
position: relative;
|
background: #F3F4F5;
|
min-height: 100%;
|
padding-bottom: 40px;
|
.vux-header {
|
&:after {
|
border-bottom: none !important;
|
}
|
}
|
.vux-header-title {
|
span {
|
color: #ffffff;
|
}
|
}
|
.left-arrow {
|
&:before {
|
border-color: #ffffff !important;
|
}
|
}
|
.black-block {
|
margin-top: -11px;
|
width: 100%;
|
height: 150px;
|
background:linear-gradient(-45deg,rgba(104,98,133,1),rgba(76,69,113,1));
|
}
|
.order-info {
|
height:587px;
|
width: 351px;
|
|
box-sizing: border-box;
|
border-radius: 6px;
|
background-color: #ffffff;
|
padding-top: 28px;
|
position: absolute;
|
|
top: 85px;
|
left: 50%;
|
transform: translateX(-50%);
|
.cell-cont-item-style {
|
width: 80%;
|
margin: 0 3%;
|
padding: 0 5%;
|
height: 50px;
|
line-height: 20px;
|
background: #FAFAFA;
|
font-size: 16px;
|
// box-sizing: border-box;
|
// padding-bottom: 10px;
|
// margin-bottom: 40px;
|
// border-bottom: 1px solid #dddddd;
|
.flexLayout(space-between, center, row);
|
.title {
|
text-align: left;
|
color: #666666;
|
}
|
.value {
|
text-align: right;
|
color: #333333;
|
// font-size: 14px;
|
}
|
}
|
.cell-item-style {
|
width: 80%;
|
margin: 0 3%;
|
padding: 0 5%;
|
height: 50px;
|
line-height: 50px;
|
background: #FAFAFA;
|
font-size: 16px;
|
// box-sizing: border-box;
|
// padding-bottom: 10px;
|
// margin-bottom: 40px;
|
// border-bottom: 1px solid #dddddd;
|
.flexLayout(space-between, center, row);
|
.title {
|
text-align: left;
|
color: #666666;
|
}
|
.value {
|
text-align: right;
|
color: #333333;
|
// font-size: 14px;
|
}
|
}
|
.last-cell {
|
margin-bottom: 25px !important;
|
height:100px;
|
}
|
.qrcodeImg {
|
width: 190px;
|
height: 190px;
|
background:rgba(255,255,255,1);
|
border:6px solid rgba(223,212,255,1);
|
border-radius:8px;
|
margin-bottom: 37px;
|
}
|
.notice {
|
color: #3a3a3a;
|
font-size: 12px;
|
}
|
}
|
.agreenBox {
|
width: 80vw;
|
height: 70vh;
|
padding: 60px 20px 30px 20px;
|
position: relative;
|
}
|
.agreen-html {
|
width: 100%;
|
height: 100%;
|
overflow: scroll;
|
box-sizing: border-box;
|
}
|
.close-agreen {
|
.lh(30px);
|
.flex(center, center);
|
|
.van-icon {
|
font-size: @font-16;
|
}
|
}
|
.btn-box{
|
&{
|
margin-top: 520px;
|
text-align: center;
|
}
|
button{
|
width: 90vw;
|
height:44px;
|
background:rgba(137,110,219,1);
|
border-radius:22px;
|
color: #fff;
|
border: 0;
|
outline: none;
|
}
|
}
|
}
|
</style>
|
