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)
			if(this.identityAuthenticationInfo.customerTypeFlag == 1){
				this.identityAuthenticationInfo.payeeName = this.identityAuthenticationInfo.customerName
				this.identityAuthenticationInfo.payeeNumberCard = this.identityAuthenticationInfo.customerNumberCard
			}
		},
		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 => {
									if(res.data.data.bankNo != null){
										if(res.data.data.bankNo != ""){
											that.$set(that.identityAuthenticationInfo, 'bankCard', res.data.data.bankNo)
										}
									}
									if(res.data.data.bankName != null ){
										if(res.data.data.bankName != "") {
											that.$set(that.identityAuthenticationInfo, 'bankDeposit',res.data.data.bankName)
										}
									}
									if(res.data.data.bankNameZhihang.length != 0){
											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
								that.bankImgs1.bankImg = strToObj.url
								that.$api.doRequest('get', '/driverViewInfo/bankShibie', that.bankImgs1).then(res => {
									if(res.data.data.bankNo != null){
										if(res.data.data.bankNo != ""){
											that.$set(that.identityAuthenticationInfo, 'bankCard', res.data.data.bankNo)
										}
									}
									if(res.data.data.bankName != null ){
										if(res.data.data.bankName != "") {
											that.$set(that.identityAuthenticationInfo, 'bankDeposit',res.data.data.bankName)
										}
									}
									if(res.data.data.bankNameZhihang != null){
											that.bankType = res.data.data.bankNameZhihang
									}
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								})
								
							}
						})
					}
				})
			},
			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() {
				var that=this
				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.bankCard.length < 16 || this.identityAuthenticationInfo.bankCard.length > 19 ) {
					this.$api.msg('银行卡号输入错误')
					return
				}
				if (!this.identityAuthenticationInfo.bankDeposit) {
					this.$api.msg('开户行不能为空')
					return
				}
				if (this.identityAuthenticationInfo.bankDeposit.length < 4 || this.identityAuthenticationInfo.bankDeposit.length > 15) {
					this.$api.msg('开户行输入错误')
					return
				}
				if (!this.identityAuthenticationInfo.bankDepositBranch) {
					this.$api.msg('开户支行不能为空')
					return
				}
				if (this.identityAuthenticationInfo.bankDepositBranch.length < 4 || this.identityAuthenticationInfo.bankDepositBranch.length > 30) {
					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.payeeName < 2 || this.identityAuthenticationInfo.payeeName > 10 ) {
						this.$api.msg('收款人姓名输入错误')
						return
					}
					if (!this.identityAuthenticationInfo.payeeNumberCard) {
						this.$api.msg('收款人身份证号不能为空')
						return
					}
					if (this.identityAuthenticationInfo.payeeNumberCard.length != 18) {
						this.$api.msg('收款人身份证号输入错误')
						return
					}
					if (!this.identityAuthenticationInfo.compAddress) {
						this.$api.msg('联系地址不能为空')
						return
					}
					if (this.identityAuthenticationInfo.compAddress.length < 2 || this.identityAuthenticationInfo.compAddress.length > 20) {
						this.$api.msg('联系地址输入错误')
						return
					}
				}else if(this.identityAuthenticationInfo.customerTypeFlag == 2){
					if (!this.identityAuthenticationInfo.compAddress) {
						this.$api.msg('公司地址不能为空')
						return
					}  
					if (this.identityAuthenticationInfo.compAddress.length < 2 || this.identityAuthenticationInfo.compAddress.length > 20) {
						this.$api.msg('公司地址输入错误')
						return
					}  
				}
			
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.identityAuthenticationInfo.payeeAddressUrl = this.bankid.toString()
				this.identityAuthenticationInfo.compId = "2710b21efc1e4393930c5dc800010dc4"
				if(this.amendprice() == false){
					this.$api.msg('验证码输入有误！')
					return
				}
				this.$api.doRequest('post', '/identityAuthenticationInfo/api/addIdentityAuthenticationInfo', this
						.identityAuthenticationInfo)
					.then(res => {
						if(res.data.code=='11018'){
							uni.showModal({
								title: '提示',
								content: '该手机号已认证过个人粮商，再次认证将覆盖之前的认证信息，是否确定认证？',
								success: function (res) {
									if (res.confirm) {
										that.identityAuthenticationInfo.cover=1
											that.$api.doRequest('post', '/identityAuthenticationInfo/api/editIdentityAuthenticationInfo', that.identityAuthenticationInfo).then(res => {
												uni.showToast({
													title: '提交成功',
													icon: 'none',
													duration: 2000
												})
												uni.navigateTo({
														url: `/pages/attestation/indexTwo` ,
													})
											}).catch(res => {
												uni.showToast({
													title: res.data.message,
													icon: 'none',
													duration: 2000
												})
											})
								        } else if (res.cancel) {
								          uni.showToast({
								          	title: '提交失败',
								          	icon: 'none',
								          	duration: 2000
								          })
								        }
								    }
								});
						}else if(res.data.code==200){
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							})
							uni.navigateTo({
									url: `/pages/attestation/indexTwo` ,
								})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
						
					}).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>