partnerApp/components/modules/carInsure/checkImageInfo/checkImageInfo.vue

<template>
	<view class="z-index center" v-if="show" @tap.stop.prevent @touchmove.stop.prevent @click.stop.prevent>

		<view class="popContent " @tap.stop.prevent @touchmove.stop.prevent @click.stop.prevent>
			<view class="popHeader center">信息校验</view>
			<view class="popBody">
				<view class="icon iconfont icon-fanzhuanshunshizhen  lRotate center" @click.stop.prevent="rotate">
				</view>

				<movable-area class="marea" scale-area v-for="(imgitem,imgindex) in img" :key="imgindex">
					<movable-view class="mview center" direction="all" :out-of-bounds="false" :inertia="true"
						damping="90" friction="2" scale="true" scale-min="1" scale-max="4" :scale-value="scale"
						@scale="onScale" @change="movableChange">
						<image class="image" :src="imgitem" :style="{ transform: 'rotateZ(' + deg + 'deg)' }" />

					</movable-view>
				</movable-area>
				<template v-if="checkType == '2'">
					<view class="line d-flex a-center">
						<view class="line_title">车牌号</view>
						<view class="line_info d-flex flex-1">
							<input class="input" type="text" placeholder-style="font-size:28upx; color:#999"
								placeholder="请输入车牌号" @input="upperCaseType('licenseNo')" v-model="checkInfo.licenseNo"
								maxlength="8" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">发动机号</view>
						<view class="line_info d-flex flex-1">
							<input class="input" type="text" placeholder-style="font-size:28upx; color:#999"
								@input="upperCaseType('engineNo')" placeholder="请输入发动机号" v-model="checkInfo.engineNo" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">车架号</view>
						<view class="line_info d-flex flex-1">
							<input class="input" type="text" placeholder-style="font-size:28upx; color:#999"
								placeholder="请输入车架号" @input="upperCaseType('vinNo')" v-model="checkInfo.vinNo"
								maxlength="17" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">注册日期</view>
						<view class="line_info d-flex flex-1">
							<picker mode="date" :value="checkInfo.registerDate" :start="startDate" :end="endDate"
								@change="bindDateChange($event,'registerDate')">
								<view :class="!checkInfo.registerDate?'':'active'" class="registerDate d-flex a-center">
									{{!checkInfo.registerDate?"请选择日期":checkInfo.registerDate}}
								</view>
							</picker>

						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">发证日期</view>
						<view class="line_info d-flex flex-1">
							<picker mode="date" :value="checkInfo.issueDate" :start="checkInfo.registerDate"
								:end="endDate" @change="bindDateChange($event,'issueDate')">
								<view :class="!checkInfo.issueDate?'':'active'" class="registerDate d-flex a-center">
									{{!checkInfo.issueDate?"请选择日期":checkInfo.issueDate}}
								</view>
							</picker>
						</view>
					</view>
				</template>
				<template v-if="checkType == '1'">
					<view class="line d-flex a-center">
						<view class="line_title">姓名</view>
						<view class="line_info d-flex flex-1">
							<input type="text" placeholder-style="font-size:28upx; color:#999" placeholder="请输入姓名"
								v-model="checkInfo.name" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">证件号</view>
						<view class="line_info d-flex flex-1">
							<input type="text" placeholder-style="font-size:28upx; color:#999" placeholder="请输入证件号"
								v-model="checkInfo.identifyNumber" />
						</view>
					</view>
					<view class="line d-flex a-center" style="height: 100upx;">
						<view class="line_title">地址</view>
						<view class="line_info d-flex d-flex flex-1">
							<textarea class="d-flex flex-1"
								style="font-size: 28upx;width: 330upx;height: 60upx;min-height: 80upx;"
								v-model="checkInfo.addr" placeholder-style="font-size:28upx; color:#999"
								placeholder="请输入地址" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">有效期起期</view>
						<view class="line_info d-flex flex-1">
							<input type="text" placeholder-style="font-size:28upx; color:#999" placeholder="请输入证件号"
								v-model="checkInfo.identifyValidDate" />
						</view>
					</view>
					<view class="line d-flex a-center">
						<view class="line_title">有效期止期</view>
						<view class="line_info d-flex flex-1">
							<input type="text" placeholder-style="font-size:28upx; color:#999" placeholder="请输入证件号"
								v-model="checkInfo.identifyValidEndDate" />
						</view>
					</view>
				</template>
			</view>
			<view class="popBottom center d-flex">
				<view class="d-flex a-center j-center flex-1" style="border-right: 5upx solid #FAFAFA;"
					@tap="checkInfoCancel">取消</view>
				<view class="d-flex a-center j-center flex-1" @tap="checkInfoSubmit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'checkImageInfo', //插件名称
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false
			},
			img: Array,
			checkType: {
				type: Number,
				required: true,
				default: 1,
			},
			checkInfo: {
				type: Object,
				required: true,
				default: () => {
					return {};
				}
			},
			items: ['选项卡1', '选项卡2', '选项卡3'],
			current: 0,
			colorIndex: 0,
			activeColor: '#007aff',
			styleType: 'button'
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			return {
				deg: 0, //旋转角度
				scale: 1 //缩放比例
			};
		},
		methods: {

			//转变大写(车型/车架号/发动机号)
			upperCaseType(type) {
				this.checkInfo[type] = this.checkInfo[type].toUpperCase();
			},
			checkInfoCancel() {
				this.deg = 0; //旋转角度
				this.scale = 1; //缩放比例
				this.$emit('cancel')
			},
			//日期（可以选择20年以内的时间）
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 20;
				} else if (type === 'end') {}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange(e, type) { //日期赋值
				if ((type == 'issueDate') && (!this.checkInfo.registerDate)) {
					return uni.showToast({
						title: '请先输入注册日期',
						icon: "none"
					});
				}
				this.checkInfo[type] = e.detail.value;
			},
			//比例变化
			onScale(e) {

			},
			//移动变化
			movableChange(e) {
				//console.log(e);
				/* if(this.old.scale <= 1){
					this.swiper=false;
				}else if(e.detail.x===0){
					this.swiper=false;
				} */
			},

			//旋转
			rotate(e) {
				this.deg = this.deg == 270 ? 0 : this.deg + 90;
			},
			//关闭
			checkInfoSubmit() {
				if ((this.checkType == 2) && !this.checkCarInfo()) {
					return false;
				}
				if ((this.checkType == 1) && !this.checkPersonInfo()) {
					return false;
				}
				this.deg = 0; //旋转角度
				this.scale = 1; //缩放比例
				var params = {
					checkType: this.checkType,
					checkInfo: this.checkInfo
				}
				this.$emit('close', params)

			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},
			isLicense(str) {
				let mPattern =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][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挂学警港澳使领]))$/;
				return mPattern.test(str);
			},

			//校验车辆信息
			checkCarInfo() {
				if (!this.isLicense(this.checkInfo.licenseNo.trim())) {
					uni.showToast({
						title: '车牌号有误',
						icon: "none"
					});
					return false;
				}
				if (!this.checkInfo.engineNo.trim()) {
					uni.showToast({
						title: '发动机号有误',
						icon: "none"
					});
					return false;
				}
				if (!this.isFrameno(this.checkInfo.vinNo.trim())) {
					uni.showToast({
						title: '车架号有误',
						icon: "none"
					});
					return false;
				}
				if (!this.checkInfo.registerDate.trim()) {
					uni.showToast({
						title: '注册日期有误',
						icon: "none"
					});
					return false;
				}
				if (!this.checkInfo.issueDate.trim()) {
					uni.showToast({
						title: '发证日期有误',
						icon: "none"
					});
					return false;
				}
				return true;
			},
			// 身份证验证
			isIdCard(str) {
				return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			},
			//校验人员信息
			checkPersonInfo() {
				if (!this.checkInfo.name.trim()) {
					uni.showToast({
						title: '姓名不能为空',
						icon: "none"
					});
					return false;
				}
				if (!this.isIdCard(this.checkInfo.identifyNumber.trim())) {
					uni.showToast({
						title: '身份证号有误',
						icon: "none"
					});
					return false;
				}
				if (!this.checkInfo.addr.trim()) {
					uni.showToast({
						title: '地址不能为空',
						icon: "none"
					});
					return false;
				}
				return true;
			}
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	/* 弹出框样式Start */
	.z-index {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		background: rgba(0, 0, 0, 0.3);
		z-index: 999;

		.popContent {
			position: relative;
			z-index: 1000;
			width: 670upx;
			background: #FFFFFF;
			border-radius: 10upx;
			height: auto;
			padding-bottom: 50px;

			.popHeader {
				font-weight: bold;
				font-size: 32upx;
				height: 80upx;
			}

			.popBody {
				position: relative;
				width: 100%;
				background-color: #FAFAFA;
				padding: 10upx 20upx;
				box-sizing: border-box;

				.lRotate {
					color: #FFFFFF;
					font-size: 36upx;
					font-weight: bold;
					position: absolute;
					right: 20upx;
					top: 280upx;
					z-index: 1001;
					height: 60upx;
					width: 60upx;
					background-color: #000;
				}

				.marea {
					height: 330upx;
					width: 100%;
					margin-bottom: 10upx;
					overflow: hidden;

					.mview {
						width: 100%;
						height: auto;

						.image {
							width: 100%;
							height: 176px;
						}
					}
				}

				.line {
					height: 70upx;
					width: 100%;
					background: #FFF;
					border-top: 5upx solid #FAFAFA;

					.line_title {
						width: 80px;
						flex-shrink: 0;
						padding: 0upx 10upx;
						font-weight: bold;
					}

					.line_info {
						padding: 0upx 20upx;

						.registerDate {
							color: #999;
							min-width: 300upx;
							height: 70upx;
						}

						.registerDate.active {
							font-size: 28upx;
							color: #000;
							min-width: 300upx;
							height: 70upx;
						}

						.input {
							font-size: 28upx;
						}

					}
				}
			}

			.popBottom {
				position: absolute;
				box-sizing: border-box;
				bottom: 0;
				width: 100%;
				height: 100upx;
				color: #3e5cd7;
				border-top: 1px solid #f6f6f6;
				font-weight: 700;

				view {
					font-size: 32upx;
				}
			}

		}

	}

	/* 盒子内容居中 */
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	/* 弹出框样式End */
</style>