parking_pda/pages/ownersquery/ownersquery.vue

<template>
	<view>
		<u-navbar
		 title="车主查询" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"></u-navbar>
		<view class="taking-pictures" @click="getPic">点击拍照</view>
		<view class="wrap">
			<view class="title">手输车牌号</view>
			<view class="new-plate-number">
				<view class="message-input-wrap" @click="messageInputClick">
					<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
				</view>				
				<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
			</view>
			<view class="bottom-btn" @click="submit">确认</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyboardshow:false,
				newPlateNumber:'',
				vehicleClor:''
			}
		},
		onLoad(page){
			
		},
		methods:{
			customBack(){
				this.$u.route({
					// type:'switchTab',
					url: 'pages/index/index'
				});
			},
			getPic(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //
					success: function (res) {
						// console.log('img',res)
						uni.showLoading({});
						const tempFilePaths = res.tempFilePaths;
						// 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
						uni.uploadFile({
							url: `${that.config.fileUrl}/baidu/ocr`,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'isUpload': 0  // 上传附带参数
							},
							success: (res) => {
								// 根据接口具体返回格式   赋值具体对应url
								// alert(uploadFileRes.data);
								let resobj=eval("("+res.data+")");
								uni.hideLoading();
								if(resobj.code==200){
									console.log(resobj);
									that.newPlateNumber = resobj.data.vehicleNo;
									// that.vehicleClor = resobj.data.vehicleClor;
								}else{
									that.$refs.uToast.show({
										title: resobj.msg,
										type: 'error'
									});
								}
								
								console.log(res);
							},
							fail: (err) => {
								that.$refs.uToast.show({
									title:err.msg,
									type: 'error'
								});
								uni.hideLoading();
							}
						});
					}
				});
					
				
			},
			messageInputClick(){
				this.keyboardshow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyboardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.newPlateNumber += val;
				console.log(this.newPlateNumber);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
				console.log(this.newPlateNumber);
			},
			submit(){
				this.$u.route({
					url: 'pages/ownersquery/ownersinfo/ownersinfo',
					params: {
						vehicleNo: this.newPlateNumber
					}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	@import "./ownersquery.scss";
</style>