parking_h5/pages/geomagnetismLock/geomagnetismLock.vue

<template>
	<!-- 地磁 -->
	<view class="parking-lock">
		<!-- 地磁支付 -->
		<template v-if="parkingLockStatus === 1">
			<view class="parking-lock-pay">
				<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 class="weight">{{ orderInfo.vehicleNo }}</view>
					</view>
					<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>{{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.freeDuration || '0天0时15分0秒' }}</view> -->
						<view>{{ '0天0时15分0秒' }}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>计费时长</view>
						<view>{{orderInfo.calcDuration || 0}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>累计停车时长</view>
						<view>{{ orderInfo.duration || 0 }}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>应缴金额</view>
						<view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
					</view>
					<view class="parking-lock-info-item">
						<view>订单编号</view>
						<view>{{ orderInfo.orderId }}</view>
					</view>
				</view>
				<view class="parking-lock-pay-btn" v-if="is_pay">
					<button type="default" @click="payMoney">立即支付</button>
				</view>
			</view>
		</template>
		<template v-else-if="parkingLockStatus === 2">
			<view class="parking-lock-pay">
				<view class="parking-lock-tips">{{ tipsMsg }}</view>
			</view>
		</template>
		<!-- 支付方式 -->
		<PaymentMethod :payWayPop="payWayPop" :curOrderList="[orderId]" :jumpUrl="jumpUrl" :payeeId="payeeId"
			:payeeName="payeeName" @closePaymentMethod="closePaymentMethod"></PaymentMethod>
		<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>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		components: {
			PaymentMethod
		},
		data() {
			return {
				// 车位锁状态 1:需支付 2:查询失败返回提醒
				parkingLockStatus: 0,
				// 支付方式选择弹框
				payWayPop: false,
				// 订单编号
				orderList: [],
				// 提示信息
				tipsMsg: null,
				// 轮询
				timer: null,
				// 订单信息
				orderInfo: {},
				// 订单id
				orderId: null,
				// 重定向地址
				jumpUrl: location.href + '&isBack=1',
				show: true,
				isBack: '',
				polyOrderId: '',
				// 地磁
				spaceId: '',
				payeeId: '',
				payeeName: '',
				is_pay: false
			}
		},
		onLoad(page) {
			if (page.orderId) {
				this.orderId = page?.orderId
				this.spaceId = page?.orderId
				this.payeeId = page?.payeeId
				this.polyOrderId = page?.polyOrderId
				this.isBack = page?.isBack
			} else {
				this.tipsMsg = page.msg || '参数丢失!';
				this.parkingLockStatus = 2
			}
		},
		onShow() {
			if (this.orderId) {
				this.getOrderDetails(this.spaceId, this.orderId, this.payeeId)
				if (this.polyOrderId && this.isBack == 1) {
					this.timer = setInterval(() => {
						this.show = true
						this.handlePayStatus(this.polyOrderId)
					}, 1000)
				}
			} else {
				this.show = false
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			/**
			 * 反复查询支付状态
			 * @param { String } orderId
			 */
			handlePayStatus(orderId) {
				this.$u.api.getOrderInfo({
					orderId
				}).then(res => {
					if (res.code === 200) {
						if (res.data.payStatus === 1 || res.data.payStatus === 3) {
							this.show = false
							clearInterval(this.timer);
							this.is_pay = false
							uni.showModal({
								title: '提示',
								content: '支付成功，返回首页',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							});
						} else if (res.data.payStatus === 2) {
							this.is_pay = true
						}
					} else {
						this.show = false
						clearInterval(this.timer);
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						});
					}
				}).catch(() => {
					this.show = false
					clearInterval(this.timer);
				})
			},
			/**
			 * 立即支付
			 */
			payMoney() {
				this.payWayPop = true
			},
			/**
			 * 查询订单信息
			 * @param { String } spaceId 车位ID
			 * @param { String } orderId 订单id
			 * @param { String } payeeId 收费员ID
			 */
			getOrderDetails(spaceId, orderId, payeeId) {
				this.$u.api.geomaLockDetailsApi({
					spaceId,
					orderId,
					payeeId
				}).then(res => {
					if (res.code === 200 && res.data.id) {
						this.payeeName = res.data.payeeName
						this.parkingLockStatus = 1
						this.orderInfo = res.data
						this.show = false
						if (res.data.payStatus == 0 || res.data.payStatus == 2) {
							this.is_pay = true
						} else if (res.data.payStatus == 1) {
							this.is_pay = false
							uni.showModal({
								title: '提示',
								content: '订单已支付，返回首页',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							});
						}
					} else {
						this.$refs.uToast.show({
							title: res.msg || '订单无数据',
							type: 'error',
						});
					}
				})
			},
			/**
			 * 关闭支付弹框
			 */
			closePaymentMethod() {
				this.payWayPop = false
			}
		}
	}
</script>

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