wangluohuoyun-app/pages/mine/editDriverCertification.vue

<template>
	<view class="content">
		<view class="top-head"></view>
		<view class="container">
			<view class="content1 content-other">
				<view class="flex row">
					<view class="left-text">姓名</view>
					<u--input placeholder="输入姓名" inputAlign='right' border="none" v-model="dataDetails.driverName">
					</u--input>
				</view>
				<view class="flex row">
					<view class="left-text">性别</view>
					<u-radio-group v-model="dataDetails.driverSex" placement="row">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>

				<view class="flex row">
					<view class="left-text">称呼</view>
					<u--input placeholder="输入姓氏" class="ch-style" inputAlign='right' border="none"
						v-model="dataDetails.driverCall" maxlength="1">
					</u--input>
					<view style='margin-left:4px;font-size:15px;' class="flex align-center"
						v-if="dataDetails.driverSex=='男'">先生</view>
					<view style='margin-left:4px;font-size:15px;' class="flex align-center" v-else>女士</view>
				</view>
				<view class="flex row noborder">
					<view class="left-text">联系电话</view>
					<u--input maxlength='11' placeholder="请输入联系电话" inputAlign='right' border="none"
						v-model="dataDetails.driverPhone">
					</u--input>
				</view>
				<view class="flex row noborder" v-if="dataDetails.driverPhone!=userInfo.phone">
					<view class="left-text">验证码</view>
					<u--input v-model="dataDetails.verifyCode" border="none" placeholder="请填写验证码"></u--input>
					<view class="yzm">
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button class="yzm-btn" @tap="getCode">{{tips}}</u-button>
					</view>
				</view>

			</view>
			<view class="content2 content-other">
				<view class="title">上传身份证人像面</view>
				<view @click.stop="uploadImg(1,1)" class="picture picture1" v-if="!dataDetails.cardAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传身份证人像面</view>
				</view>
				<view v-if="dataDetails.cardAddressUrl" @click.stop="uploadImg(1,1)" class="preview-card-img picture">
					<view @click.stop="delCard(1)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.cardAddressUrl" mode="aspectFit" style=""></image>
				</view>

				<view class="title">上传身份证国徽面</view>
				<view @click="uploadImg(2,2)" class="picture picture2" v-if="!dataDetails.cardBackAddressUrl">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传身份证国徽面</view>
				</view>
				<view v-if="dataDetails.cardBackAddressUrl" @click.stop="uploadImg(2,2)"
					class="preview-card-img picture">
					<view @click.stop="delCard(2)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.cardBackAddressUrl" mode="aspectFit" style=""></image>
				</view>
				<view class="flex row">
					<view class="left-text">身份证号</view>
					<u--input disabled placeholder="请输入身份证号" inputAlign='right' border="none"
						v-model="dataDetails.numberCard" maxlength="18">
					</u--input>
				</view>

				<view class="flex row flex-space-between">
					<view class="left-text">身份证截止日期</view>
					<view class="" @click="selectValidityPeriod">
						{{dataDetails.cardValidityDate?dataDetails.cardValidityDate:'选择身份证截止日期>'}}
					</view>
				</view>
				<view class="flex row noborder">
					<view class="left-text">身份证地址</view>
					<u--textarea v-model="dataDetails.cardAddress" border="none" placeholder="请输入身份证地址" autoHeight
						maxlength="30"></u--textarea>
					<!-- <u--input placeholder="请输入身份证地址" inputAlign='right' border="none" > 
					</u--input>-->
				</view>
			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler" @cancel='isShowcardValidity= false'>
			</u-picker>
			<itmister-date-picker :overdueContent="'身份证已过期'" :dateStatus="status" :periodOfValidity="true"
				:checkYear="year" :checkMonth="month" :checkDay="day" ref="dateEl" :startYear="1999" :futureYear="30"
				@dateConfirm="confirmValidityPeriod"></itmister-date-picker>
			<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
				@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="isShowimgType=false">
			</u-action-sheet>
			<u-toast ref="uToast"></u-toast>
		</view>
		<view class="content4">
			<view class="next-btn" @click="next()">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import permision from "@/js_sdk/wa-permission/permission.js"
	import uploadImage from '@/components/ossutil/uploadFile.js';
	var _this
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				canvasSiz: {
					width: 188,
					height: 273
				},
				status: 1,
				tips: '',
				// refCode: null,
				seconds: 30,
				year: '',
				month: '',
				day: '',
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},

				],
				validityPeriod: [],
				isShowcardValidity: false,
				uploadType: '',
				isShowimgType: false,
				dataDetails: {
					commonId: '',
					driverName: '',
					driverSex: '',
					driverCall: '',
					driverPhone: '',
					numberCard: '',
					cardAddressUrl: '',
					cardBackAddressUrl: '',
					cardValidityDate: '',
					driverType: '',
					driverLicenseHomePage: '',
					driverLicenseBackPage: '',
					driverLicenseValidityDate: '',
					drivingLicenseHomePage: '',
					drivingLicenseBackPage: '',
					drivingLicenseValidityDate: '',
					trailerLicenseHomePage: '',
					trailerLicenseBackPage: '',
					trailerLicenseValidityDate: '',
					qualificationCertificate: '',
					qualificationCertificateValidityDate: '',
					operationCertificate: '',
					operationCertificateValidityDate: '',
					trailerOperationCertificate: '',
					trailerOperationCertificateValidityDate: '',

				},
				action: this.$helper.ossUploadUrl,
				// maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				// isAdd: true,
				imagesrc: null
			};
		},
		onLoad() {
			_this = this;
			console.log(this.userInfo)
			this.get_camera_permission()
			// this.dataDetails.driverPhone = this.userInfo.phone
			this.dataDetails.commonId = this.userInfo.id
			//获取认证状态
			this.getAuthenticationStatus()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			async get_camera_permission() {
				var photol = await permision.requestAndroidPermission("android.permission.CAMERA")
				if (photol == false) {
					uni.showModal({
						title: '提示',
						content: '您已经关闭相册权限,去设置',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting()
								// plus.runtime.openURL("app-settings:");
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
				// 	}

				// } else if (columnIndex === 1) {
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
				// 	}
				// }
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.dataDetails.driverPhone)) {
					if (this.$refs.uCode.canGetCode) {

						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						_this.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
								phone: this.dataDetails.driverPhone
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();

							})
							.catch(res => {
								uni.$u.toast(res.message);
							});

						// setTimeout(() => {

						// }, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确手机号');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},

			// 性别切换
			radioChange(n) {
				console.log('radioChange', n);
				this.dataDetails.driverSex = n
			},
			//判断是否是初次认证
			getAuthenticationStatus() {
				this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
						driverPhone: this.userInfo.phone,
					}).then(res => {
						if (res.code == 200) {
							this.dataDetails = res.data
							// this.dataDetails.driverName = res.data.driverName
							// this.dataDetails.driverSex = res.data.driverSex
							// this.dataDetails.driverCall = res.data.driverCall
							// this.dataDetails.driverPhone = res.data.driverPhone
							// this.dataDetails.cardAddressUrl = res.data.cardAddressUrl
							// this.dataDetails.cardBackAddressUrl = res.data.cardBackAddressUrl
							// this.dataDetails.numberCard = res.data.numberCard
							// this.dataDetails.cardValidityDate = res.data.cardValidityDate
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmValidityPeriod(date) {
				console.log('confirm', date)
				this.dataDetails.cardValidityDate = date.date
			},
			selectValidityPeriod() {
				if (this.dataDetails.cardValidityDate != '长期') {
					var arr = this.dataDetails.cardValidityDate.split('-')
					this.year = arr[0]
					this.month = arr[1]
					this.day = arr[2]
				}
				if (this.dataDetails.cardValidityDate == '长期') {
					this.year = '长期'
					this.month = ''
					this.day = ''
				}
				this.$refs.dateEl.show()
			},
			//设置图片
			setImage(e) {
				console.log(e);
				//显示在页面
				//this.imagesrc = e.path;
				if (e.dotype == 'idphoto') {
					_this.zjzClipper(e.path);
				} else if (e.dotype == 'watermark') {
					_this.watermark(e.path);
				} else {
					_this.savePhoto(e.path);
				}
			},
			//保存图片到相册，方便核查
			savePhoto(path) {
				this.imagesrc = path;
				// this.dataDetails.cardAddressUrl = path
				uploadImage(path, 'appData/',
					result => {
						// 上传成功
						console.log('图片地址', result)
						this.dataDetails.cardAddressUrl = result
					}
				)
			},
			uploadImg(type, index) {
				this.uploadType = type
				// this.isShowimgType = true
				this.index = index
				this.imgTypeSelect()

			},
			delCard(type) {
				var _this = this
				switch (type) {
					case 1:
						_this.dataDetails.cardAddressUrl = ""
						break;
					case 2:
						_this.dataDetails.cardBackAddressUrl = ""
						break;
				}
			},
			// 上传图片
			imgTypeSelect() {
				// console.log(val)
				console.log(this.uploadType)
				// if (val.name == '相册') {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					// sourceType: this.$helper.chooseImage.sourceType,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage('image', res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功回调函数
								console.log('图片地址', result)
								switch (_this.uploadType) {
									// 身份正面
									case 1:
										_this.dataDetails.cardAddressUrl = result
										// 识别
										_this.$request.baseRequest('get',
												'/driverInfo/personShibie', {
													personImg: result,
													flag: 1
												}).then(res => {
												if (res.data) {
													_this.dataDetails.cardAddress = res.data
														.recPersonAddr
													// _this.dataDetails.numberCard = res.data.recPersonNo
													if (res.data.recPerson) {
														_this.dataDetails.driverName = res.data
															.recPerson
														_this.dataDetails.driverCall = res.data
															.recPerson.substring(0, 1)
													}
													_this.dataDetails.driverBirthday = res.data
														.recPersonBrithday
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										break
										// 身份反面
									case 2:
										_this.dataDetails.cardBackAddressUrl = result
										// 识别
										_this.$request.baseRequest('get',
												'/driverInfo/personShibie', {
													personImg: result,
													flag: 2
												}).then(res => {
												if (res.data.idCardValidity) {
													let date = res.data.idCardValidity.split("-")[1]
													_this.dataDetails.cardValidityDate = date.replace(
														'.', '-').replace('.', '-')
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										break
									case 3:
										break;
								}
							}
						)
					}
				});

				// } else {
				// 	switch (this.uploadType) {
				// 		case 0:
				// 			break
				// 		case 1:
				// 			uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=idcardface');
				// 			console.log('身份正面')
				// 			break
				// 		case 2:
				// 			uni.$u.route('/pages/mine/camera/idcard/idcard?dotype=badge');
				// 			console.log('身份反面')
				// 			break
				// 		case 3:
				// 			break
				// 		case 4:
				// 	}
				// }

			},
			next(val) {
				if (this.validate()) return
				uni.$u.route('/pages/mine/editDriverCertificationNext', {
					data: JSON.stringify(this.dataDetails),
				});
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.driverName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "司机姓名不能为空！",
					})
					return true
				}

				if (!uni.$u.test.chinese(this.dataDetails.driverName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "姓名为汉字！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.driverCall)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "司机称呼不能为空！",
					})
					return true
				}
				if (!uni.$u.test.chinese(this.dataDetails.driverCall)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "称呼为汉字！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "联系电话不能为空！",
					})
					return true
				}
				if (!uni.$u.test.mobile(this.dataDetails.driverPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "电话号码格式错误！",
					})
					return true
				}
				// for (let i = 0; i < this.dataDetails.hyDriverCarInfoList.length; i++) {
				// 	let _item = this.dataDetails.hyDriverCarInfoList[i]
				// 	if (uni.$u.test.isEmpty(_item.carNumber)) {
				// 		this.$refs.uToast.show({
				// 			type: 'error',
				// 			message: "车牌号不能为空！",
				// 		})
				// 		return true
				// 	}
				// 	if (uni.$u.test.isEmpty(_item.fileList1)) {
				// 		this.$refs.uToast.show({
				// 			type: 'error',
				// 			message: "人车合影不能为空！",
				// 		})
				// 		return true
				// 	}
				// }

				if (uni.$u.test.isEmpty(this.dataDetails.cardAddressUrl)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人像页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardBackAddressUrl)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证国徽页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证人有效截止日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.cardAddress)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "身份证地址为空！",
					})
					return true
				}
				return false
			}
		},
	};
