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时15分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>