yiliangyiyun-app/pageD/identity/driverIdentityEdit.vue

<template>
	<view class="center">
		<view>
			<view>
				<view style="margin: 0 auto;" v-if="id != ''" @click="idUp">
					<image v-bind:src="id1" class="picture"></image>
				</view>

				<view style="margin: 0 auto;" v-if="id2 != ''" @click="idLow">
					<image v-bind:src="id2" class="picture"></image>
				</view>
			</view>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">姓名</text>
					<view class="con-list">
						<input placeholder="请填写姓名" name="input" v-model="DriverViewInfo.driverName"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">身份证号</text>
					<view class="con-list">
						<input placeholder="请填写身份证号" name="input" v-model="DriverViewInfo.numberCard"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">手机号</text>
					<view class="con-list">
						<input placeholder="请填写手机号" name="input" v-model="DriverViewInfo.driverPhone"></input>
					</view>
				</view>
				<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
					<button :class='!sendDisabled?"getcode active":"getcode"' @click='getcode'
						>{{sendText}}</button>
					<view style='width:70%;position:relative;margin-left: 200rpx;'>
						<view class="con-list">
							<!-- style='width:70%;position:relative;margin-left: 200px;' -->
							<input v-model='verifyCode' placeholder="请输入验证码" type="text">
						</view>

					</view>
				</view>
				<view class="c-row ">
					<text class="tit">常驻城市</text>
					<view class="con-list">
						<view @click='regionchange'>{{region}}</view>
						<u-picker :params='params1' @confirm='regionpicker' mode="region" v-model="show1"></u-picker>
					</view>
				</view>
			</view>


		</view>
		<!-- 车辆信息 -->
		<view class="information">
			<view class="c-row">
				<text class="tit" style="line-height: 36px;">货车信息</text>
				<view class="con-list">
					<image v-bind:src="opencar" class="open"  @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">
					<image src="../../static/img/jiaoyi/shanchu@2x.png" class="eliminate" @click="carDel(index)">
					</image>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">车牌号</text>
				<view class="con-list">
					<input placeholder="请填写车牌号" name="input" v-model="item.carNumber"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">车型</text>
				<picker @change="ModelChange" :value="ModelIndex" :range="ModelType" class="con-list">
					<view class="picker " v-model="item.carModel">
						{{ModelIndex>-1?ModelType[ModelIndex]:'请选择车型'}}
					</view>
				</picker>
				<!-- </view> -->
			</view>
			<view class="c-row b-b">
				<text class="tit">不含车头车长（米）</text>
				<picker @change="carLongChange" :value="carLongIndex" :range="carLongType" class="con-list"
					v-if="carchength">
					<view class="picker" v-model="item.carLength">
						{{carLongIndex>-1?carLongType[carLongIndex]:'请选择车长'}}
					</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="请填写载重（吨）" name="input" v-model="item.carLoad"></input>
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">出厂年份</text>
				<view class="con-list">
					<view @click='yearchange'>{{item.yearManufacture == null?"请选择出厂年份":item.yearManufacture}}</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="btn" v-if="opencarboolean == true" @click="carAdd">
			<image src="../../static/img/jiaoyi/ic_fabu@3x.png" class="add" style="top: 8px;"></image>
			<texe>添加车辆</texe>
		</button>
		<!-- 账户信息 -->
		<view class="information">
			<view class="c-row">
				<text class="tit" style="line-height: 36px;">账户信息</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="labels"> 账户 -？</view> -->
			<view class="c-row ">
				<text class="tit">账户 -{{index+1}}</text>
				<view class="con-list">
					<image src="../../static/img/jiaoyi/shanchu@2x.png" class="eliminate" @click="userDel(index)">
					</image>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">账户类型</text>
				<view class="con-list">
					<input placeholder="请填写账户类型" name="input" v-model="items.accountType"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡照片（可选）</text>
				<view class="con-list">
					<!-- <input placeholder="请上传照片" name="input" v-model="items.payeeAddressUrl" @clisk="bankimg(items)"></input> -->
					<view v-if="bankimg == ''" @click="bankimgs(index)">请上传照片</view>
					<view v-if="bankimg != ''" @click="bankimgs(index)">
						<image v-bind:src="bankimg" 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="请输入银行卡号" 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="请输入开户行" name="input" v-model="items.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>
			</view>
			<view class="c-row b-b">
				<text class="tit">收款人姓名</text>
				<view class="con-list">
					<input placeholder="请输入收款人姓名" name="input" v-model="items.payeeName"></input>
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">收款人身份证号</text>
				<view class="con-list">
					<input placeholder="请输入收款人身份证号" name="input" v-model="items.payeeNumberCard"></input>
				</view>
			</view>
		</view>
		<button class="btn" v-if="openuserboolean == true" @click="userAdd()">
			<image src="../../static/img/jiaoyi/ic_fabu@3x.png" class="add" style="top: 8px;"></image>
			<text style="margin-top: -2px;">添加账户</text>
		</button>
		<view class="fujians" v-if="travels != ''" @click="travel">
			<view class="c-row b-b">
				<text class="picturebiaoti">行驶证</text>
			</view>
			<image v-bind:src="travels" class="picture"></image>
		</view>
		<view class="fujians" v-if="drives != ''" @click="drive">
			<view class="c-row b-b">
				<text class="picturebiaoti">驾驶证</text>
			</view>
			<image v-bind:src="drives" class="picture"></image>
		</view>
		<view class="fujians" v-if="operates != ''" @click="operate">
			<view class="c-row b-b">
				<text class="picturebiaoti">道路运营证</text>
			</view>
			<image v-bind:src="operates" class="picture"></image>
		</view>
		<view class="fujians" v-if="practices != ''" @click="practice">
			<view class="c-row b-b">
				<text class="picturebiaoti">从业资格证</text>
			</view>
			<image v-bind:src="practices" class="picture"></image>
		</view>
		<button class="btn btns" @click="commitEdit">修改</button>

	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				goods: {},
				ModelIndex: '高栏',
				Model: '',
				ModelType: ["高栏", "集装箱", "自卸车"],
				carLong: '',
				carLongType: ['13', '9.6', '8.2', '8.7', '11.7', '12.5', '13.7', '15', '16', '17.5'],
				id: [],
				id1: "",
				id2: "",
				travels: "",
				drives: "",
				operates: "",
				practices: "",
				// bank1:"",
				// bank2:"",
				// bankid:[],
				sendText: '获取验证码',
				sendDisabled: false,
				sendText: '获取验证码',
				ModelIndex: '高栏',
				Model: '',
				ModelType: ["高栏", "集装箱", "自卸车"],
				carLong: '',
				carLongIndex: 0,
				carLongType: ['13', '9.6', '8.2', '8.7', '11.7', '12.5', '13.7', '15', '16', '17.5'],
				driverCarInfoList: [],
				driverPayeeInfoList: [],
				DriverViewInfo: {
					driverCarInfoList: [],
					driverPayeeInfoList: [],
				},
				params: {
					year: true,
				},
				params1: {
					province: true,
					city: true,
				},
				verifyCode: "",
				codestatus: false,
				customerPhone: '',
				addressUrl: [],
				opencarboolean: false,
				openuserboolean: false,
				carchength: true,
				show: false,
				show1: false,
				opencar: "../../static/img/authentication/down2@3x.png",
				openuser: "../../static/img/authentication/down2@3x.png",
				bankimg: "",
				bankImgs1: {},
				bankIndex: -1,
				bankType: [],
				year:[],
				region:"请选择常驻城市",
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		computed:{
			yearchange() {
				this.show = true
			},
			startData(){
				var data = new Date()
				return data.getFullYear() - 30
			},
			endData(){
				var data = new Date()
				return data.getFullYear()
			}
		},
		onLoad(option) {
			this.getList(option.id)
		},
		methods: {
			regionchange() {
				this.show1 = true
			},
			regionpicker(e) {
				// this.deptList.outputPrivate = e.province.label
				// this.deptList.outputCity = e.city.label
				this.region = e.province.label + '-' + e.city.label
				this.DriverViewInfo.residentCityProvincial = e.province.label + e.city.label
			},
			yearpicker(e, index) {
				this.year[index] = e.year
				this.driverCarInfoList[index].yearManufacture = e.year
			},
			changeCarChength() {
				this.carchength = !this.carchength
			},
			carAdd() {
				this.driverCarInfoList.push({
					carNumber: '',
					carModel: "",
					carLength: "",
					carLoad: "",
					yearManufacture: "",
				})
			},
			userAdd() {
				this.driverPayeeInfoList.push({
					accountType: "",
					cardAddressUrl: "",
					bankCard: "",
					bankDeposit: "",
					bankDepositBranch: "",
					payeeName: "",
					payeeNumberCard: "",
				})
			},
			carDel(index) {
				if (this.driverCarInfoList.length > 1) {
					this.driverCarInfoList.splice(index, 1)
				}
			},
			userDel(index) {
				if (this.driverPayeeInfoList.length > 1) {
					this.driverPayeeInfoList.splice(index, 1)
				}
			},
			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"
				}
			},
			openfujianclick() {
				if (this.openfujianboolean == false) {
					this.openfujianboolean = true;
					this.openfujian = "../../static/img/authentication/up2%20(3).png"
				} else if (this.openfujianboolean == true) {
					this.openfujianboolean = false;
					this.openfujian = "../../static/img/authentication/down2@3x.png"
				}
			},
			bankChange(e) {
				this.bankIndex = e.detail.value
				this.Model = this.bankType[this.bankIndex];
				this.driverPayeeInfoList[index].bankDepositBranch = this.bankType[this.bankIndex];
			},
			getList(ids) {
				this.$api.doRequest('get', '/driverViewInfo/getDriver', {
						id: ids
					}, 'application/json;charset=UTF-8').then(res => {
						this.procurementPlanInfos = res.data.data
						this.DriverViewInfo = res.data.data
						this.driverCarInfoList = this.DriverViewInfo.driverCarInfoList
						this.driverPayeeInfoList = this.DriverViewInfo.driverPayeeInfoList
						this.addressUrl = this.DriverViewInfo.addressUrl.split(",")
						this.drivers = res.data.data
						if (this.drivers.cardAddressUrl != "") {
							this.id = this.drivers.cardAddressUrl.split(","),
								this.id1 = this.id[0]
							this.id2 = this.id[1]
						}
						if (this.drivers.addressUrl != "") {
							this.address = this.drivers.addressUrl.split(","),
								this.travels = this.address[0]
							this.drives = this.address[1]
							this.operates = this.address[2]
							this.practices = this.address[3]
						}
						this.region = this.DriverViewInfo.residentCityProvincial
					})
					.catch(res => {
						if(res.errmsg){
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			commitEdit() {
				console.log(this.addressUrl, "数组")
				this.DriverViewInfo.addressUrl = this.addressUrl.toString()
				console.log(this.DriverViewInfo.addressUrl, "字符串")

				this.DriverViewInfo.driverCarInfoList = this.driverCarInfoList
				this.DriverViewInfo.driverPayeeInfoList = this.driverPayeeInfoList
				this.DriverViewInfo.commonId = this.userInfo.id
				this.DriverViewInfo.cardAddressUrl = this.id.toString()
				this.DriverViewInfo.pcFlag = 0
				this.DriverViewInfo.compId = "2710b21efc1e4393930c5dc800010dc4"
				console.log(this.DriverViewInfo, "司机对象")
				this.$api.doRequest('post', '/driverViewInfo/api/editInfo', this.DriverViewInfo).then(res => {}).catch(
					res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					})
			},
			bankimgs(items) {
				console.log(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 = strToObj.url
								that.bankImgs1.bankImg = strToObj.url
								that.$api.doRequest('get', '/driverViewInfo/bankShibie', that
									.bankImgs1).then(res => {
									console.log(res)
									that.$set(that.driverPayeeInfoList[items], 'bankCard', res
										.data.data.bankNo)
									that.$set(that.driverPayeeInfoList[items], 'bankDeposit',
										res.data.data.bankName)

									that.bankType = res.data.data.bankNameZhihang
									console.log(that.ban)
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								})
							}
						})
					}
				})
			},
			idUp() {
				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.id1 = strToObj.url
							}
						})
					}
				})
			},
			idLow() {
				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[1] = strToObj.url
								that.id2 = strToObj.url
							}
						})
					}
				})
			},
			travel() {
				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.travels = strToObj.url
								that.addressUrl[0] = strToObj.url
								console.log(that.addressUrl)
							}
						})
					}
				})
			},
			drive(){
				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.drives = strToObj.url
								that.addressUrl[1] = strToObj.url
									console.log(that.addressUrl)
							}
						})
					}
				})
			},
			operate(){
				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.operates = strToObj.url
								that.addressUrl[2] = strToObj.url
								console.log(that.addressUrl)
							}
						})
					}
				})
			},
			practice(){
				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.practices = strToObj.url
								that.addressUrl[3] = strToObj.url
								console.log(that.addressUrl)
							}
						})
					},
				})
			},
			getcode() {
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(that.DriverViewInfo.driverPhone)) {
					console.log(that.DriverViewInfo.driverPhone)
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							phone: that.DriverViewInfo.driverPhone
						}).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
								})
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			ModelChange(e) {
				this.ModelIndex = e.detail.value
				this.Model = this.ModelType[this.ModelIndex];
				this.driverCarInfoList.carModel = this.ModelType[this.ModelIndex];
			},
			carLongChange(e) {
				this.carLongIndex = e.detail.value
				this.carLong = this.carLongType[this.carLongIndex];
			},

		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
	}

	.labels {
		font-size: 14px;
	}

	.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;
	}

	.getcode {
		font-size: 14px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;
		
	}
	.active {
		background: #22C572;
		color: #fff;
	}
	.uni-navigator {
		display: inline-block;
		color: #22C572;
	}

	.verificationCode {
		margin-top: 20px;
		background: #F5F6F9;
		color: #AFB3BF;
	}

	.verificationCode:after {
		border: none;
	}

	.verificationCode.active {
		background: #22C572;
		color: #fff;
	}

	.getcode {
		font-size: 14px;
		position: absolute;
		/*  right:0; */
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;

	}

	.getcode:after {
		border: none;
	}

	.getcode.active {
		background: #22C572;
		color: #fff;
	}

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

	.fujians {
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 30px;
		border-radius: 20px;
		padding: 10px 10px;
	}

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

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

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

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

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

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

	.add {
		width: 26px;
		height: 26px;
		/* background-image: url(../../static/img/jiaoyi/ic_fabu@3x.png); */
	}

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

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