<!--
|
* @Date: 2019-08-30 14:37:51
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-02 11:07:46
|
* @Description:
|
-->
|
<template>
|
<div class="contract-qrcode-page h-100-g">
|
<x-header title="扫码办理" :left-options="{backText:''}"></x-header>
|
<div class="order-info">
|
<div v-if="qrCodeBase64Url" class='canvasImg'>
|
<img :src="qrCodeBase64Url" alt="qrcode">
|
</div>
|
<div id="QRCode" v-else class='qr-code'>
|
<div class='qeimg'>
|
<img :src="dataUrl" alt="">
|
</div>
|
</div>
|
<p class="notice">请向用户展示二维码，扫码后开始办理分期。</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
import html2canvas from 'html2canvas';
|
import QRCode from 'qrcode';
|
|
export default {
|
name: 'contract-qrcode',
|
data() {
|
return {
|
dataUrl: '',
|
qrCodeBase64Url: '',
|
params: ''
|
}
|
},
|
created(){
|
this.params = {
|
...this.$route.query
|
};
|
QRCode.toDataURL(
|
JSON.stringify(this.params), {
|
margin: 0,
|
width: 400
|
},
|
(err, url) => {
|
if (err) console.error(err);
|
this.dataUrl = url;
|
setTimeout(() => {
|
html2canvas(document.getElementById('QRCode')).then(
|
canvas => {
|
this.qrCodeBase64Url = canvas.toDataURL(
|
'image/jpeg'
|
);
|
}
|
);
|
}, 100);
|
}
|
);
|
}
|
}
|
|
</script>
|
<style lang="less" scoped>
|
.contract-qrcode-page {
|
background-color: #f1f1f1;
|
padding-top: 54px;
|
.order-info {
|
padding-top: 46px;
|
|
.canvasImg {
|
margin: 0 auto;
|
width: 220px;
|
height: 220px;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.notice {
|
padding-top: 40px;
|
text-align: center;
|
color: #666;
|
}
|
|
.qr-code {
|
background: #fff;
|
width: 220px;
|
height: 220px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
border: 4px solid @color-text-three;
|
color: @color-text-three;
|
|
.qeimg {
|
width: 200px;
|
height: 200px;
|
padding: 5px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
}
|
}
|
|
</style>
|
