From 1f23194d1d50228525c67e82995c2cb1584817c2 Mon Sep 17 00:00:00 2001
From: zhouhao <787329763@qq.com>
Date: Tue, 11 Jan 2022 13:53:53 +0800
Subject: [PATCH] 修改样式
---
src/views/main/addBankcard.vue | 215 +++++++++++++++++++++++++++++++----------------------
1 files changed, 124 insertions(+), 91 deletions(-)
diff --git a/src/views/main/addBankcard.vue b/src/views/main/addBankcard.vue
index 5642d71..b53819d 100644
--- a/src/views/main/addBankcard.vue
+++ b/src/views/main/addBankcard.vue
@@ -1,41 +1,51 @@
<template>
<div class='text-main'>
- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
+ <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" /> -->
<van-form validate-first ref="credRef">
- <div class="bes-title"><div> 分销个人</div></div>
+ <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>
- <van-field v-model.trim="dataForm.bankCardMblNo" label="姓名：" readonly/>
- <van-field v-model.trim="dataForm.bankCardMblNo" label="身份证号：" readonly/>
+ <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>
-
- <!-- <van-field v-model.trim="dataForm.verCode" center clearable label="短信验证码" :rules="codeRules" placeholder="请输入短信验证码" >
+ <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="#E43A28" @click.stop="getCode" native-type="button" :disabled="isdisabled">{{codeText}}</van-button>
+ <van-button size="small" color="#6cc3bb" @click.stop="getCode" native-type="button" :disabled="isdisabled">{{codeText}}</van-button>
</template>
- </van-field> -->
+ </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="orderType==1"> 阅读并同意<span style="border-bottom:1px solid #00F; color:#00F" @click="show=true">《信息授权函》</span>的签订</div>
- <div v-if="orderType==2"> 阅读并同意<span style="border-bottom:1px solid #00F; color:#00F" @click="showx=true">《保理付款服务合同》</span>的签订</div>
+ <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">《单笔保理融资服务合同》</span>的签订</div>
</div>
<div style="margin: 16px;margin-top:30px">
- <van-button round block color="#6cc3bb" @click="onFailed" native-type="submit">确认</van-button>
+ <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="agreenBox">
<div class="agreen-html" v-html="agreementext"></div>
<div class="close-agreen" @click="show = false">
<van-icon name="close" color="#c8c9cc" />
</div>
- </div>
+ </div> -->
</van-popup>
<van-popup v-model="showx">
<div class="agreenBox">
@@ -45,11 +55,10 @@
</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>
+ <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>
</div>
</template>
@@ -57,8 +66,9 @@
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
-import { repstr } from '../../../static/agreement5'
+import { repstr } from '../../../static/agreement1'
import { repstrw } from '../../../static/agreement2'
+import { ImagePreview } from 'vant';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
@@ -66,23 +76,23 @@
//这里存放数据
return {
dataForm: {
- bankCode:'',
- bankCardNo:''
},
- ishowFile:true,
- dataObj :{},
+ dataInfo: {},
+ ishowFile: true,
+ dataObj: {},
showPicker: false,
- agreementext: '',
- agreementextw: '', //代扣委託書
+ agreementext:'',
+ agreementextw: repstrw(111,222), //代扣委託書
checked: false,
codeValue: '',
isdisabled: false,
show: false,
showx: false,
- bankName:'',
- orderId:this.$route.query.orderId, //订单编号
- orderType:this.$route.query.orderType, //订单类型
- title:this.$route.query.orderType==1?'授信信息确认':'签约信息确认',
+ contractUrl:[],//合同预览
+ bankName: '',
+ showOverlay: false,
+ bizId: this.$route.query.bizId, //订单编号
+ bizType: this.$route.query.bizType, //订单类型
codeText: '获取验证码',
noName: [
{
@@ -123,7 +133,7 @@
// trigger: 'onBlur',
// },
],
- codeRules: [
+ codeRules: [
{
required: true,
message: '验证码不能为空',
@@ -146,52 +156,52 @@
//监控data中的数据变化
watch: {
dataForm: {
- handler(newValue, oldValue) {
-// if(newValue.bankCardNo==''){
- this.ishowFile = false // 销毁
-// }
- },
- deep: true
- }
+ handler(newValue, oldValue) {
+ // if(newValue.bankCardNo==''){
+ this.ishowFile = false // 销毁
+ // }
+ },
+ deep: true
+ }
},
//方法集合
methods: {
bankCardNoInit() {
- console.log(this.orderId)
- console.log(this.orderType)
- // this.$api.bankCardInit({ orderId: this.orderId}).then(res => {
- // if (res.body.orderStatus==0){ // 待绑卡
- // this.dataForm.bankCardMblNo =res.body.mblNo
- // this.dataObj =res.body
- // this.agreementextw = repstrw(this.dataObj.userName,this.dataObj.idNo);
- // this.agreementext = repstr(this.dataObj.userName,this.dataObj.idNo);
- // }else if(res.body.orderStatus==1){ //待活体签约
- // this.$api.faceIdUrl({orderId: this.orderId}).then(res => {
- // window.location.href =res.body.url
- // })
- // }else if(res.body.orderStatus==2){ //待审批状态
- // this.$router.push({path:'/main/queryres',query:{orderId: this.orderId}})
- // }else if(res.body.orderStatus==3){ //已拒绝
- // this.$router.push({path:'/main/queryres',query:{orderNo: this.$route.query.orderId,orderStatus:3}})
- // }else if(res.body.orderStatus==4){ //待签约
- // this.$router.push({path:'/main/findPre',query:{orderId: this.$route.query.orderId}})
- // }
- // else if(res.body.orderStatus==5){//待支付首期款
+ 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() {
- // }
- // })
},
- onClickLeft(){
-
- },
- onConfirm(value) {
+ onConfirm(value) {
this.bankName = value.name;
- this.dataForm.bankCode=this.$refs.pickerRef.getValues()[0].code
+ 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 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('请输入验证码')
@@ -201,12 +211,12 @@
// })
// })
},
- getCode(e) {
-
- this.$refs.credRef.validate(['bankId','noName']).then(()=>{
- this.getVerificationCode()
+ getCode(e) {
+
+ this.$refs.credRef.validate(['bankId', 'noName']).then(() => {
+ this.getVerificationCode()
})
-
+
},
setTime: function () {
let time = 60
@@ -236,47 +246,63 @@
},
getVerificationCode: function () {
// 向服务器获取验证码
-
- this.$api.bankCardAuthMsg({...this.dataForm, orderId: this.orderId}).then(res => {
- this.agreementextw = repstrw(this.dataObj.userName,this.dataObj.idNo,this.dataForm.bankCardMblNo,this.bankName,this.dataForm.bankCardNo);
+
+ 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();
+ this.ishowFile = true // 重建
+ this.$nextTick(() => {
+ document.getElementById("uploadFile").click();
})
- //
+ //
},
//点击选中图片
readLocalFile: function () {
console.log(document.getElementById("uploadFile").files)
- this.ishowFile = false // 销毁
+ 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
-
- })
- });
+ 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 // 重建
+ this.ishowFile = true // 重建
},
- // 压缩图片
+ // 压缩图片
compress(base64String, w, quality) {
var newImage = new Image();
var imgWidth, imgHeight;
@@ -310,7 +336,14 @@
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
- this.bankCardNoInit()
+ 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() {
@@ -342,12 +375,12 @@
color: #999999;
font-size: 12px;
}
- .bes-title{
+ .bes-title {
background-color: #fff;
font-size: 20px;
font-weight: bold;
height: 60px;
- div{
+ div {
margin-left: 16px;
line-height: 60px;
}
--
Gitblit v1.8.0