parking_h5/pages/parkingLock/parkingLock.vue

<template>
	<!-- 车位锁 -->
	<view class="parking-lock">
		<!-- 车位锁支付 -->
		<view class="parking-lock-pay" v-if="parkingLockStatus === 1">
			<view class="parking-lock-title">支付停车费</view>
			<view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
			<view class="parking-lock-info">
				<view class="parking-lock-info-item">
					<view>停车场名称</view>
					<view>{{orderInfo.roadName}}</view>
				</view>
				<view class="parking-lock-info-item">
					<view>停车泊位</view>
					<view>{{orderInfo.spaceName}}</view>
				</view>
				<view class="parking-lock-info-item">
					<view>免费时长</view>
					<view>15分钟</view>
				</view>
				<view class="parking-lock-info-item">
					<view>开始计费</view>
					<view>{{orderInfo.inTime}}</view>
				</view>
				<view class="parking-lock-info-item">
					<view>结束计费</view>
					<view>{{orderInfo.outTime}}</view>
				</view>
				<view class="parking-lock-info-item">
					<view>停车时长</view>
					<view>{{orderInfo.duration}}</view>
				</view>
				<!-- <view class="parking-lock-info-item">
					<view>合计金额</view>
					<view>{{orderInfo.totalAmount}} 元</view>
				</view>
				<view class="parking-lock-info-item">
					<view>优惠金额</view>
					<view>{{orderInfo.preferentialAmount}} 元</view>
				</view> -->
				<view class="parking-lock-info-item">
					<view>应缴金额</view>
					<view class="really-money">{{orderInfo.payAmount}} 元</view>
				</view>
			</view>
			<view class="parking-lock-pay-btn">
				<button type="default" @click="payMoney">立即支付</button>
			</view>
		</view>
		<!-- 车位锁开始状态 -->
		<view class="parking-lock-begin" v-else-if="parkingLockStatus === 2">
			<view class="parking-lock-begin-box">
				<view class="parking-lock-begin-bg">
					<image src="../../static/img/parking-lock-bg.png" mode=""></image>
				</view>
			</view>
			<view class="parking-lock-begin-info">车位锁正在动作，还未到位</view>
		</view>
		<!-- 车位锁正在状态 -->
		<view class="parking-lock-loading" v-else-if="parkingLockStatus === 3">
			<view class="parking-lock-loading-box">
				<view class="parking-lock-loading-bg">
					<image src="../../static/img/parking-lock-bg.png" mode=""></image>
				</view>
			</view>
			<view class="parking-lock-loading-info">开锁中，请等待！</view>
		</view>
		<!-- 开锁完成 -->
		<view class="parking-lock-success" v-else-if="parkingLockStatus === 4">
			<view class="parking-lock-success-box">
				<image src="../../static/img/parking-lock-achieve.png" mode=""></image>
			</view>
			<view class="parking-lock-success-info">开锁已完成</view>
			<view class="parking-lock-success-button">
				<button @click="cancel">返回</button>
			</view>
		</view>
		<view class="parking-lock-pay" v-else-if="parkingLockStatus === 5">
			<view class="parking-lock-tips">{{tipsMsg}}</view>
		</view>
		<!-- 支付方式 -->
		<PaymentMethod
			:payWayPop="payWayPop"
			:curOrderList="orderList"
			:deviceNo="deviceNo"
			:jumpUrl="jumpUrl"
			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
				<view class="loadingSelect">订单查询中...</view>
				<view class="spinner">
					<view class="rect1"></view>
					<view class="rect2"></view>
					<view class="rect3"></view>
					<view class="rect4"></view>
					<view class="rect5"></view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		components: {
			PaymentMethod
		},
		data() {
			return {
				// 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
				parkingLockStatus: 1,
				// 支付方式选择弹框
				payWayPop: false,
				// 订单编号
				orderList: [],
				// 提示信息
				tipsMsg: null,
				// 设备编号
				deviceNo: null,
				// 轮询
				timer: null,
				timer1: null,
				// 订单信息
				orderInfo: {},
				// 订单id
				orderId: null,
				// 重定向地址
				jumpUrl: location.href + '&isBack=1',
				show: true
			}
		},
		onLoad(page) {
			if (page.orderId) {
				this.getOrderDetails(page.orderId)
				this.orderList = []
				this.orderId = page.orderId
				this.orderList.push(page.orderId)
				this.deviceNo = page.deviceNo
			} else {
				this.tipsMsg = page.msg
				this.parkingLockStatus = 5
			}
		},
		onShow() {
			if(this.orderId){
				this.timer1 = setInterval(() => {
					// uni.showLoading({
					//     title: '订单查询中'
					// });
					this.show = true
					this.getOrderDetails(this.orderId)
				}, 2000)				
			}else{
				this.show = false
			}
			
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
			}
			if (this.timer1) {
				clearInterval(this.timer1)
			}
		},
		methods: {
			payMoney() {
				this.payWayPop = true
			},
			// 查询订单信息
			getOrderDetails(id) {
				// uni.showLoading({
				//     title: '订单查询中'
				// });
				this.$u.api.getOrderDetail({id: id})
					.then(res => {
						
						console.log(res)
						if (res.code === 200) {
							// 获取页面完整url
							const local = window.location.href
							// 获取url后面的参数
							const locationLocaturl = window.location.search;
							// 截取url中的isBack
							let isBack = getUrlParams(local, "isBack");
							console.log('isBack',isBack);
							console.log('isBack',isBack == null || isBack != '1');
							// 如果没有isBack，则去请求
							if (!isBack) {
								// uni.hideLoading();
								this.show = false
								clearInterval(this.timer1)
							} 
							this.orderInfo = res.data
							if (res.data.payStatus === 1) {
								// uni.hideLoading();
								this.show = false
								clearInterval(this.timer1)
								this.checkEqupment()
							}
						}
					})
			},
			// 检测设备
			checkEqupment() {
				this.timer = setInterval(() => {
					this.getEqumentStatus(this.deviceNo)
				}, 1000)
			},
			// 查询设备状态
			getEqumentStatus(orderNo) {
				console.log(orderNo)
				this.$u.api.getEquomentInfo({orderNo: orderNo})
					.then(res => {
						if (res.code === 200) {
							console.log(res.data)
							if (res.data.deviceStatus === 0) {
								this.parkingLockStatus = 4
								clearInterval(this.timer)
							} else if (res.data.deviceStatus === 1 || res.data.deviceStatus === 5) {
								this.parkingLockStatus = 2
							} else if (res.data.deviceStatus === 6) {
								this.parkingLockStatus = 3
							}
						}
					})
			},
			// 返回首页
			cancel() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			closePaymentMethod() {
				this.payWayPop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './parkingLock.scss';
</style>