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>
        <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.duration"
        ></u-cell-item>
        <u-cell-item
          title="出场时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.outTime"
        ></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>
    <view
      class="bottom-btn-wrap"
      v-if="orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3"
    >
      <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
    </view>
    <!-- 支付方式 -->
    <PaymentMethod
      :payWayPop="payWayPop"
      :curOrderList="orderList"
	  :jumpUrl="jumpUrl"
      @closePaymentMethod="closePaymentMethod"
    ></PaymentMethod>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
export default {
  components: {
    PaymentMethod
  },
  data () {
    return {
      orderId: null,
      // 订单信息
      orderInfo: {},
      // 立即支付弹框
      payWayPop: false,
      // 订单列表,一般长度为1的数组
      orderList: [],
	  // 重定向页面
	  jumpUrl: location.href + '&type=open'
    }
  },
  onLoad (page) {
    const orderId = page?.orderId
	// 该标识判断是否是从支付完成页面回调回来
	const openFlag = page?.type
	if (orderId) {
		this.orderId = orderId
		// 如果标识存在,证明需要执行轮询判断支付状态,否则直接查询
		if (openFlag && openFlag === 'open') {
			this.handleGetOrderinfo(orderId, openFlag)
			let time = 0
			this.timer = setInterval(() => {
				time ++
				this.handleGetOrderinfo(orderId, openFlag)
				// 超过60s直接清除轮询
				if (time === 60) {
					clearInterval(this.timer)
				}
			}, 1000)
		} else {
			this.handleGetOrderinfo(orderId)
		}
	}
  },
  methods: {
	/**
	 * 通过订单id去获取订单信息
	 * */
    handleGetOrderinfo (orderId, openFlag) {
      this.$u.api.getOrderDetail({ id: orderId })
        .then(res => {
          if (res.code === 200) {
            this.orderInfo = res.data
			if (openFlag === 'open') {
				if (res.data.payStatus === 1 || res.data.payStatus === 3) {
					clearInterval(this.timer)
				}
			}
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            })
          }
        })
        .catch(() => {
          this.$refs.uToast.show({
            title: '程序错误!',
            type: 'error'
          })
        })
    },
    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 {
        return ''
      }
    }
  },
  destroyed() {
	  if (this.timer) {
		  clearInterval(this.timer)
	  }
  }
}
</script>

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