|
<template>
|
<div class='text-main'>
|
<!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" /> -->
|
<van-form validate-first ref="credRef">
|
<div class="bes-title">
|
<div v-if="bizType==0 || bizType==1 && this.dataInfo.status==0"> 分销个人</div>
|
<div v-else> 分销主体</div>
|
</div>
|
<!-- <van-field v-model.trim="dataForm.bankCardNo" label="银行卡号" placeholder="请输入银行卡号" :rules="bankId" name="bankId" clearable>
|
<template #button>
|
<van-icon name="scan" size="25" @click="imgClick()" />
|
</template>
|
</van-field> -->
|
<!-- <van-field readonly clickable name="noName" :value="bankName" label="银行名称" placeholder="请选择银行名称" @click="showPicker = true" :rules="noName" right-icon="arrow"/> -->
|
<div v-if="this.bizType==0 && this.dataInfo.status==0 || this.dataInfo.status==0 && this.bizType==1">
|
<van-field v-model.trim="dataForm.name" label="姓名：" readonly />
|
<van-field v-model.trim="dataForm.idNo" label="身份证号：" readonly />
|
<van-field v-model.trim="dataForm.mblNo" label="手机号：" readonly />
|
</div>
|
<div v-else>
|
<van-field v-model.trim="dataForm.confName" label="企业名称：" readonly />
|
<van-field v-model.trim="dataForm.name" label="负责人姓名：" readonly />
|
<van-field v-model.trim="dataForm.idNo" label="负责人身份证号：" label-width="140px" readonly />
|
<van-field v-model.trim="dataForm.mblNo" label="负责人手机号：" label-width="140px" readonly />
|
</div>
|
<van-field v-model.trim="dataForm.verCode" center clearable label="短信验证码" :rules="codeRules" placeholder="请输入短信验证码">
|
<template #button>
|
<van-button size="small" color="#6cc3bb" @click.stop="getCode" native-type="button" :disabled="isdisabled">{{codeText}}</van-button>
|
</template>
|
</van-field>
|
<div class="index-title">
|
<van-checkbox v-model="checked" style="height:30px; margin-right:5px" checked-color="#6cc3bb"></van-checkbox>
|
<div v-if="bizType==0 && this.dataInfo.status==0" style="color:#999999;font-size:12px"> 阅读并同意<span style="border-bottom:1px solid #00F; color:#00F" @click="contractBtn">《信息授权函》</span>的签订</div>
|
<div v-if="bizType==1 && this.dataInfo.status==0" style="color:#999999;font-size:12px"> 阅读并同意<span style="border-bottom:1px solid #00F; color:#00F" @click="contractBtn">《保理付款服务合同》</span>的签订</div>
|
<div v-if="bizType==1 && this.dataInfo.status==3" style="color:#999999;font-size:12px"> 阅读并同意<span style="border-bottom:1px solid #00F; color:#00F" @click="contractBtn">《有追索权保理业务合同s》</span>的签订</div>
|
</div>
|
<div style="margin: 16px;margin-top:30px">
|
<van-button round block color="#6cc3bb" @click="onFailed" native-type="submit">确认</van-button>
|
</div>
|
</van-form>
|
<van-popup v-model="show">
|
<!-- <div class="agreenBox">
|
<div class="agreen-html" v-html="agreementext"></div>
|
<div class="close-agreen" @click="show = false">
|
<van-icon name="close" color="#c8c9cc" />
|
</div>
|
</div> -->
|
</van-popup>
|
<van-popup v-model="showx">
|
<div class="agreenBox">
|
<div class="agreen-html" v-html="agreementextw"></div>
|
<div class="close-agreen" @click="showx = false">
|
<van-icon name="close" color="#c8c9cc" />
|
</div>
|
</div>
|
</van-popup>
|
<van-popup v-model="showPicker" position="bottom">
|
<van-picker show-toolbar :columns="dataObj.bankList" @confirm="onConfirm" @cancel="showPicker = false" value-key="name" ref="pickerRef" />
|
</van-popup>
|
<input style="float: left; display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile()" v-if="ishowFile">
|
</div>
|
</template>
|
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
|
import { repstr } from '../../../static/agreement1'
|
import { repstrw } from '../../../static/agreement2'
|
import { ImagePreview } from 'vant';
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
dataForm: {
|
},
|
dataInfo: {},
|
ishowFile: true,
|
dataObj: {},
|
showPicker: false,
|
agreementext:'',
|
agreementextw: repstrw(111,222), //代扣委託書
|
checked: false,
|
codeValue: '',
|
isdisabled: false,
|
show: false,
|
showx: false,
|
contractUrl:[],//合同预览
|
bankName: '',
|
showOverlay: false,
|
bizId: this.$route.query.bizId, //订单编号
|
bizType: this.$route.query.bizType, //订单类型
|
codeText: '获取验证码',
|
noName: [
|
{
|
required: true,
|
message: '银行名称不能为空',
|
trigger: 'onChange',
|
},
|
],
|
bankId: [
|
{
|
required: true,
|
message: '银行卡号不能为空',
|
trigger: 'onBlur',
|
},
|
{
|
validator: (value) => {
|
return /^[1-9]\d{9,29}$/.test(
|
value
|
)
|
},
|
message: '银行卡号错误，请检查！',
|
trigger: 'onBlur',
|
},
|
],
|
tel: [
|
{
|
required: true,
|
message: '预留手机号不能为空',
|
trigger: 'onBlur',
|
},
|
// {
|
// validator: (value) => {
|
// return /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(
|
// value
|
// )
|
// },
|
// message: '手机号格式错误！',
|
// trigger: 'onBlur',
|
// },
|
],
|
codeRules: [
|
{
|
required: true,
|
message: '验证码不能为空',
|
trigger: 'onBlur',
|
},
|
{
|
validator: (value) => {
|
return /^\d{6}$/.test(
|
value
|
)
|
},
|
message: '验证码必须为6位数字',
|
trigger: 'onBlur',
|
},
|
]
|
};
|
},
|
//监听属性 类似于data概念
|
computed: {},
|
//监控data中的数据变化
|
watch: {
|
dataForm: {
|
handler(newValue, oldValue) {
|
// if(newValue.bankCardNo==''){
|
this.ishowFile = false // 销毁
|
// }
|
},
|
deep: true
|
}
|
},
|
//方法集合
|
methods: {
|
bankCardNoInit() {
|
let objForm = { bizId: this.bizId, bizType: this.bizType }
|
this.$api.getBizStatus(objForm).then(res => {
|
this.dataInfo = res.body
|
if (this.dataInfo.status == 0 || Number(this.bizType) == 1 && this.dataInfo.status == 3) { //待签约状态停留在当前页面
|
this.$api.getFrontData(objForm).then(res => {
|
this.dataForm = res.body
|
})
|
}else if(this.dataInfo.status == 3 && Number(this.bizType) ==0 || this.dataInfo.status ==6 && Number(this.bizType) ==1 ){ //跳到合同已完成页面
|
this.$router.push({path:'/main/bancardsucces',query:{bizId:this.bizId,bizType:this.bizType}})
|
}else{ //跳到验证页面
|
this.$router.push({ path: '/main/queryres', query: { ...objForm } })
|
}
|
})
|
},
|
onClickLeft() {
|
|
},
|
onConfirm(value) {
|
this.bankName = value.name;
|
this.dataForm.bankCode = this.$refs.pickerRef.getValues()[0].code
|
this.showPicker = false;
|
},
|
onFailed() {
|
let mes = `请阅读并同意${this.orderType == 1 ? '信息授权函' : '保理付款服务合同'}`
|
if (!this.checked) return this.$notify(mes)
|
let objUrl
|
if (process.env.NODE_ENV === "development") { //开发环境
|
objUrl = `https://t.finlean.com/comn_business/#/main/queryres?bizId=${this.bizId}&bizType=${this.bizType}`
|
} else { //生产
|
objUrl = `${window.location.origin}/comn_business/#/main/queryres?bizId=${this.bizId}&bizType=${this.bizType}`
|
}
|
const objForm = { bizId: this.bizId, bizType: this.bizType, callbackUrl: objUrl,verCode:this.dataForm.verCode }
|
this.$api.getFaceUrl(objForm).then(res => {
|
window.location.href = res.body.faceUrl
|
})
|
// this.$refs.credRef.validate().then(() => {
|
// // 验证通过
|
// if (this.dataForm.verCode ==undefined || this.dataForm.verCode =='') return this.$notify('请输入验证码')
|
// if (!this.checked) return this.$notify('请阅读数据授权协议')
|
// this.$api.bankCardAgree({orderId:this.orderId,verCode:this.dataForm.verCode}).then(res => {
|
// this.$router.push({path:'/main/queryres',query:{orderNo:this.orderId}})
|
// })
|
// })
|
},
|
getCode(e) {
|
|
this.$refs.credRef.validate(['bankId', 'noName']).then(() => {
|
this.getVerificationCode()
|
})
|
|
},
|
setTime: function () {
|
let time = 60
|
let i = 0
|
let that = this
|
//1.在60秒之内，button上倒计时60秒，并显示
|
//2.向controller请求验证码，并发送到指定的手机号上面
|
let set = setInterval(function () {
|
that.codeText = --time + '秒后重发'
|
i++
|
//此变量用于标识只调用一次获取验证码的函数
|
if (i == 1) {
|
console.log('get code start1 ... ')
|
//使获取验证码按钮不可点击
|
that.isdisabled = true
|
// that.getVerificationCode()
|
}
|
}, 1000)
|
|
//60秒之后需要做的事情
|
setTimeout(function () {
|
//恢复获取验证码按钮可点击
|
that.isdisabled = false
|
that.codeText = '获取验证码'
|
clearInterval(set) //清除计时器
|
}, time * 1000) //60000
|
},
|
getVerificationCode: function () {
|
// 向服务器获取验证码
|
|
this.$api.sendVerifyCode({bizId: this.bizId, bizType: this.bizType}).then(res => {
|
// this.agreementextw = repstrw(this.dataObj.userName, this.dataObj.idNo, this.dataForm.bankCardMblNo, this.bankName, this.dataForm.bankCardNo);
|
this.$notify_success('验证码发送成功！')
|
this.setTime()
|
})
|
},
|
contractBtn(){ //查看合同
|
let objUrl=''
|
if (process.env.NODE_ENV === "development") { //开发环境
|
objUrl = `https://t.finlean.com`
|
} else{ //生产
|
objUrl = `${window.location.origin}`
|
}
|
this.contractUrl=[]
|
this.$api.getContInfo({bizId: this.bizId, bizType: this.bizType}).then(res=>{
|
this.contractUrl =res.body.contractUrl.map(element => {
|
return element = objUrl+element
|
})
|
ImagePreview(this.contractUrl);
|
})
|
|
},
|
//图片click
|
imgClick: function () {
|
this.ishowFile = true // 重建
|
this.$nextTick(() => {
|
document.getElementById("uploadFile").click();
|
})
|
//
|
},
|
//点击选中图片
|
readLocalFile: function () {
|
console.log(document.getElementById("uploadFile").files)
|
this.ishowFile = false // 销毁
|
var localFile = document.getElementById("uploadFile").files[0];
|
var reader = new FileReader();
|
var content;
|
var self = this;
|
reader.onload = function (event) {
|
content = event.target.result;
|
self.compress(content, 800, 0.5).then(val => {
|
val = val.substring(val.indexOf(',') + 1)
|
self.$api.bankCardOcr({ base64Img: val }).then(res => {
|
self.dataForm.bankCardNo = res.body.bankCardNo
|
|
})
|
});
|
// current.imgs.push(content); //获取图片base64代码
|
}
|
reader.onerror = function (event) {
|
alert('error')
|
}
|
content = reader.readAsDataURL(localFile, "UTF-8");
|
this.ishowFile = true // 重建
|
},
|
// 压缩图片
|
compress(base64String, w, quality) {
|
var newImage = new Image();
|
var imgWidth, imgHeight;
|
|
var promise = new Promise(resolve => (newImage.onload = resolve));
|
newImage.src = base64String;
|
return promise.then(() => {
|
imgWidth = newImage.width;
|
imgHeight = newImage.height;
|
var canvas = document.createElement("canvas");
|
var ctx = canvas.getContext("2d");
|
if (Math.max(imgWidth, imgHeight) > w) {
|
if (imgWidth > imgHeight) {
|
canvas.width = w;
|
canvas.height = (w * imgHeight) / imgWidth;
|
} else {
|
canvas.height = w;
|
canvas.width = (w * imgWidth) / imgHeight;
|
}
|
} else {
|
canvas.width = imgWidth;
|
canvas.height = imgHeight;
|
}
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
|
// var base64 = canvas.toDataURL(getMimeType(base64String), quality);
|
var base64 = canvas.toDataURL("image/jpeg", quality);
|
return base64;
|
});
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
if (!this.$route.query.bizId || !this.$route.query.bizType) return this.$toast({
|
message: '请通过有效连接访问！',
|
type:'fail',
|
duration:0,
|
overlay:true,
|
})
|
this.setTime()
|
this.bankCardNoInit()
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted() {
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.text-main {
|
background-color: @c-f5;
|
min-height: 100vh;
|
//padding-bottom: 44px;
|
.van-form {
|
margin-top: 5px;
|
}
|
.index-title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
}
|
/deep/ .van-field__right-icon .van-icon {
|
font-size: 0.5rem;
|
}
|
/deep/.van-popup__close-icon {
|
color: #c8c9cc;
|
}
|
.van-cell__title {
|
color: #999999;
|
font-size: 12px;
|
}
|
.bes-title {
|
background-color: #fff;
|
font-size: 20px;
|
font-weight: bold;
|
height: 60px;
|
div {
|
margin-left: 16px;
|
line-height: 60px;
|
}
|
}
|
}
|
.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>
|
