<!--
|
* @Author: 小明丶
|
* @Date: 2020-08-10 14:02:37
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-10-23 09:47:15
|
* @Description: 通联通道开通
|
-->
|
<template>
|
<div class="tonglian-open-page">
|
<v-navbar title="开通通联通道"></v-navbar>
|
<div class="info-box">
|
<van-cell-group>
|
<van-field
|
label-class="label-class"
|
label-width="200px"
|
input-align="right"
|
maxlength="11"
|
disabled
|
v-model="legalMblNo"
|
label="法人手机号"
|
/>
|
<van-field
|
v-model="authCode"
|
input-align="right"
|
center
|
clearable
|
maxlength="6"
|
label="验证码"
|
placeholder="请输入短信验证码"
|
>
|
<template #button>
|
<button class="code-btn" :disabled="btnDis" @click="getCode">{{btnText}}</button>
|
</template>
|
</van-field>
|
</van-cell-group>
|
</div>
|
<p style="font-size:12px;color:#666;padding:20px 1vw">您正在开通网商银行订单账款服务，开通后可使用和微分钱包服务。请点击合同查看并确认后勾选以提交申请。</p>
|
|
<van-checkbox v-model="checked" icon-size="16px" checked-color="#896EDB" style="padding:0 2vw">
|
<span style="font-size:12px;color:#896EDB" @click.stop="ShowAgreen = true">《网商银行订单账款合同》</span>
|
</van-checkbox>
|
|
|
|
|
<van-button
|
round
|
size="large"
|
@click="goNext"
|
color="#896EDB"
|
style="width:86vw;margin-left:7vw;margin-top:60px"
|
>提交申请</van-button>
|
<van-popup v-model="ShowAgreen">
|
<div class="agreenBox">
|
<div class="agreen-html" v-html="Agreend"></div>
|
<div class="close-agreen" @click="ShowAgreen = false">
|
<van-icon name="close" />
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Field, Toast } from "vant";
|
import { mapState } from "vuex";
|
Vue.use(Toast);
|
Vue.use(Field);
|
export default {
|
data() {
|
return {
|
btnDis: false,
|
btnText: "发送验证码",
|
authCode: "",
|
timer: "",
|
hasGetCode:1,
|
ShowAgreen:true,
|
checked:'',
|
};
|
},
|
computed: {
|
...mapState(['userinfo']),
|
legalMblNo() {
|
return JSON.parse(sessionStorage.getItem(`sib_tl_openInfo_${this.userinfo.orgId}`)).detailInfo
|
.legalMblNo;
|
},
|
},
|
created(){
|
this.Agreend = agreement4
|
},
|
methods: {
|
/**
|
* @description:下一步跳转
|
* @return void
|
* **/
|
goNext() {
|
if(this.authCode==''){
|
Toast.fail('请输入验证码');
|
return false
|
}
|
if(!this.checked){
|
Toast.fail('请阅读并勾选《网商银行订单账款合同》');
|
return false
|
}
|
let obj = JSON.parse(sessionStorage.getItem(`sib_tl_openInfo_${this.userinfo.orgId}`));
|
|
let picIdList = {
|
licencePhotos: obj.detailInfo.licencePhotos,
|
cardFrontPhotos: obj.detailInfo.cardFrontPhotos,
|
cardBackPhotos: obj.detailInfo.cardBackPhotos,
|
handCardPhotos: obj.detailInfo.handCardPhotos,
|
storeInnerPhotos: obj.detailInfo.storeInnerPhotos,
|
storeSignPhotos: obj.detailInfo.storeSignPhotos,
|
industryLicensePhotos: obj.detailInfo.industryLicensePhotos
|
};
|
// for (let i in this.uploadObj) {
|
// this.uploadObj[i].forEach(item => {
|
// picIdList[i].push(item.id + "");
|
// });
|
// }
|
if(this.hasGetCode==2){
|
this.$api
|
.tltMerOpenOpen({
|
...obj.detailInfo,
|
authCode:this.authCode
|
})
|
.then((res) => {
|
sessionStorage.removeItem(`sib_tl_openInfo_${this.userinfo.orgId}`)
|
sessionStorage.removeItem(`sib_tl_pic_${this.userinfo.orgId}`)
|
this.$router.push({
|
path: "/tonglian/open-result",
|
query: {
|
...this.$route.query,
|
nck:true
|
},
|
});
|
});
|
}else{
|
Toast.fail('请获取验证码');
|
}
|
|
},
|
/**
|
* @description:获取验证码
|
* @return void
|
* **/
|
getCode() {
|
this.$api
|
.tltMerOpenSendSmsCode({
|
mblNo: this.legalMblNo,
|
})
|
.then((res) => {
|
this.hasGetCode = 2
|
this.btnDis = true;
|
this.btnText = 60;
|
this.timer = setInterval(() => {
|
if (this.btnText == 1) {
|
this.btnText = "重新获取";
|
this.btnDis = false;
|
clearInterval(this.timer);
|
} else {
|
this.btnText = --this.btnText;
|
}
|
}, 1000);
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.tonglian-open-page {
|
& {
|
min-height: 100vh;
|
background: #f5f5f7;
|
}
|
/deep/.label-class{
|
font-size: 16px;
|
color: #333;
|
}
|
.info-box {
|
margin-top: 10px;
|
width: 98vw;
|
margin-left: 1vw;
|
}
|
.code-btn {
|
border: 0;
|
border-left: 1px solid #e6e6e6;
|
background: #fff;
|
outline: none;
|
color: #896edb;
|
padding-right: 0;
|
text-align: right;
|
}
|
.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;
|
}
|
}
|
}
|
</style>
|
