<!--
|
* @Date: 2019-08-30 11:29:46
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-10-28 15:10:38
|
* @Description:
|
-->
|
<template>
|
<div class="getQRCode">
|
<x-header title="扫码办理" :left-options="{backText:''}" style="background-color:#3A3A3A;"></x-header>
|
<div class="black-block"></div>
|
<div class="order-info">
|
<div class="cell-item-style">
|
<span class="title">还款总额</span>
|
<span class="value">{{params.insAmt}}元</span>
|
</div>
|
<div class="cell-item-style">
|
<span class="title">分期期数</span>
|
<span class="value">{{params.insTerm}}期</span>
|
</div>
|
<img class="qrcodeImg" :src="qrCode" alt="qrcode">
|
<p class="notice">扫一扫，办理分期业务</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
import QRCode from 'qrcode';
|
import {mapGetters} from 'vuex';
|
export default {
|
name: 'getQRCode',
|
data() {
|
return {
|
qrCode: '',
|
params: {
|
insAmt: 0,
|
insTerm: 0,
|
},
|
}
|
},
|
computed:{
|
...mapGetters(['orgType'])
|
},
|
created() {
|
this.params = { ...this.$route.query };
|
let url = `${sessionStorage.getItem('jumpUrl')}/#/?insTerm=${this.params.insTerm}&prodName=${this.params.prodName}&prodId=${this.params.prodId}&storeId=${this.orgType}&settAmt=${this.params.settAmt}&insAmt=${this.params.insAmt}&mgrId=${this.params.mgrId}`;
|
QRCode.toDataURL(
|
url,
|
{
|
margin: 1,
|
width: 400
|
},
|
(err, url) => {
|
if (err) console.error(err);
|
this.qrCode = url;
|
}
|
);
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.getQRCode {
|
padding-top: 44px;
|
position: relative;
|
.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: 116px;
|
background-color: #3a3a3a;
|
}
|
.order-info {
|
height: 480px;
|
width: 351px;
|
text-align: center;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
padding-top: 50px;
|
position: absolute;
|
top: 85px;
|
left: 50%;
|
transform: translateX(-50%);
|
.cell-item-style {
|
box-sizing: border-box;
|
padding-bottom: 10px;
|
margin: 0 35px;
|
margin-bottom: 40px;
|
border-bottom: 1px solid #dddddd;
|
.flexLayout(space-between, center, row);
|
.title {
|
color: #a3a3a3;
|
font-size: 14px;
|
}
|
.value {
|
color: #3a3a3a;
|
font-size: 14px;
|
}
|
}
|
.last-cell {
|
margin-bottom: 25px !important;
|
}
|
.qrcodeImg {
|
width: 190px;
|
height: 190px;
|
}
|
.notice {
|
color: #3a3a3a;
|
font-size: 12px;
|
}
|
}
|
}
|
</style>
|
