parking_h5/pages/OnsitePayment/OnsitePayment.vue

<!-- 场内支付---停车场 -->
<template>
  <view class="parking-lock">
    <view class="parking-lock-box">
      <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" v-for="(item, index) in fieldList" :key="index">
            <view>{{ item.label }}</view>
            <view :class="item.money ? 'really-money' : ''">{{ orderInfo[item.key] }}</view>
          </view>
        </view>
        <view class="parking-lock-pay-btn">
          <button type="default" @click="payMoney">立即支付</button>
        </view>
        <view class="parking-lock-pay-attention">
          <text>温馨提示：支付完成请尽快离场，超过免费时长将会重新计费</text>
        </view>
      </view>
      <!-- 支付方式 -->
      <ChoosePayment ref="choosePayment" :curOrderList="orderList" :jumpUrl="jumpUrl" :isIndoor="true" />
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
export default {
  components: {
    ChoosePayment
  },
  data() {
    return {
      // 支付订单编号
      orderList: [],
      // 订单信息
      orderInfo: {},
      // 回调地址
      jumpUrl: location.href + '&isBack=1',
      // 显示的字段集合
      fieldList: [
        { key: 'vehicleNo', label: '车牌号' },
        { key: 'parkingName', label: '停车场名称' },
        { key: 'entranceName', label: '入场车道' },
        { key: 'inTime', label: '入场时间' },
        { key: 'freeDuration', label: '免费时长' },
        { key: 'calcDuration', label: '计费时长' },
        { key: 'duration', label: '累计停车时长' },
        { key: 'payAmount', label: '应缴金额', money: true },
        { key: 'id', label: '订单编号' }
      ],
      paramsObj: {
        vehicleNo: '',
        parkNo: ''
      },
      timer: null,
      polyOrderId: undefined, // 预支付订单id
      isBack: 0
    };
  },
  onLoad(page) {
    const { vehicleNo, parkNo, isBack, polyOrderId } = page;
    if (vehicleNo && parkNo) {
      this.paramsObj.vehicleNo = vehicleNo;
      this.paramsObj.parkNo = parkNo;
      this.isBack = isBack ?? 0;
      this.polyOrderId = polyOrderId;
      this.getOrderDetails(vehicleNo, parkNo);
    } else {
      this.$nextTick(() => {
        this.showToast('参数丢失!', 'error');
      });
    }
  },
  onShow() {
    const { isBack } = this;
    if (Number(isBack) === 1 && this.polyOrderId) {
      uni.showLoading({
        title: '支付查询中...',
        mask: true
      });
      this.timer = setInterval(() => {
        this.handlePayStatus(this.polyOrderId);
      }, 2000);
    }
  },
  methods: {
    /**
     * 立即支付
     * @date 2023-02-22
     * @returns {any}
     */
    payMoney() {
      this.$nextTick(() => {
        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'parking');
      });
    },
    /**
     * 根据订单id查询订单信息
     * @date 2023-02-22
     * @param {any} vehicleNo
     * @param {any} parkNo
     * @returns {any}
     */
    async getOrderDetails(vehicleNo, parkNo) {
      try {
        const { code, data } = await this.$u.api.getOrderInfoByParknoApi({ vehicleNo, parkNo });
        if (code === 200) {
          const { id } = data;
          this.orderList = [id];
          this.orderInfo = data;
          if (Number(data?.payStatus) === 1) {
            this.$refs.uToast.show({
              title: '该订单已支付完成!',
              type: 'success',
              url: '/pages/common/paymentSuccess/paymentSuccess',
              callback: () => {
                // this.loading = false;
              }
            });
          }
        }
      } catch (error) {
        this.showToast(error?.msg, 'error');
      }
    },
    /**
     * 反复查询支付状态
     * @param { String } orderId
     */
    async handlePayStatus(orderId) {
      try {
        const { code, data } = await this.$u.api.getOrderInfo({ orderId });
        if (code === 200) {
          if (data?.payStatus === 1 || data?.payStatus === 3) {
            clearInterval(this.timer);
            this.getOrderDetails(this.paramsObj.vehicleNo, this.paramsObj.parkNo);
            uni.hideLoading();
          }
        }
      } catch (error) {
        uni.hideLoading();
      }
    },
    // 返回首页
    cancel() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    /**
     * @description: 显示提示信息
     * @param {*} title
     * @param {*} type
     * @return {*}
     */
    showToast(title = '操作失败', type = 'error') {
      this.$refs.uToast.show({
        title,
        type
      });
    }
  }
};
</script>

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