yiliangyiyun-app/pageD/identity/driverIdentityEdit.vue

<template>
	<view class="center">
		<view>
			<view class="labels">司机信息</view>
			<view>
				<button type="default" @click="idUp">上传身份证正面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id != ''">
					<image v-bind:src = "id1" style="width: 100px;height: 100px;"></image>
				</view>
				<button type="default" @click="idLow">上传身份证反面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id2 != ''">
					<image v-bind:src = "id2" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<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='codestatus&&!sendDisabled?"active":""' @click='getcode'
					class='getcode'>{{sendText}}</button>
				<view style='width:70%;position:relative;margin-left: 200px;'>
				<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 b-b">
				<text class="tit">常驻城市</text>
				<view class="con-list">
					<input placeholder="请填写常驻城市" name="input" v-model="DriverViewInfo.residentCityProvincial"></input>
				</view>
			</view>


		</view>
		<view class="margin-top">
			<view class="labels">货车信息</view>
			<view class="labels"> 车辆 -？</view>
			<view class="c-row b-b">
				<text class="tit">车牌号</text>
				<view class="con-list">
					<input placeholder="请填写车牌号" name="input" v-model="driverCarInfoList[0].carNumber"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">车型</text>
				<!-- <view class="con-list"> -->
				<picker @change="ModelChange" :value="ModelIndex" :range="ModelType" class="con-list">
					<view class="picker ">
						{{ModelIndex>-1?ModelType[ModelIndex]:'请选择车型'}}
					</view>
				</picker>
				<!-- </view> -->
			</view>
			<view class="c-row b-b">
				<text class="tit">不含车头车长（米）</text>
				<!-- 	 <view class="con-list"> -->
				<picker @change="carLongChange" :value="carLongIndex" :range="carLongType" class="con-list">
					<view class="picker">
						{{carLongIndex>-1?carLongType[carLongIndex]:'请选择车长'}}
					</view>
				</picker>
				<!-- </view> -->
			</view>
			<view class="c-row b-b">
				<text class="tit">载重（吨）</text>
				<view class="con-list">
					<input placeholder="请填写载重（吨）" name="input" v-model="driverCarInfoList[0].carLoad"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">出厂年份</text>
				<view class="con-list">
					<input placeholder="请填写出厂年份" name="input" v-model="driverCarInfoList[0].yearManufacture"></input>
				</view>
			</view>

			<button type="default">添加车辆</button>

		</view>
		<view class="margin-top">
			<view class="labels">账户信息</view>
			<view class="labels"> 账户 -？</view>
			<view class="c-row b-b">
				<text class="tit">账户类型</text>
				<view class="con-list">
					<input placeholder="请填写账户类型" name="input" v-model="driverPayeeInfoList[0].accountType"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡照片（可选）</text>
				<view class="con-list">
					<input placeholder="请上传照片" name="input" v-model="driverPayeeInfoList[0].payeeAddressUrl"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡号</text>
				<view class="con-list">
					<input placeholder="请输入银行卡号" name="input" v-model="driverPayeeInfoList[0].bankCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户行</text>
				<view class="con-list">
					<input placeholder="请输入开户行" name="input" v-model="driverPayeeInfoList[0].bankDeposit"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户支行</text>
				<view class="con-list">
					<input placeholder="请输入开户支行" name="input" v-model="driverPayeeInfoList[0].bankDepositBranch"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">收款人姓名</text>
				<view class="con-list">
					<input placeholder="请输入收款人姓名" name="input" v-model="driverPayeeInfoList[0].payeeName"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">收款人身份证号</text>
				<view class="con-list">
					<input placeholder="请输入收款人身份证号" name="input" v-model="driverPayeeInfoList[0].payeeNumberCard"></input>
				</view>
			</view>
			<button type="default">添加账号</button>
		</view>
		<view class="margin-top">
			<view class="labels">上传附件</view>
			<button type="default" @click="travel">行驶证</button>
			<view style="width: 100px;margin: 0 auto;" v-if="travels != ''">
				<image v-bind:src = "travels" style="width: 100px;height: 100px;"></image>
			</view>
			<button type="default" @click="drive">驾驶证</button>
			<view style="width: 100px;margin: 0 auto;" v-if="drives != ''">
				<image v-bind:src = "drives" style="width: 100px;height: 100px;"></image>
			</view>
			<button type="default" @click="operate">道路运营证</button>
			<view style="width: 100px;margin: 0 auto;" v-if="operates != ''">
				<image v-bind:src = "operates" style="width: 100px;height: 100px;"></image>
			</view>
			<button type="default" @click="practice">从业资格证</button>
			<view style="width: 100px;margin: 0 auto;" v-if="practices != ''">
				<image v-bind:src = "practices" style="width: 100px;height: 100px;"></image>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @click="commitEdit">修改</button>
		</view>
	</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:"",
				practices:"",
				operates:"",
				// 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: [],	
				},
				verifyCode:"",
				codestatus:false,
				customerPhone: '',
				addressUrl:[],
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(option){
			this.getList(option.id)
		},
		methods: {
			// phoneinput(e) {
			// 	if (e.detail.value.length == 11) {
			// 		this.codestatus = true
			// 	}
			// },
			getList(ids) {
				this.$api.doRequest('get', '/driverViewInfo/getDriver', {
						id: ids
					}, 'application/json;charset=UTF-8').then(res => {
						console.log("成功连接")
						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(",")
						console.log(this.driverPayeeInfoList,"dsfds")
						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.practices = this.address[2]
							this.operates = this.address[3]
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.errmsg,
							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
					})
				})
			},
			idUp(){
				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.id[0] = strToObj.url
								that.id1 = strToObj.url
							}
						})
					}
				})
			},
			idLow(){
				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.id[1] = strToObj.url
								that.id2 = strToObj.url
							}
						})
					}
				})
			},
			travel(){
				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.travels = strToObj.url
								that.addressUrl[0] = strToObj.url
								console.log(that.addressUrl)
							}
						})
					}
				})
				},
				drive(){
					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.drives = strToObj.url
									that.addressUrl[1] = strToObj.url
										console.log(that.addressUrl)
								}
							})
						}
					})
					},
					operate(){
						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.operates = strToObj.url
										that.addressUrl[2] = strToObj.url
										console.log(that.addressUrl)
									}
								})
							}
						})
					},
					practice(){
						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.practices = strToObj.url
										that.addressUrl[3] = strToObj.url
										console.log(that.addressUrl)
									}
								})
							}
						})
					},
			getcode() {
				var that = this
					console.log(that.DriverViewInfo.driverPhone)
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(that.DriverViewInfo.driverPhone)) {
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							customerPhone: 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: 16px;
			font-weight: 400;
		}
		.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;
		}
		.getcode.active {
			border: none;
		}
		.uni-navigator{
			display:inline-block;
			color:#22C572;
		}
		.getcode.active {
			background: #22C572;
			color: #fff;
		}

	

	.labels {
		font-size: 16px;
		font-weight: 400;
	}

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