<!--
|
* @Author: 小明丶
|
* @Date: 2020-06-08 11:13:16
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-06-13 19:15:35
|
* @Description: 花呗间联二维码页面
|
-->
|
<template>
|
<div class="hbjl-qr-vue">
|
<v-navbar title="生成订单"></v-navbar>
|
<div class="top-back-box">
|
<div class="back-line-box"></div>
|
<div class="qr-box">
|
<div class="code-box">
|
<img :src="qrCode" alt />
|
</div>
|
<div class="tip-box">
|
<p>二维码失效时间为半小时</p>
|
<p>请尽快提供给用户完成扫码</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import QRCode from 'qrcode';
|
export default {
|
data() {
|
return {
|
qrCode:'',
|
params:{}
|
}
|
},
|
created(){
|
//创建二维码
|
this.params = { ...this.$route.query };
|
let url = JSON.stringify(this.params)
|
//let url = `{'insAmt':'${this.params.insAmt}','userAmt':'${this.params.userAmt}','term':'${this.params.term}','inviteCode':'${this.params.inviteCode}','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>
|
.hbjl-qr-vue {
|
& {
|
min-height: 100vh;
|
background: #efefef;
|
position: relative;
|
}
|
.top-back-box {
|
width: 100%;
|
height: 117px;
|
background: url("../../../../assets/img/bg_top.png");
|
background-size: cover;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
// align-items: center;
|
.back-line-box {
|
width: 335px;
|
height: 14px;
|
background: rgba(56, 50, 87, 1);
|
border-radius: 7px;
|
margin-top: 49px;
|
}
|
.qr-box {
|
& {
|
width: 300px;
|
height: 300px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 12px 15px 0px rgba(63, 58, 80, 0.05);
|
border-radius: 0px 0px 5px 5px;
|
margin-top: -7px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
.code-box {
|
& {
|
width: 200px;
|
height: 200px;
|
background: url("../../../../assets/img/bg_code.png");
|
margin-top: 36px;
|
box-sizing: border-box;
|
padding: 8px;
|
}
|
img {
|
width: 184px;
|
height: 184px;
|
}
|
}
|
.tip-box {
|
& {
|
text-align: center;
|
width: 100%;
|
}
|
p {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
