parking_h5_all/pages/parkexport/parkexport.vue

<!-- 道闸无牌车出场 -->
<template>
  <view class="park-export">
    <template v-if="infoData">
      <template v-if="infoData.needCode">
        <view class="park-export-number">
          <view class="park-export-number-icon">
            <u-image width="100%" height="100%" src="/static/img/no-found-enter-info.png" />
          </view>
          <view class="park-export-number-text"> 查询不到入场信息 </view>
          <view class="park-export-number-error" v-if="isInputError">输入错误，请重新输入</view>
          <view class="park-export-number-input">
            <u-message-input :maxlength="6" :value="codeNum" inactive-color="#008CFF" @finish="codeInputFinish" />
          </view>
          <view class="park-export-number-tips">
            提示：未查询到该微信/支付宝扫码入场的信息，<text>请输入车辆扫码入场时页面中的6位数进行结算出场。</text>
          </view>
          <view class="park-export-number-btn">
            <u-button type="primary" shape="circle" :disabled="codeNum.length === 0" @click="codeInputFinishConfirm">确 定</u-button>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="park-export-order">
          <view class="park-export-order-title">支付停车费</view>
          <view class="park-export-order-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
          <view class="park-export-order-info">
            <view class="park-export-order-info-item">
              <view>车牌号</view>
              <view class="vehicle-no">{{ infoData.vehicleNo }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>停车场名称</view>
              <view class="weight">{{ infoData.parkingName }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>入场车道</view>
              <view class="weight">{{ infoData.entranceName }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>入场时间</view>
              <view class="weight">{{ infoData.inTime }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>出场车道</view>
              <view class="weight">{{ infoData.outEntranceName }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>出场时间</view>
              <view class="weight">{{ infoData.outTime }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>免费时长</view>
              <view class="weight">{{ infoData.freeDuration || `0天0时${free_time}分0秒` }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view class="weight">计费时长</view>
              <view class="weight">{{ infoData.calcDuration }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>累计停车时长</view>
              <view class="weight">{{ infoData.duration }}</view>
            </view>
            <view class="park-export-order-info-item">
              <view>应收金额</view>
              <view class="weight">{{ infoData.totalAmount || 0 }}元</view>
            </view>
            <view class="park-export-order-info-item">
              <view>订单编号</view>
              <view class="weight">{{ infoData.id }}</view>
            </view>
          </view>
          <view class="park-export-order-btn">
            <u-button type="primary" shape="circle" v-if="isPay" @click="onEntraceClick">支付出场</u-button>
            <u-button type="primary" shape="circle" v-else @click="jumpHome">支付成功，返回首页</u-button>
          </view>
        </view>
      </template>
    </template>
    <template v-else>
      <view class="park-export-order-info">
        <text>{{ tipTxt }}</text>
      </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: {
        needCode: true
      }, // 订单信息
      orderList: [], // 支付订单列表
      jumpUrl: location.href + '&isBack=1', // 回调地址
      timer: null, // 轮询
      isPay: false, // 支付按钮显示
      choosePayment: false,
      tipTxt: '出口无车辆',
      codeNum: '',
      isInputError: false
    };
  },
  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, codeNum) {
      uni.showLoading({
        title: '订单查询中...'
      });
      this.$u.api
        .getDetailExportApi({
          parkNo,
          roadwayNo,
          codeNum
        })
        .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;
            }
          }
          uni.hideLoading();
        })
        .catch((err) => {
          this.tipTxt = err?.msg ?? '出口无车辆';
          uni.hideLoading();
        });
    },
    /**
     * 关闭支付弹框
     */
    closePaymentMethod() {
      this.choosePayment = false;
    },
    /**
     * @description: 返回首页
     * @param {*} url
     * @return {*}
     */
    jumpHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    /**
     * @description: 验证码输入完成
     * @param {*} code
     * @return {*}
     */
    codeInputFinish(code) {
      this.codeNum = code;
      this.codeInputFinishConfirm();
    },
    codeInputFinishConfirm() {
      this.isInputError = this.codeNum.length !== 6;
      this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo, this.codeNum);
    }
  }
};
</script>

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