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='left' 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 row-ch">
					<view class="left-text">称呼</view>
					<u--input placeholder="输入姓氏" class="ch-style" inputAlign='center' border="none"
						v-model="dataDetails.driverCall" maxlength="1">
					</u--input>
					<view class="flex align-center" v-if="dataDetails.driverSex=='男'">先生</view>
					<view class="flex align-center" v-else>女士</view>
				</view>
				<view class="flex row noborder">
					<view class="left-text">联系电话</view>
					<u--input placeholder="请输入联系电话" inputAlign='left' 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">
					<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">
					<image class="" :src="dataDetails.cardBackAddressUrl" mode="aspectFit" style=""></image>
				</view>
				<view class="flex row">
					<view class="left-text">身份证号</view>
					<u--input placeholder="请输入身份证号" inputAlign='left' border="none" v-model="dataDetails.numberCard" maxlength="18">
					</u--input>
				</view>

				<view class="flex row noborder">
					<view class="left-text">身份证截止日期</view>
					<view class="" @click="selectValidityPeriod">
						{{dataDetails.cardValidityDate?dataDetails.cardValidityDate:'选择身份证截止日期>'}}
					</view>
				</view>
			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler" @cancel='isShowcardValidity= false'>
			</u-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 uploadImage from '@/components/ossutil/uploadFile.js';
	var _this
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				canvasSiz: {
					width: 188,
					height: 273
				},
				tips: '',
				// refCode: null,
				seconds: 30,

				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)
			//获取截止日期List数据
			this.validityPeriod = this.$helper.makeValidityPeriod(0)
			// this.dataDetails.driverPhone = this.userInfo.phone
			this.dataDetails.commonId = this.userInfo.id
			//获取认证状态
			this.getAuthenticationStatus()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	debugger
				// 	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(e) {
				console.log('confirm', e)
				if (e.value[0] == '长期') {
					this.dataDetails.cardValidityDate = e.value[0]
				} else {
					if (!e.value[1] || !e.value[2]) {
						this.$refs.uToast.show({
							type: 'error',
							message: "日期格式错误,请重新选择！",
						})
						return
					}
					this.dataDetails.cardValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
				}

				this.isShowcardValidity = false
			},
			selectValidityPeriod() {
				this.isShowcardValidity = true
			},
			//设置图片
			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

			},
			// 上传图片
			imgTypeSelect(val) {
				console.log(val)
				console.log(this.uploadType)
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						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,
													}).then(res => {
													_this.dataDetails.numberCard = res.data.recPersonNo
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break
											// 身份反面
										case 2:
											_this.dataDetails.cardBackAddressUrl = result
											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
				}


				if (uni.$u.test.isEmpty(this.dataDetails.driverPhone)) {
					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.isEmpty(this.dataDetails.cardValidityDate)) {
					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: #2772FB;
		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: #2772FB;
		}
	}

	.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: #2772FB;
			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: rgb(39, 114, 251);
			width: 90%;
			padding: 20rpx 20rpx;
			text-align: center;
			color: #fff;
			border-radius: 50rpx;
		}
	}

	.yzm {}

	.yzm-btn {
		background: #2772FB;
		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-right:10px;
	}
</style>