前端小程序任务 sdy

pageD/identity/driverIdentity.vue

@@ -15,25 +15,27 @@
 			<view class="c-row b-b">
 				<text class="tit">姓名</text>
 				<view class="con-list">
-					<input placeholder="请填写姓名" name="input" @input="addressInput"></input>
+					<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" @input="addressInput"></input>
+					<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" @input="addressInput"></input>
+					<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>
 			
@@ -41,11 +43,11 @@
 			<view class="c-row b-b">
 				<text class="tit">常驻城市</text>
 				<view class="con-list">
-					<input placeholder="请填写常驻城市" name="input" @input="addressInput"></input>
+					<input placeholder="请填写常驻城市" name="input" v-model="DriverViewInfo.residentCityProvincial"></input>
 				</view>
 			</view>
-		
-		
+
+
 		</view>
 		<view class="margin-top">
 			<view class="labels">货车信息</view>
@@ -53,14 +55,14 @@
 			<view class="c-row b-b">
 				<text class="tit">车牌号</text>
 				<view class="con-list">
-					<input placeholder="请填写车牌号" name="input" @input="addressInput"></input>
+					<input placeholder="请填写车牌号" name="input" v-model="driverCarInfoList.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 " >
+					<view class="picker ">
 						{{ModelIndex>-1?ModelType[ModelIndex]:'请选择车型'}}
 					</view>
 				</picker>
@@ -68,7 +70,7 @@
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">不含车头车长（米）</text>
-			<!-- 	 <view class="con-list"> -->
+				<!-- 	 <view class="con-list"> -->
 				<picker @change="carLongChange" :value="carLongIndex" :range="carLongType" class="con-list">
 					<view class="picker">
 						{{carLongIndex>-1?carLongType[carLongIndex]:'请选择车长'}}
@@ -79,18 +81,18 @@
 			<view class="c-row b-b">
 				<text class="tit">载重（吨）</text>
 				<view class="con-list">
-					<input placeholder="请填写载重（吨）" name="input" @input="addressInput"></input>
+					<input placeholder="请填写载重（吨）" name="input" v-model="driverCarInfoList.carLoad"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">出厂年份</text>
 				<view class="con-list">
-					<input placeholder="请填写载重（吨）" name="input" @input="addressInput"></input>
+					<input placeholder="请填写出厂年份" name="input" v-model="driverCarInfoList.yearManufacture"></input>
 				</view>
 			</view>
-			
+
 			<button type="default">添加车辆</button>
-			
+
 		</view>
 		<view class="margin-top">
 			<view class="labels">账户信息</view>
@@ -98,60 +100,66 @@
 			<view class="c-row b-b">
 				<text class="tit">账户类型</text>
 				<view class="con-list">
-					<input placeholder="请填写账户类型" name="input" @input="addressInput"></input>
+					<input placeholder="请填写账户类型" name="input" v-model="driverPayeeInfoList.accountType"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">银行卡照片（可选）</text>
 				<view class="con-list">
-					<input placeholder="请上传照片" name="input" @input="addressInput"></input>
+					<input placeholder="请上传照片" name="input" v-model="driverPayeeInfoList.payeeAddressUrl"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">银行卡号</text>
 				<view class="con-list">
-					<input placeholder="请输入银行卡号" name="input" @input="addressInput"></input>
+					<input placeholder="请输入银行卡号" name="input" v-model="driverPayeeInfoList.bankCard"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">开户行</text>
 				<view class="con-list">
-					<input placeholder="请输入开户行" name="input" @input="addressInput"></input>
+					<input placeholder="请输入开户行" name="input" v-model="driverPayeeInfoList.bankDeposit"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">开户支行</text>
 				<view class="con-list">
-					<input placeholder="请输入开户支行" name="input" @input="addressInput"></input>
+					<input placeholder="请输入开户支行" name="input" v-model="driverPayeeInfoList.bankDepositBranch"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">收款人姓名</text>
 				<view class="con-list">
-					<input placeholder="请输入收款人姓名" name="input" @input="addressInput"></input>
+					<input placeholder="请输入收款人姓名" name="input" v-model="driverPayeeInfoList.payeeName"></input>
 				</view>
 			</view>
 			<view class="c-row b-b">
 				<text class="tit">收款人身份证号</text>
 				<view class="con-list">
