<!--
|
* @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>
|
<div class="cell-cont-item-style">
|
<span class="title">二维码失效时间为半小时，请尽快提供给用户进行扫码</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'getQRCode',
|
data() {
|
return {
|
qrCode: '',
|
}
|
},
|
methods:{
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
},
|
created() {
|
this.params = { ...this.$route.query };
|
let url = this.$route.query.qrCode;
|
QRCode.toDataURL(
|
url,
|
{
|
margin: 1,
|
width: 400
|
},
|
(err, url) => {
|
this.qrCode = url;
|
}
|
);
|
}
|
}
|
</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: center;
|
color: #FF0000;
|
}
|
.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>
|
