yiliangyiyun-app/pageD/identity/companyIdentityThree.vue

<template>
	<view class="center">
		<view>
			<!-- 上传银行卡正面 -->
			<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions"
				:custom="uploadCustom" @on-progress="onProgress"></upload>
			<!-- 上传银行卡反面 -->
			<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl1" @on-error="onError" @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions1"
				:custom="uploadCustom" @on-progress="onProgress"></upload>
		</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' type="number" maxlength="11"
					v-model="identityAuthenticationInfo.customerPhone"></input>
			</view>
		</view>
		<view style='width:100%;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
			<button :class='codestatus&&!sendDisabled?"active":""' @click='obtain' class='getcode'>{{sendText}}</button>
			<view class="con-list" style='position:relative;'>
				<input style='text-align:right;' v-model='verifyCode' placeholder="请输入验证码" type="number" maxlength="6">
			</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 upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		name: "buy",
		data() {
			return {
				action: this.$uploadUrl,
				maxSize: 5 * 1024 * 1024, //限制文件大小 2M
				btnLoading: false, //防止重复点击
				isAdd: true,
				imgUrls: [],
				uploadCustom: true,
				uploadCustom1: true,
				uploadOptions: {
					"text": "上传银行卡正面",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/bankup%282%29.png"
				},
				uploadOptions1: {
					"text": "上传银行卡反面",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/banklow%282%29.png"
				},
				// 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: {
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			getImgUrl(res) {
				console.log(res)
				console.log('------------res-----------')
				let that = this
				that.bankid[0] = res
				that.bank1 = res
				that.certificates = false
				that.bankImgs1.bankImg = res
				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
					})
				})
			},
			getImgUrl1(res) {
				console.log(res)
				console.log('------------res-----------')
				let that = this
				that.bankid[1] = res
				that.bank2 = res
				that.certificatesTwo = false
				that.bankImgs1.bankImg = res
				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
					})
				})

			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {
				this.imgUrls.splice(index, 1);
			},
			obtain() {
				if (this.sendText == "获取验证码") {
					this.getcode()
				}
			},
			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) {
							if (that.userInfo) {
								that.identityAuthenticationInfo.commonId = that.userInfo.id
							} else {
								that.identityAuthenticationInfo.commonId = res.data.data.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.navigateBack({
																				delta: 3
																			})
																		}
																	})
															}
														}
													});
												} 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.navigateBack({
																	delta: 3
																})
															}
														})
												}
											}).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;
		color: white;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}

	.getcode {
		font-size: 14px;
		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;
	}
	.upload {
		margin: 20rpx 0;
	}
</style>