parking_h5_all/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' : item.vehicleNo ? 'vehicle-no' : ''">{{ orderInfo[item.key] }}</view>
          </view>
        </view>
        <view class="parking-lock-pay-btn" v-if="orderInfo.payAmount && Number(orderInfo.payAmount) > 0">
          <button type="default" @click="payMoney" :disabled="!orderInfo.id">立即支付</button>
        </view>
        <view class="parking-lock-pay-attention">
          <text>温馨提示：支付完成请尽快离场，超过免费时长将会重新计费</text>
        </view>
      </view>
      <!-- 支付方式 -->
      <ChoosePayment ref="choosePayment" :curOrderList="orderList" :jumpUrl="jumpUrl" :isIndoor="true" />
    </view>
    <!-- 广告轮播 -->
    <ad-banner />
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
import AdBanner from '@/components/ad-banner/ad-banner.vue';
import { base64Decrypt } from '@/utils';
export default {
  components: {
    ChoosePayment,
    AdBanner
  },
  data() {
    return {
      // 支付订单编号
      orderList: [],
      // 订单信息
      orderInfo: {},
      // 回调地址
      jumpUrl: '',
      // 显示的字段集合
      fieldList: [
        { key: 'vehicleNo', label: '车牌号', vehicleNo: true },
        { 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,
      needPay: ''
    };
  },
  onLoad(options) {
    console.log('options', options);
    const { vehicleNo, parkNo, isBack, polyOrderId, needPay } = options;
    if (vehicleNo && parkNo) {
      // 车牌号进行base64加密解密   防止贵州银行支付报错
      this.paramsObj.vehicleNo = base64Decrypt(vehicleNo);
      this.paramsObj.parkNo = parkNo;
      this.isBack = isBack ?? 0;
      this.polyOrderId = polyOrderId;
      this.needPay = needPay;
      console.log('isBack', Number(this.isBack) !== 1);
      if (needPay && needPay === 'not') {
        this.$u.route({
          url: '/pages/center/order/order',
          type: 'redirectTo'
        });
      } else if (Number(this.isBack) !== 1) {
        this.getOrderDetails(this.paramsObj.vehicleNo, parkNo);
      }
      this.jumpUrl = `${location.origin}/#/pages/OnsitePayment/OnsitePayment?vehicleNo=${vehicleNo}&parkNo=${parkNo}&isBack=1`;
      console.log(this.jumpUrl);
    } else {
      uni.showModal({
        title: '提示',
        content: '参数丢失, 返回首页',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }
      });
    }
  },
  onShow() {
    const { isBack, polyOrderId, needPay } = this;
    if (Number(isBack) === 1 && polyOrderId && needPay !== 'not') {
      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.$refs.uToast.show({
              title: '该订单已支付成功!',
              type: 'success',
              url: '/pages/common/paymentSuccess/paymentSuccess',
              callback: () => {
                uni.hideLoading();
              }
            });
          }
        }
      } catch (error) {
        clearInterval(this.timer);
        uni.hideLoading();
      }
    },
    /**
     * @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>