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>
			<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="请填写手机号" @input='phoneinput' 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  class="con-list" style='width:70%;position:relative;'>
				<input style='text-align:right;' 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,
				identityAuthenticationInfos:{},
			}
		},
		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.verifyCode) {
					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.amendprice()


			},
			phoneinput(e) {
				console.log(e.detail.value.length)
				if (e.detail.value.length == 11) {
					this.codestatus = true
				}
			},
			amendprice() {
				var that = this
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.identityAuthenticationInfo.customerPhone,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
							that.identityAuthenticationInfo.commonId = that.userInfo.id
							that.identityAuthenticationInfo.payeeAddressUrl = that.bankid.toString()
							that.identityAuthenticationInfo.compId = "2710b21efc1e4393930c5dc800010dc4"
							uni.showModal({
								content: "粮商身份信息审核通过后不可修改，是否确定提交？",
								showCancel: true,
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										that.identityAuthenticationInfos.customerPhone = that.identityAuthenticationInfo.customerPhone
										that.$api.doRequest('get',
												'/identityAuthenticationInfo/selectPhone', that
												.identityAuthenticationInfos)
											.then(res => {
												if (res.data.code == '11018') {
													uni.showModal({
														title: '提示',
														content: '该手机号已认证过个人粮商，再次认证将覆盖之前的认证信息，是否确定认证？',
														success: function(res) {
															if (res.confirm) {
																that.$api.doRequest('post',
																		'/identityAuthenticationInfo/api/addIdentityAuthenticationInfo',that.identityAuthenticationInfo)
																	.then(res => {
																		if (res.data.code == 200) {
																			uni.showToast({
																				title: '提交成功',
																				icon: 'none',
																				duration: 2000
																			})
																			uni.navigateTo({
																				url: `/pages/attestation/indexTwo`,
																			})
																		}
																	})
															} else if (res.cancel) {
																uni.showToast({
																	title: '提交失败',
																	icon: 'none',
																	duration: 2000
																})
															}
														}
													});
												} else if (res.data.code == 200) {
													that.$api.doRequest('post',
															'/identityAuthenticationInfo/api/addIdentityAuthenticationInfo',
															that.identityAuthenticationInfo)
														.then(res => {
															if (res.data.code == 200) {
																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) {
										// console.log('用户点击取消');
									}
								}
							})
						} 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;
		font-size:14px;
	}

	.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: 12px;
	}

	.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 {
		background:#22C572;
		color:#fff;
	}

	.words {
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
	}

	.floats {
		position: relative;
		top: -150px;
		text-align: center;
	}
</style>