parking_h5/pages/roadGateSystem/roadGateSystem.vue

<template>
  <!-- 道闸 -->
  <view class="parking-lock">
    <!-- 道闸支付 -->
    <template v-if="parkingLockStatus === 1">
      <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">{{ orderInfo.vehicleNo }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>停车场名称</view>
            <view>{{ orderInfo.roadName }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>入场车道</view>
            <view>{{ '入口1' }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>入场时间</view>
            <view>{{ orderInfo.inTime }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>出场车道</view>
            <view>{{ '出口1' }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>出场时间</view>
            <view>{{ orderInfo.outTime }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>免费时长</view>
            <!-- <view>{{ orderInfo.freeDuration || '0天0时15分0秒' }}</view> -->
            <view>{{ `0天0时${free_time}分0秒` }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>计费时长</view>
            <view>{{ orderInfo.calcDuration || 0 }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>累计停车时长</view>
            <view>{{ orderInfo.duration || 0 }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>应缴金额</view>
            <view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
          </view>
          <view class="parking-lock-info-item">
            <view>订单编号</view>
            <view>{{ orderInfo.orderId }}</view>
          </view>
        </view>
        <view class="parking-lock-pay-btn" v-if="is_pay">
          <button type="default" @click="payMoney">立即支付</button>
        </view>
      </view>
    </template>
    <template v-else-if="parkingLockStatus === 2">
      <view class="parking-lock-pay">
        <view class="parking-lock-tips">{{ tipsMsg }}</view>
      </view>
    </template>
    <!-- 支付方式 -->
    <PaymentMethod
      :payWayPop="payWayPop"
      :curOrderList="[orderId]"
      :jumpUrl="jumpUrl"
      :payeeId="payeeId"
      :payeeName="payeeName"
      :vehicleNo="orderInfo.vehicleNo"
      @closePaymentMethod="closePaymentMethod"
    >
    </PaymentMethod>
    <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
      <view class="loadingSelect">订单查询中...</view>
      <view class="spinner">
        <view class="rect1"></view>
        <view class="rect2"></view>
        <view class="rect3"></view>
        <view class="rect4"></view>
        <view class="rect5"></view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import getUrlParams from '../../utils/getUrlParams.js';
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
export default {
  components: {
    PaymentMethod
  },
  data() {
    return {
      // 车位锁状态 1:需支付 2:查询失败返回提醒
      parkingLockStatus: 0,
      // 支付方式选择弹框
      payWayPop: false,
      // 订单编号
      orderList: [],
      // 提示信息
      tipsMsg: null,
      // 轮询
      timer: null,
      // 订单信息
      orderInfo: {},
      // 订单id
      orderId: null,
      // 重定向地址
      jumpUrl: location.href + '&isBack=1',
      show: true,
      isBack: '',
      polyOrderId: '',
      // 地磁
      spaceId: '',
      payeeId: '',
      payeeName: '',
      is_pay: false
    };
  },
  onLoad(page) {
    if (page.orderId) {
      this.orderId = page?.orderId;
      this.spaceId = page?.spaceId;
      this.payeeId = page?.payeeId;
      this.polyOrderId = page?.polyOrderId;
      this.isBack = page?.isBack;
    } else {
      this.tipsMsg = page.msg || '参数丢失!';
      // this.parkingLockStatus = 2
      uni.showModal({
        title: '提示',
        content: (page.msg || '参数丢失') + ',返回首页',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }
      });
    }
  },
  onShow() {
    if (this.orderId) {
      this.getOrderDetails(this.spaceId, this.orderId, this.payeeId);
      if (this.polyOrderId && this.isBack == 1) {
        this.timer = setInterval(() => {
          this.show = true;
          this.handlePayStatus(this.polyOrderId);
        }, 1000);
      }
    } else {
      this.show = false;
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    /**
     * 反复查询支付状态
     * @param { String } orderId
     */
    handlePayStatus(orderId) {
      this.$u.api
        .getOrderInfo({
          orderId
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.payStatus === 1 || res.data.payStatus === 3) {
              this.show = false;
              clearInterval(this.timer);
              this.is_pay = false;
              uni.showModal({
                title: '提示',
                content: '支付成功，返回首页',
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                    uni.switchTab({
                      url: '/pages/index/index'
                    });
                  }
                }
              });
            } else if (res.data.payStatus === 2) {
              this.is_pay = true;
            }
          } else {
            this.show = false;
            clearInterval(this.timer);
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch(() => {
          this.show = false;
          clearInterval(this.timer);
        });
    },
    /**
     * 立即支付
     */
    payMoney() {
      this.payWayPop = true;
    },
    /**
     * 查询订单信息
     * @param { String } spaceId 车位ID
     * @param { String } orderId 订单id
     * @param { String } payeeId 收费员ID
     */
    getOrderDetails(spaceId, orderId, payeeId) {
      this.$u.api
        .geomaLockDetailsApi({
          spaceId,
          orderId,
          payeeId
        })
        .then((res) => {
          if (res.code === 200 && res.data.id) {
            this.payeeName = res.data.payeeName;
            this.parkingLockStatus = 1;
            this.orderInfo = res.data;
            this.show = false;
            if (res.data.payStatus == 0 || res.data.payStatus == 2) {
              this.is_pay = true;
            } else if (res.data.payStatus == 1) {
              this.is_pay = false;
              uni.showModal({
                title: '提示',
                content: '订单已支付，返回首页',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    uni.switchTab({
                      url: '/pages/index/index'
                    });
                  }
                }
              });
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg || '订单无数据',
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.show = false;
        });
    },
    /**
     * 关闭支付弹框
     */
    closePaymentMethod() {
      this.payWayPop = false;
    }
  }
};
</script>

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