yiliangyiyun-app/pageD/identity/companyIdentityThree.vue

<template>
	<view class="center">
		<view>
		
			<view style="margin: 0 auto;height: 240px;" v-if="bank1 != ''" @click="bankUp()">
				<image v-bind:src="bank1" class="picture"></image>
				<view class="floats" v-if="certificates == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传银行卡正面
					</view>
				</view>
			</view>
		
			<view style="margin: 0 auto;height: 240px;" v-if="bank2 != ''" @click="bankLow()">
				<image v-bind:src="bank2" class="picture"></image>
				<view class="floats" v-if="certificatesTwo == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;">
					</image>
					<view class="words">
						上传银行卡反面
					</view>
				</view>
			</view>
		</view>
		<view class="c-row b-b">
			<text class="tit">银行卡号</text>
			<view class="con-list">
				<input placeholder="请填写银行卡号" name="input" v-model="identityAuthenticationInfo.bankCard"></input>
			</view>
		</view>
		<view class="c-row b-b">
			<text class="tit">开户行</text>
			<view class="con-list">
				<input placeholder="请填写开户行" name="input" v-model="identityAuthenticationInfo.bankDeposit"></input>
			</view>
		</view>
		<view class="c-row b-b">
			<!-- <text class="tit">开户支行</text>
			<picker @change="bankChange" :value="bankIndex" :range="bankType" class="con-list">
				<view class="con-list">
					{{bankIndex>-1?bankType[bankIndex]:'请选择开户支行'}}
				</view>
			</picker> -->
			<text class="tit">开户支行</text>
			<view v-if="zhihangStatus" class="con-list">
				<picker @change="bankChange" :value="bankIndex" :range="bankType" class="con-list">
					<view class="con-list">
						{{bankIndex>-1?bankType[bankIndex]:'请选择开户支行'}}
					</view>
				</picker>
			</view>
			<view v-else class="con-list">
				<input placeholder="请填写" name="input" v-model="identityAuthenticationInfo.bankDepositBranch"></input>
			</view>
			<button v-if="zhihangStatus" class='cu-btn bg-green shadow' @click="changeZhihang">填写</button>
			<button v-else class='cu-btn bg-green shadow' @click="changeZhihang">识别</button>
		</view>
		<view class="c-row b-b" v-if="identityAuthenticationInfo.customerTypeFlag == 1">
			<text class="tit">收款人姓名</text>
			<view class="con-list">
				<input placeholder="请填写收款人姓名" name="input" v-model="identityAuthenticationInfo.payeeName"></input>
			</view>
		</view>
		<view class="c-row b-b" v-if="identityAuthenticationInfo.customerTypeFlag == 1">
			<text class="tit">收款人身份证号</text>
			<view class="con-list">
				<input placeholder="请填写收款人身份证号" name="input"
					v-model="identityAuthenticationInfo.payeeNumberCard"></input>
			</view>
		</view>
		<view class="c-row b-b">
			<text class="tit">手机号</text>
			<view class="con-list">
				<input placeholder="请填写手机号" v-model="identityAuthenticationInfo.customerPhone"></input>
			</view>
		</view>
		<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
			<button :class='codestatus&&!sendDisabled?"active":""' @click='obtain'
				class='getcode'>{{sendText}}</button>
			<view style='width:70%;position:relative;margin-left: 200px;'>
				<input v-model='verifyCode' placeholder="请输入验证码" type="number">
			</view>
		</view>
		<view class="c-row b-b" v-if="identityAuthenticationInfo.customerTypeFlag == 2">
			<text class="tit">公司地址</text>
			<view class="con-list">
				<input placeholder="请填写公司地址" name="input" v-model="identityAuthenticationInfo.compAddress"></input>
			</view>
		</view>
		<view class="c-row b-b" v-if="identityAuthenticationInfo.customerTypeFlag == 1">
			<text class="tit">联系地址</text>
			<view class="con-list">
				<input placeholder="请填写联系地址" name="input" v-model="identityAuthenticationInfo.compAddress"></input>
			</view>
		</view>
		<button class="btns btn" @click="commit">提交</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "buy",
		data() {
			return {
				bank1: "../../static/img/authentication/bankup(3).png",
				bank2: "../../static/img/authentication/banklow(3).png",
				bankid: [],
				consentStatus: true,
				consentStatus1: false,
				codestatus: false,
				verifyCode: null,
				inputStatus: 'none',
				sendText: '获取验证码',
				platform: '',
				sendDisabled: false,
				identityAuthenticationInfo: {},
				bankImgs1: {},
				bankIndex: -1,
				bankType: [],
				certificates:true,
				certificatesTwo:true,
				zhihangStatus:true,
				verification:true,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			this.identityAuthenticationInfo = JSON.parse(options.identityAuthenticationInfo)
		},
		methods: {
			obtain(){
				if(this.sendText == "获取验证码")
				this.getcode()
			},
			bankUp() {
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)
								that.bankid[0] = strToObj.url
								that.bank1 = strToObj.url
								that.certificates = false
								that.bankImgs1.bankImg = strToObj.url
								that.$api.doRequest('get', '/driverViewInfo/bankShibie', that
									.bankImgs1).then(res => {
									that.$set(that.identityAuthenticationInfo, 'bankCard', res
										.data.data.bankNo)
									that.$set(that.identityAuthenticationInfo, 'bankDeposit',
										res.data.data.bankName)
									that.bankType = res.data.data.bankNameZhihang
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								})
							}
						})
					}
				})
			},
			bankLow() {
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)
								that.bankid[1] = strToObj.url
								that.bank2 = strToObj.url
								that.certificatesTwo = false
								
							}
						})
					}
				})
			},
			bankChange(e) {
				this.bankIndex = e.detail.value
				this.Model = this.bankType[this.bankIndex];
				this.identityAuthenticationInfo.bankDepositBranch = this.bankType[this.bankIndex];
			},
			changeZhihang(){
				this.zhihangStatus = !this.zhihangStatus
			},
			commit() {
				if (this.bankid[0] == '' || this.bankid[0] == null) {
					this.$api.msg('请上传银行卡正面')
					return
				}
				if (this.bankid[1] == '' || this.bankid[1] == null) {
					this.$api.msg('请上传银行卡反面')
					return
				}
				if (!this.identityAuthenticationInfo.bankCard) {
					this.$api.msg('银行卡号不能为空')
					return
				}
				if (!this.identityAuthenticationInfo.bankDeposit) {
					this.$api.msg('开户行不能为空')
					return
				}
				if (!this.identityAuthenticationInfo.bankDepositBranch) {
					this.$api.msg('开户支行不能为空')
					return
				}
				if (!this.identityAuthenticationInfo.customerPhone) {
					this.$api.msg('手机号不能为空')
					return
				}
				if (this.identityAuthenticationInfo.customerPhone.length != 11) {
					this.$api.msg('手机号填写不正确')
					return
				}
				if(this.identityAuthenticationInfo.customerTypeFlag == 1){
					if (!this.identityAuthenticationInfo.payeeName) {
						this.$api.msg('收款人姓名不能为空')
						return
					}
					if (!this.identityAuthenticationInfo.payeeNumberCard) {
						this.$api.msg('收款人身份证号不能为空')
						return
					}
					if (!this.identityAuthenticationInfo.compAddress) {
						this.$api.msg('联系地址不能为空')
						return
					}
				}else if(this.identityAuthenticationInfo.customerTypeFlag == 2){
					if (!this.identityAuthenticationInfo.compAddress) {
						this.$api.msg('公司地址不能为空')
						return
					}  
				}
			
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.identityAuthenticationInfo.payeeAddressUrl = this.bankid.toString()
				this.amendprice()
				if(this.verification == false){
					return
				}
				this.$api.doRequest('post', '/identityAuthenticationInfo/api/addIdentityAuthenticationInfo', this
						.identityAuthenticationInfo)
					.then(res => {
						console.log(res.data.message)
						if(res.data.message == "Success"){
							uni.navigateTo({
								url: `/pages/attestation/indexTwo` ,
							})
						}else{				
								this.$api.msg(res.data.message)
								return
						}
						
						
					}).catch(res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					})
			},
			phoneinput(e){
				if(e.detail.value.length==11){
					this.codestatus=true
				}
			},
			amendprice(item) {
				var that = this
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.identityAuthenticationInfo.customerPhone,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
						
						} else {
							that.verification = false
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})	
							return false
						}
					})
					.catch(res => {
							that.verification = false
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
						return false
					});
			},
			getcode() {
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.identityAuthenticationInfo.customerPhone)) {
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							phone: this.identityAuthenticationInfo.customerPhone
						}).then(res => {
							if (res.data.code == 200) {
								that.sendDisabled = true
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = false
										that.sendText = "获取验证码"
										clearInterval(interval)
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								})
								return
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}
	.getcode {
		font-size: 14px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;
	}
	.getcode.active {
		border: none;
	}
	.words{
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
		}
		.floats{
			position: relative;
			top: -150px;
			text-align: center;
		}
	
</style>