<!--
|
* @Date: 2019-08-30 18:04:49
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2021-01-04 15:23:51
|
* @Description:
|
-->
|
<template>
|
<div class="open-huabei-page h-100-g">
|
<x-header :title="'开通' + this.$route.query.title" :left-options="{backText:'',preventGoBack:true}"
|
@on-click-back="pageGoBack"></x-header>
|
<div class="tip">请用支付宝客户端，扫一扫</div>
|
<div class="qrcode-url" v-if="qrCodeUrl">
|
<img :src="qrCodeUrl" alt="">
|
</div>
|
<f-space></f-space>
|
<f-button @on-click="handleNextStep"
|
:disabled="buttonText === '等待授权'">{{ buttonText }}</f-button>
|
|
<p class="tip">企业类型商户请使用企业支付宝账号扫码授权，个体工商户请使用经营者支付宝账号扫码授权</p>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode'
|
|
export default {
|
name: 'huaBeiOpen',
|
data() {
|
return {
|
tit:'',
|
isClickNextBtn: false, // 是否点击下一步btn的状态
|
alAccountTypeList: [],
|
qrCodeUrl: '', // 二维码图片地址
|
timeId: '', // 轮询时间id
|
buttonText: '等待授权' // 按钮文字
|
};
|
},
|
created() {
|
console.log(this.$route.query.path)
|
this.qrCodeUrl = '';
|
this.timeId = '';
|
this.buttonText = '等待授权';
|
this.isClickNextBtn = false;
|
this.init();
|
},
|
mounted(){
|
|
},
|
methods: {
|
// 点击返回
|
pageGoBack () {
|
if(this.$route.query.isCreateOrderPush || this.$route.query.isApp==1){
|
this.$router.go(-1)
|
}else{
|
this.$router.push({
|
path:'/channel-selection_sh',
|
query:{
|
...this.$route.query
|
}
|
})
|
}
|
},
|
// 检查授权
|
checkAuth (isNext) {
|
// authStatus: 0 未授权 1授权---用户授权后才能执行下一步
|
this.$api.checkAuth({
|
zfbVersion:this.$route.query.zfbVersion
|
}).then((res) => {
|
if (res.body.authStatus === 1) {
|
this.buttonText = '下一步';
|
clearTimeout(this.timeId);
|
if (isNext && !this.$route.query.isCreateOrderPush) {
|
this.$router.push({
|
path: '/huabei/alipay',
|
query: {
|
...this.$route.query
|
}
|
});
|
}
|
if(isNext && this.$route.query.isCreateOrderPush){
|
this.$router.push({
|
path:this.$route.query.path,
|
query:{
|
...this.$route.query
|
}
|
})
|
}
|
} else if(res.body.authStatus === 2){
|
// 3秒钟，轮询一次
|
this.$notify_success('请重新进入此页面');
|
}else {
|
// 3秒钟，轮询一次
|
this.timeId = setTimeout(() => {
|
this.checkAuth();
|
}, 3000);
|
}
|
}, (error) => {
|
clearTimeout(this.timeId);
|
});
|
// }
|
|
},
|
// 获取列表
|
init () {
|
this.$api.hbOpenInit({
|
zfbVersion:this.$route.query.zfbVersion
|
}).then((res) => {
|
// 这个类型列表(缓存在初始化列表， 等待上传图片的是，支付宝类型)
|
let alAccountTypeList = res.body.alAccountTypeList || [];
|
// let mccList = res.body.mccList || []
|
sessionStorage.setItem('huabei_accountTypeList', JSON.stringify(alAccountTypeList));
|
sessionStorage.setItem('huabei_mccList',JSON.stringify(res.body.mccList));
|
// sessionStorage.setItem('huabei_mccList', JSON.stringify(mccList));
|
// 如果已有开通记录 取值存起来 后面返显
|
if(res.body.detailInfo){
|
sessionStorage.setItem('huabei_detailInfo',JSON.stringify(res.body.detailInfo))
|
}
|
// 1-图片，2-路径
|
if (res.body.urlType === 1) {
|
this.qrCodeUrl = res.body.qrCodeUrl;
|
} else if (res.body.urlType === 2) {
|
// 生成图片
|
QRCode.toDataURL(res.body.qrCodeUrl)
|
.then(url => {
|
this.qrCodeUrl = url;
|
})
|
.catch(err => {
|
console.error(err)
|
});
|
}
|
// 进入这个页面，就进行授权
|
this.checkAuth(false);
|
});
|
// }
|
|
|
|
},
|
// 点击下一步
|
handleNextStep () {
|
this.checkAuth(true);
|
}
|
},
|
beforeRouteLeave(to,form,next){
|
clearTimeout(this.timeId);
|
this.qrCodeUrl = null;
|
next();
|
},
|
// destroyed() {
|
// clearTimeout(this.timeId);
|
// this.qrCodeUrl = null;
|
// },
|
|
};
|
</script>
|
|
<style lang="less">
|
.open-huabei-page {
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
|
.tip {
|
color: #999;
|
text-align: center;
|
font-size: 14px;
|
line-height: 1.6;
|
padding: 14px 8%;
|
}
|
.qrcode-url {
|
text-align: center;
|
img {
|
width: 60%;
|
height: auto;
|
border: 5px solid @color-border-theme;;
|
}
|
}
|
}
|
</style>
|
