yiliangyiyun-app/pageD/identity/driverIdentityTwo.vue

<template>
	<view class="center">
		<!-- 车辆信息 -->
		<view class="information">
			<view class="c-row">
				<text class="tit">货车信息</text>
				<view class="con-list">
					<image v-bind:src="opencar" class="open" opencarboolean @click="opencarclick"></image>
				</view>
			</view>
		</view>
		<view class="informations" v-if="opencarboolean == true" v-for="(item , index) in driverCarInfoList"
			:Key="index">
			<view class="c-row ">
				<text class="tit">车辆 -{{index+1}}</text>
				<view class="con-list">
					<view>
					<image src="../../static/img/jiaoyi/shanchu@2x.png" class="eliminate" @click="carDel(index)">
					</image>
					</view>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">车牌号</text>
				<view class="con-list">
					<input placeholder="请填写车牌号" placeholder-style="font-size: 14px;color:#AFB3BF;" maxlength = "7" name="input" v-model="item.carNumber"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">车型</text>
				<picker @change="ModelChange($event,index)" :value="ModelIndex" :range="ModelType" class="con-list">
					<view class="picker " v-model="item.carModel">
						{{item.carModel ?item.carModel:'请选择车型'}}
					</view>
				</picker>
			</view>
			<view class="c-row b-b">
				<text class="tit">不含车头车长（米）</text>
				<picker v-if="carchength" @change="carLongChange($event,index)" :value="carLongIndex"
					:range="carLongType" class="con-list">
					<view class="picker" v-model="item.carLength">
						{{item.carLength?item.carLength:'请选择车长'}}
					</view>
				</picker>
				<view v-else class="con-list">
					<input placeholder="请填写车长(米)" name="input" v-model="item.carLength"></input>
				</view>
				<button v-if="carchength" class='cu-btn bg-green shadow' @click="changeCarChength">填写</button>
				<button v-else class='cu-btn bg-green shadow' @click="changeCarChength">选择</button>
			</view>
			<view class="c-row b-b">
				<text class="tit">载重（吨）</text>
				<view class="con-list">
					<input placeholder="请填写载重（吨）"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="item.carLoad"></input>
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">出厂年份</text>
				<view class="con-list">
					<view @click='yearchange'>{{year[index] == null?"请选择出厂年份":year[index]}}</view>
					<u-picker :params='params' @confirm='yearpicker($event,index)' v-model="show" mode="time" :start-year="startData" :end-year="endData">
					</u-picker>
				</view>
			</view>
		</view>
		<button class="btnAdd" v-if="opencarboolean == true" @click="carAdd">
			<image style='width:16px;height:16px;margin-right:3px;position:relative;top:2px;' src="../../static/img/add@3x.png" mode=""></image>
			<texe>添加车辆</texe>
		</button>
		<!-- 账户信息 -->
		<view class="information">
			<view class="c-row">
				<text class="tit">账户信息</text>
				<view class="con-list">
						<image v-bind:src="openuser" class="open" openuserboolean @click="openuserclick"></image>
				</view>
			</view>
		</view>

		<view class="informations" v-if="openuserboolean == true" v-for="(items , index) in driverPayeeInfoList"
			:Key="index">
			<view class="c-row ">
				<text class="tit">账户 -{{index+1}}</text>
				<view class="con-list">
					<view>
						<image src="../../static/img/jiaoyi/shanchu@2x.png" class="eliminate" @click="userDel(index)">
						</image>
					</view>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">账户类型</text>
				<picker @change="accountChange($event,index)" :value="accountarr[index]" :range="accountType"
					class="con-list">
					<view class="picker" v-model="items.accountType">
						{{accountarr[index] != null ? accountarr[index]:'个人账户'}}
					</view>
				</picker>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡照片（可选）</text>
				<view class="con-list">
					<view v-if="bankimg[index] == null" @click="bankimgs(index)">请上传照片</view>
					<view v-if="bankimg[index] != null" @click="bankimgs(index)">
						<image v-bind:src="bankimg[index]" style="width: 40px; height: 40px;"></image>
					</view>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡号</text>
				<view class="con-list">
					<input placeholder="请输入银行卡号"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.bankCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户行</text>
				<view class="con-list">
					<input placeholder="请输入开户行"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.bankDeposit"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户支行</text>
				<picker v-if="subBranch" @change="bankChange($event,index)" :value="bankarr[index]" :range="bankType[index]"
					class="con-list">
					<view class="con-list">
						{{bankarr[index] != null?bankarr[index]:'请选择开户支行'}}
					</view>
				</picker>
				<view v-else class="con-list">
					<input placeholder="请填写开户支行"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.bankDepositBranch"></input>
				</view>
				<button v-if="subBranch" class='cu-btn bg-green shadow' @click="subBranchChength">填写</button>
				<button v-else class='cu-btn bg-green shadow' @click="subBranchChength">识别</button>
			</view>
			<view class="c-row b-b" v-if="items.accountType == '个人账户'"> 
				<text class="tit">收款人姓名</text>
				<view class="con-list">
					<input placeholder="请输入收款人姓名"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.payeeName"></input>
				</view>
			</view>
			<view class="c-row " v-if="items.accountType == '个人账户'">
				<text class="tit">收款人身份证号</text>
				<view class="con-list">
					<input placeholder="请输入收款人身份证号"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.payeeNumberCard"></input>
				</view>
			</view>	
			<view class="c-row " v-if="items.accountType == '企业账户'">
				<text class="tit">企业名称</text>
				<view class="con-list">
					<input placeholder="请输入企业名称"placeholder-style="font-size: 14px;color:#AFB3BF;" name="input" v-model="items.compName"></input>
				</view>
			</view>
		</view>
		<button class="btnAdd" v-if="openuserboolean == true && this.driverPayeeInfoList.length < 10" @click="userAdd()" >
			<image style='width:16px;height:16px;margin-right:3px;position:relative;top:2px;' src="../../static/img/add@3x.png" mode=""></image>
			<texe>添加账户</texe>
		</button>
		<button class="btns btn" @click="jumpUrl">下一步</button>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				opencar: "../../static/img/authentication/down2@3x.png",
				openuser: "../../static/img/authentication/down2@3x.png",
				opencarboolean: false,
				openuserboolean: false,
				driverCarInfoList: [{
					carNumber: '',
					carModel: "",
					carLength: "",
					carLoad: "",
					yearManufacture: "",
				}],
				driverPayeeInfoList: [{
					accountType: "个人账户",
					accountTypeFlag: "1",
					accountIndex: '0',
					binkindex: 0,
					cardAddressUrl: "",
					bankCard: "",
					bankDeposit: "",
					bankDepositBranch: "",
					payeeName: "",
					payeeNumberCard:"",
				}],
				ModelIndex: 0,
				Model: '',
				ModelType: ["高栏", "集装箱", "自卸车"],
				carLong: '',
				carLongIndex: 0,
				carLongType: ['13', '9.6', '8.2', '8.7', '11.7', '12.5', '13.7', '15', '16', '17.5'],
				DriverViewInfo: {},
				bankimg: [],
				bankImgs1: {},
				bankIndex: -1,
				bankType: [],
				accountType: ["个人账户", "企业账户"],
				accountarr: [],
				bankarr: [],
				show: false,
				carchength: true,
				subBranch:true,
				params: {
					year: true,
				},
				year: [],
				default_time:'',
				carModelType: [],
				carLengtharr: [],
			}
		},
		computed:{
			startData(){
				var data = new Date()
				return data.getFullYear() - 30
			},
			endData(){
				var data = new Date()
				return data.getFullYear()
			}
		},
		onLoad(options) {
			this.DriverViewInfo = JSON.parse(options.DriverViewInfo)
			this.driverPayeeInfoList[0].payeeName = this.DriverViewInfo.driverName
			this.driverPayeeInfoList[0].payeeNumberCard = this.DriverViewInfo.numberCard
		},
		methods: {
			subBranchChength(){
				this.subBranch = !this.subBranch
			},
			changeCarChength() {
				this.carchength = !this.carchength
			},
			yearchange() {
				this.show = true
			},
			yearpicker(e, index) {
				this.year[index] = e.year
				this.driverCarInfoList[index].yearManufacture = e.year
			},
			accountChange(e, index) {
				this.driverPayeeInfoList[index].accountIndex = e.detail.value
				this.driverPayeeInfoList[index].accountType = this.accountType[this.driverPayeeInfoList[index]
					.accountIndex];
				this.driverPayeeInfoList[index].accountTypeFlag= e.detail.value+1;
				this.accountarr[index] = this.accountType[e.detail.value];
			},
			bankimgs(items) {
				var that = this
				uni.chooseImage({
					success: function(res) {
						uni.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.id[0] = strToObj.url
								that.bankimg[items] = strToObj.url
								that.bankImgs1.bankImg = strToObj.url
								that.driverPayeeInfoList[items].cardAddressUrl = strToObj.url
								that.$api.doRequest('get', '/driverViewInfo/bankShibie', that
									.bankImgs1).then(res => {
									that.$set(that.driverPayeeInfoList[items], 'bankCard', res
										.data.data.bankNo)
									that.$set(that.driverPayeeInfoList[items], 'bankDeposit',
										res.data.data.bankName)
									that.bankType[items] = res.data.data.bankNameZhihang
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								})
							}
						})
					}
				})
			},
			jumpUrl() {
				for (var i = 0; i < this.driverCarInfoList.length; i++) {
					if (!this.driverCarInfoList[i].carNumber) {
						this.$api.msg('车牌号不能为空')
						return
					}
					if (this.driverCarInfoList[i].carNumber.toString().length != 7) {
						this.$api.msg('车牌号输入错误')
						return
					}
					if (!this.driverCarInfoList[i].carModel) {
						this.$api.msg('车型不能为空')
						return
					}
					if (!this.driverCarInfoList[i].carLength) {
						this.$api.msg('车长不能为空')
						return
					}
					if (this.driverCarInfoList[i].carLength > 50) {
						this.$api.msg('车长输入错误')
						return
					}
					if (this.driverCarInfoList[i].carLength.indexOf('.') != -1) {
						if (this.driverCarInfoList[i].carLength.split('.')[1].length > 1) {
							this.$api.msg('车长输入错误')
							return
						}
					}
					if (!this.driverCarInfoList[i].carLoad) {
						this.$api.msg('载重不能为空')
						return
					}
					if (this.driverCarInfoList[i].carLoad > 50) {
						this.$api.msg('载重输入错误')
						return
					}
					if (this.driverCarInfoList[i].carLoad.indexOf('.') != -1) {
						if (this.driverCarInfoList[i].carLoad.split('.')[1].length > 1) {
							this.$api.msg('载重输入错误')
							return
						}
					}
					if (!this.driverCarInfoList[i].yearManufacture) {
						this.$api.msg('出厂年份不能为空')
						return
					}
				}
				for (var i = 0; i < this.driverPayeeInfoList.length; i++) {
					if (!this.driverPayeeInfoList[i].accountType) {
						this.$api.msg('账户类型不能为空')
						return
					}
					// if (!this.driverCarInfoList[i].cardAddressUrl) {
					// 	this.$api.msg('银行卡照片不能为空')
					// }
					if (!this.driverPayeeInfoList[i].bankCard) {
						this.$api.msg('银行卡号不能为空')
						return
					}
					if (this.driverPayeeInfoList[i].bankCard.length < 16 || this.driverPayeeInfoList[i].bankCard.length >
						19) {
						this.$api.msg('银行卡号输入错误')
						return
					}
					if (!this.driverPayeeInfoList[i].bankDeposit) {
						this.$api.msg('开户行不能为空')
						return
					}
					if (this.driverPayeeInfoList[i].bankDeposit.length < 4 || this.driverPayeeInfoList[i].bankDeposit
						.length > 15) {
						this.$api.msg('开户行输入错误')
						return
					}
					if (!this.driverPayeeInfoList[i].bankDepositBranch) {
						this.$api.msg('开户支行不能为空')
						return
					}
					if (this.driverPayeeInfoList[i].bankDepositBranch.length < 4 || this.driverPayeeInfoList[i]
						.bankDepositBranch.length > 30) {
						this.$api.msg('开户支行输入错误')
						return
					}
					if(this.driverPayeeInfoList[i].accountTypeFlag==1){
						if (!this.driverPayeeInfoList[i].payeeName) {
							this.$api.msg('收款人姓名不能为空')
							return
						}
						if (this.driverPayeeInfoList[i].payeeName.length < 2 || this.driverPayeeInfoList[i].payeeName.length >
							10) {
							this.$api.msg('收款人姓名输入错误')
							return
						}
						if (!this.driverPayeeInfoList[i].payeeNumberCard) {
							this.$api.msg('收款人身份证号不能为空')
							return
						}
						if (this.driverPayeeInfoList[i].payeeNumberCard.length != 18) {
							this.$api.msg('收款人身份证号输入错误')
							return
						}
					}

				}
				this.DriverViewInfo.driverCarInfoList = this.driverCarInfoList
				this.DriverViewInfo.driverPayeeInfoList = this.driverPayeeInfoList
				this.DriverViewInfo.driverPayeeInfoList.payeeAddressUrl = this.bankimg
				var model = JSON.stringify(this.DriverViewInfo);
				uni.navigateTo({
					url: `/pageD/identity/driverIdentityThree?DriverViewInfo=` + model
				})
			},
			carAdd() {
				this.driverCarInfoList.push({
					carNumber: '',
					carModel: "",
					carLength: "",
					carLoad: "",
					yearManufacture: "",
				})
			},
			userAdd() {
				this.driverPayeeInfoList.push({
					accountType: "个人账户",
					accountIndex: '0',
					binkindex: 0,
					cardAddressUrl: "",
					bankCard: "",
					bankDeposit: "",
					bankDepositBranch: "",
					payeeName: this.DriverViewInfo.driverName,
					payeeNumberCard: this.DriverViewInfo.numberCard,
				})
			},
			carDel(index) {
				if (this.driverCarInfoList.length > 1) {
					this.driverCarInfoList.splice(index, 1)
				}
			},
			userDel(index) {
				if (this.driverPayeeInfoList.length > 1) {
					this.driverPayeeInfoList.splice(index, 1)
				}
			},
			ModelChange(e, index) {
				this.ModelIndex = e.detail.value
				this.driverCarInfoList[index].carModel = this.ModelType[this.ModelIndex];
				this.carModelType[index] = this.ModelType[this.ModelIndex];
			},
			bankChange(e, index) {
				this.driverPayeeInfoList[index].binkindex = e.detail.value
				this.$set(this.bankarr, index, this.bankType[index][this.driverPayeeInfoList[index].binkindex])
				this.driverPayeeInfoList[index].bankDepositBranch = this.bankType[index][e.detail.value];
			},
			carLongChange(e, index) {
				this.carLongIndex = e.detail.value
				this.carLong = this.carLongType[this.carLongIndex];
				this.driverCarInfoList[index].carLength = this.carLongType[this.carLongIndex];
				this.carLengtharr[index] = this.carLongType[this.carLongIndex];
			},
			opencarclick() {
				if (this.opencarboolean == false) {
					this.opencarboolean = true;
					this.opencar = "../../static/img/authentication/up2%20(3).png"
				} else if (this.opencarboolean == true) {
					this.opencarboolean = false;
					this.opencar = "../../static/img/authentication/down2@3x.png"
				}
			},
			openuserclick() {
				if (this.openuserboolean == false) {
					this.openuserboolean = true;
					this.openuser = "../../static/img/authentication/up2%20(3).png"
				} else if (this.openuserboolean == true) {
					this.openuserboolean = false;
					this.openuser = "../../static/img/authentication/down2@3x.png"
				}
			}
		}
	}
</script>

<style scoped>
	.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;
		line-height: 36px;
	}

	.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: #AFB3BF;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.open {
		width: 30rpx;
		height: 20rpx;
		position: absolute;
		right: 20px;
		margin-top: -10px;
	}

	.information {
		margin-top: 10px;
		width: 100%;
		height: 56px;
		background-color: #FFFFFF;
		border-radius: 16px;
	}

	.informations {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 20px;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		font-weight: 550;
	}
	
	.btnAdd {
		margin-top: 10px;
		background-color: #FFFFFF;
		color:#00C265;
		border: none;
	}
	.btns {
		background-color: #22C572;
		color: white;
	}

	.add {
		width: 26px;
		height: 26px;
	}

	/* 清除 */
	.eliminate {
		width: 15px;
		height: 15px;
		float: right;
	}

	.bankImg {
		width: 20px;
		height: 20px;
	}
</style>