parking_h5_all/pages/geomagnetismLock/geomagnetismLock.vue

<template>
  <!-- 地磁 -->
  <view class="parking-lock">
    <view class="Jump">
      <view class="Jump-btn" @click="jumpArrears"> 欠费补缴 </view>
    </view>
    <!-- 地磁支付 -->
    <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>{{ orderInfo.spaceName }}</view>
          </view>
          <view class="parking-lock-info-item">
            <view>入场时间</view>
            <view>{{ orderInfo.inTime }}</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时${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>
    <!-- 支付方式 -->
    <ChoosePayment
      ref="choosePayment"
      :curOrderList="[orderId]"
      :jumpUrl="jumpUrl"
      :payeeId="payeeId"
      :payeeName="payeeName"
      :pursueType="pursueType"
      :vehicleNo="orderInfo.vehicleNo"
    />
    <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 ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
export default {
  components: {
    ChoosePayment
  },
  data() {
    return {
      // 车位锁状态 1:需支付 2:查询失败返回提醒
      parkingLockStatus: 0,
      // 支付方式选择弹框
      payWayPop: false,
      // 订单编号
      orderList: [],
      // 提示信息
      tipsMsg: null,
      // 轮询
      timer: null,
      // 订单信息
      orderInfo: {},
      // 订单id
      orderId: null,
      // 重定向地址
      jumpUrl: location.href + '&isBack=1',
      show: false,
      isBack: '',
      polyOrderId: '',
      // 地磁
      spaceId: '',
      payeeId: '',
      payeeName: '',
      pursueType: '',
      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.pursueType = page?.pursueType;
      this.isBack = page?.isBack;
    } else {
      this.tipsMsg = page.msg || '参数丢失!';
      this.parkingLockStatus = 2;
    }
  },
  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: {
    jumpArrears() {
      uni.navigateTo({
        url: '../center/order/order?orderStatus=2'
      });
    },
    /**
     * 反复查询支付状态
     * @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.$nextTick(() => {
        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'road');
      });
    },
    /**
     * 查询订单信息
     * @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 || res.data.payStatus == 3) {
              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'
                    });
                  }
                }
              });
            }
            if (res.data.payAmount == 0) {
              this.is_pay = false;
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg || '订单无数据',
              type: 'error'
            });
          }
        });
    },
    /**
     * 关闭支付弹框
     */
    closePaymentMethod() {
      this.payWayPop = false;
    }
  }
};
</script>

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

.Jump {
  position: fixed;
  top: 50px;
  right: 0;
  background-color: #f6f6ff;

  &-btn {
    color: rgb(0, 140, 255);
    padding: 20rpx 30rpx;
  }
}
</style>