wangluohuoyun-app/pages/mine/manageVehicles/addVehicle.vue

<!-- 管理车辆 -->
<template>
	<view class="content">
		<view class="flex s-row container">
			<view class="flex row">
				<view class="left left-text">车牌号</view>
				<view class="right flex">
					<input class="car-uumber" v-model='dataDetails.carNumber' @click.stop="handleShowKeyboard(index)"
						:disabled="true" placeholder="输入车牌号" name="input"></input>

				</view>
			</view>
			<view class="flex row">
				<view class="left-text">车牌颜色</view>
				<view class="color" @click="selectNoColor">{{dataDetails.carNumberColour}}</view>
				<view>></view>
				<u-picker :show="carColor" :columns="colorColumns" :closeOnClickOverlay='true' @close='colorClose'
					@cancel='colorClose' @confirm='confirmColor' @change="changeCarModel"></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车型</view>
				<view class="color" @click="selectCarModel">{{dataDetails.carType}}</view>
				<view>></view>
				<u-picker :show="carModel" :columns="carModelColumns" :closeOnClickOverlay='true' @close='carModelClose'
					@cancel='carModelClose' @confirm='confirmCarModel' @change="changeCarModel"></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车辆所属车主</view>
				<u--input placeholder="输入车主姓名" inputAlign='left' border="none" v-model="dataDetails.owner">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">总质量（千克）</view>
				<u--input placeholder="输入总质量" inputAlign='left' border="none" v-model="dataDetails.carTotalWeight">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">核定载质量（千克）</view>
				<u--input placeholder="输入核定载质量" inputAlign='left' border="none" v-model="dataDetails.carApprovedWeight">
				</u--input>
			</view>
			<view class="flex row noborder">
				<view class="left-text">外廓尺寸</view>
			</view>
			<view class="flex row noborder input-ckg">
				<view class="input-positon">
					<u--input class="input" placeholder="长" inputAlign='left' border="none"
						v-model="dataDetails.carLong">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="宽" inputAlign='left' border="none" v-model="dataDetails.carWidth">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="高" inputAlign='left' border="none" v-model="dataDetails.carHeight">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
			</view>

			<view class="flex row noborder s-row">
				<view class="left-text" style="width: 100%;">人车合影（车头车牌号可见）</view>
				<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
					name="1" multiple :maxCount="1"></u-upload>
			</view>
			<view class="level1-title">证件信息</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="sign == '挂车'">
				<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" v-if="sign == '挂车'">
				<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="sign == '挂车'">
				<view class="left-text">挂车道路运输证有效期</view>
				<view class="" @click="selectValidityPeriod(5)">
					{{dataDetails.trailerOperationCertificateValidityDate?dataDetails.trailerOperationCertificateValidityDate:'选择有效期>'}}
				</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="sign == '挂车'">
				<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="sign == '挂车'">
				<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="sign == '挂车'">
				<view class="left-text">挂车行驶证有效期</view>
				<view class="" @click="selectValidityPeriod(2)">
					{{dataDetails.trailerLicenseValidityDate?dataDetails.trailerLicenseValidityDate:'选择有效截止日期>'}}
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交</view>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<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>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	var _this;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				index: '',
				keyShow: false,
				carNumber: '',
				dataDetails: {
					driverId: '',
					carNumber: '',
					carNumberColour: '黄色',
					carType: '挂车 高栏',
					carTotalWeight: '',
					carApprovedWeight: '',
					carLong: '',
					carWidth: '',
					carHeight: '',
					addressUrl: ''

				},
				carModelColumns: [
					['挂车', '非挂车'],
					['高栏', '集装箱', '自卸车']
				],
				carModelColumnData: [
					['高栏', '集装箱', '自卸车'],
					['重型仓栏']
				],
				colorColumns: [
					['黄色', '蓝色']
				],
				carColor: false,
				carModel: false,
				fileList1: [],
				ValidityPeriodType: "",
				validityPeriod: [],
				isShowValidity: false,
				uploadType: '',
				isShowimgType: false,
				sign: "挂车"

			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication']),
		},
		onLoad(options) {
			_this = this;
			this.dataDetails.driverId = this.userInfo.driverId
			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;
			}
			},
			uploadImg(type) {
				this.uploadType = type
				this.isShowimgType = true
			},
			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("images", 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 {

				}
			},
			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
			},
			// 车型切换
			changeCarModel(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.carTypePicker
				} = e
				if (columnIndex === 0) {
					// 模拟网络请求
					picker.setColumnValues(1, this.carModelColumnData[index])
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				uploadImage('image', url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						if (!this.dataDetails.addressUrl) {
							this.dataDetails.addressUrl = result
						} else {
							this.dataDetails.addressUrl = this.dataDetails.addressUrl + ',' + result
						}


					}
				)
			},
			//车牌号弹出键盘
			handleShowKeyboard(index) {
				if (this.dataDetails.carNumber == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.carNumber
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				this.index = index
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.carNumber = e.value //键盘输入值
			},
			confirmColor(val) {
				this.dataDetails.carNumberColour = val.value[0]
				this.carColor = false
			},
			colorClose() {
				this.carColor = false
			},
			selectNoColor() {
				this.carColor = true
			},
			confirmCarModel(val) {
				this.sign = val.value[0]
				this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
				this.carModel = false
			},
			carModelClose() {
				this.carModel = false
			},
			selectCarModel() {
				this.carModel = true
			},
			selectNoColor() {
				this.carColor = true
			},
			unloadGroupPhoto() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage('image', res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
							}
						)
					}
				});
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.carNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车牌号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "总质量不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "核定载质量不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carLong) && uni.$u.test.isEmpty(this.dataDetails.caWidth) && uni
					.$u.test.isEmpty(this.dataDetails.carHeight)) {
					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.sign == '挂车'){
					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.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.drivingLicenseNumber)) {
					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 (this.sign == '挂车') {
					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
					}
				}
				return false
			},
			submit() {
				this.dataDetails.driverId = uni.getStorageSync("firstAuthentication").id
				// 校验
				if (this.validate()) return
				this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', this.dataDetails).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功！",
								complete() {
									// uni.navigateBack({
									// 	delta: 1
									// });
									uni.$u.route('/pages/mine/manageVehicles/index');
								}
							})
							// this.$refs.uToast.show({
							// 	...params
							// })
							// uni.$u.route('/pages/mine/manageVehicles/index');

						} else {
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});

			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 20rpx;
		background: white;
		padding: 0 20rpx;
		border-radius: 20rpx;
		padding-bottom: 200rpx;

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

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

			.ch-style {}
		}

		.row-ch {
			padding-right: 250rpx;
			box-sizing: border-box;
		}

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

	.input-ckg {
		height: 86rpx;
		margin-top: 0 !important;
		padding-bottom: 0 !important;

		.u-input {
			height: 100%;
			background: #F7F8FA;
			padding-left: 10rpx !important;
			padding-right: 85rpx !important;
		}

		.star {
			display: flex;
			align-items: center;
			margin: 0 10rpx;
		}

		.input-positon {
			position: relative;
		}

		.position-right {
			position: absolute;
			right: 20rpx;
			top: 0;
			width: 60rpx;
			height: 50rpx;
			bottom: 0;
			margin: auto;

		}

	}

	.picture {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 212rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		background: #2772FB;
		color: white;
		text-align: center;
		margin-left: 5%;
		padding: 30rpx 0;
		border-radius: 50rpx;
	}

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