MP-XiaoXing/BagStation/myCars/myCars.vue

<template>
	<view>
	<cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
			<block slot="content">添加车辆</block>
		</cu-custom>
		<view class="margin">
			<view class="">
				<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>
				</form>
			</view>
		
		</view>
		<view class="margin-lg margin-top-lg padding-top-lg">
			<button @tap="authVehicle" class="cu-tn bg-red round margin-bottom lg" color="#3982F6"
				size="large">立即添加
			</button>
		</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.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: '添加成功',
								icon: 'none'
							})
							const timmm = setTimeout(()=>{
								uni.navigateBack({
									
								})
								clearTimeout(timmm)
							},800)
						}
					})
				} 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>