zx_flk_app/pages/inputLicensePlate/inputLicensePlate.vue

<template>
	<view class="container">
		<view class="code">
			<view class="code-tip flex-row">
				<view>输入6位车牌号</view>
				<view @tap="clickScan" class="code-scan">
					<img src="https://qiniu.bms16.com/FvoYYiKMCkQlUbdANiXUBLx7_vQ1" />
					快捷输入
				</view>
			</view>
			<view class="code-input flex-row">
				<view @tap="tapChange" 
					v-for="(item, index) in plateInputs" 
					:key="index" 
					:class="(hideValue.length==index&&hideFocus)?'inputed-item':'input-item'">
					<view class="input-text">
						{{item.value}}
					</view>
				</view>
			</view>
			<view>
				<!-- #ifdef MP-ALIPAY-->
				<input class="inputStyle-ali" :enableNative="false"  @blur="inputBlur" @input="inputChange" :value="hideValue" :focus="hideFocus"
					type="text"></input>
				<!-- #endif  -->
				
				<!-- #ifdef MP-WEIXIN  -->
				<input class="inputStyle-wx"  @blur="inputBlur" @input="inputChange" :value="hideValue" :focus="hideFocus"
					type="text"></input>
				<!-- #endif  -->
				
			</view>
		</view>
		
	</view>
</template>

