MP-XiaoXing/pages/components/showModels.vue

<template>
	<view>

		<view class="cu-modal" :class="showAuthFrror?'show':''">
			<view class="cu-dialog overflow-unset">
				<view class="cu-bar bg-white justify-end">
					<!-- <view class="content">您还没有完成认证</view> -->
					<view class="content text-center overflow-unset">
						<image :src="imgURL+'default-avator.png'" mode="widthFix" class="ro-right "></image>
					</view>
					<view class="action" @tap="hideModal('auth')">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white"> 
					<view class="">
						<text>
							感谢您对星油加油的支持，为了更好的为您服务，我们建议您立即进行认证，以便我们为您提供更好的服务。
						</text>
					</view>
					<view class="margin-tb-sm">
						<form>
							<view class="cu-form-group solid radius">
								<view class="title">车牌号</view>
								<!-- <view class="cu-capsule radius">
									<view class='cu-tag bg-blue '>
										皖
									</view>
								</view> -->
								<input :maxlength="7" v-model="carNumber" disabled @tap="showModel='show'"
									placeholder="请输入车牌号" name="input" />
							</view>
							<view class="cu-form-group margin-top radius solid">
								<view class="title">姓名</view>
								<!-- <view class="cu-capsule radius">
									<view class='cu-tag bg-blue '>
										皖
									</view>
								</view> -->
								<input v-model="username" placeholder="请输入姓名用于认证" type="text" name="input" />
							</view>
						</form>
					</view>
					<view class="btn-box padding-top">
						<button @tap="authVehicle" class="cu-tn bg-red round margin-bottom lg" color="#3982F6"
							size="large">立即认证
						</button>
						<button @tap="hideModal('auth')" class="cu-tn round lg" size="large">稍后认证</button>
					</view>
				</view>
			</view>
		</view>
		<plate-number-picker @newPlate="showPlateModal(false,true)" @onDeleteInput="onDeleteInput"
			:showInputList="showInputList" :showPlateList="showPlateList" @selectNo="selectNo"
			@clearAll="clearPlateNumber" @selectName="selectText" @hideModal="showModel=''" :modalName="showModel" />
	</view>
</template>

<script>
	import PlateNumberPicker from '@/components/plate-number-picker/plate-number-picker.vue'
	import oilSiteApi from '@/api/oil-site.js'
	export default {
		components: {
			PlateNumberPicker
		},
		props: {
			showLocationError: {
				type: Boolean,
				default: false
			},
			showAuthFrror: {
				type: Boolean,
				default: false
			},
			showContractError: {
				type: Boolean,
				default: false
			},
			waybillData: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				imgURL: this.global.imgURL,
				showPlateList: true,
				showInputList: false,
				testResult: true,
				carNumber: '',
				username: '',
				plateNo: '',
				plateText: '',
				showModel: '',
			}
		},
		watch: {
			plateNo: {
				immediate: true,
				handler(newVal, oldVal) {
					this.plateNo = newVal
					if (newVal) {
						this.text()
					}
				}
			}
		},
		methods: {
			callShipper() {
				uni.makePhoneCall({
					phoneNumber: this.waybillData.shippePhone
				})
			},
			hideModal(name) {
				// console.log('子组件hideOneModal', name)
				this.$emit('hideOneModal', name)
			},
			registerContracts() {
				this.$emit('registerContracts')
			},
			toSetLocation() {
				this.$emit('toSetLocation')
			},
			toAuth() {
				// uni.navigateTo({
				// 	url: '认证路径'
				// })
			},
			// 提交车牌号
			authVehicle() {
				this.tsetPlate()
				if (!this.username) {
					uni.showToast({
						title: '请输入用户姓名',
						icon: 'none'
					})
					return false
				}
				if (this.testResult) {
					let data2 = {
						userName: this.username,
						plateNumber: this.carNumber,
						accountSources: 'XOIL_DRIVER_WECHAT_APPLET'
					}
					oilSiteApi.auth(data2).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.$emit('hideOneModal', 'auth')
						}
					})
				} else {
					uni.showToast({
						title: '车牌号校验不通过',
						icon: 'none'
					});
				}
			},


			// 处理车牌号
			clearPlateNumber() {
				this.plateText = ''
				this.plateNo = ""
				this.carNumber = ''
				this.showInputList = false
				this.showPlateList = true
				// console.log(this.showPlateList)
			},
			text() {
				this.carNumber = this.plateText + this.plateNo
				this.tsetPlate()

			},
			tsetPlate() {
				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.carNumber = this.carNumber.slice(0, -1)
				if (this.carNumber.length > 1) {
					this.plateNo = this.plateNo.slice(0, -1)
				}
				if (this.carNumber.length == 1) {
					this.plateText = ''
				}
				if (this.plateNo.length == 1) {
					this.plateNo = ''
				}
				if (!this.carNumber) {
					this.plateText = ''
					this.plateNo = ''
					this.showPlateList = false
					this.showInputList = true
					this.text()
				}
			},
			selectText(item) {
				this.plateText = item
				this.showPlateList = false
				this.showInputList = true
				this.text()
			},
			selectNo(item) {
				if (this.plateNo.length >= 5) {
					this.showModel = ''
				}
				this.plateNo = this.plateNo + item
				this.text()
			},
			showPlateModal(val1, val2) {
				this.showPlateList = val1
				this.showInputList = val2
				this.showModel = 'show'
			}
			// 		 处理车牌号结束
		}
	}
</script>

<style scoped>
	.cu-list.menu-avatar>.cu-item .action {
		width: 130rpx;
	}

	.ro-right {
		max-width: 150upx;
		display: inline-block;
		margin-top: -3rem;
		/* position: absolute; */
	}

	.position-re {
		position: relative;
	}

	.postion-ab {
		position: absolute;
		top: -0.8rem;
		left: 0.2rem;
		min-width: 100%;
	}

	.overflow-unset.content {
		overflow: visible;
	}

	.overflow-unset.cu-dialog {
		overflow: visible;
	}

	.cu-form-group.border {
		border: 0.5px solid #ccc;
		/* transform: scale(0.5); */
	}
</style>