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>
    <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
		  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,
      // 订单信息
      orderInfo: {},
      // 立即支付弹框
      payWayPop: false,
      // 订单列表,一般长度为1的数组
      orderList: [],
			// 重定向页面
			jumpUrl: location.href + '&type=open',
			loadingMask: false
    }
  },
  onLoad (page) {
    const orderId = page?.orderId
		// 该标识判断是否是从支付完成页面回调回来
		const openFlag = page?.type
		if (orderId) {
			this.orderId = orderId
			// 如果标识存在,证明需要执行轮询判断支付状态,否则直接查询
			if (openFlag && openFlag === 'open') {
				this.openFlag = openFlag
				this.loadingMask = true
				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: {
		jumpOrderList() {
			this.$u.route({
				url: 'pages/center/order/order'
			})
		},
		/**
		 * 通过订单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) {
								this.loadingMask = false
								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 if (value === 6) {
        return '贵州银行无感支付'
      } else {
        return ''
      }
    }
  },
  destroyed() {
	  if (this.timer) {
		  clearInterval(this.timer)
	  }
  }
}
</script>

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