<!--
|
* @Author: 陈登伟丶
|
* @Date: 2019-08-21 15:01:00
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-03 17:24:25
|
* @Description:
|
-->
|
<template>
|
<div class="register h-100-g">
|
<v-navbar title="商户注册" fixed></v-navbar>
|
<div v-if="!base64" :style="{'height':height+'px'}">
|
|
|
|
<!-- <div class="layout-box" ref="register">
|
<div class="nav-bar-header"></div>
|
|
|
|
<div class="qr-box">
|
<div class="qr-nav"></div>
|
<p class="qr-title">
|
<img :src="IMG1" alt="">
|
</p>
|
<p class="qr-tip">综合分期平台</p>
|
<div class="qr-code" :style="{backgroundImage:'url('+ require('@/assets/img/bg-qr-code.png') +')'}">
|
<div ref="QRCode1">
|
<img :src="dataUrl" alt="">
|
</div>
|
</div>
|
<p class="qr-tip2"> <img :src="IMG2" alt=""></p>
|
</div>
|
|
|
|
<div class="recommed-box">
|
<div class="recommed-list">
|
<div class="recommed-item" v-for="(item,index) in dataList" :key="index">
|
<svg class="icon" aria-hidden="true">
|
<use :xlink:href="item.icon"></use>
|
</svg>
|
<p class="recommed-title" v-text="item.title">手机分期</p>
|
</div>
|
</div>
|
<p class="t-end">注册完成后请关注“<span style="color: #896EDB">和微分</span>”公众号</p>
|
</div>
|
</div>
|
|
|
|
|
<div class="circle c1"></div>
|
<div class="circle c2"></div>
|
<div class="circle c3"></div> -->
|
<div class="layout-box h-100-g" ref="register">
|
<div class="qr-code">
|
<div ref="QRCode1">
|
<img :src="dataUrl" alt="">
|
</div>
|
</div>
|
<img src="static/img/share_pic.png" class="img-fluid-g" alt="">
|
</div>
|
</div>
|
|
<div v-else>
|
<img :src="base64" alt="" class="img-fluid-g">
|
</div>
|
<div class="ser-phone" style="font-size: 12px; color: #666;text-align: center;width: 100%;position: absolute;bottom: 20px;">
|
客服电话：028-86043722
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapGetters
|
} from 'vuex';
|
import QRCode from 'qrcode';
|
import html2canvas from 'html2canvas';
|
import IMG1 from '@/assets/img/zxsyt.png';
|
import IMG2 from '@/assets/img/shsaom.png';
|
|
export default {
|
name: "register",
|
data() {
|
return {
|
base64: '',
|
dataUrl: '',
|
qrCodeBase64Url: '',
|
|
IMG1: IMG1,
|
IMG2: IMG2,
|
height: document.body.clientHeight - 44,
|
|
dataList: [{
|
title: '花呗分期',
|
icon: '#iconhuabeifenqi1'
|
},
|
{
|
title: '手机分期',
|
icon: '#iconshoujifenqi1'
|
},
|
{
|
title: '信用卡分期',
|
icon: '#iconxinyongkafenqi1'
|
},
|
{
|
title: '合约机分期',
|
icon: '#iconheyuejifenqi'
|
}
|
],
|
|
}
|
},
|
computed: {
|
...mapState(['userinfo']),
|
...mapGetters(['orgType'])
|
},
|
mounted() {
|
let _this = this;
|
// let url = {
|
// orgId: this.userinfo.orgId,
|
// orgType: this.orgType
|
// };
|
let url = location.origin + location.pathname +
|
`#/user/register-home?orgId=${this.userinfo.orgId}&orgType=${this.orgType}`
|
if(window.sessionStorage.getItem("chanSource")){
|
url = url + '&chanSource='+window.sessionStorage.getItem("chanSource");
|
}
|
QRCode.toDataURL(url, {
|
margin: 0,
|
width: 157
|
},
|
(err, url) => {
|
if (err) console.error(err);
|
_this.dataUrl = url;
|
setTimeout(() => {
|
this.createImg()
|
}, 300);
|
}
|
);
|
},
|
methods: {
|
createImg() {
|
let that = this;
|
html2canvas(this.$refs.register, {
|
backgroundColor: null
|
}).then(canvas => {
|
let base64 = canvas.toDataURL();
|
that.base64 = base64;
|
});
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.register {
|
padding-top: 44px;
|
background-color: #423d5d;
|
position: relative;
|
// overflow: hidden;
|
// padding-bottom: 50px;
|
|
.layout-box {
|
position: relative;
|
background-color: #423d5d;
|
|
}
|
|
.qr-code {
|
position: absolute;
|
width: 170px;
|
height: 170px;
|
top: 110px;
|
left: 102px;
|
.flex(center, center, warp, column);
|
img {
|
max-width: 157px;
|
}
|
}
|
}
|
</style>
|
