<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-25 11:14:44
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-11-10 09:51:44
|
* @Description: 合同签署页面
|
-->
|
<template>
|
<div class="contract-signing-page">
|
<v-navbar title="订单申请" :back="backUrl"></v-navbar>
|
<div class="steps-box">
|
<div class="steps">
|
<p class="line"></p>
|
<div class="step-2">2</div>
|
<div class="step-3">3</div>
|
<div class="step-4">4</div>
|
<div class="step-5">5</div>
|
<!-- <div class="step-6">6</div> -->
|
</div>
|
</div>
|
<div class="mation-box">
|
<p>合同签署</p>
|
<p>请确保资料填写准确，并仔细阅读合同文件，以便顺利签署</p>
|
</div>
|
<div class="code-info-box">
|
<h-cell v-model="cardInfo.bankName" placeholder="请选择" isLink readonly isMust label="开户银行名称" @click.native="goBankPage"></h-cell>
|
<h-cell v-model="cardInfo.bankCardNo" isMust placeholder="请输入银行卡号" label="银行卡号" max="19"></h-cell>
|
<h-cell v-model="cardInfo.bankCardMblNo" isMust placeholder="请输入银行预留手机号" label="银行预留手机号" max="11"></h-cell>
|
<van-field v-model="verCode" center required clearable label="短信验证码" maxlength="6" placeholder="请输入短信验证码">
|
<template #button>
|
<van-button size="small" plain @click="sendCode" maxlength="6" :disabled="btnDis" type="default">{{btnText}}</van-button>
|
</template>
|
</van-field>
|
<!-- <h-cell v-model="verCode" isMust placeholder="请输入验证码" label="短信验证码">
|
<template slot="v-cell-right">
|
<div class="code-btn">
|
<input type="text" maxlength="6" v-model="verCode" />
|
<button
|
@click="sendCode"
|
:disabled="btnDis"
|
:style="btnDis?'color:#E6E6E6':'color:#62A0FF'"
|
></button>
|
</div>
|
</template>
|
</h-cell> -->
|
</div>
|
<div class="xieyi-box">
|
<div class="ridio-box">
|
<van-checkbox v-model="checked" icon-size="13px">我已仔细阅读并同意签署</van-checkbox>
|
</div>
|
<div class="text-box">
|
<p>
|
<span @click="goAgr(1)" v-if="cardInfo.contractList.indexOf(1) > -1">《保理付款服务合同》</span>
|
<span @click="goAgr(2)" v-if="cardInfo.contractList.indexOf(2) > -1">《代扣委托书》</span>
|
<span @click="goAgr(3)" v-if="cardInfo.contractList.indexOf(3) > -1">《信息授权函》</span>
|
<span @click="goAgr(5)" v-if="cardInfo.contractList.indexOf(5) > -1">《个人征信查询报送授权书》</span>
|
<span @click="goAgr(6)" v-if="cardInfo.contractList.indexOf(6) > -1">《委托担保合同》</span>
|
<span @click="goAgr(7)" v-if="cardInfo.contractList.indexOf(7) > -1">《融资担保服务申请书》</span>
|
<!-- <span @click="goAgr(4)">《重要信息告知书》</span> -->
|
<span @click="getBankContract" v-show="isShowAge">《{{bankContract}}》</span>
|
</p>
|
</div>
|
</div>
|
<div class="btn-box">
|
<van-button @click="gonext" :loading="btnLoading" :disabled="btnLoading" type="info" loading-text="加载中..." v-show="btnDisable">提交申请</van-button>
|
</div>
|
<van-dialog v-model="show" title="温馨提示" show-cancel-button @cancel="onCancel">
|
<div class="dialog-text-box">
|
<p>{{cardInfo.noticeMsg}}</p>
|
</div>
|
</van-dialog>
|
<van-dialog v-model="showErr" title="提示">
|
<div class="dialog-text-box">
|
<p>{{errMessage}}</p>
|
</div>
|
</van-dialog>
|
<van-image-preview v-model="showPdf" :images="images" @change="onChange" closeable="true" :loop="false" showIndicators="true">
|
<template v-slot:index>第{{ index+1 }}页</template>
|
</van-image-preview>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Checkbox, CheckboxGroup } from "vant";
|
import { Dialog } from "vant";
|
import { ImagePreview } from 'vant';
|
import { Field, Button } from 'vant';
|
// 全局注册
|
Vue.use(ImagePreview);
|
Vue.use(Dialog);
|
Vue.use(Checkbox);
|
Vue.use(CheckboxGroup);
|
Vue.use(Field);
|
Vue.use(Button);
|
export default {
|
computed:{
|
isShowAge(){
|
return this.bankContract;//没有协议以及当前未选中协议不展示协议
|
}
|
},
|
data() {
|
return {
|
index: 0,//合同当前查看页
|
bankContract: '',//银行协议名称
|
backUrl: "",
|
checked: false,
|
show: false,
|
showErr: false,
|
showPdf: false,
|
images: [],//合同图片列表
|
cardInfo: {
|
bankCardMblNo: '',
|
bankCardNo: '',
|
bankCode: '',
|
bankList: [],
|
bankName: '',
|
noticeMsg: '',
|
contractList:[]
|
}, //银行相关信息
|
bankId: '',
|
verCode: "", //验证码
|
btnText: "获取验证码",
|
btnDis: false,
|
errMessage: "",
|
btnDisable: true,
|
btnLoading:false
|
};
|
},
|
created() {
|
//获取顶部返回地址 首页 或者是上一页
|
this.backUrl = window.sessionStorage.backUrl;
|
//判断是否有存储在本地的签约值
|
if (sessionStorage.sigMation) {
|
//有值表示跳往查看了合同
|
this.cardInfo = JSON.parse(sessionStorage.sigMation);
|
this.bankId = sessionStorage.bankId
|
this.verCode = sessionStorage.verCodeContract
|
//第一次获取验证码时间 如果跳转合同页时时间任然大于零，取存储时间继续读秒
|
if (sessionStorage.wait > 0) {
|
this.getSecond(Number(sessionStorage.wait))
|
}
|
//本地有存储签约值时，选择银行卡回跳附值
|
if (this.$route.query.name) {
|
this.show = false;
|
this.cardInfo.bankName = this.$route.query.name;
|
this.cardInfo.bankCode = this.$route.query.code;
|
|
}
|
this.getBankContractName()
|
}
|
else {
|
// 没有本地存储就不是合同页回跳,初始化请求，判断弹窗
|
this.$api.initContInfo().then(res => {
|
this.cardInfo = res.body;
|
|
if (this.$route.query.name) {
|
this.show = false;
|
this.cardInfo.bankName = this.$route.query.name;
|
this.cardInfo.bankCode = this.$route.query.code;
|
}
|
else if (this.$route.query.whichPage) {
|
this.show = false;
|
} else {
|
res.body.bankList.forEach(e => {
|
if (e.code == this.cardInfo.bankCode) {
|
this.cardInfo.bankName = e.name;
|
}
|
});
|
this.show = true;
|
}
|
this.getBankContractName()
|
});
|
}
|
},
|
|
beforeRouteLeave(to, from, next) {
|
// 跳往指定页面清空信息
|
if (
|
to.path == "/home/index" ||
|
to.path == "/order-handling/upload-userInfo" ||
|
to.path == "/order-handling/bank-list" ||
|
to.path == "/order-handling/image-upload"
|
) {
|
sessionStorage.sigMation = "";
|
}
|
next();
|
},
|
methods: {
|
onChange(index) {
|
this.index = index;
|
},
|
//协议页面
|
goAgr(which) {
|
|
// 根据点击请求获取 合同图片列表
|
this.$api.getContInfo({
|
contType: which
|
}).then(res => {
|
this.images = res.body.contUrls
|
this.showPdf = true
|
})
|
},
|
// 获取银行协议名称
|
getBankContractName() {
|
|
if (this.cardInfo.bankCode == 'ICBC') {
|
this.bankContract = '中国工商银行快捷支付业务服务协议'
|
}
|
if (this.cardInfo.bankCode == 'ABC') {
|
this.bankContract = '农业银行快捷支付业务协议'
|
}
|
if (this.cardInfo.bankCode == 'CCB') {
|
this.bankContract = '中国建设银行总对总快捷客户授权协议'
|
}
|
if (this.cardInfo.bankCode == 'BOC') {
|
this.bankContract = '中国银行股份有限公司借记卡快捷支付服务协议'
|
}
|
if (this.cardInfo.bankCode == 'CITIC') {
|
this.bankContract = '中信银行借记卡快捷支付线上服务协议'
|
}
|
if (this.cardInfo.bankCode == 'CEB') {
|
this.bankContract = '中国光大银行客户信息验证授权协议'
|
}
|
if (this.cardInfo.bankCode == 'PAB') {
|
this.bankContract = '平安银行快捷支付业务服务协议'
|
}
|
if (this.cardInfo.bankCode == 'PSBC') {
|
this.bankContract = '中国邮政储蓄银行借记卡快捷支付业务线上服务协议'
|
}
|
if (this.cardInfo.bankCode == 'SHB') {
|
this.bankContract = '上海银行快捷支付业务线上服务协议'
|
}
|
if (this.cardInfo.bankCode == 'SPDB') {
|
this.bankContract = '浦发银行快捷支付协议'
|
}
|
if (this.cardInfo.bankCode == 'CMBC') {
|
this.bankContract = '中国民生银行快捷支付业务用户协议'
|
}
|
if (this.cardInfo.bankCode == 'CMB') {
|
this.bankContract = '招商银行快捷支付业务线上用户服务协议'
|
}
|
if (this.cardInfo.bankCode == 'GDB') {
|
this.bankContract = '广发银行—宝付快捷支付业务线上服务协议'
|
}
|
if (this.cardInfo.bankCode == '') {
|
this.bankContract = ''
|
}
|
},
|
// 获取银行协议
|
getBankContract() {
|
sessionStorage.sigMation = JSON.stringify(this.cardInfo);
|
sessionStorage.bankId = this.bankId
|
sessionStorage.verCodeContract = this.verCode
|
let agrUrl = ''
|
let title = '服务协议'
|
if (this.cardInfo.bankCode == 'ICBC') {
|
agrUrl = './static/bankPdf/ICBC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'ABC') {
|
agrUrl = './static/bankPdf/ABC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'CCB') {
|
agrUrl = './static/bankPdf/CCB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'BOC') {
|
agrUrl = './static/bankPdf/BOC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'CITIC') {
|
agrUrl = './static/bankPdf/CITIC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'CEB') {
|
agrUrl = './static/bankPdf/CEB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'PAB') {
|
agrUrl = './static/bankPdf/PAB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'PSBC') {
|
agrUrl = './static/bankPdf/PSBC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'SHB') {
|
agrUrl = './static/bankPdf/SHB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'SPDB') {
|
agrUrl = './static/bankPdf/SPDB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'CMBC') {
|
agrUrl = './static/bankPdf/CMBC.pdf'
|
}
|
if (this.cardInfo.bankCode == 'CMB') {
|
agrUrl = './static/bankPdf/CMB.pdf'
|
}
|
if (this.cardInfo.bankCode == 'GDB') {
|
agrUrl = './static/bankPdf/GDB.pdf'
|
}
|
this.$router.push({
|
path: '/agreement',
|
query: {
|
tit: title,
|
agrUrl: agrUrl
|
}
|
})
|
},
|
//跳转银行卡选择页面
|
goBankPage() {
|
sessionStorage.bankList = JSON.stringify(this.cardInfo.bankList);
|
this.$router.push({
|
path: "/order-handling/bank-list"
|
});
|
},
|
//下一步
|
gonext() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.cardInfo.bankName)) {
|
v.toast("请选择开户银行名称");
|
return;
|
}
|
if (v.checkValEmpty(this.cardInfo.bankCardNo)) {
|
v.toast("请输入银行卡号");
|
return;
|
}
|
if (!v.bankCard(this.cardInfo.bankCardNo)) {
|
v.toast("请输入正确的银行卡号");
|
return;
|
}
|
if (v.checkValEmpty(this.cardInfo.bankCardMblNo)) {
|
v.toast("请输入预留手机号");
|
return;
|
}
|
if (!v.checkPhone(this.cardInfo.bankCardMblNo)) {
|
v.toast("请输入正确的手机号");
|
return;
|
}
|
if (v.checkValEmpty(this.bankId)) {
|
v.toast("请先获取验证码");
|
return;
|
}
|
if (v.checkValEmpty(this.verCode)) {
|
v.toast("请输入验证码");
|
return;
|
}
|
if (!this.checked) {
|
v.toast("请在阅读并确认协议后勾选用户协议");
|
return;
|
}
|
let projId = localStorage.getItem('projId');
|
this.btnLoading = true;
|
this.$api.saveContInfo({ ...this.cardInfo, verCode: this.verCode, bankId: this.bankId }).then(res => {
|
this.btnLoading = false;
|
sessionStorage.sigMation = "";
|
if (projId == 100000) {
|
// F0订单跳转申请结果
|
this.$router.push({ path: '/order-handling/approval-results'});
|
} else {
|
// F1跳转
|
if(res.body.isPass==1){
|
// 1审核通过
|
this.$router.push({ path: "/order-handling/image-upload" });
|
}else{
|
this.$router.push({ path: '/order-handling/approval-results'});
|
}
|
}
|
}).catch(err => {
|
this.errMessage = err;
|
this.showErr = true;
|
this.btnLoading = false;
|
});
|
},
|
//弹窗取消
|
onCancel() {
|
this.$router.push(window.sessionStorage.backUrl);
|
},
|
//获取验证码
|
sendCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.cardInfo.bankName)) {
|
v.toast("请选择开户行");
|
return;
|
}
|
if (v.checkValEmpty(this.cardInfo.bankCardNo)) {
|
v.toast("请输入银行卡号");
|
return;
|
}
|
if (!v.bankCard(this.cardInfo.bankCardNo)) {
|
v.toast("请输入正确的银行卡号");
|
return;
|
}
|
if (v.checkValEmpty(this.cardInfo.bankCardMblNo)) {
|
v.toast("请输入预留手机号");
|
return;
|
}
|
if (!v.checkPhone(this.cardInfo.bankCardMblNo)) {
|
v.toast("请输入正确的手机号");
|
return;
|
}
|
|
this.$api
|
.bankVerCode({
|
bankCardMblNo: this.cardInfo.bankCardMblNo,
|
bankCardNo: this.cardInfo.bankCardNo,
|
bankCode: this.cardInfo.bankCode,
|
})
|
.then(res => {
|
this.getSecond(60);
|
this.bankId = res.body.bankId;
|
})
|
.catch(err => {
|
let str = err.errMsg.split("秒")[0];
|
let miao = str.split("请")[1];
|
if (miao) {
|
this.getSecond(Number(miao));
|
//this.btnDisable = false;
|
}
|
});
|
},
|
//发送验证码现在函数
|
getSecond(wait) {
|
let _this = this;
|
let _wait = wait;
|
if (wait == 0) {
|
this.btnText = "获取验证码";
|
wait = _wait;
|
this.btnDis = false;
|
} else {
|
this.btnDis = true;
|
this.btnText = "验证码(" + wait + "s)";
|
wait--;
|
sessionStorage.wait = wait
|
setTimeout(function () {
|
_this.getSecond(wait);
|
}, 1000);
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.contract-signing-page {
|
& {
|
min-height: 100vh;
|
}
|
.van-cell {
|
padding: 10px 8px;
|
}
|
.van-cell--required::before {
|
left: 2px;
|
}
|
.steps-box {
|
& {
|
}
|
.steps {
|
width: 100%;
|
height: 65px;
|
position: relative;
|
box-sizing: border-box;
|
display: flex;
|
display: -webkit-flex;
|
justify-content: space-around;
|
-webkit-justify-content: space-around;
|
align-items: center;
|
-webkit-align-items: center;
|
|
.line {
|
position: absolute;
|
right: 10%;
|
width: 90%;
|
border-bottom: 1px dashed #b3b3b3;
|
//height: 32px;
|
}
|
.step-2 {
|
z-index: 10;
|
text-align: center;
|
line-height: 30px;
|
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 18px;
|
// top: 19px;
|
}
|
.step-3 {
|
z-index: 10;
|
text-align: center;
|
line-height: 30px;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border: 0;
|
border-radius: 50%;
|
color: #fff;
|
// position: absolute;
|
// left: 90px;
|
// top: 19px;
|
}
|
.step-4 {
|
z-index: 10;
|
text-align: center;
|
line-height: 30px;
|
width: 30px;
|
height: 30px;
|
background: rgba(81, 148, 254, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 170px;
|
// top: 19px;
|
color: #fff;
|
}
|
.step-5 {
|
z-index: 10;
|
text-align: center;
|
line-height: 30px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 250px;
|
// top: 19px;
|
}
|
.step-6 {
|
z-index: 10;
|
text-align: center;
|
line-height: 30px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// right: 18px;
|
// top: 19px;
|
}
|
}
|
}
|
.mation-box {
|
width: 343px;
|
height: 79px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
border-radius: 5px;
|
margin: auto;
|
box-sizing: border-box;
|
padding: 16px 15px;
|
p:nth-of-type(1) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
margin-bottom: 10px;
|
}
|
p:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.code-info-box {
|
& {
|
box-sizing: border-box;
|
margin-top: 15px;
|
padding: 0 26px;
|
}
|
.code-btn {
|
width: 100%;
|
text-align: right;
|
display: flex;
|
position: relative;
|
// border-left: 1px solid #e6e6e6;
|
// margin-left: 5px;
|
input {
|
width: 40%;
|
border: none;
|
outline: none;
|
text-align: right;
|
}
|
// button::before{
|
// content: '';
|
// width: 1px;
|
// height: 13px;
|
// background: #E6E6E6;
|
// position: absolute;
|
// left: 100px;
|
// }
|
button {
|
width: 60%;
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
text-decoration: underline;
|
color: rgba(81, 148, 254, 1);
|
background: #fff;
|
border: 0;
|
outline: none;
|
text-align: right;
|
}
|
}
|
}
|
.xieyi-box {
|
& {
|
margin-top: 25px;
|
}
|
.ridio-box {
|
box-sizing: border-box;
|
padding-left: 16px;
|
}
|
.text-box {
|
box-sizing: border-box;
|
padding-left: 10px;
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(81, 148, 254, 1);
|
p {
|
padding-left: 20px;
|
}
|
}
|
}
|
.btn-box {
|
& {
|
margin-top: 32px;
|
text-align: center;
|
padding-bottom: 32px;
|
}
|
button {
|
width: 320px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
border: 0;
|
outline: none;
|
color: #fff;
|
}
|
}
|
.dialog-text-box {
|
padding: 24px;
|
box-sizing: border-box;
|
overflow: scroll;
|
height: 302px;
|
p {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #999;
|
line-height: 25px;
|
}
|
}
|
/deep/.van-dialog {
|
width: 313px;
|
height: 400px;
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
</style>
|
