feat: 修改支付页面

kongdeqiang

6 小时以前 ce32469aa73a5926e0b35c053e5b8e5f9a5d850d

 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>

@@ -383,25 +389,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 +431,9 @@
        })
      } catch (err) {
        this.payNowFlag = false;
      } finally {
        this.dataLoading = false;
        this.paying = false;
      }
    },
    noCarOut(){
@@ -597,45 +608,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;
  }
}