<!--
|
* @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">
|
<img class="qrcodeImg" :src="qrCode" alt="qrcode">
|
<!-- <p class="notice">扫一扫，办理分期业务</p> -->
|
<div class="cell-item-style">
|
<span class="title">分期金额</span>
|
<span class="value">{{params.capitalAmt}}元</span>
|
</div>
|
<div class="cell-item-style">
|
<span class="title">花呗分期手续费率</span>
|
<span class="value">{{params.zfbRate}}%</span>
|
</div>
|
<div class="cell-item-style">
|
<span class="title">智享服务费率</span>
|
<span class="value">{{params.platRate}}%</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.totalAmount}}元</span>
|
</div>
|
<p style="width:94%;margin-left:3%;text-align:left;padding-top:14px">
|
<span style="color:#999999;font-size:12px">请主动向用户展示</span>
|
<span style="color:#896EDB;font-size:12px" @click="ShowAgreen=true">《用户协议》</span>
|
<span style="color:#999999;font-size:12px">，扫描二维码则视为用户同意此协议。</span>
|
</p>
|
</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 class="btn-box" v-if="$route.query.backUrl">
|
<button @click="goHj">返回红茄</button>
|
</div>
|
<van-popup v-model="ShowAgreen">
|
<div class="agreenBox">
|
<div class="agreen-html" v-html="Agreend"></div>
|
<div class="close-agreen" @click="ShowAgreen = false">
|
<van-icon name="close" />
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'getQRCode',
|
data() {
|
return {
|
ShowAgreen:false,
|
Agreend:'',
|
qrCode: '',
|
orderId:"",
|
timer: '', //轮询定时器
|
showModal: false, //模态窗提示
|
Invalid: false, //模态窗提示
|
params: {
|
totalAmount: 0,
|
term: 0,
|
|
}
|
}
|
},
|
methods:{
|
// 跳转红茄
|
goHj(){
|
console.log(this.$route.query.backUrl.split('https:'))
|
location.href=this.$route.query.backUrl
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//轮询查询订单状态
|
orderSts() {
|
this.timer = setInterval(() => {
|
this.$api.hbOrderFindOrderSts({ orderId: this.orderId }).then(
|
res => {
|
if (res.body.orderStatus == 1) {
|
clearInterval(this.timer);
|
this.showModal = true;
|
} else if (res.body.orderStatus == 2) {
|
clearInterval(this.timer);
|
this.Invalid = true;
|
} else if (res.body.orderStatus == 3) {
|
clearInterval(this.timer);
|
this.showModal = true;
|
}
|
},
|
err => {
|
err, clearInterval(this.timer);
|
}
|
);
|
}, 10000);
|
},
|
// 支付成功确定
|
onSubmit() {
|
let queryObj = { id: this.orderId,backUrl:this.$route.query.backUrl};
|
if(this.$route.query.typeId){
|
queryObj.typeId = this.$route.query.typeId;
|
}
|
this.$router.push({
|
path: '/product/hb-detail',
|
query: queryObj
|
});
|
}
|
},
|
created() {
|
this.Agreend = agreement3
|
console.log(this.$route.query)
|
this.params = { ...this.$route.query };
|
this.orderId = this.$route.query.orderId;
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
let url = window.sessionStorage.getItem('hbpayQrCodeUrl');
|
QRCode.toDataURL(
|
url,
|
{
|
margin: 1,
|
width: 400
|
},
|
(err, url) => {
|
if (err) console.error(err);
|
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;
|
text-align: center;
|
box-sizing: border-box;
|
border-radius: 6px;
|
background-color: #ffffff;
|
padding-top: 28px;
|
position: absolute;
|
|
top: 85px;
|
left: 50%;
|
transform: translateX(-50%);
|
.cell-item-style {
|
width: 80%;
|
margin: 0 3%;
|
padding: 0 7%;
|
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 {
|
color: #666666;
|
}
|
.value {
|
color: #333333;
|
// font-size: 14px;
|
}
|
}
|
.last-cell {
|
margin-bottom: 25px !important;
|
}
|
.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>
|
