yiliangyiyun-app/pageD/identity/driverIdentity.vue

<template>
	<view class="center">
		<view>
			<!-- 个人身份证正面 -->
			<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="uploadCustom1" @on-progress="onProgress"></upload>
			<!-- 个人身份证反面 -->
			<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl2" @on-error="onError" @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions2"
				:custom="uploadCustom2" @on-progress="onProgress"></upload>
		</view>
		<view class="information">
			<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="请填写身份证号" maxlength="18" name="input" v-model="DriverViewInfo.numberCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">手机号</text>
				<view class="con-list">
					<input type='number' placeholder="请填写手机号" maxlength="11" @input='phoneinput' name="input"
						v-model="DriverViewInfo.driverPhone"></input>
				</view>
			</view>
			<view style='padding:10px;' class="c-row b-b">
				<button :class='!sendDisabled?"active getcode":"getcode"' @click='getcode'>{{sendText}}</button>
				<view class="con-list">
					<input v-model='verifyCode' maxlength="6" placeholder="请输入验证码" type="text">
				</view>
			</view>
			<view class="c-row ">
				<text class="tit">常驻城市</text>
				<view class="con-list">
					<view @click='regionchange'>{{region}}</view>
					<u-picker :params='params' @confirm='regionpicker' mode="region" v-model="show"></u-picker>
				</view>
			</view>
		</view>
		<button class="btns btn" @click="jumpUrl">下一步</button>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false, //防止重复点击
				isAdd: true,
				imgUrls: [],
				uploadCustom1: true,
				uploadCustom2: true,
				uploadOptions1: {
					"text": "上传身份证头像页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				},
				uploadOptions2: {
					"text": "上传身份证国徽页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				},
				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: "../../static/img/authentication/identityup(2).png",
				id2: "../../static/img/authentication/identitylow(2).png",
				travels: "",
				drives: "",
				practices: "",
				operates: "",
				sendText: '获取验证码',
				sendDisabled: false,
				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: {},
				verifyCode: "",
				codestatus: false,
				customerPhone: '',
				addressUrl: [],
				personImgs: {},
				certificatesTwo: true,
				certificates: true,
				verification: true,
				region: "请选择常驻城市",
				show: false,
				params: {
					province: true,
					city: true,
				},
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		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;
				}
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {
				this.imgUrls.splice(index, 1);
			},
			//身份证正面
			getImgUrl1(src) {
				console.log(src)
				console.log('------------res-----------')
				let that = this;
				that.id[0] = src.data.appendixPath
				that.id1 = src.data.appendixPath
				that.certificates = false
				that.personImgs.personImg = that.id[0]
				that.$api.doRequest('get', '/driverViewInfo/personShibie', that
					.personImgs).then(res => {
					if (res.data.data.recPerson != null) {
						if (res.data.data.recPerson != "") {
							that.$set(that.DriverViewInfo, 'driverName', res
								.data.data.recPerson)
						}
					}
					if (res.data.data.recPersonNo != null) {
						if (res.data.data.recPersonNo != "") {
							that.$set(that.DriverViewInfo, 'numberCard', res
								.data.data.recPersonNo)
						}
					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			//身份证反面
			getImgUrl2(res) {
				console.log(res)
				console.log('------------res-----------')
				let that = this;
				that.id[1] = res.data.appendixPath
				that.id2 = res.data.appendixPath
				that.certificatesTwo = false
				that.personImgs.personImg = that.id[1]
				that.$api.doRequest('get', '/driverViewInfo/personShibie', that
					.personImgs).then(res => {
					if (res.data.data.recPerson != null) {
						if (res.data.data.recPerson != "") {
							that.$set(that.DriverViewInfo, 'driverName', res
								.data.data.recPerson)
						}
					}
					if (res.data.data.recPersonNo != null) {
						if (res.data.data.recPersonNo != "") {
							that.$set(that.DriverViewInfo, 'numberCard', res
								.data.data.recPersonNo)
						}
					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			phoneinput(e) {
				if (e.detail.value.length == 11) {
					this.codestatus = true
				}
			},
			regionchange() {
				this.show = 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
			},
			jumpUrl() {
				if (this.id[0] == "" || this.id[0] == null) {
					this.$api.msg('请上传身份证正面！')
					return
				}
				if (this.id[1] == "" || this.id[1] == null) {
					this.$api.msg('请上传身份证反面！')
					return
				}
				if (!this.DriverViewInfo.driverName) {
					this.$api.msg('姓名不能为空')
					return
				}
				if (this.DriverViewInfo.driverName.length < 2 || this.DriverViewInfo.driverName.length > 10) {
					this.$api.msg('姓名输入错误')
					return
				}

				if (!this.DriverViewInfo.numberCard) {
					this.$api.msg('身份证号不能为空')
					return
				}
				if (this.DriverViewInfo.numberCard.length != 18) {
					this.$api.msg('身份证号输入错误')
					return
				}
				if (!this.DriverViewInfo.driverPhone) {
					this.$api.msg('手机号不能为空')
					return
				}
				if (this.DriverViewInfo.driverPhone.length != 11) {
					this.$api.msg('手机号输入错误')
					return
				}
				if (!this.verifyCode) {
					this.$api.msg('验证码不能为空')
					return
				}
				if (this.verifyCode.length != 6) {
					this.$api.msg('验证码输入错误')
					return
				}
				if (!this.DriverViewInfo.residentCityProvincial) {
					this.$api.msg('常住城市不能为空')
					return
				}
				this.amendprice()
			},
			async amendprice() {
				var that = this
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.DriverViewInfo.driverPhone,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
							that.DriverViewInfo.cardAddressUrl = that.id.toString()
							var model = JSON.stringify(that.DriverViewInfo);
							uni.navigateTo({
								url: `/pageD/identity/driverIdentityTwo?DriverViewInfo=` + model,
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			getcode() {
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(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
								})
								return
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
						});
				} 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];
			},
			commit() {
				this.DriverViewInfo.addressUrl = this.addressUrl.toString()
				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"
				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 scoped>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

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

	.getcode {
		font-size: 14px;
		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;
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;

	}

	.getcode:after {
		border: none;
	}

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

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

	.tit {
		font-size: 14px;
	}

	.labels {
		margin: 5px 10px;
	}

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

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

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

	/* 下一步 */
	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

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

	.words {
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
	}

	.floats {
		position: relative;
		top: -150px;
		text-align: center;
	}

	.upload {
		margin: 20rpx 0;
	}
</style>