parking_pda/pages/getin/getin.vue

<template>
	<view class="">
		<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="car-info u-flex">
			<view class="car-info-img" @click="getPic">
				<u-image :src="carImg" mode="aspectFit" width="100%" height="100%"></u-image>
			</view>
			<view class="car-info-text u-flex-1">
				<view class="text-item position-wrap">
					<view class="position">车位：{{spaceName}}</view>
				</view>
				<view class="text-item u-flex u-flex u-row-between">
					<view class="">车辆类型</view>
					<view class="" @click="carTypeShow = true">
						{{vehicleType|filterCarType}}
						<u-icon class="u-m-l-10" name="arrow-down-fill" color="#C2C2C2" size="15"></u-icon>
					</view>
				</view>
				<view class="text-item u-flex u-flex u-row-between">
					<view>车辆颜色</view>
					<view @click="carColorShow = true">
						{{vehicleColor|filterCarColor}}
						<u-icon class="u-m-l-10" name="arrow-down-fill" color="#C2C2C2" size="15"></u-icon>
					</view>
				</view>
				<view class="text-item u-flex u-flex u-row-between">
					<view class="">余额：<span class="balance">{{balance||'暂无'}}</span></view>
					<!-- <view class="recharge" @click="$refs.uToast.show({title: '建设中'})">充值</view> -->
				</view>
				<view class="text-item">{{$u.timeFormat(currentTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
			</view>
		</view>
		
		<view class="other-info">
			<view class="other-info-item u-flex">
				{{vehicleNo}}
				<u-input v-model="vehicleNo" height="80" type="text" @focus="messageInputClick" placeholder="输入车牌号" />
				<u-button type="primary" @click="handleParkInInfo">确认</u-button>
			</view>
			<!-- <view class="other-info-item">
				<u-input style="width: 100%;" v-model="depositAmount" height="80" type="text" placeholder="输入进场押金" />
			</view> -->
			
		</view>
		<view class="upload-wrap">
			<u-upload 
			ref="uUpload"
			:action="uploadAction" 
			:show-progress="false" 
			upload-text="拍照取证" ></u-upload>
		</view>
		
		
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-box u-flex">
				<view class="bottom-btn bg-blue" @click="submit">入场</view>
				<view class="bottom-btn bg-gray" @click="openPage('pages/getout/getout')">取消</view>
			</view>
		</view>
		
		<u-select v-model="carTypeShow" :default-value="[2]" :list="carTypeList" @confirm="carTypeConfirm"></u-select>
		<u-select v-model="carColorShow" :default-value="[2]" :list="carColorList" @confirm="carColorConfirm"></u-select>
		<u-toast ref="uToast" />
		<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
	</view>
</template>

<script>
	import { config } from '@/common/config.js';
	import { mydata } from '@/common/data.js';
	console.log('mydata',mydata.carColorList)
	//#ifdef APP-PLUS
	import speak from '@/utils/speaks.js';
	let ALog = uni.requireNativePlugin("AndroidLog");
	let device = uni.requireNativePlugin("DeviceInfo");
	let ocr = uni.requireNativePlugin("OcrPlug");
	//#endif
	export default {
		data() {
			return {
				carImg:'/static/img/default-car.png',
				uploadAction:config.baseUrl+'/file/tencent/upload',
				spaceId:'',
				spaceName:'',
				carTypeShow:false,
				carColorShow:false,
				carTypeList:mydata.carTypeList,
				carColorList:mydata.carColorList,
				vehicleType:0,
				vehicleColor:0,
				currentTime: new Date(), // 获取当前时间
				vehicleNo:'',
				vehicleImage:null,
				memberId:null,
				depositAmount:null,
				balance:null,
				images:[],
				keyboardshow:false,
			}
		},
		onLoad(page) {
			console.log('page', page)
			this.spaceId = page.spaceId;
			this.orderInTime = page.orderInTime;
			this.spaceName = page.spaceName;
			this.roadNo = page.roadNo;
			this.carImg = page.carImg;
			this.vehicleNo = page.vehicleNo
		},
		onShow() {
			
		},
		methods:{
			customBack(){
				this.$u.route({
					// type:'switchTab',
					url: 'pages/parking/parking'
				});
			},
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			carTypeConfirm(e){
				// console.log('carTypeConfirm',e[0].label);
				// this.carType = e[0].label;
				// this.carType = e[0].value;
				this.vehicleType = e[0].value;
			},
			carColorConfirm(e){
				console.log('e',e)
				this.vehicleColor = e[0].value;
			},
			submit(){
				let files = [];
				let that = this;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				});
				// 如果不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				files.forEach(function(element) {
				  that.images.push(element.response.data.url);
				});
				let param ={
					spaceId:this.spaceId,
					vehicleNo:this.vehicleNo,
					vehicleColor:this.vehicleColor,
					vehicleImage:this.vehicleImage,
					vehicleType:this.vehicleType,
					memberId:this.memberId,
					depositAmount:this.depositAmount,
					images:this.images
				};
				this.$u.api.entrance(param)
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						url:'pages/getout/getout'
					});
					//#ifdef APP-PLUS
					device.print(res.data.print);
					speak(res.data.speak);
					//#endif
					console.log('entrance',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						// url:'pages/parking/parking'
					});
					console.log('entrance ',err)
				});
			},
			handleParkInInfo(){
				let param ={
					vehicleNo:this.vehicleNo,
					roadNo:this.roadNo
				};
				this.$u.api.parkInInfo(param)
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						// url:'pages/getout/getout'
					});
					//#ifdef APP-PLUS
					speak(this.vehicleNo);
					//#endif
					this.vehicleType = res?.data?.vehicleType??"0";
					this.balance = res?.data?.balance;
					console.log('parkInInfo',res);
					console.log('this.vehicleType',this.vehicleType)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						// url:'pages/parking/parking'
					});
					console.log('parkInInfo ',err)
				});
			},
			getPic(){
				// let that = this;
				// ocr.ocrVehicleNo((ret) => {
				// 	if (ret.success){
				// 		that.vehicleNo = ret.vehicleNo;
				// 		that.carImg = 'data:image/png;base64,' + ret.imageBase64;
				// 		this.$u.api.tencentBase64Upload({
				// 			base64: ret.imageBase64,
				// 			suffix: 'png'
				// 		})
				// 		.then(res=>{
				// 				that.vehicleImage =  res.data.url;
				// 		}).catch(err=>{});
				// 	}else {
				// 		plus.nativeUI.toast('识别失败');
				// 	}
				// });
				
				
				// uni.chooseImage({
				// 	count: 1, //默认9
				// 	sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['camera'], //
				// 	success: function (res) {
				// 		console.log('img',res)
				// 		that.carImg = res.tempFilePaths[0];
				// 		uni.showLoading({});
				// 		const tempFilePaths = res.tempFilePaths;
				// 		// 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				// 		uni.uploadFile({
				// 			url: `${that.config.fileUrl}/baidu/ocr`,
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			formData: {
				// 				'isUpload': '1'  // 上传附带参数
				// 			},
				// 			success: (res) => {
				// 				// 根据接口具体返回格式   赋值具体对应url
				// 				// alert(uploadFileRes.data);
				// 				let resobj=eval("("+res.data+")");
				// 				uni.hideLoading();
				// 				if(resobj.code==200){
				// 					console.log(resobj);
				// 					//#ifdef APP-PLUS
				// 					speak(resobj.data.vehicleNo);
				// 					//#endif
				// 					that.vehicleNo = resobj.data.vehicleNo;
				// 					that.vehicleClor = resobj.data.vehicleClor;
				// 					that.vehicleImage =  resobj.data.url;
				// 				}else{
				// 					that.$refs.uToast.show({
				// 						title: resobj.msg,
				// 						type: 'error'
				// 					});
				// 				};
				// 				console.log('resobj',resobj);
				// 			},
				// 			fail: (err) => {
				// 				that.$refs.uToast.show({
				// 					title:err.msg,
				// 					type: 'error'
				// 				});
				// 				uni.hideLoading();
				// 			}
				// 		});
				// 	}
				// });
			},
			messageInputClick(){
				this.keyboardshow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyboardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.vehicleNo += val;
				console.log(this.newPlateNumber);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.vehicleNo.length) this.vehicleNo = this.vehicleNo.substr(0, this.vehicleNo.length - 1);
				console.log(this.vehicleNo);
			},
			
		}
		
	}
</script>

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