wangluohuoyun-app/pages/mine/editDriverCertificationNext.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.stop="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.stop="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:14px;' class="" @click="selectValidityPeriod(0)">
						{{dataDetails.driverLicenseValidityStartDate?dataDetails.driverLicenseValidityStartDate:'起始时间'}}
					</view>
					<view>~</view>
					<view style='font-size:14px;' 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='19' 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 align-center">
					<view class="left-text">通讯地址</view>
					<u--textarea v-model="dataDetails.postalAddress" border="none"  placeholder="输入通讯地址" autoHeight  maxlength="30"></u--textarea>
				</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 class="btn-color" @click="btnBClick">提交</u-button>
			
			<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
				@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="isShowimgType=false">
			</u-action-sheet>
			<itmister-date-picker :dateStatus="0"
			:checkYear="year" :checkMonth="month" :checkDay="day"
			ref="datestartEl" :startYear="1980"  :futureYear="10" 
			@dateConfirm="confirmValidityPeriod"></itmister-date-picker>
			<itmister-date-picker :overdueContent="overdueContent" :dateStatus="status" 
			:periodOfValidity="true" 
			:checkYear="year" :checkMonth="month" :checkDay="day"
			ref="dateEl" :startYear="1980"  :futureYear="10" 
			@dateConfirm="confirmValidityPeriod"></itmister-date-picker>
			<!-- <u-picker :show="isShowValidity" ref="uPicker" :columns="ValidityPeriodType==9?validityPeriod1:validityPeriod" @confirm="confirmValidityPeriod"
				:closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
			</u-picker> -->
			<u-picker :show="isShowDrive" ref="uPicker" :columns="driveList" @confirm="confirmDriveType"
				:closeOnClickOverlay='true' @close='isShowDrive=false' @cancel='isShowDrive=false'>
			</u-picker>
			<u-toast ref="uToast"></u-toast>
		</view>
		<!-- <u-modal :show="isShowAlert" :title="" :content='修改认证信息需要重新登录!' :closeOnClickOverlay='true' :showCancelButton='true' confirmColor='#22C572'  @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal> -->
	</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 {
				isShowAlert: false,
				consentStatus: false,
				isGCar: true,
				ValidityPeriodType: '',
				validityPeriod: [],
				isShowValidity: false,
				isShowDrive:false,
				driveList:[["A2","B2"]],
				uploadType: '',
				isShowimgType: false,
				dataDetails: {},
				year:'',
				month:'',
				day:'',
				radiolist: [{
						name: '挂车司机',
						disabled: false
					},
					{
						name: '非挂车司机',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: '',
			};
		},
		onLoad(options) {
			_this = this;
			this.get_camera_permission()
			this.dataDetails = JSON.parse(options.data)
			if (this.dataDetails.driverType == 1) {
				this.radiovalue = '挂车司机'
			} else {
				this.radiovalue = '非挂车司机'
			}
		},
		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
				// });
			},
			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){
					if(this.dataDetails.driverLicenseValidityStartDate!='长期'){
						var arr=this.dataDetails.driverLicenseValidityStartDate.split('-')
						this.year=arr[0]
						this.month=arr[1]
						this.day=arr[2]
					}
					console.log()
					this.$refs.datestartEl.show()
				}else{
					switch (this.ValidityPeriodType) {
					case 3:
						this.status=0
						this.overdueContent='从业资格证已过期'
						if(this.dataDetails.qualificationCertificateValidityDate!='长期'){
							var arr=this.dataDetails.qualificationCertificateValidityDate.split('-')
							this.year=arr[0]
							this.month=arr[1]
							this.day=arr[2]
						}
						break
					case 9:
					if(this.dataDetails.driverLicenseValidityDate!='长期'){
						var arr=this.dataDetails.driverLicenseValidityDate.split('-')
						this.year=arr[0]
						this.month=arr[1]
						this.day=arr[2]
					}
					if(this.dataDetails.driverLicenseValidityDate=='长期'){
						this.year='长期'
						this.month=''
						this.day=''
					}
						this.overdueContent='驾驶证已过期'
						break
					}
					this.$refs.dateEl.show()
				}
			},
			driveType(){
				this.isShowDrive = true
			},
			confirmDriveType(e){
				this.dataDetails.quasiDrivingVehicle = e.value[0]
				this.isShowDrive = false
			},
			// 上传图片
			imgTypeSelect() {
				// 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.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
													}
													_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
													}
													if(res.data&&res.data.qualificationCertificateNum){
														_this.dataDetails.qualificationCertificateNumber = res.data.qualificationCertificateNum
													}
													_this.$forceUpdate()
												})
												.catch(res => {
													uni.$u.toast(res.message);
												});
											break;
										case 8:
											_this.dataDetails.operationCertificate = result
											break;
										case 9:
											_this.dataDetails.trailerOperationCertificate = result
											break;
									}
								}
							)
						}
					});

				// } else {

				// }

			},
			uploadImg(type) {
				this.uploadType = type
				// this.isShowimgType = true
				this.imgTypeSelect()
			},
			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.$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
			},
			delSubmitObj() {
				delete this.dataDetails.authenticationStatus
				delete this.dataDetails.authenticationStatusKey
				delete this.dataDetails.compId
				delete this.dataDetails.createDate
				delete this.dataDetails.createUserId
				delete this.dataDetails.deleteFlag
				delete this.dataDetails.driverCarInfoList
				delete this.dataDetails.driverPayeeInfoList
				delete this.dataDetails.firstFlag
				delete this.dataDetails.updateDate

			},
			btnBClick() {
							// 此处用法为在js中调用，需要写uni.$u.throttle()
				uni.$u.throttle(this.submit(), 5000)
			},
			submit() {
				if (!this.consentStatus) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// 校验
				if (this.validate()) return
				this.delSubmitObj()
				this.dataDetails.accountNumber = uni.getStorageSync("userInfo").phone
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.$request.baseRequest('post', '/driverInfo/api/editInfo', this.dataDetails).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功,待平台审核！",
								complete() {
									uni.switchTab({
										url: '/pages/mine/index'
									})
								}
							})
						} else {
							uni.hideLoading()
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.hideLoading()
						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;
	}

	.btn-color {}
	/deep/.uni-input-input:disabled {
		background: #fff;
	}
	/deep/.u-textarea{
		padding:9px 0;
	}
	/deep/.u-textarea__field{
		color:#000;
		text-align:right;
	}
</style>