parking_h5/pages/parkingLock/parkingLock.vue

<template>
  <view class="parking-lock">
    <view class="Jump">
      <view class="Jump-btn" @click="jumpArrears"> 欠费补缴 </view>
    </view>
    <!-- 车位锁 -->
    <view class="parking-lock-box">
      <!-- 车位锁支付 -->
      <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>{{ 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">
            <button type="default" @click="payMoney">立即支付</button>
          </view>
          <view class="parking-lock-pay-attention">
            <text>
              温馨提示：车辆计费前您有{{ orderInfo.freeDurationNum / 60 }}分钟免费停车时长，{{
                orderInfo.freeDurationNum / 60
              }}分钟过后则升板锁车开始计费。
            </text>
          </view>
        </view>
      </template>
      <!-- 车位锁开始状态 -->
      <template v-else-if="parkingLockStatus === 2">
        <view class="parking-lock-begin">
          <view class="parking-lock-begin-box">
            <view class="parking-lock-begin-bg">
              <image src="../../static/img/parking-lock-bg.png" mode=""></image>
            </view>
          </view>
          <view class="parking-lock-begin-info">车位锁正在动作，还未到位</view>
        </view>
      </template>
      <!-- 车位锁正在状态 -->
      <template v-else-if="parkingLockStatus === 3">
        <view class="parking-lock-loading">
          <view class="parking-lock-loading-box">
            <view class="parking-lock-loading-bg">
              <image src="../../static/img/parking-lock-bg.png" mode=""></image>
            </view>
          </view>
          <view class="parking-lock-loading-info">开锁中，请等待！</view>
        </view>
      </template>
      <!-- 开锁完成 -->
      <template v-else-if="parkingLockStatus === 4">
        <view class="parking-lock-success">
          <view class="parking-lock-success-box">
            <image src="../../static/img/parking-lock-achieve.png" mode=""></image>
          </view>
          <view class="parking-lock-success-info">开锁已完成</view>
          <view class="parking-lock-success-button">
            <button @click="cancel">返回</button>
          </view>
        </view>
      </template>
      <template v-else-if="parkingLockStatus === 5">
        <view class="parking-lock-pay">
          <view class="parking-lock-tips">{{ tipsMsg }}</view>
        </view>
      </template>
      <!-- 支付方式 -->
      <ChoosePayment ref="choosePayment" :curOrderList="orderList" :deviceNo="deviceNo" :jumpUrl="jumpUrl" />
      <!-- 订单查询加载弹框 -->
      <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>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import getUrlParams from '@/utils/getUrlParams.js';
import ChoosePayment from '@/pages/choosePayment/choosePayment.vue';
export default {
  components: {
    ChoosePayment
  },
  data() {
    return {
      // 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
      parkingLockStatus: 0,
      // 支付方式选择弹框
      payWayPop: false,
      // 订单编号
      orderList: [],
      // 提示信息
      tipsMsg: null,
      // 设备编号
      deviceNo: null,
      // 设备状态轮询
      timer: null,
      // 订单状态查询轮询
      timer1: null,
      // 订单信息
      orderInfo: {},
      // 订单id
      orderId: null,
      // 重定向地址
      jumpUrl: location.href + '&isBack=1',
      // 订单查询中弹框显示
      show: true,
      // 是否为返回标识
      isBack: '',
      // 预支付订单
      polyOrderId: ''
    };
  },
  onLoad(page) {
    if (page.orderId) {
      this.getOrderDetails(page.orderId);
      this.orderList = [];
      this.orderId = page.orderId;
      this.orderList.push(page.orderId);
      this.deviceNo = page.deviceNo;
      this.isBack = page?.isBack;
      this.polyOrderId = page?.polyOrderId;
    } else {
      this.tipsMsg = page.msg || '参数丢失!';
      this.parkingLockStatus = 5;
    }
  },
  onShow() {
    if (this.orderId) {
      if (this.polyOrderId && this.isBack == 1) {
        this.timer1 = setInterval(() => {
          this.show = true;
          this.handlePayStatus(this.polyOrderId);
        }, 2000);
      }
    } else {
      this.show = false;
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer1) {
      clearInterval(this.timer1);
    }
  },
  methods: {
    /**
     * 跳转欠费页面
     * @date 2023-02-22
     * @returns {any}
     */
    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.timer1);
              this.getOrderDetails(this.orderId);
            }
          } else {
            this.show = false;
            clearInterval(this.timer1);
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch(() => {
          this.show = false;
          clearInterval(this.timer1);
        });
    },
    /**
     * 立即支付
     * @date 2023-02-22
     * @returns {any}
     */
    payMoney() {
      this.$nextTick(() => {
        this.$refs['choosePayment'].openPopup({ ...this.orderInfo }, 'single', 'road');
      });
    },
    /**
     * 根据订单id查询订单信息
     * @date 2023-02-22
     * @param {any} id
     * @returns {any}
     */
    getOrderDetails(id) {
      this.$u.api
        .getOrderDetail({
          id
        })
        .then((res) => {
          if (res.code === 200 && res.data.id) {
            this.parkingLockStatus = 1;
            // 获取页面完整url
            const local = window.location.href;
            // 获取url后面的参数
            const locationLocaturl = window.location.search;
            // 截取url中的isBack
            let isBack = getUrlParams(local, 'isBack');
            // 如果没有isBack，则去请求
            if (!isBack) {
              // uni.hideLoading();
              this.show = false;
              clearInterval(this.timer1);
            }
            this.orderInfo = res.data;
            if (res.data.payStatus === 1) {
              this.show = false;
              clearInterval(this.timer1);
              this.checkEqupment();
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg || '订单无数据',
              type: 'error'
            });
            this.show = false;
            if (this.timer1) {
              clearInterval(this.timer1);
            }
          }
        })
        .catch(() => {
          this.show = false;
          if (this.timer1) {
            clearInterval(this.timer1);
          }
        });
    },
    // 检测设备
    checkEqupment() {
      this.timer = setInterval(() => {
        this.getEqumentStatus(this.deviceNo);
      }, 1000);
    },
    // 查询设备状态
    getEqumentStatus(orderNo) {
      this.$u.api
        .getEquomentInfo({
          orderNo
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.deviceStatus == 0) {
              this.parkingLockStatus = 4;
              clearInterval(this.timer);
            } else if (res.data.deviceStatus == 1 || res.data.deviceStatus == 5) {
              this.parkingLockStatus = 2;
            } else if (res.data.deviceStatus == 6) {
              this.parkingLockStatus = 3;
            }
          } else {
            clearInterval(this.timer);
          }
        })
        .catch(() => {
          clearInterval(this.timer);
        });
    },
    // 返回首页
    cancel() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

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

.Jump {
  display: flex;
  justify-content: flex-end;
  background-color: #f6f6ff;

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