parking_h5_all/pages/parkexport/parkexport.vue

<template>
  <!-- 地磁 -->
  <view class="parking-lock">
    <!-- 地磁支付 -->
    <template v-if="infoData">
      <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">
            <view>车牌号</view>
            <view class="weight vehicle-no">{{ infoData.vehicleNo }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>停车场名称</view>
            <view class="weight">{{ infoData.parkingName }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>入场车道</view>
            <view class="weight">{{ infoData.entranceName }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>入场时间</view>
            <view class="weight">{{ infoData.inTime }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>出场车道</view>
            <view class="weight">{{ infoData.outEntranceName }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>出场时间</view>
            <view class="weight">{{ infoData.outTime }}</view>
          </view>
          <!-- <view class="parking-lock-info-item">
						<view>通道名称</view>
						<view class="weight">{{infoData.roadwayName}}</view>
					</view> -->
          <view class="parking-lock-info-item">
            <view>免费时长</view>
            <view class="weight">{{ infoData.freeDuration || `0天0时${free_time}分0秒` }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view class="weight">计费时长</view>
            <view class="weight">{{ infoData.calcDuration }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>累计停车时长</view>
            <view class="weight">{{ infoData.duration }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>应收金额</view>
            <view class="weight">{{ infoData.totalAmount }}元</view>
          </view>
          <view class="parking-lock-info-item">
            <view>订单编号</view>
            <view class="weight">{{ infoData.id }}</view>
          </view>
        </view>
        <view class="parking-lock-pay-btn">
          <button type="default" v-if="isPay" @click="onEntraceClick">支付出场</button>
          <button type="default" v-else @click="jumpHome('/pages/index/index')">支付成功，返回首页</button>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="parking-lock-info">
        <view class="parking-lock-info-item-1">
          <view>{{ tipTxt }}</view>
        </view>
      </view>
    </template>
    <!-- 支付方式 -->
    <ChoosePayment
			v-if="choosePayment"
      ref="choosePayment"
      :payWayPop="payWayPop"
      :curOrderList="orderList"
      :jumpUrl="jumpUrl"
      :exportFlag="true"
      :sanPay="true"
      @closePaymentMethod="closePaymentMethod"
    />
    <!-- 广告轮播 -->
    <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';
export default {
  components: {
    ChoosePayment,
    AdBanner
  },
  data() {
    return {
      intoInfo: {
        parkNo: '',
        roadwayNo: '',
        polyOrderId: '',
        isBack: 0,
      },
      payWayPop: false, // 支付弹框
      infoData: undefined, // 订单信息
      orderList: [], // 支付订单列表
      jumpUrl: location.href + '&isBack=1', // 回调地址
      timer: null, // 轮询
      isPay: false, // 支付按钮显示
			choosePayment: false,
			tipTxt: '出口无车辆'
    };
  },
  onLoad(page) {
    this.intoInfo.parkNo = page?.parkNo;
    this.intoInfo.roadwayNo = page?.roadwayNo;
    this.intoInfo.polyOrderId = page?.polyOrderId;
    this.intoInfo.isBack = page?.isBack;
  },
  onShow() {
    this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
    if (this.intoInfo.polyOrderId && this.intoInfo.isBack == 1) {
      uni.showLoading({
        title: '订单状态查询中...'
      });
      this.timer = setInterval(() => {
        this.handlePayStatus(this.intoInfo.polyOrderId);
      }, 1000);
    }
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    /**
     * 立即支付
     */
    onEntraceClick() {
			this.choosePayment = true;
      this.$nextTick(() => {
        this.$refs['choosePayment'].openPopup({ ...this.infoData }, 'single', 'parking');
      });
    },
    /**
     * 反复查询支付状态
     * @param { String } orderId
     */
    handlePayStatus(orderId) {
      this.$u.api
        .getOrderStateExportApi({
          orderId
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.payStatus === 1 || res.data.payStatus === 3) {
              clearInterval(this.timer);
              uni.hideLoading();
              this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
            } else if (res.data.payStatus === 2) {
              this.isPay = true;
              uni.hideLoading();
            }
          } else {
            clearInterval(this.timer);
            uni.hideLoading();
            this.$refs.uToast.show({
              title: res.msg || '支付失败!',
              type: 'error'
            });
          }
        })
        .catch(() => {
          uni.hideLoading();
          clearInterval(this.timer);
        });
    },
    /**
     * 查询订单信息
     * @param { String } parkNo 停车场编号
     * @param { String } roadwayNo 出口编号
     */
    getOrderDetails(parkNo, roadwayNo) {
      uni.showLoading({
        title: '订单查询中...'
      });
      this.$u.api
        .getDetailExportApi({
          parkNo,
          roadwayNo
        })
        .then((res) => {
          if (res.code === 200) {
            this.infoData = res.data;
            this.orderList = [res.data.id];
            if (res.data.orderStatus == 2 || res.data.orderStatus == 3) {
              this.isPay = true;
            } else {
              this.isPay = false;
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg || '订单无数据',
              type: 'error'
            });
          }
          uni.hideLoading();
        })
        .catch((err) => {
					this.tipTxt = err?.msg ?? '出口无车辆'
          uni.hideLoading();
        });
    },
    /**
     * 关闭支付弹框
     */
    closePaymentMethod() {
      this.choosePayment = false;
    },
    jumpHome(url) {
      uni.switchTab({
        url: url
      });
    }
  }
};
</script>

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