<script>
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	var OCR = require('../../common/OCR.js');
	export default {
		data() {
			return {
				isReturnIndex:true,//是否返回首页
				isReturnHome: true,
				plateInputs: Array.from({
					length: 6
				}, () => ({
					value: ''
				})),
				preFullPlateNumber: '',
				myLocation: {},
				order_sn: '',
				order_model_id: '',
				hideValue: '',
				hideFocus: false,
				hiddenInput: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.order_sn = options.order_sn ? options.order_sn : ''
			this.order_model_id = options.order_model_id ? options.order_model_id : ''
			this.isReturnIndex = options.isReturnIndex ? false : true
			const storedLocation = uni.getStorageSync('user_current_location');
			const me = this
			if (storedLocation && storedLocation.longitude && storedLocation.latitude) {
				// 如果本地有存储的定位信息，则直接使用
				me.myLocation = storedLocation
				//#ifdef MP-ALIPAY
				setTimeout(function() {
					me.hideFocus = true
				}, 500);
				//#endif
				//#ifdef MP-WEIXIN
				me.hideFocus = true
				//#endif
			} else {
				setTimeout(function() {
					me.getLocationAndSave();
				}, 100);
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.isReturnHome = true
		},
		onUnload: function () {
			if(this.isReturnIndex && this.isReturnHome){
				uni.switchTab({
					url: '/pages/my/my' 
				});
			}else if(!this.isReturnIndex && this.isReturnHome){
				uni.switchTab({
					url: '/pages/index/index' // 首页
				});
			}
		},
		methods: {
			inputChange(event) {
				this.hideValue = event.detail.value
				const regex = /^[0-9a-zA-Z]$/;
				const isNumOrLetter = regex.test(this.hideValue)
				if (!isNumOrLetter) {
					this.hideValue = event.detail.value.replace(/[^0-9a-z]/gi, '')
				}
				if (this.hideValue.length > 6) return
				//限制只输入数字字母
				
				const test = [...this.hideValue]
				const testSix=this.padArrayToSix(test)
				if (this.hideValue.length > 0) {
					let len = this.hideValue.length
					if (this.hideValue.length > this.preFullPlateNumber.length) {
						// this.plateInputs[len - 1].value = test[len - 1]
						// this.plateInputs[len - 1].value = test.slice(0, 6)
						for(let i=0; i<this.plateInputs.length;i++){
							this.plateInputs[i].value=testSix[i]
						}
					} else {
						this.plateInputs[len].value = ''
					}
				}
				if (this.hideValue.length == 0 && this.preFullPlateNumber.length == 1) {
					this.plateInputs[0].value = ''
				}
				//存储前一个输入结果
				this.preFullPlateNumber = this.hideValue
				if (this.hideValue.length == 6) {
					this.submitPlate()
				}
			},
			tapChange() {
				this.hideFocus = true
			},
			inputBlur() {
				this.hideFocus = false
			},

			getLocationAndSave: function() {
				const me = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						uni.hideLoading();
						var myLocation = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						me.myLocation = myLocation
						uni.setStorageSync('user_current_location', myLocation);
					},
					fail: function(res) {
						uni.hideLoading();
					},
					complete: function(res) {
						uni.hideLoading();
					}
				});
			},

			clickScan() {
				const me = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: function(res) {
						me.upImage(res);
					}
				});
			},

			upImage(res) {
				const me = this;
				let tempFilePaths;
				tempFilePaths = res.tempFilePaths[0];
				uni.getFileSystemManager().readFile({
					filePath: tempFilePaths,
					encoding: 'base64',
					success: function(res) {
						common.loading();
						OCR.scanOCRText(res.data).then((words) => {
							uni.hideLoading();
							me.setData({
								hideValue: words,
							});
							me.submitPlate()
						});
						//that.scanImageInfo(res.data);    // 调用百度API解析图片获取文字
					},

					fail: function(res) {
						console.log('[读取图片数据fail]', res);
					},
					complete: function(res) {}
				});
			},

			submitPlate() {
				const pData = {
					longitude: this.myLocation.longitude,
					latitude: this.myLocation.latitude,
					plate_number: this.hideValue
				}
				const me = this
				http.postApi(config.API_DAYHIRE_CAR_CAR_INFO, pData, (resp) => {
					uni.hideLoading()
					if (resp.data.code === 200) {
						const timestamp = Date.now(); // 获取当前时间戳（毫秒）  
						const isOffline = (Math.floor(timestamp / 1000) - resp.data.data.last_comm_time) > 1800
						if (resp.data.data.last_comm_time === 0 || isOffline) {
							common.simpleToast('此车辆已离线，请选择其他车辆')
						} else {
							let carInfo = JSON.stringify(resp.data.data)
							const car_model = resp.data.data.model_info.car_model
							const model_images = resp.data.data.model_info.model_images.split(',')
							const return_imgs = resp.data.data.return_imgs
							var model_id = resp.data.data.model_info.model_id
							if (resp.data.data.has_owner) { //车辆正在被使用
								if (resp.data.data.is_mine) { //是本人在使用
									wx.showModal({
										title: '提示',
										content: '已有正在使用的车辆，是否跳转至车辆详情页?',
										cancelText: '取消',
										confirmText: '确定',
										success: function(res) {
											this.isReturnHome = false
											uni.navigateTo({
												url: '/pages/battery/battery?plate_number=' +
													me
													.hideValue
											});
										},
										fail: function(res) {},
										complete: function(res) {},
									})
								} else {
									common.simpleToast('此车辆正在被使用')
								}
							} else {
								if (me.order_sn != '') {
									if (this.order_model_id != model_id) { // 预租车型与之前预约车型不一致
										common.simpleToast('与预约车型不符')
									} else {
										this.isReturnHome = false
										uni.navigateTo({
											url: '/pages/activation/activation?plate_number=' + me
												.hideValue + '&order_sn=' + this.order_sn +
												'&car_model=' + car_model + '&model_image=' +
												model_images[0] + '&return_imgs=' + JSON.stringify(
													return_imgs),
											fail() {}
										})
									}

								} else {
									this.isReturnHome = false
									uni.navigateTo({
										url: '/pages/carIntroduce/carIntroduce?carInfo=' +
											encodeURIComponent(carInfo) + '&plate_number=' + me
											.hideValue,
										fail() {}
									})
								}
							}
							setTimeout(() => {
								me.setData({
									plateInputs: Array.from({
										length: 6
									}, () => ({
										value: ''
									})),
									hideValue: '',
									preFullPlateNumber: ''
								})
							}, 500)
						}
					} else {
						common.simpleToast(resp.data.msg)
						me.setData({
							plateInputs: Array.from({
								length: 6
							}, () => ({
								value: ''
							})),
							hideValue: '',
							preFullPlateNumber: ''
						})
					}
				})
			},

			navToPage(e) {
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			padArrayToSix(arr,defaultValue = ''){
				return Array.from({ length: 6 }, () => defaultValue).map((_, index) => arr[index] || defaultValue);
			}
		}
	};
</script>

<style>
	@import './inputLicensePlate.css';
</style>