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.payAmount}}元</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="onCancel()">取消</view>
			</view>
		</view>
		
		<!-- 订单细节 -->
		<u-popup class="popup orderDetails" v-model="detailModel.show" :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.payAmount}}元</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">
				<u-button type="primary" :disabled="detailModel.payAllbtn" @click="onPayAll(leaveDetail.oweAmount)">全部缴费</u-button>
				<u-button type="warning" :disabled="detailModel.payOnebtn" @click="onPayThis(leaveDetail.payAmount)">本次缴费</u-button>
				<view class="details-footer-btn bg-gray" @click="onPayCancel">取消</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="cashPay()">
					<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-popup class="popup cashPay-popup" v-model="showCash" :mask-close-able="false" mode="center" border-radius="20" width="90%">
			<view class="popup-title">本次收到缴费</view>
			<view class="popup-body u-flex">
				<view  class="u-flex-1 ">您确认已收取现金<span style="color: red;">{{paymoney}}</span>元吗？</view> 
				<!-- <view class="u-flex-1 change">找零{{changeMoney}}元</view> -->
			</view>
			<view class="popup-footer u-flex">
				<view class="popup-btn1" ><u-button type="primary" @click="consfimPayway">确认</u-button> </view>
				<view class="popup-btn2" ><u-button type="primary" :plain="true"@click="closecashPayway">关闭</u-button> </view>
			</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 {
				paymoney:'',
				change:'',
				price:'',
				// cashMoney:'',
				showCash:false,
				speakParkOut:'',
				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:'',
					cashMoney:'',
				},
				showQrcode:false,
				qrcontent:'',
				timer: null, // 定时器
				detailModel:{
					show: false,
					payAllbtn: false,
					payOnebtn: false
				}
				
			}
		},
		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
			uni.getStorage({
				key:'speakData',
				success: (res) => {
					this.speakParkOut = res.data.switchVal4;
				},
				fail: (err) => {
				}
			})
		},
		onShow() {
			this.handleEntranceOutDetail();
		},
		computed:{
			changeMoney(){
				if(this.payParams.cashMoney>this.price){
					return this.payParams.cashMoney-this.price
				}else{
					return 0
				}
			}
		},
		methods:{
			closecashPayway(){
				this.showCash = false;
			},
			cashPay(){
				this.showCash = true;
			},
			consfimPayway(){
				if(this.payParams.cashMoney<this.price){
					this.$refs.uToast.show({
						title: '缴费金额小于需支付金额，不能支付',
						type: 'error',
					});
				}else{
					this.$u.api.cashPay(this.payParams)
					.then(res=>{
						uni.showLoading({
							 title: '查询支付状态中'
						});
						this.timer = setInterval(() => {
						  this.handlePayQuery(res.data.polyOrderId)
						}, 3000);
					}).catch(err=>{
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
						});
					});
				}
				
			},
			onCancel(){
				// this.$u.route({
				// 	type: 'redirectTo',
				// 	url: 'pages/getout/getout'
				// })
				uni.navigateBack({
				    delta: 1
				});
			},
			onPayCancel(){
				// this.$u.route({
				// 	type: 'redirectTo',
				// 	url: '/pages/getout/getout'
				// })
				uni.navigateBack({
				    delta: 1
				});
			},
			speaks(msg){
				speak?.speakAction(msg)
			},
			handleEntranceOutDetail(){
				this.$u.api.entranceOutDetail({spaceId:this.orderID})
				.then(res=>{
					this.leaveDetail = res.data;
					this.price = res.data.payAmount;
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
				
			},
			handleOut(res){
				let that = this;
				this.$u.api.getOut({spaceId:this.orderID})
				.then(res=>{
					//1、当前订单金额和历史缴费金额都为0 --无需缴费--跳转
					if(that.leaveDetail.oweAmount == 0 && res.data.payAmount == 0){
						that.$refs.uToast.show({
							title: '金额为0无需支付',
							type: 'success',
							url:'pages/getout/getout'
						});
					}else if (that.leaveDetail.oweAmount == 0 && res.data.payAmount > 0){
						that.detailModel.show = true;
						that.detailModel.payAllbtn = true;
						that.detailModel.payOnebtn = false;
					}else if (that.leaveDetail.oweAmount > 0 && res.data.payAmount == 0){
						that.detailModel.show = true;
						that.detailModel.payOnebtn = true;
						that.detailModel.payAllbtn = false;
					}else {
						that.detailModel.show = true;
						that.detailModel.payOnebtn = false;
						that.detailModel.payAllbtn = false;
					}
					//#ifdef APP-PLUS
					if(this.speakParkOut==true||this.speakParkOut==''){
						that.speaks(res.data.speak);
					}
					device.print(res.data.print);
					//#endif
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getOut ',err)
				});
			},
			async onPayThis(money){
				this.paymoney = money;
				this.detailModel.show = false;
				this.showPayway = true;
				this.payParams.orderList.push(this.leaveDetail.orderId);
				// await this.confirmOut();
			},
			async onPayAll(money){
				this.paymoney = money;
				this.detailModel.show = 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(){
				setTimeout(() =>{
					uni.scanCode({
					    onlyFromCamera: true,
						scanType:['barCode','qrCode'],
					    success:  (res) => {
							console.log(res)
							this.payParams.code = res.result;
							this.$u.api.gzbankSwept(this.payParams)
							.then(res=>{
								// 启动定时器查询订单状态
								uni.showLoading({
									 title: '查询支付状态中'
								});
								this.timer = setInterval(() => {
								  this.handlePayQuery(res.data.polyOrderId)
								}, 3000);
					
							}).catch(err=>{
								//#ifdef APP-PLUS
								plus.nativeUI.toast(err.msg);
								//#endif
							});
							
					    },
						fail:function(err){
							//#ifdef APP-PLUS
							plus.nativeUI.toast('扫码失败');
							ALog.info({msg:'条码类型：err' + err});
							//#endif
						}
					});
				},2000)
				
				
			},
			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)
					
					// 启动定时器查询订单状态
					uni.showLoading({
						 title: '等待支付中'
					});
					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=>{
					//#ifdef APP-PLUS
					if(this.speakParkOut==true||this.speakParkOut==''){
						this.speaks(res.data.speak);
					}
					device.print(res.data.print);
					//#endif
					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) {
						uni.hideLoading();
					  clearInterval(this.timer)

					  uni.showToast({
					      title: '支付成功',
					      duration: 3000,
						  success() {
						  	uni.redirectTo({
						  	    url: '/pages/getout/getout'
						  	});
						  }
					  });
					 //  this.$refs.uToast.show({
					 //  	title:'支付成功',
					 //  	type: 'success',
					 //  	url:'pages/getout/getout',
						// // params: {
						// // 	vehicleNo:this.orderVehicleNo,
						// // },
						// duration:3000
					 //  });
					};
					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>