parking_h5/pages/parkexport/parkexport.vue

<template>
	<!-- 地磁 -->
	<view class="parking-lock">
		<!-- 地磁支付 -->
		<template v-if="infoData">
			<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">{{ infoData.vehicleNo}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>停车场名称</view>
						<view class="weight">{{ infoData.outParkingName}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>入场车道</view>
						<view class="weight">{{infoData.inTime}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>入场时间</view>
						<view class="weight">{{infoData.inTime}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>出场车道</view>
						<view class="weight">{{infoData.outEntranceName }}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>出场时间</view>
						<view class="weight">{{infoData.outTime}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>通道名称</view>
						<view class="weight">{{infoData.outRoadwayName}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>免费时长</view>
						<view class="weight">{{infoData.freeDuration}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view class="weight">计费时长</view>
						<view class="weight">{{infoData.calcDuration}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>累计停车时长</view>
						<view class="weight">{{infoData.duration}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>应收金额</view>
						<view class="weight">{{infoData.totalAmount}}元</view>
					</view>
					<view class="parking-lock-info-item">
						<view>订单编号</view>
						<view class="weight">{{infoData.id}}</view>
					</view>
				</view>
				<view class="parking-lock-pay-btn">
					<button type="default" v-if="isPay" @click="onEntraceClick">支付出场</button>
					<button type="default" v-else @click="jumpHome('/pages/index/index')">支付成功，返回首页</button>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="parking-lock-info">
				<view class="parking-lock-info-item">
					<view>入口无车辆</view>
				</view>
			</view>
		</template>
		<!-- 支付方式 -->
		<PaymentMethod
			:payWayPop="payWayPop"
			:curOrderList="orderList"
			:jumpUrl="jumpUrl"
			:exportFlag="true"
			@closePaymentMethod="closePaymentMethod"
		></PaymentMethod>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		components: {
			PaymentMethod
		},
		data() {
			return {
				intoInfo: {
					parkNo: '',
					roadwayNo: '',
					polyOrderId: '',
					isBack: 0
				},
				payWayPop: false, // 支付弹框
				infoData: undefined, // 订单信息
				orderList: [], // 支付订单列表
				jumpUrl: location.href + '&isBack=1', // 回调地址
				timer: null, // 轮询
				isPay: false, // 支付按钮显示
			}
		},
		onLoad(page) {
			this.intoInfo.parkNo = page?.parkNo;
			this.intoInfo.roadwayNo = page?.roadwayNo;
			this.intoInfo.polyOrderId = page?.polyOrderId
			this.intoInfo.isBack = page?.isBack
		},
		onShow() {
			this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
			if (this.intoInfo.polyOrderId && this.intoInfo.isBack == 1) {
				uni.showLoading({
					title: '订单状态查询中...'
				})
				this.timer = setInterval(() => {
					this.handlePayStatus(this.intoInfo.polyOrderId)
				}, 1000)
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			/**
			 * 立即支付
			 */
			onEntraceClick() {
				this.payWayPop = true
			},
			/**
			 * 反复查询支付状态
			 * @param { String } orderId
			 */
			handlePayStatus(orderId) {
				this.$u.api.getOrderStateExportApi({
					orderId
				}).then(res => {
					if (res.code === 200) {
						if (res.data.payStatus === 1 || res.data.payStatus === 3) {
							clearInterval(this.timer);
							uni.hideLoading()
							this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
						} else if (res.data.payStatus === 2) {
							this.isPay = true
							uni.hideLoading()
						}
					} else {
						clearInterval(this.timer);
						uni.hideLoading()
						this.$refs.uToast.show({
							title: res.msg || '支付失败!',
							type: 'error',
						});
					}
				}).catch(() => {
					uni.hideLoading()
					clearInterval(this.timer);
				})
			},
			/**
			 * 查询订单信息
			 * @param { String } parkNo 停车场编号
			 * @param { String } roadwayNo 出口编号
			 */
			getOrderDetails(parkNo, roadwayNo) {
				uni.showLoading({
					title: '订单查询中...'
				})
				this.$u.api.getDetailExportApi({
					parkNo,
					roadwayNo
				}).then(res => {
					if (res.code === 200) {
						this.infoData = res.data
						this.orderList = [res.data.id]
						if (res.data.orderStatus == 2 || res.data.orderStatus == 3) {
							this.isPay = true
						} else {
							this.isPay = false
						}
					} else {
						this.$refs.uToast.show({
							title: res.msg || '订单无数据',
							type: 'error',
						});
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			/**
			 * 关闭支付弹框
			 */
			closePaymentMethod() {
				this.payWayPop = false
			},
			jumpHome(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

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