feat: 更新缴费bug

kongdeqiang

2026-02-24 8613999daac6a42bef5694f43c78d0988251137e

 src/components/page/IndexXTYH.vue

@@ -1,11 +1,13 @@
<template>
  <div class="weizhang-box"  v-loading="dataLoading">
    <!-- 首屏骨架屏（初始化完成前显示） -->
    <div class="skeleton" v-if="!initCompleted">
      <div class="skeleton-top"></div>
      <div class="skeleton-form">
        <div class="skeleton-form-item" v-for="i in 6" :key="i"></div>
        <div class="skeleton-btn"></div>
    <div class="loading-tips" v-if="!initCompleted">
      <div class="tips-text">请稍后...</div>
      <!-- 可选：加个加载动画圆点 -->
      <div class="loading-dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="weizhang-main-box" v-else>
@@ -36,8 +38,10 @@
              {{this.statisticData.code}}
              <!--<el-input v-model="statisticData.code" readonly></el-input>-->
            </el-form-item>
            <el-form-item v-if="isShowjiaofei" class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-show="showFlag">
              <el-button class="jiaofei-btn" type="primary" @click="pay()" :loading="payFlag">去缴费</el-button>
            <el-form-item v-if="isShowjiaofei" class="weizhang-footer-box" style="margin-top: 4.498vh" label-width="0" v-show="showFlag">
              <div style="flex: 1; text-align: center;">
                <el-button class="jiaofei-btn" type="primary" @click="pay()" :loading="payFlag">去缴费</el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-form
@@ -50,10 +54,12 @@
                label="无 牌 车 辆 查 询">
              <el-input prefix-icon="el-icon-search" style="margin-top: 20px;border: solid 1px #ccc!important;" v-model="carNo" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 5.498vh" label-width="0">
              <el-button
                  style="borderColor:'none';background:#121215e0 "
                  class="jiaofei-btn" type="primary" @click="noCarOut()" v-show="showFlag">查询</el-button>
            <el-form-item class="weizhang-footer-box" style="margin-top: 5.498vh" label-width="0">
              <div style="flex: 1; text-align: center;">
                <el-button
                    style="borderColor:'none';background:#121215e0 "
                    class="jiaofei-btn" type="primary" @click="noCarOut()" v-show="showFlag">查询</el-button>
              </div>
            </el-form-item>
          </el-form>

@@ -222,6 +228,8 @@
    }
  },
  created(){
    //39服务器用的是code2字段，183服务器用的是code字段，这样就可以达到183访问的时候重新跳转到39服务器页面

    this.$message = Message; // 挂载全局Message，避免重复引入
    this.code = ''
    this.code2 = ''
@@ -248,36 +256,28 @@
      return;
    }

    var url = decodeURIComponent(window.location.href);
    const getUrlParams=(url) => {
      const params = {};
      const queryIndex = url.indexOf('?');
      if (queryIndex === -1) return params;
      const query = url.slice(queryIndex + 1);
      query.split('&').forEach(item => {
        const [key, val] = item.split('=');
        if (key) params[key] = val || '';
      });
      return params;
    }

    const params = getUrlParams(url);
    this.code = params.code || '';
    this.code2 = params.code2 || '';

    // 优化跳转逻辑（避免重复跳转）
    if (Object.keys(params).length > 2 && params.code && params.code2) {
      // 仅当参数完整时跳转（避免无限循环）
      window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(params.code)}&state=STATE&code2=${encodeURIComponent(params.code2)}`;
    var url = window.location.href;
    url = decodeURIComponent(url)
    var count = url.split('?').length-1;
    if(count >1){  //获取用户信息后跳回来本页面
      let data = this.getCodeFromUrl(url)
      window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(data.code)}&state=STATE&code2=${encodeURIComponent(data.code2)}`
      return;
    }

    var cs = url.split('?')[1];
    var cs_arr = cs.split('&');
    var cs={};
    for(var i=0;i<cs_arr.length;i++){
      cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
    }
    this.code2 = cs.code2;
    this.code = cs.code;
    //初始化跳转 39 服务器
    if(this.code2 == null || this.code2 == ''){
      window.location.href = `http://192.168.0.118:8082/#/index2?code2=${params.code || ''}`;
      //window.location.href = "http://60.0.121.40:8889/#/IndexXTYH39?code2="+cs.code   //测试用的
      window.location.href = "http://hesuancj.cn/#/index2?code2="+cs.code  //正式
      return;
    }

    if(this.code != null && this.code != '') {
      this.dialogVisible = true  //立即支付弹框
    }else {
@@ -383,25 +383,27 @@
            } else {
              this.$message.error(res.msg || '支付验证失败，请重试', 3000);
            }
            this.paying = false;
          },
          err => {
            this.payFlag = false;
            this.$message.error('网络异常，请重试', 3000);
            this.paying = false;
          }
      ).finally(() => {
        this.paying = false;
      });
      )

    },
    againPay() {
      console.log('this.paying=', this.paying);
      if (this.paying) return;
      this.paying = true;
      this.againDialogVisible = false;
      this.dataLoading = true;
      this.parkXT(this.outParkId).finally(() => {
        this.dataLoading = false;
        this.paying = false;
      });
      this.parkXT(this.outParkId)
      // .finally(() => {
      //   this.dataLoading = false;
      //   this.paying = false;
      // });
    },
    parkXT(outParkId) {
      this.payNowFlag = true //立即支付loading
@@ -423,6 +425,9 @@
        })
      } catch (err) {
        this.payNowFlag = false;
      } finally {
        this.dataLoading = false;
        this.paying = false;
      }
    },
    noCarOut(){
@@ -597,45 +602,51 @@

</script>
<style lang="scss" scoped>
// 新增骨架屏样式
.skeleton {
//骨架屏样式
.loading-tips {
  width: 100%;
  padding: 0 5.33vw;
  box-sizing: border-box;
  height: 80vh; // 占满屏幕主要区域
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .skeleton-top {
    height: 15vh;
    background: #f5f5f5;
    border-radius: 1.33vw;
    margin-bottom: 3.33vw;
    animation: skeleton-loading 1.5s infinite alternate;
  .tips-text {
    font-size: 4.27vw; // 适配移动端字号
    color: #666;
    margin-bottom: 3vw;
  }

  .skeleton-form {
    .skeleton-form-item {
      height: 8vw;
      background: #f5f5f5;
      border-radius: 1.33vw;
      margin-bottom: 3.33vw;
      animation: skeleton-loading 1.5s infinite alternate;
    }
  // 加载圆点动画（可选，增加动效）
  .loading-dots {
    display: flex;
    gap: 1.33vw;

    .skeleton-btn {
      height: 12vw;
      background: #f5f5f5;
      border-radius: 6.67vw;
      margin-top: 4.498vh;
      animation: skeleton-loading 1.5s infinite alternate;
    span {
      width: 1.87vw;
      height: 1.87vw;
      border-radius: 50%;
      background: #666;
      animation: dot-flash 1.5s infinite ease-in-out;

      &:nth-child(2) {
        animation-delay: 0.3s;
      }

      &:nth-child(3) {
        animation-delay: 0.6s;
      }
    }
  }
}

  @keyframes skeleton-loading {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
// 加载圆点动画
@keyframes dot-flash {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}