</script>

<style scoped lang="scss">
	/deep/.u-radio {
		margin-bottom: 0 !important;
	}

	.top-head {
		background: #F5BA3C;
		height: 80rpx;
		width: 100%;
	}

	.container {
		position: relative;
		top: -60rpx;
		margin: 0 20rpx;
	}

	.row4-img {
		width: 32rpx;
		height: 32rpx;
	}

	.content1,
	.content2,
	.content3 {
		.left-text {
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;

			.ch-style {}
		}

		.row-ch {
			padding-right: 180rpx;
			box-sizing: border-box;
		}
	}

	.content1-car {
		margin-top: 20rpx;

		.left-text {
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;

			.color {
				// background: blue;
				width: 340rpx;
			}
		}
	}

	.input-ckg {
		height: 86rpx;
		margin-top: 0 !important;
		padding-bottom: 0 !important;

		.u-input {
			height: 100%;
			background: #F7F8FA;
			padding-left: 10rpx !important;
			padding-right: 85rpx !important;
		}

		.star {
			display: flex;
			align-items: center;
			margin: 0 10rpx;
		}

		.input-positon {
			position: relative;
		}

		.position-right {
			position: absolute;
			right: 20rpx;
			top: 0;
			width: 60rpx;
			height: 50rpx;
			bottom: 0;
			margin: auto;

		}

	}

	.picture {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 212rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}

	.add-car {
		background: #FFFFFF;
		margin: 20rpx 50rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		.icon {
			margin-right: 20rpx;
		}

		.car-text {
			font-size: 36rpx;
			font-weight: 700;
			color: #F5BA3C;
		}
	}

	.carlist-item {
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background: white;
		border-radius: 10rpx;
		position: relative;

		.del-car {
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			height: 80rpx;
		}
	}

	.content2,
	.content3 {
		.del-bank {
			position: absolute;
			top: 0;
			right: 0;
			width: 80rpx;
			height: 80rpx;
		}

		.picture {
			width: 100%;
			height: 440rpx;
			position: relative;

			.text {
				margin-top: 20rpx;
			}
		}

		.picture1 {
			background: url(../../static/images/mine/zm.png);
			background-size: 100% 100%;
		}

		.picture2 {
			background: url(../../static/images/mine/gh.png);
			background-size: 100% 100%;
		}

		.picture3 {
			background: url(../../static/images/mine/yhkzm.png);
			background-size: 100% 100%;
		}

		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}

		.title {
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.content3 {
		position: relative;
		background: white;
		margin: 20rpx 0 0 0;
		border-radius: 10rpx;
		padding: 20rpx;

		.khzh-styel {
			// width: 350rpx;

		}

		.type {
			background: #F5BA3C;
			border-radius: 10rpx;
			color: white;
			box-sizing: border-box;
			padding: 4rpx 10rpx;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.select-bankzh {
			width: 230rpx;
			height: 48rpx;
		}
	}

	.content4 {
		display: flex;
		justify-content: center;
		background: white;
		padding: 40rpx 20rpx 50rpx 20rpx;

		.next-btn {
			background:#F5BA3C;
			width: 90%;
			padding: 20rpx 20rpx;
			text-align: center;
			color: #fff;
			border-radius: 50rpx;
		}
	}

	.yzm {}

	.yzm-btn {
		background: #F5BA3C;
		color: white;
		height: 60rpx;
	}

	.preview-card-img {

		// /deep/uni-image>div,
		// uni-image>img {
		// 	transform: scale(1.5) rotate(-90deg);
		// }
	}

	.del-card {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 9;
	}

	/deep/.u-radio {
		margin-left: 10px;
	}

	/deep/.uni-input-input:disabled {
		background: #fff;
	}

	/deep/.u-radio-group--row {
		justify-content: flex-end;
	}

	/deep/.u-textarea {
		padding: 9px 0;
	}

	/deep/.u-textarea__field {
		color: #000;
		text-align: right;
	}
</style>