Selaa lähdekoodia

车辆入场确认

gcz 3 vuotta sitten
vanhempi
commit
ec763219ed
2 muutettua tiedostoa jossa 248 lisäystä ja 0 poistoa
  1. 68 0
      pages/getout/getout.scss
  2. 180 0
      pages/getout/getout.vue

+ 68 - 0
pages/getout/getout.scss

@@ -0,0 +1,68 @@
+.car-info{
+	margin-top: 20rpx;
+	margin-bottom: 33rpx;
+	padding: 32rpx 40rpx 54rpx;
+	border-bottom: 20rpx solid #F4F4F4;
+	.car-info-img{
+		width: 220rpx;
+		height: 287rpx;;
+		padding: 14rpx;
+		margin-right: 35rpx;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 8rpx 3rpx rgba(166, 166, 166, 0.29);
+		border-radius: 10rpx;
+	}
+	.car-info-text{
+		.text-item{
+			padding-bottom: 15rpx;
+			margin-bottom: 15rpx;
+			border-bottom: 1px solid #EAEAEA;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #8A8A8A;
+			line-height: 42rpx;
+			letter-spacing: 1px;
+			.car{
+				font-size: 40rpx;
+				font-weight: 500;
+				color: #3D3D3D;
+				line-height: 56rpx;
+			}
+			.balance{
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #FA6400;
+				line-height: 45rpx;
+			}
+			.recharge{
+				padding: 0 22rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				background: #3397FA;
+				color: #fff;
+				border-radius: 5rpx;
+				font-size: 18rpx;
+			}
+		}
+		.text-item.position-wrap{
+			font-size: 40rpx;
+			font-weight: 500;
+			color: #3D3D3D;
+			line-height: 56rpx;
+		}
+	}
+}
+
+.confirm-pop{
+	.confirm-pop-til{
+		font-size: 40rpx;
+		text-align: center;
+		padding: 40rpx 0 10rpx;
+	}
+	.btn{
+		padding: 0 0 25rpx;
+		text-align: center;
+		font-size: 35rpx;
+	}
+}

+ 180 - 0
pages/getout/getout.vue

@@ -28,23 +28,86 @@
 		</view>
 		
 		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
+		<u-popup class="confirm-pop" v-model="confirmPop" mode="center" border-radius="20" width="90%">
+			<view class="confirm-pop-til">入场确认</view>
+			<view class="confirm-pop-con car-info u-flex">
+				<view class="car-info-img" @click="getPic">
+					<u-image :src="confirmData.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">车位:{{confirmData.spaceName}}</view>
+					</view>
+					<view class="text-item u-flex u-flex u-row-between">
+						<view>车牌号</view>
+						<view class="u-flex-1 u-m-l-40">
+							<u-input v-model="confirmData.vehicleNo" height="80" width="100" type="text" @focus="messageInputClick" placeholder="输入车牌号" />
+							<!-- <u-button type="primary" size="s" @click="handleParkInInfo">确认</u-button> -->
+						</view>
+					</view>
+					<view class="text-item u-flex u-flex u-row-between">
+						<view class="">车辆类型</view>
+						<view class="" @click="carTypeShow = true">
+							{{confirmData.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">
+							{{confirmData.vehicleColor|filterCarColor}}
+							<u-icon class="u-m-l-10" name="arrow-down-fill" color="#C2C2C2" size="15"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="upload-wrap">
+				<u-upload 
+				ref="uUpload"
+				:action="uploadAction" 
+				:show-progress="false" 
+				upload-text="拍照取证" ></u-upload>
+			</view>
+			<view class="btn-wrap">
+				<view class="btn" @click="confirmIn">确认</view>
+			</view>
+		</u-popup>
 		<u-toast ref="uToast" />
+		<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
+		<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>
 	</view>
 </template>
 
 <script>
+	import { config } from '@/common/config.js';
+	import { mydata } from '@/common/data.js';
 	export default {
 		data() {
 			return {
 				roadNo:null,//路段编码 ,示例值(RN000000004)
 				actionList:[
 					{text: '出场'},
+					{text: '入场确认'},
 				],
 				actionShow:false,
 				roadspaceList:[],
 				orderInfo:null,
 				spaceId:null,
 				currentTime: new Date(), // 获取当前时间
+				confirmPop:false,
+				confirmData:{
+					carImg:'/static/img/default-car.png',
+					spaceName:null,
+					vehicleType:null,
+					vehicleColor:null,
+				},
+				keyboardshow:false,
+				carTypeShow:false,
+				carColorShow:false,
+				carTypeList:mydata.carTypeList,
+				carColorList:mydata.carColorList,
+				uploadAction:config.baseUrl+'/file/tencent/upload',
 				
 			}
 		},
@@ -96,6 +159,7 @@
 				});
 			},
 			roadspaceClick(orderInfo){
+				this.confirmData = orderInfo;
 				this.actionShow = true;
 				this.orderInfo = orderInfo;
 				this.spaceId = orderInfo.id;
@@ -117,10 +181,125 @@
 							}
 						});
 						break;
+					case 1:{
+						this.confirmPop = true;
+						break;
+					}
 					default:
 						break;
 				}
 			},
+			messageInputClick(){
+				this.keyboardshow = true;
+			},
+			// 按键被点击(点击退格键不会触发此事件)
+			keyboardChange(val) {
+				// 将每次按键的值拼接到value变量中,注意+=写法
+				this.confirmData.vehicleNo += val;
+				console.log(this.confirmData.vehicleNo);
+			},
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if(this.confirmData.vehicleNo.length) this.confirmData.vehicleNo = this.confirmData.vehicleNo.substr(0, this.confirmData.vehicleNo.length - 1);
+				console.log(this.confirmData.vehicleNo);
+			},
+			carTypeConfirm(e){
+				this.confirmData.vehicleType = e[0].value;
+			},
+			carColorConfirm(e){
+				console.log('e',e)
+				this.confirmData.vehicleColor = e[0].value;
+				console.log('this.confirmData',this.confirmData)
+			},
+			getPic(){
+				let that = this;
+				uni.chooseImage({
+					count: 1, //默认9
+					sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
+					sourceType: ['camera'], //
+					success: function (res) {
+						console.log('img',res)
+						that.confirmData.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.confirmData.vehicleNo = resobj.data.vehicleNo;
+									that.confirmData.vehicleClor = resobj.data.vehicleClor;
+									that.confirmData.vehicleImage =  resobj.data.url;
+									console.log('that.confirmData',that.confirmData);
+								}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();
+							}
+						});
+					}
+				});
+			},
+			confirmIn(){
+				let files = [];
+				let that = this;
+				// 通过filter,筛选出上传进度为100的文件(因为某些上传失败的文件,进度值不为100,这个是可选的操作)
+				files = this.$refs.uUpload.lists.filter(val => {
+					return val.progress == 100;
+				});
+				// 如果不需要进行太多的处理,直接如下即可
+				// files = this.$refs.uUpload.lists;
+				that.confirmData.images = [];
+				this.confirmData.spaceId = that.confirmData.id;
+				files.forEach(function(element) {
+				  that.confirmData.images.push(element.response.data.url);
+				});
+				let param = this.confirmData;
+				this.$u.api.parkInConfirm(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('parkInConfirm',res)
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+						// url:'pages/parking/parking'
+					});
+					console.log('parkInConfirm ',err)
+				});
+			}
 			
 			
 		},
@@ -165,4 +344,5 @@
 
 <style lang="scss">
 	@import "../parking/parking.scss";
+	@import "./getout.scss";
 </style>