parking_pda/pages/getout/getoutpage/getoutpage.vue

<template>
	<view class="">
		<view class="car-info u-flex">
			<view class="car-info-img">
				<u-image :src="leaveDetail.vehicleImage||vehicleImage" mode="aspectFit" width="100%" height="100%"></u-image>
			</view>
			<view class="car-info-text u-flex-1">
				<view class="text-item">
					<view class="car">{{ leaveDetail.vehicleNo }}</view>
					<view class="position">车位：{{leaveDetail.spaceName}}</view>
				</view>
				<!-- <view class="text-item" style="color: #3192FB;">临时卡</view> -->
				<!-- <view class="text-item u-flex u-flex u-row-between">
					<view class="">余额：<span class="balance">暂无</span></view>
					<view class="recharge" @click="$refs.uToast.show({title: '建设中'})">充值</view>
				</view> -->
				<view class="text-item">类型：{{leaveDetail.vehicleType|filterCarType}}</view>
			</view>
		</view>
		<view class="parking-info">
			<view class="parking-info-item">进场时间：{{leaveDetail.inTime}}</view>
			<view class="parking-info-item">出场时间：{{leaveDetail.outTime}}</view>
			<view class="parking-info-item">停车时长：{{leaveDetail.duration}}</view>
			<view class="parking-info-item">本次应收：<span class="u-type-primary">{{leaveDetail.totalAmount}}元</span></view>
			<view class="parking-info-item u-flex u-row-between"  @click="goOwelist">
				<view class="">
					历史欠费：<span class="u-type-warning">{{leaveDetail.oweAmount}}元</span>
				</view>
				<u-icon name="arrow-right" color="#7B7B7B" size="28"></u-icon>
			</view>
		</view>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-box u-flex">
				<view class="bottom-btn bg-blue" @click="handleOut">出场</view>
				<view class="bottom-btn bg-gray" @click="openPage('pages/getout/getout')">取消</view>
			</view>
		</view>
		
		<!-- 订单细节 -->
		<u-popup class="popup orderDetails" v-model="showOrderDetails" :mask-close-able="false" mode="center" border-radius="20" width="90%">
			<view class="popup-title">温馨提示</view>
			<view class="details-body">
				<dl><dt>停车时长：</dt> <dd>{{leaveDetail.duration}}</dd></dl>
				<dl><dt>车辆类型：</dt> <dd>{{leaveDetail.vehicleType|filterCarType}}</dd></dl>
				<dl><dt>本次应收：</dt> <dd class="u-type-primary">{{leaveDetail.totalAmount}}元</dd></dl>
				<dl><dt>历史欠费：</dt> <dd class="u-type-warning">{{leaveDetail.oweAmount}}元</dd></dl>
				<view class="tip">
					你是否将该车辆出场，如果是请缴费，否则点击取消！
				</view>
			</view>
			<view class="details-footer u-flex u-row-between">
				<view class="details-footer-btn details-footer-btn--blue" @click="payAll">全部缴费</view>
				<view class="details-footer-btn details-footer-btn--yellow" @click="payThis">本次缴费</view>
				<view class="details-footer-btn bg-gray" @click="openPage('pages/getout/getout')">取消</view>
			</view>
		</u-popup>
		<!-- 支付方式 -->
		<u-popup class="popup payway-popup" v-model="showPayway" :mask-close-able="false" mode="center" border-radius="20" width="90%">
			<view class="popup-title">支付方式</view>
			<view class="popup-body u-flex u-row-between">
				<view class="payway-item"  @click="$refs.uToast.show({title: '暂不支持'})">
					<u-image src="/static/img/payway-xj.png" width="143" height="143"></u-image>
					<!-- <view class="icon-wrap">
						<u-icon name="rmb-circle-fill" color="#FFC02D" size="66"></u-icon>
					</view> -->
					现金支付
				</view>
				<view class="payway-item" @click="scanPay">
					<u-image src="/static/img/payway-scan.png" width="143" height="143"></u-image>
					<!-- <view class="icon-wrap">
						<u-icon name="scan" color="#FFC02D" size="66"></u-icon>
					</view> -->
					扫码收费
				</view>
				<view class="payway-item" @click="qrPay">
					<u-image src="/static/img/payway-qr.png" width="143" height="143"></u-image>
					<!-- <view class="icon-wrap">
						<u-icon name="rmb-circle-fill" color="#FFC02D" size="66"></u-icon>
					</view> -->
					收款码
				</view>
			</view>
			<view class="popup-footer payway-popup-footer">
				<view class="payway-popup-btn" @click="closePayway">关闭</view>
			</view>
		</u-popup>
		<u-popup class="popup qrcode-popup" v-model="showQrcode" :mask-close-able="false" mode="center" border-radius="20" width="90%">
			<tki-qrcode
			    ref="qrcode"
			    cid="tki-qrcode-canvas"
			    :val="qrcontent"
			    :size="200"
			    unit="px"
			    background="#000000"
			    foreground="#ffffff"
			    pdground="#ffffff"
			    :iconSize="40"
			    :onval="true"
			    :loadMake="false"
			    :usingComponents="true"
			    :showLoading="false"
			    loadingText="loadingText"
			     />
			<view class="qrcode-popup-btn" @click="hideQrcode">关闭</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	let speak = uni.requireNativePlugin("SpeechPlug");
	let device = uni.requireNativePlugin("DeviceInfo");
	let ALog = uni.requireNativePlugin("AndroidLog")
	//#endif
	import tkiQrcode from "tki-qrcode";
	export default {
		components:{
			tkiQrcode
		},
		data() {
			return {
				vehicleImage:'/static/img/default-car.png',
				showOrderDetails:false,//是否线上订单细节
				leaveDetail:[],
				orderID:'',
				orderInTime:'',
				orderOutTime:'',
				orderSpaceName:'',
				orderVehicleNo:'',
				totalAmount:'',
				oweAmount:'',
				duration:'',
				vehicleType:0,
				payStatus:null,
				showPayway:false,
				payParams:{
					orderList:[],
					code:''
				},
				showQrcode:false,
				qrcontent:'https://postest.bgzchina.com/mobilePay?sysId=ZDM20210510000088857402',
				timer: null // 定时器
				
				
			}
		},
		onLoad(page) {
			this.orderID = page.orderID;
			this.orderInTime = page.orderInTime;
			this.orderOutTime = page.orderOutTime;
			this.orderSpaceName = page.orderSpaceName;
			this.orderVehicleNo = page.orderVehicleNo;
			//#ifdef APP-PLUS
			this.speaks(this.orderVehicleNo);
			//#endif
			// this.handleEntranceOutDetail();
			
		},
		onShow() {
			this.handleEntranceOutDetail();
		},
		methods:{
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			speaks(msg){
				speak?.speakAction(msg)
			},
			handleEntranceOutDetail(){
				this.$u.api.entranceOutDetail({spaceId:this.orderID})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.leaveDetail = res.data;
				
					console.log('entranceOutDetail',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('entranceOutDetail ',err)
				});
				
			},
			handleOut(res){
				this.showOrderDetails = true;
			},
			async payThis(){
				this.showOrderDetails = false;
				this.showPayway = true;
				this.payParams.orderList.push(this.leaveDetail.orderId);
				await this.confirmOut();
			},
			async payAll(){
				this.showOrderDetails = false;
				this.showPayway = true;
				this.payParams.orderList.push(this.leaveDetail.orderId);
				this.leaveDetail.oweList.forEach(item=>{
					this.payParams.orderList.push(item.orderId);
				});
				await this.confirmOut();
			},
			closePayway(){
				this.showPayway = false;
			},
			scanPay(){
				console.log('this.payParams',this.payParams);
				uni.scanCode({
				    onlyFromCamera: true,
				    success:  (res) => {
						//#ifdef APP-PLUS
						ALog.info({msg:'条码内容：' + res.result});
						//#endif
						this.payParams.code = res.result;
						this.$u.api.gzbankSwept(this.payParams)
						.then(res=>{
							//#ifdef APP-PLUS
							plus.nativeUI.toast(res.msg);
							ALog.info({msg:'条码类型：err' + err});
							//#endif
							// 启动定时器查询订单状态
							this.timer = setInterval(() => {
							  this.handlePayQuery(res.data.polyOrderId)
							}, 3000);

						}).catch(err=>{
							//#ifdef APP-PLUS
							plus.nativeUI.toast(err.msg);
							ALog.info({msg:'条码类型：err' + err});
							//#endif
						});
						
				        // console.log('条码类型：' + res.scanType);
				        // console.log('条码内容：' + res.result);
				    },
					fail:function(err){
						//#ifdef APP-PLUS
						plus.nativeUI.toast('扫码失败');
						ALog.info({msg:'条码类型：err' + err});
						//#endif
					}
				});
				
			},
			qrPay(){
				console.log('this.payParams',this.payParams);
				this.$u.api.gzbankPolypay(this.payParams)
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.showPayway = false;
					this.showQrcode = true;
					setTimeout(()=>{
						this.qrcontent = res.data.qrCodeUrl;
					},500)
					
					// 启动定时器查询订单状态
					this.timer = setInterval(() => {
					  this.handlePayQuery(res.data.polyOrderId)
					}, 3000);
					console.log('gzbankPolypay',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('gzbankPolypay ',err)
				});
				
			},
			hideQrcode(){
				this.showQrcode = false;
				this.$u.route({
					url: 'pages/getout/getout',
				});
			},
			confirmOut(){
				this.$u.api.getOut({spaceId:this.orderID})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// 	url:'pages/getout/getout'
					// });
					device.print(res.data.print);
					console.log('getOut',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getOut ',err)
				});
			},
			handlePayQuery(polyOrderId){
				this.$u.api.payQuery({polyOrderId:polyOrderId})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					// 支付成功后的页面跳转
					if (res.data.payStatus==1) {
					  clearInterval(this.timer)
					  this.$refs.uToast.show({
					  	title:'支付成功',
					  	type: 'success',
					  	url:'pages/getout/getout',
						// params: {
						// 	vehicleNo:this.orderVehicleNo,
						// },
						duration:10000
					  });
					};
					console.log('handlePayQuery',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handlePayQuery ',err)
				});
				
			},
			goOwelist(){
				this.$u.route({
					url: 'pages/owelist/owelist',
					params: {
						orderID: this.orderID
					}
				});
			},
			timeago(inTime,outTime){
				var time_start = new Date(inTime.replace(/-/g,'/'));
				var time_end = new Date(outTime.replace(/-/g,'/'));
				var clock_start = time_start.getTime();
				var clock_end = time_end.getTime();
				// console.log('currentTime',this.currentTime)
				
				const formatNumber = (num) => {
					num = num.toString()
					return num[1] ? num : '0' + num
				};
				
				var i_total_secs = Math.round(clock_end - clock_start);
				//计算出相差天数
				var days = Math.floor(i_total_secs / (24 * 3600 * 1000))
					 
				//计算出小时数
				var leave1 = i_total_secs % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
				var hours = Math.floor(i_total_secs / (3600 * 1000))
				
				//计算相差分钟数
				var leave2 = i_total_secs % (3600 * 1000)        //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)
				
				hours = formatNumber(hours);
				minutes = formatNumber(minutes);
				seconds = formatNumber(seconds);
				// console.log(days + '天' + hours + '个小时' + minutes + '分钟' + seconds + '秒');
				// this.frontDuration = hours + ':' + minutes + ':' + seconds;
				return hours + ':' + minutes + ':' + seconds
			}
			
		},
		computed:{
			frontDuration:function(){
				return this.timeago(this.orderInTime,this.orderOutTime)
			}
		}
		
	}
</script>

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