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',marginRight:'4px'}" 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(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.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 style='font-size:12px;' class="" @click="selectValidityPeriod(0)">
						{{dataDetails.driverLicenseValidityStartDate?dataDetails.driverLicenseValidityStartDate:'起始时间'}}
					</view>
					<view>~</view>
					<view style='font-size:12px;' class="" @click="selectValidityPeriod(9)">

						{{dataDetails.driverLicenseValidityDate?dataDetails.driverLicenseValidityDate:'结束时间'}}
					</view>
				</view>
				<view class="flex row flex-space-between">
					<view class="left-text">准驾车型</view>
					<view class="" @click="driveType">
						{{dataDetails.quasiDrivingVehicle?dataDetails.quasiDrivingVehicle:'选择准驾车型>'}}
					</view>
				</view>
				<view class="flex row noborder">
					<view class="left-text">驾驶证发证机关</view>
					<u--input placeholder="请输入驾驶证发证机关" inputAlign='right' border="none"
						v-model="dataDetails.lssuingAuthority">
					</u--input>
				</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(7)"
					class="preview-card-img picture">
					<view @click.stop="delCard(7)">
						<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="flex row ">
					<view class="left-text">从业资格证号</view>
					<u--input maxlength='30' placeholder="请输入从业资格证号" inputAlign='right' border="none"
						v-model="dataDetails.qualificationCertificateNumber">
					</u--input>
				</view>
				<view class="flex row ">
					<view class="left-text">道路运输经营许可证号</view>
					<u--input maxlength='30' placeholder="请输入道路运输经营许可证号" inputAlign='right' border="none"
						v-model="dataDetails.actualCarrierBusinessLicense">
					</u--input>
				</view>
				<view class="flex row noborder">
					<view class="left-text">通讯地址</view>
					<u--textarea v-model="dataDetails.postalAddress" border="none" placeholder="输入通讯地址" autoHeight
						maxlength="30"></u--textarea>
					<!-- <u--input placeholder="输入通讯地址" inputAlign='right' border="none" v-model="dataDetails.postalAddress"></u--input> -->
				</view>
				<view class="title">自拍照片</view>
				<view @click="uploadImg(10)" class="picture picture7" v-if="!dataDetails.selfPhoto">
					<image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传自拍照片</view>
				</view>
				<view v-if="dataDetails.selfPhoto" @click.stop="uploadImg(10)"
					class="preview-card-img picture">
					<view @click.stop="delCard(10)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="" :src="dataDetails.selfPhoto" mode="aspectFit"></image>
				</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="btnBClick">提交</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> -->
			<itmister-date-picker :dateStatus="0" ref="datestartEl" :startYear="1980" :futureYear="10"
				@dateConfirm="confirmValidityPeriod"></itmister-date-picker>
			<itmister-date-picker :overdueContent="overdueContent" :dateStatus="status" :periodOfValidity="true"
				ref="dateEl" :startYear="1980" :futureYear="10" @dateConfirm="confirmValidityPeriod">
			</itmister-date-picker>
			<u-picker :show="isShowDrive" ref="uPicker" :columns="driveList" @confirm="confirmDriveType"
				:closeOnClickOverlay='true' @close='isShowDrive=false' @cancel='isShowDrive=false'>
			</u-picker>
		</view>

	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import permision from "@/js_sdk/wa-permission/permission.js"
	var _this;
	export default {
		components: {},
		data() {
			return {
				consentStatus: false,
				isGCar: true,
				ValidityPeriodType: '',
				isShowValidity: false,
				isShowDrive: false,
				driveList: [
					["A2", "B2"]
				],
				overdueContent: '',
				uploadType: '',
				status: 1,
				isShowimgType: false,
				dataDetails: {selfPhoto:''},
				radiolist: [{
						name: '挂车司机',
						disabled: false
					},
					{
						name: '非挂车司机',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: '挂车司机',
			};
		},
		onLoad(options) {
			_this = this;
			console.log(options)
			this.get_camera_permission()
			if (options.data) {
				this.dataDetails = JSON.parse(options.data)
				this.dataDetails.driverType = 1
			}
		},
		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('用户点击取消');
							}
						}
					});
				}
			},
			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;
					case 10:
						_this.dataDetails.selfPhoto = ''
						break;
				}
			},
			consent() {
				this.consentStatus = !this.consentStatus
				// uni.setStorage({
				// 	key: 'policyStorageKey',
				// 	data: this.consentStatus
				// });
			},
			validate(data) {},
			confirmValidityPeriod(date) {
				console.log('confirm', date)
				switch (this.ValidityPeriodType) {
					case 0:
						this.dataDetails.driverLicenseValidityStartDate = date.date
						break
					case 1:
						this.dataDetails.drivingLicenseValidityDate = date.date
						break
					case 2:
						this.dataDetails.trailerLicenseValidityDate = date.date
						break
					case 3:
						this.dataDetails.qualificationCertificateValidityDate = date.date
						break
					case 4:
						this.dataDetails.operationCertificateValidityDate = date.date
						break
					case 5:
						this.dataDetails.trailerOperationCertificateValidityDate = date.date
						break
					case 9:
						this.dataDetails.driverLicenseValidityDate = date.date
						break
				}
				this.$forceUpdate()

			},
			selectValidityPeriod(type) {
				this.ValidityPeriodType = type
				if (type == 0) {
					this.$refs.datestartEl.show()
				} else {
					switch (this.ValidityPeriodType) {
						case 3:
							this.status = 0
							this.overdueContent = '从业资格证已过期'
							break
						case 9:
							this.overdueContent = '驾驶证已过期'
							break
					}
					this.$refs.dateEl.show()
				}
			},
			driveType() {
				this.isShowDrive = true
			},
			confirmDriveType(e) {
				this.dataDetails.quasiDrivingVehicle = e.value[0]
				this.isShowDrive = false
			},
			// 上传图片
			imgTypeSelect(val) {
				// 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("images", res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功回调函数
								console.log('图片地址-----', result)
								switch (_this.uploadType) {
									case 1:
										_this.dataDetails.driverLicenseHomePage = result
										_this.$request.baseRequest('get',
												'/driverInfo/api/driverLicenseShibie', {
													image: result
												}).then(res => {
												if (res.data) {
													let date = res.data.driverEndDate.substr(0, 4) +
														"-" + res.data.driverEndDate.substr(4, 2) +
														"-" + res.data.driverEndDate.substr(6, 2)
													_this.dataDetails.driverLicenseValidityDate = date
													if (res.data.allowCar == 'A2' || res.data
														.allowCar == 'B2') {
														_this.dataDetails.quasiDrivingVehicle = res
															.data.allowCar
													}
													let sdate = res.data.driverStartDate.substr(0, 4) +
														"-" + res.data.driverStartDate.substr(4, 2) +
														"-" + res.data.driverStartDate.substr(6, 2)
													_this.dataDetails.driverLicenseValidityStartDate =
														sdate
													_this.dataDetails.lssuingAuthority = res.data
														.issuingAuthority
													_this.$forceUpdate()
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										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
										_this.$request.baseRequest('get',
												'/driverInfo/api/qualificationLicenseShibie', {
													image: result
												}).then(res => {
												if (res.data && res.data.qualificationCertificate) {
													_this.dataDetails
														.qualificationCertificateValidityDate = res
														.data.qualificationCertificate
													// _this.dataDetails.driverLicenseValidityDate =
													// 	res.data.driverEndDate
												}
												if (res.data && res.data.qualificationCertificateNum) {
													_this.dataDetails.qualificationCertificateNumber =
														res.data.qualificationCertificateNum.replace(
															/\s*/g, "")
												}
												_this.$forceUpdate()
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
										break;
									case 8:
										_this.dataDetails.operationCertificate = result
										break;
									case 9:
										_this.dataDetails.trailerOperationCertificate = result
										break;
									case 10:
										_this.$set(_this.dataDetails,'selfPhoto',result)
										break;
								}
								_this.$forceUpdate()
							}
						)
					}
				});

				// } else {

				// }
			},
			uploadImg(type) {
				this.uploadType = type
				this.imgTypeSelect()
				// 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.quasiDrivingVehicle)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "准驾车型不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.lssuingAuthority)) {
					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.qualificationCertificateNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "从业资格证号不能为空！",
					})
					return true
				}
				// if (!uni.$u.test.rangeLength(this.dataDetails.qualificationCertificateNumber,[12,19])) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "从业资格证号输入错误！",
				// 	})
				// 	return true
				// }

				// if (this.dataDetails.qualificationCertificateNumber.length != 19 || this.dataDetails
				// 	.qualificationCertificateNumber.length != 18) {
				// 	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.actualCarrierBusinessLicense)) {
					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
			},
			btnBClick() {
				// 此处用法为在js中调用，需要写uni.$u.throttle()
				uni.$u.throttle(this.submit(), 1000)
			},
			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.dataDetails.accountNumber = uni.getStorageSync("userInfo").phone
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.$request.baseRequest('post', '/driverInfo/api/addInfo', this.dataDetails).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功,待平台审核！",
								complete() {
									uni.switchTab({
										url: '/pages/mine/index'
									})
								}
							})
							// uni.$u.route('/pages/mine/index');
						} else {
							uni.hideLoading()
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
			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;

	}

	.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;
	}

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

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