wangluohuoyun-app/pages/mine/driverCertificationNext.vue

<template>
	<view class="content">
		<view class="top-head"></view>
		<view class="container">
			<u-radio-group v-model="radiovalue" iconPlacement="row" class='radio-group'>
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>
			<view class="level1-title">证件信息</view>
			<view class="content1">
				<view class="title">上传驾驶证主页</view>
				<view @click="uploadImg(1)" class="picture picture1" v-if="!dataDetails.driverLicenseHomePage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传驾驶证主页</view>
				</view>
				<view v-if="dataDetails.driverLicenseHomePage" @click.stop="uploadImg(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.driverLicenseHomePage" mode="aspectFit"></image>
				</view>
				<view class="title">上传驾驶证副页</view>
				<view @click="uploadImg(2)" class="picture picture2" v-if="!dataDetails.driverLicenseBackPage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传驾驶证副页</view>
				</view>
				<view v-if="dataDetails.driverLicenseBackPage" @click.stop="uploadImg(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.driverLicenseBackPage" mode="aspectFit"></image>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">驾驶证有效截止日期</view>
					<view class="" @click="selectValidityPeriod(0)">
						{{dataDetails.driverLicenseValidityDate?dataDetails.driverLicenseValidityDate:'选择有效截止日期>'}}
					</view>
				</view>

				<view class="title">上传行驶证主页</view>
				<view @click="uploadImg(3)" class="picture picture3" v-if="!dataDetails.drivingLicenseHomePage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传行驶证主页</view>
				</view>
				<view v-if="dataDetails.drivingLicenseHomePage" @click.stop="uploadImg(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.drivingLicenseHomePage" mode="aspectFit"></image>
				</view>
				<view class="title">上传行驶证副页</view>
				<view @click="uploadImg(4)" class="picture picture4" v-if="!dataDetails.drivingLicenseBackPage">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传行驶证副页</view>
				</view>
				<view v-if="dataDetails.drivingLicenseBackPage" @click.stop="uploadImg(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.drivingLicenseBackPage" mode="aspectFit"></image>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">行驶证档案编号</view>
					<u--input placeholder="输入行驶证档案编号" inputAlign='right' border="none" v-model="dataDetails.drivingLicenseNumber">
					</u--input>
				</view>

				<view class="flex row flex-space-between">
					<view class="left-text">行驶证有效期</view>
					<view class="" @click="selectValidityPeriod(1)">
						{{dataDetails.drivingLicenseValidityDate?dataDetails.drivingLicenseValidityDate:'选择有效截止日期>'}}
					</view>
				</view>


				<view class="" v-if="isGCar">
					<view class="title">挂车行驶证主页</view>
					<view @click="uploadImg(5)" class="picture picture5" v-if="!dataDetails.trailerLicenseHomePage">
						<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
						<view class="text">上传挂车行驶证主页</view>
					</view>
					<view v-if="dataDetails.trailerLicenseHomePage" @click.stop="uploadImg(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.trailerLicenseHomePage" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="isGCar">
					<view class="title">挂车行驶证副页</view>
					<view @click="uploadImg(6)" class="picture picture6" v-if="!dataDetails.trailerLicenseBackPage">
						<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
						<view class="text">上传挂车行驶证副页</view>
					</view>
					<view v-if="dataDetails.trailerLicenseBackPage" @click.stop="uploadImg(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.trailerLicenseBackPage" mode="aspectFit"></image>
					</view>
				</view>
				<view class="flex row">
					<view class="left-text">挂车行驶证档案编号</view>
					<u--input placeholder="输入挂车行驶证档案编号" inputAlign='right' border="none" v-model="dataDetails.trailerLicenseNumber">
					</u--input>
				</view>

				<view class="flex row flex-space-between" v-if="isGCar">
					<view class="left-text">挂车行驶证有效期</view>
					<view class="" @click="selectValidityPeriod(2)">
						{{dataDetails.trailerLicenseValidityDate?dataDetails.trailerLicenseValidityDate:'选择有效截止日期>'}}
					</view>
				</view>

				<view class="title">从业资格证</view>
				<view @click="uploadImg(7)" class="picture picture7" v-if="!dataDetails.qualificationCertificate">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传从业资格证</view>
				</view>
				<view v-if="dataDetails.qualificationCertificate" @click.stop="uploadImg(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.qualificationCertificate" mode="aspectFit"></image>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">从业资格证有效期</view>
					<view></view>
					<view class="" @click="selectValidityPeriod(3)">
						{{dataDetails.qualificationCertificateValidityDate?dataDetails.qualificationCertificateValidityDate:'选择有效期>'}}
					</view>
				</view>

				<view class="title">道路运输证</view>
				<view @click="uploadImg(8)" class="picture picture8" v-if="!dataDetails.operationCertificate">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传道路运输证</view>
				</view>
				<view v-if="dataDetails.operationCertificate" @click.stop="uploadImg(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.operationCertificate" mode="aspectFit"></image>
				</view>
				<view class="flex row">
					<view class="left-text">道路运输证号</view>
					<u--input placeholder="输入道路运输证号" inputAlign='right' border="none" v-model="dataDetails.operationCertificateNumber">
					</u--input>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">道路运输证有效期</view>
					<view class="" @click="selectValidityPeriod(4)">
						{{dataDetails.operationCertificateValidityDate?dataDetails.operationCertificateValidityDate:'选择有效期>'}}
					</view>
				</view>

				<view v-if="isGCar">
					<view class="title">挂车道路运输证</view>
					<view @click="uploadImg(9)" class="picture picture9"
						v-if="!dataDetails.trailerOperationCertificate">
						<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
						<view class="text">上传挂车道路运输证</view>
					</view>
					<view v-if="dataDetails.trailerOperationCertificate" @click.stop="uploadImg(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.trailerOperationCertificate" mode="aspectFit"></image>
					</view>
				</view>
				<view class="flex row">
					<view class="left-text">挂车道路运输证号</view>
					<u--input placeholder="输入挂车道路运输证号" inputAlign='right' border="none" v-model="dataDetails.trailerOperationCertificateNumber">
					</u--input>
				</view>

				<view class="flex row flex-space-between" v-if="isGCar">
					<view class="left-text">挂车道路运输证有效期</view>
					<view class="" @click="selectValidityPeriod(5)">
						{{dataDetails.trailerOperationCertificateValidityDate?dataDetails.trailerOperationCertificateValidityDate:'选择有效期>'}}
					</view>
				</view>
				<view class="flex row">
					<view class="left-text">通讯地址</view>
					<u--input placeholder="输入通讯地址" inputAlign='left' border="none" v-model="dataDetails.postalAddress"></u--input>
				</view>
			</view>
			<view class="flex service align-center">
				<u--image @click='consent'
					:src="consentStatus==true?'../../static/images/mine/duihao@2x.png':'../../static/images/mine/wxz.png'"
					width="12px" height="12px"></u--image>
				我已阅读并同意
				<navigator
					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
					class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator
					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.html"
					class="path" hover-class="navigator-hover">《隐私政策》</navigator>
			</view>
			<u-button type="primary" @click="submit">提交</u-button>
			<u-toast ref="uToast"></u-toast>
			<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
				@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="isShowimgType=false">
			</u-action-sheet>
			<u-picker :show="isShowValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
				:closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
			</u-picker>
		</view>

	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	var _this;
	export default {
		components: {},
		data() {
			return {
				consentStatus: false,
				isGCar: true,
				ValidityPeriodType: '',
				validityPeriod: [],
				isShowValidity: false,
				uploadType: '',
				isShowimgType: false,
				dataDetails: {},
				radiolist: [{
						name: '挂车司机',
						disabled: false
					},
					{
						name: '非挂车司机',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: '挂车司机',
			};
		},
		onLoad(options) {
			_this = this;
			console.log(options)
			this.dataDetails = JSON.parse(options.data)
			this.dataDetails.driverType = 1
			this.validityPeriod = this.$helper.makeValidityPeriod()
		},
		methods: {
			delCard(type) {
			switch (type) {
				case 1:
					_this.dataDetails.driverLicenseHomePage = ""
					break;
				case 2:
					_this.dataDetails.driverLicenseBackPage = ""
					break;
				case 3:
					_this.dataDetails.drivingLicenseHomePage = ""
					break;
				case 4:
					_this.dataDetails.drivingLicenseBackPage = ""
					break;
				case 5:
					_this.dataDetails.trailerLicenseHomePage = ""
					break;
				case 6:
					_this.dataDetails.trailerLicenseBackPage = ""
					break;
				case 7:
					_this.dataDetails.qualificationCertificate = ""
					break;
				case 8:
					_this.dataDetails.operationCertificate = ""
					break;
				case 9:
					_this.dataDetails.trailerOperationCertificate = ""
					break;
			}
			},
			consent() {
				this.consentStatus = !this.consentStatus
				// uni.setStorage({
				// 	key: 'policyStorageKey',
				// 	data: this.consentStatus
				// });
			},
			validate(data) {},
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				switch (this.ValidityPeriodType) {
					case 0:
						this.dataDetails.driverLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 1:
						this.dataDetails.drivingLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 2:
						this.dataDetails.trailerLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						break
					case 3:
						this.dataDetails.qualificationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
					case 4:
						this.dataDetails.operationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[
							2]
						break
					case 5:
						this.dataDetails.trailerOperationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
							.value[2]
						break
				}
				this.isShowValidity = false
			},
			selectValidityPeriod(type) {
				this.ValidityPeriodType = type
				this.isShowValidity = true
			},
			// 上传图片
			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(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功回调函数
									console.log('图片地址-----', result)
									switch (_this.uploadType) {
										case 1:
											_this.dataDetails.driverLicenseHomePage = result
											break;
										case 2:
											_this.dataDetails.driverLicenseBackPage = result
											break;
										case 3:
											_this.dataDetails.drivingLicenseHomePage = result
											break;
										case 4:
											_this.dataDetails.drivingLicenseBackPage = result
											break;
										case 5:
											_this.dataDetails.trailerLicenseHomePage = result
											break;
										case 6:
											_this.dataDetails.trailerLicenseBackPage = result
											break;
										case 7:
											_this.dataDetails.qualificationCertificate = result
											break;
										case 8:
											_this.dataDetails.operationCertificate = result
											break;
										case 9:
											_this.dataDetails.trailerOperationCertificate = result
											break;
									}
									_this.$forceUpdate()
								}
							)
						}
					});

				} else {

				}

			},
			uploadImg(type) {
				this.uploadType = type
				this.isShowimgType = true

			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.driverLicenseHomePage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "驾驶证主页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.driverLicenseHomePage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "驾驶证副页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.driverLicenseValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "驾驶证有效期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseHomePage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证主页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseBackPage)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证副页不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证有效期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "行驶证档案编号不能为空！",
					})
					return true
				}
				if(this.radiovalue=='挂车司机'){
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证主页不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证副页不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证档案编号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseValidityDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车行驶证有效期不能为空！",
						})
						return true
					}
				}
				
				// if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "行驶证副页不能为空！",
				// 	})
				// 	return true
				// }
				
				if (uni.$u.test.isEmpty(this.dataDetails.qualificationCertificate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "从业资格证不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.qualificationCertificateValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "从业资格证有效期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateValidityDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "道路运输证有效期不能为空！",
					})
					return true
				}
				if(this.radiovalue=='挂车司机'){
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateNumber)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证号不能为空！",
						})
						return true
					}
					if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateValidityDate)) {
						this.$refs.uToast.show({
							type: 'error',
							message: "挂车道路运输证有效期不能为空！",
						})
						return true
					}
				}
				if (uni.$u.test.isEmpty(this.dataDetails.postalAddress)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "通讯地址不能为空！",
					})
					return true
				}
				return false
			},
			submit() {
				
			
				// 校验
				if (this.validate()) return
				if(this.dataDetails.driverSex=='男'){
					this.dataDetails.driverCall = this.dataDetails.driverCall+'先生'
				}else{
					this.dataDetails.driverCall = this.dataDetails.driverCall+'女士'
				}
				if(!this.consentStatus){
					this.$refs.uToast.show({
						type: 'error',
						message: "请勾选协议！",
					})
					return
				}
				this.$request.baseRequest('post', '/driverInfo/api/addInfo', this.dataDetails).then(res => {
						if(res.code==200){
							uni.$u.route('/pages/mine/index');
						}else{
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			radioChange(n) {
				console.log('radioChange', n);
				if (n == '挂车司机') {
					this.isGCar = true
					this.dataDetails.driverType = 1
				} else {
					this.dataDetails.driverType = 2
					this.isGCar = false
				}
			},
			//设置图片
			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);
				// }
			},
		}
	};
</script>

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

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

	.preview {
		width: 100%;
		height: 100px;
	}

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

	.container {
		background: white;
		position: relative;
		top: -60rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.radio-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.level1-title {
		margin: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 30rpx;
	}

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

		}

		.left-text {
			// background: red;
			width: 320rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.picture {
			position: relative;
			width: 100%;
			height: 440rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

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

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

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

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

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

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

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

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

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

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

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

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

	.service {
		font-size: 24rpx;
		margin: 20rpx;
		justify-content: center;

		/deep/.u-image {
			margin: 0 20rpx;
		}
	}

	.del-card {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 9;
	}
	.path{
		color: #2772FB;
	}
</style>