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">
				<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="note">备注：请按顺序依次拍摄车牌，车头，车尾，发动机号，以作为取证照片！</view>
		<view class="upload-wrap">
			<u-upload 
			ref="uUpload"
			:action="uploadAction" 
			:show-progress="false" 
			max-count="4"
			@on-oversize
			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>
		<u-popup class="popup-confirmTime" v-model="timeshow" :mask-close-able="false" mode="center" border-radius="20" width="90%" style="z-index: 99;">
			<view class="popup-title">入场时间确认:</view>
			<view class="popup-content">请在地磁时间和当前时间里选择一个来做为入场时间:</view>
			<view class="popup-confirm  u-flex">
					<u-radio-group v-model="timevalue" @change="radioGroupChange" :wrap="true">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in timeList" :key="index" 
							:name="item.time"
							:disabled="item.disabled"
						>
						<view class="popup-intime">
						<view class="popup-intime-top" > {{item.name}}</view>
						<!-- <view class="popup-intime-bottom" v-if="item.time !=0">{{item.time}}</view> -->
						<picker v-if="index === 1" class="openTime" mode="time"  :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view class="popup-intime-bottom" >{{item.time}}</view>
						</picker>
						<view v-else class="popup-intime-bottom" >{{item.time}}</view>
						</view>
						<!-- <view class="pop-right"><u-button class="upset" size="mini" @click="upset()" v-if="index==0">修正</u-button></view> -->
						</u-radio>
					</u-radio-group>
			</view>
			<view class="button-wrap">
				<u-button class="btn1" @click="timesubmit">确认</u-button>
				<u-button class="btn2" @click="cancel">取消</u-button>
			</view>
		</u-popup>
		<!-- <u-popup class="timeopen" v-model="visible" mode="center" border-radius="20" width="90%"height="50%">
			<picker class="openTime" mode="time"  :value="time" start="09:01" end="21:01" @change="bindTimeChange">
				<view class="uni-input">{{time}}</view>
			</picker>
		</u-popup> -->
		
		<!-- <select-timer :visible="visible"></select-timer> -->
	</view>
</template>

<script>
	import { config } from '@/common/config.js';
	import { mydata } from '@/common/data.js';
	import selectTimer from '../../components/select-timer/select-timer.vue';
	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 {
		components: {
			selectTimer
		},
		data() {
			return {
				time: '12:01',
				visible:false,
				carImg:'',
				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,
				timeshow:false,
				timevalue:'',
				timechangeList:[],
				timeList:[
					{
						name:'地磁时间',
						disabled: false,
						time:''
					},
					{
						name:'当前时间',
						disabled: false,
						time:''
					}
				],
				inTime:'',
				confirmTime:'',
				time:'',
				placeStatus:'',
				finialtime:'',
				currentVehicleNo:''
			}
		},
		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.vehicleImage= page.vehicleImage
			this.vehicleNo = page.vehicleNo;
			this.inTime = page.inTime;
			this.placeStatus=page.placeStatus;
			this.currentVehicleNo=page.currentVehicleNo
			// if(this.inTime == null || this.inTime == ''){
			// 	this.timeList[0].disabled = true;
				
			// }
		},
		onShow() {
			
			this.timeList[1].time = this.getTimer();
			// this.timeList[1].time=this.currentTime.getFullYear()+ '-' +(this.currentTime.getMonth()+1)+ '-' +this.currentTime.getDate()+ ' ' +this.finialtime+ ':'+"00";
			setTimeout( () => {
				this.timeList[0].time = this.inTime;
				if(this.timeList[0].time==null||this.timeList[0].time==''){
					console.log(33)
					this.timevalue=this.timeList[1].time
					this.timeList[0].disabled=true
				}else{
					console.log(11)
					this.timevalue=this.timeList[0].time
					this.timeList[0].disabled=false
				}
			}, 1000);
			
		},
		methods:{
			// upset(){
			// 	this.visible=true;
			// },
			bindTimeChange(e) {
				this.finialtime = e.target.value;
				console.log(this.finialtime)
				this.timeList[1].time=this.getYMD()+ ' ' +this.finialtime+ ':'+"00";
				console.log(this.timeList[0].time)
				this.confirmTime=this.timeList[1].time
			},
			cancel(){
				this.timeshow=false;
			},
			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);
				});
				if(that.images=='' || that.images==null){
					this.$refs.uToast.show({
						title: '需完整上传4张取证照片',
						type: 'error',
					})
				}else{
					this.time = this.confirmTime;
				console.log(this.timeList[1].time)
				this.timeshow=true;
				}
				
				// this.timeList[0].time = this.inTime;
			},
			radioGroupChange(){
				
			},
			getYMD(){
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth() + 1;
				mon = mon <10 ? '0' + mon : mon;
				var d = time.getDate();
				d = d <10 ? '0' + d : d;
				return y + '-' + mon + '-' + d ;
			},
			getTimer(){
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth() + 1;
				mon = mon <10 ? '0' + mon : mon;
				var d = time.getDate();
				d = d <10 ? '0' + d : d;
				var h = time.getHours();
				h = h < 10 ? '0' + h : h;
				var m = time.getMinutes();
				m = m < 10 ? '0' + m : m;
				var s = time.getSeconds();
				s = s < 10 ? '0' + s : s;
				return y + '-' + mon + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			radioChange(e) {
				this.confirmTime = e;
			},
			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;
			},
			timesubmit(){
				this.time = this.confirmTime;
				console.log(this.time)
				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,
					inTime:this.time
				};
				if(this.placeStatus==1&&(this.currentVehicleNo == null || this.currentVehicleNo=='')){
					this.$u.api.parkInConfirm(param)//有车但是车牌为空
					.then(res=>{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						uni.redirectTo({
						    url: '/pages/getout/getout'
						});
						//#ifdef APP-PLUS
						device.print(res.data.print);
						speak(res.data.speak);
						//#endif
						// console.log('parkInConfirm',res)
					}).catch(err=>{
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
							// url:'pages/parking/parking'
						});
						console.log('parkInConfirm ',err)
					});
				}else{
					this.$u.api.entrance(param)//车位空闲调
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					});
					uni.redirectTo({
					    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>