MP-XiaoXing/BagAuth/pages/authentication/authForm/authForm.vue

<template>
	<view class="content">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">认证</block>
		</cu-custom>
		<view class="padding">
			<view class="padding-left padding-bottom-xs">
				<text>身份证</text>
			</view>
			<view class="shadow radius">
				<view class="bg-white padding-sm ">
					<view class="grid  uplaod-container grid-square justify-between ">
						<view class="bg-img  basis-sm  " v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids  oil-main-btn-color basis-sm" @tap="ChooseImage" v-if="imgList.length<1">
							<text class='cuIcon-cameraadd oil-main-color'></text>
							<view class="text-center upload-desc font-12">
								身份证人像面
							</view>
						</view>
						<view class="bg-img basis-sm" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids oil-main-btn-color basis-sm" @tap="ChooseImage" v-if="imgList.length<1">
							<text class='cuIcon-cameraadd oil-main-color'></text>
							<view class="text-center upload-desc font-12">
								<text>身份证国徽面</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">车牌号</view>
					<text v-if="!plateText" @tap="showPlateModal(true,false)" class="cuIcon-right oil-main-btn-color oil-main-color"></text>
					<text v-else @tap="showPlateModal(true,false)" class=" oil-main-btn-color oil-main-color plate-name">{{plateText}}</text>
					<input v-model="plateNo" :maxlength="6" @tap="showPlateModal(false,true)" read-only adjust-position class="margin-left"
					 placeholder="车牌号码" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input adjust-position placeholder="两字短标题" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">性别</view>
					<input adjust-position placeholder="两字短标题" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input adjust-position placeholder="两字短标题" name="input"></input>
				</view>
				<PlateNumberPicker @newPlate="showPlateModal(false,true)" @onDeleteInput="onDeleteInput" :showInputList="showInputList"
				 :showPlateList="showPlateList" @selectNo="selectNo" @selectName="selectText" @hideModal="showModel=''" :modalName="showModel" />
			</view>

		</view>
		<view class="confirm-btn">
			<button class="bg-main-oil  margin">确定</button>
		</view>
		<view class="my-bg">

		</view>
	</view>
</template>

<script>
	import PlateNumberPicker from '@/components/plate-number-picker/plate-number-picker.vue'
	export default {
		components: {
			PlateNumberPicker
		},
		data() {
			return {
				showPlateList: true,
				showInputList: false,
				carNumber: '',
				plateNo: '',
				plateText: '',
				imgList: [],
				plateName: '',
				showPlateList: true,
				showInputList: false,
				showModel: ''
			}
		},
		methods: {
			text() {
				this.carNumber = this.plateText + this.plateNo
				this.tsetPlate()
			},
			tsetPlate() {
				this.carNumber = this.plateText + this.plateNo
				this.testResult =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
					.test(this.carNumber)
			},
			onDeleteInput() {
				this.plateNo = this.plateNo.slice(0, -1)
			},
			selectText(item) {
				this.plateText = item
				this.showPlateList = false
				this.showInputList = true
				this.tsetPlate()
			},
			selectNo(item) {
				if (this.plateNo.length >= 5) {
					this.showModel = ''
				}
				this.plateNo = this.plateNo + item
				this.tsetPlate()
			},
			showPlateModal(val1, val2) {
				this.showPlateList = val1
				this.showInputList = val2
				this.showModel = 'show'
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.bg-img {
		min-height: 200rpx;
	}

	.uplaod-container {
		min-height: 200upx;
	}

	.solids {
		position: relative;
	}

	.upload-desc {
		position: absolute;
		top: 120rpx;
		color: #FE0505;
		width: 100%;
	}

	.content {
		background-color: #f1f2f7;
		min-height: 100%;
	}

	.plate-name {
		display: inline-block;
		padding: 0.15rem 0.4rem;
	}

	.confirm-btn {
		background-color: #f1f2f7;
		position: absolute;
		width: 750upx;
		bottom: 200rpx;
	}
</style>