parking_h5/pages/center/order/orderDetails/orderDetails.vue

<template>
	<view class="wrap">
		<view class="order-info">
			<u-image class="order-info-img" width="90rpx" height="90rpx" src="../../../../static/img/position.png">
			</u-image>
			<view class="addr">{{ orderInfo.roadName }}</view>
			<view class="pay-amount" v-if="orderInfo.payAmount">-{{ orderInfo.payAmount }}</view>
			<view class="pay-amount" v-else>{{ orderInfo.payAmount }}</view>
			<u-cell-group :border="false">
				<u-cell-item title="车牌号" :arrow="false" :border-bottom="false" :border-top="false"
					:value="orderInfo.vehicleNo"></u-cell-item>
				<u-cell-item title="优惠总金额" :arrow="false" :border-bottom="false" :border-top="false"
					:value="(orderInfo.preferentialAmount ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'">
				</u-cell-item>
			</u-cell-group>
			<u-cell-group>
				<u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false"
					:value="orderInfo.orderId"></u-cell-item>
				<template v-if="orderInfo.deviceType == 1">
					<u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false"
						:value="orderInfo.inTime"></u-cell-item>
					<u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false"
						:value="orderInfo.outTime"></u-cell-item>
				</template>
				<template v-else>
					<u-cell-item title="开始计费 " :arrow="false" :border-bottom="false" :border-top="false"
						:value="orderInfo.inTime"></u-cell-item>
					<u-cell-item title="结束计费 " :arrow="false" :border-bottom="false" :border-top="false"
						:value="orderInfo.outTime"></u-cell-item>
				</template>
				<!-- <u-cell-item
          title="停车时长 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.duration"
        ></u-cell-item> -->
				<!-- <u-cell-item
				  title="免费时长 "
				  :arrow="false"
				  :border-bottom="false"
				  :border-top="false"
				  :value="orderInfo.freeDuration"
				></u-cell-item> -->
				<template v-if="orderInfo.deviceType == 1">
					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
						:value="orderInfo.freeDuration"></u-cell-item>
				</template>
				<template v-else>
					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
						value="0天0时30分0秒"></u-cell-item>
				</template>
				<u-cell-item title="计费时长 " :arrow="false" :border-bottom="false" :border-top="false"
					:value="orderInfo.calcDuration"></u-cell-item>
				<u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false"
					:value="orderInfo.duration"></u-cell-item>
				<u-cell-item v-if="orderInfo.createTime" title="订单创建时间 " :arrow="false" :border-bottom="false"
					:border-top="false" :value="orderInfo.createTime"></u-cell-item>
				<u-cell-item v-if="orderInfo.payTime" title="支付时间 " :arrow="false" :border-bottom="false"
					:border-top="false" :value="orderInfo.payTime"></u-cell-item>
				<u-cell-item v-if="orderInfo.payStatus == 1" title="缴费方式 " :arrow="false" :border-bottom="false"
					:border-top="false" :value="orderInfo.paySource | verifyPaySource"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 地磁显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败)并且订单金额不能为0 -->
		<view class="" v-if="orderInfo.deviceType === 1">
			<view class="bottom-btn-wrap"
				v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) !== 0">
				<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
			</view>
			<view class="bottom-btn-wrap"
				v-else-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) === 0">
				<view class="tips">提示：可寻找附近的收费员打印小票并扫码出场</view>
			</view>
		</view>
		<!-- 其他显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败) -->
		<view class="" v-else>
			<view class="bottom-btn-wrap"
				v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'">
				<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
			</view>
		</view>
		<view class="bottom-btn-wrap" v-if="openFlag === 'open' && orderInfo.payStatus == 1">
			<view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
		</view>

		<!-- 支付方式 -->
		<PaymentMethod :payWayPop="payWayPop" :curOrderList="orderList" :jumpUrl="jumpUrl"
			@closePaymentMethod="closePaymentMethod"></PaymentMethod>

		<!-- 加载中遮罩 -->
		<u-mask :show="loadingMask">
			<view class="loading-warp">
				<view class="loading-icon">
					<u-loading mode="flower" size="50"></u-loading>
				</view>
				<view class="loading-text">
					<text>订单支付状态查询中...</text>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default {
		components: {
			PaymentMethod
		},
		data() {
			return {
				orderId: null,
				openFlag: null,
				polyOrderId: null,
				// 订单信息
				orderInfo: {},
				// 立即支付弹框
				payWayPop: false,
				// 订单列表,一般长度为1的数组
				orderList: [],
				// 重定向页面
				jumpUrl: location.href + '&type=open',
				loadingMask: false
			}
		},
		onLoad(page) {
			this.orderId = page?.orderId
			// 该标识判断是否是从支付完成页面回调回来
			this.openFlag = page?.type
			this.polyOrderId = page?.polyOrderId
			if (this.orderId) {
				// 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
				if (this.openFlag && this.polyOrderId) {
					this.loadingMask = true
					this.handlePayStatus(this.polyOrderId)
					let time = 0
					this.timer = setInterval(() => {
						time++
						this.handlePayStatus(this.polyOrderId, openFlag)
						// 超过60s直接清除轮询
						if (time === 60) {
							clearInterval(this.timer)
						}
					}, 1000)
				} else {
					this.handleGetOrderinfo(this.orderId)
				}
			}
		},
		methods: {
			jumpOrderList() {
				this.$u.route({
					url: 'pages/center/order/order'
				})
			},
			/**
			 * 通过订单id去获取订单信息
			 * */
			handleGetOrderinfo(orderId) {
				this.$u.api.getOrderDetail({
						id: orderId
					})
					.then(res => {
						if (res.code === 200) {
							this.orderInfo = res.data
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
			},
			/**
			 * 查询支付状态
			 * @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.loadingMask = false
							clearInterval(this.timer);
							this.handleGetOrderinfo(this.orderId)
						}
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
						this.loadingMask = false
						clearInterval(this.timer);
					}
				}).catch(() => {
					this.loadingMask = false
					clearInterval(this.timer);
				})
			},
			goPay(orderId) {
				this.orderList = []
				this.orderList.push(orderId)
				if (this.orderList.length > 0) {
					this.payWayPop = true
				} else {
					this.$refs.uToast.show({
						title: '当前订单编号不存在,请重新进入当前页面!',
						type: 'warning'
					})
				}
			},
			/**
			 * 关闭支付方式弹框
			 * */
			closePaymentMethod() {
				this.payWayPop = false
			}

		},
		filters: {
			verifyPaySource(value) {
				if (value === 0) {
					return '现金支付'
				} else if (value === 1) {
					return '微信支付'
				} else if (value === 2) {
					return '支付宝支付'
				} else if (value === 3) {
					return '贵州银行快捷支付'
				} else if (value === 4) {
					return '贵州银行扫码支付'
				} else if (value === 5) {
					return '贵州银行被扫支付'
				} else if (value === 6) {
					return '贵州银行无感支付'
				} else {
					return ''
				}
			}
		},
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>

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