-					<input placeholder="请输入收款人身份证号" name="input" @input="addressInput"></input>
+					<input placeholder="请输入收款人身份证号" name="input" v-model="driverPayeeInfoList.payeeNumberCard"></input>
 				</view>
 			</view>
 			<button type="default">添加账号</button>
 		</view>
 		<view class="margin-top">
-				<view class="labels">上传附件</view>
-			
+			<view class="labels">上传附件</view>
+
 			<button type="default">行驶证</button>
 			<button type="default">驾驶证</button>
 			<button type="default">道路运营证</button>
 			<button type="default">从业资格证</button>
 		</view>
-		
+		<view class="padding flex flex-direction">
+			<button class="cu-btn bg-red margin-tb-sm lg" @click="commit">提交</button>
+		</view>
+	</view>
 	</view>
 </template>
 
 <script>
+	import {
+	    mapState 
+	} from 'vuex';
 	export default {
 		data() {
 			return {
@@ -169,14 +177,113 @@
 				// bankid:[],
 				sendText: '获取验证码',
 
+				sendText: '获取验证码',
+				ModelIndex: '高栏',
+				Model: '',
+				ModelType: ["高栏", "集装箱", "自卸车"],
+				carLong: '',
+				carLongType: ['13', '9.6', '8.2', '8.7', '11.7', '12.5', '13.7', '15', '16', '17.5'],
+				driverCarInfoList: {},
+				driverPayeeInfoList: {},
+				DriverViewInfo: {
+					driverCarInfoList: [],
+					driverPayeeInfoList: [],
+				},
 			}
 		},
+		computed: {
+			...mapState(['hasLogin','userInfo'])
+		},
 		methods: {
-			ModelChange(e){
+			phoneinput(e) {
+				if (e.detail.value.length == 11) {
+					this.codestatus = true
+				}
+			},
+			getcode() {
+				var that = this
+				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.customerPhone)) {
+					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
+							customerPhone: this.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
+								})
+							}
+						})
+						.catch(res => {
+							uni.showToast({
+								title: res.data.message,
+								icon: 'none',
+								duration: 2000
+							})
+						});
+				} else {
+					uni.showToast({
+						title: '请输入正确的手机号',
+						icon: 'none',
+						duration: 2000
+					})
+				}
+
+			},
+			doGetVerify() {
+				const that = this
+				var phone = this.inputContent;
+				if (!phone || phone.length != 11) {
+					uni.showToast({
+						title: '请输入正确手机号！',
+						icon: 'none'
+					})
+					return
+				}
+
+				that.$api.request('user', 'sendVerifyCode', {
+					phone: phone,
+				}).then(res => {
+					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)
+				})
+
+			},
+			verifyCodeInput(e) {
+				this.verifyCode = e.detail.value
+			},
+			cancel() {
+				this.inputShow = false
+				this.inputStatus = 'none'
+				this.isPhone = false
+			},
+			ModelChange(e) {
 				this.ModelIndex = e.detail.value
 				this.Model = this.ModelType[this.ModelIndex];
+				this.driverCarInfoList.carModel = this.ModelType[this.ModelIndex];
 			},
-			carLongChange(e){
+			carLongChange(e) {
 				this.carLongIndex = e.detail.value
 				this.carLong = this.carLongType[this.carLongIndex];
 			},
@@ -256,13 +363,30 @@
 						duration: 2000
 					})
 				}
+				this.driverCarInfoList.carLength = this.carLongType[this.carLongIndex];
+			},
+			commit() {
+				
+				this.DriverViewInfo.driverCarInfoList = [this.driverCarInfoList]
+				this.DriverViewInfo.driverPayeeInfoList = [this.driverPayeeInfoList]
+				this.DriverViewInfo.commonId = this.userInfo.id
+
+		
+				this.$api.doRequest('post', '/driverViewInfo/api/addInfo', this.DriverViewInfo).then(res => {
+				}).catch(res => {
+					uni.showToast({
+						title: res.data.message,
+						icon: 'none',
+						duration: 2000
+					})
+				})
 			},
 		}
 	}
 </script>
 
 <style>
-	.center{
+	.center {
 		padding: 10px 20px;
 		}
 		.labels{
@@ -318,4 +442,77 @@
 			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>