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>
			
			<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: {},
				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;
			}
			},
			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,
						// 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;
									}
									_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>