feat: 按钮的样式

1012414140@qq.com

6 小时以前 7f1be38a5488f7066e608379e3ea17d2b6838bca

 src/components/page/IndexXTYH.vue

@@ -1,11 +1,14 @@
<template>
  <div class="weizhang-box"  v-loading="dataLoading">
    <!--<div class="weizhang-header">-->
    <!--<div class="iconfont leftjiantou">&#xe606;</div>-->
    <!--<div class="text"><h1>峰峰矿区综合行政执法局</h1></div>-->
    <!--<div class="right"></div>-->
    <!--</div>-->
    <div class="weizhang-main-box">
    <!-- 首屏骨架屏（初始化完成前显示） -->
    <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>
    </div>
    <div class="weizhang-main-box" v-else>
      <div class="weizhang-main-top">
        <!--                <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">-->
        <span class="weizhang">停车收费</span>
@@ -33,31 +36,37 @@
              {{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-->
          <!--                      class="carSearch"-->
          <!--                      label-position="left">-->
          <!--                    <el-form-item-->
          <!--                        class='formLabel'-->
          <!--                        style="display: flex;-->
          <!--                            flex-direction: column;align-items: center;justify-content: center"-->
          <!--                        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>-->
          <!--&lt;!&ndash;                    <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 5.498vh" label-width="0">&ndash;&gt;-->
          <!--&lt;!&ndash;                      <el-button&ndash;&gt;-->
          <!--&lt;!&ndash;                          style="borderColor:'none';background:#121215e0 "&ndash;&gt;-->
          <!--&lt;!&ndash;                          class="jiaofei-btn" type="primary" @click="noCarOut()" v-show="showFlag">查询</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
          <!--                  </el-form>-->
          <el-form
              class="carSearch"
              label-position="left">
            <el-form-item
                class='formLabel'
                style="display: flex;
                            flex-direction: column;align-items: center;justify-content: center"
                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="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>

        </div>

      </div>
    </div>


    <div class="moreCarNum" v-if="pipaiCarNumShow">
      <h1 class="title">以下是与您车牌号相似的入场记录</h1>
      <div class="moreCarNum-main">
@@ -110,11 +119,15 @@
          </div>
          <div class="wx-img-box">
            <div class="wx-img-l">
              <img src="../../assets/images/wxIcon.png" alt="">
              <img src="../../assets/images/wxIcon.png" alt="" style="width: 5.33vw;object-fit: contain;">
              <h1>微信支付</h1>
            </div>
            <div class="wx-img-r">
              <img src="../../assets/images/duigouIcon.png" alt="">
              <!-- 替代 duigouIcon.png -->
              <svg width="30" height="30" viewBox="0 0 24 24" fill="#4CAF50">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
              </svg>
<!--              <img src="../../assets/images/duigouIcon.png" alt="">-->
            </div>
          </div>
        </div>
@@ -141,7 +154,8 @@
          </span>
      </el-dialog>
    </div>
    <div class="pipeicarNum-dialog-box">

    <div class="pipeicarNum-dialog-box" v-if="pipeicardialogVisible">
      <el-dialog
          title="请选择识别正确的记录"
          :close-on-click-modal="false"
@@ -159,15 +173,25 @@
</template>

<script>
import wx from 'weixin-js-sdk'
import TishiDialog from "@/components/page/TishiDialog";
import TishiDialog2 from "@/components/page/TishiDialog2";
import { Button, Form, FormItem, Table, TableColumn, Dialog, Input, Loading, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import fa from "element-ui/src/locale/lang/fa"; // 按需引入样式（仅必要样式）
// 替换原有的import
const TishiDialog = () => import('@/components/page/TishiDialog');
const TishiDialog2 = () => import('@/components/page/TishiDialog2');
export default {
  name: 'dashboard',
  components: {
    TishiDialog,
    TishiDialog2,

    ElButton: Button,
    ElForm: Form,
    ElFormItem: FormItem,
    ElTable: Table,
    ElTableColumn: TableColumn,
    ElDialog: Dialog,
    ElInput: Input,
    ElLoading: Loading
  },
  data() {
    return {
@@ -188,23 +212,35 @@
      statisticData:{

      },
      initCompleted: false,
      showFlag:true,
      querying:false,
      paying:false,
      showFlag2:true,
      status3:0,
      carNo:"",
      code2:"",
      code:"",
      dataLoading:false,  //数据回显前加loading，防止没有数据 点击‘立即支付按钮’
      wx: null,
    }
  },
  created(){
    this.$message = Message; // 挂载全局Message，避免重复引入
    this.code = ''
    this.code2 = ''
    let ua = window.navigator.userAgent.toLowerCase();
    this.querying = false; // 新增：查询状态锁
    this.paying = false; // 新增：支付状态锁
    this.initCompleted = false; // 新增：首屏初始化状态
    //判断是不是微信
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      // 微信
      this.type = 0
      // 动态加载微信SDK
      import('weixin-js-sdk').then(wx => {
        this.wx = wx; // 挂载到实例上
      });
    }
    //判断是不是支付宝
    if (ua.match(/AlipayClient/i) == "alipayclient") {
@@ -216,32 +252,33 @@
      return;
    }

    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://192.168.0.8:8082/#/IndexXTYH39?code="+data.code+"&state=STATE&code2="+data.code2
      window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(data.code)}&state=STATE&code2=${encodeURIComponent(data.code2)}`
    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)}`;
      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 == ''){
      // this.$message({
      //   message: '1秒后自动跳转，请稍等',
      //   type: 'success',
      //   duration:1000,
      // });
      window.location.href = "http://hesuancj.cn/#/index2?code2="+cs.code  //正式
      // window.location.href = "http://192.168.0.8:8082/#/IndexXTYH39?code2="+cs.code   //测试用的
      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   //测试用的
      return;
    }
@@ -259,32 +296,38 @@
        this.dataLoading  = true  //回显数据的loading
        this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:this.code2}, res => {
          this.statisticData = res.data;
          this.initCompleted = true; // 显示真实内容
          this.outParkId = this.statisticData.id;
          this.status3 = this.statisticData.status3;
          this.oldCarNo = this.statisticData.carNo;
          this.dataLoading  = false
          this.payFlag = false
          if(!this.statisticData.enterTime) {  //没有入场
            this.isShowjiaofei = false
            this.pipaiCarNumShow = true  //匹配区域显示
            this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
              if(res.code == 0) {
                if(res.data.length > 0) {
                  this.moreCarNumData = res.data.map(item => {
                    return {
                      ...item,
                      createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                    }
                  })
                }else {
                  this.tishiDialogVisiable = true  //入场信息 异常提示
            if(this.statisticData.carNo =='_无_' || this.statisticData.carNo=='无牌车'){
              this.isShowjiaofei = false
            }else {
              this.isShowjiaofei = false
              this.pipaiCarNumShow = true  //匹配区域显示
              this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
                if(res.code == 0) {
                  if(res.data.length > 0) {
                    this.moreCarNumData = res.data.map(item => {
                      return {
                        ...item,
                        createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                      }
                    })
                  }else {
                    this.tishiDialogVisiable = true  //入场信息 异常提示
                  }
                }
              }
            })

              })
            }
          }else if(this.statisticData.enterTime && (!this.statisticData.price || this.statisticData.price == 0)) { //金额为0
            this.isShowjiaofei = false
            this.tishiDialogVisiable2 = true
            if(this.statisticData.carNo !='_无_' && this.statisticData.carNo!='无牌车') {
              this.tishiDialogVisiable2 = true
            }
          }else {
            this.isShowjiaofei = true
          }
@@ -324,45 +367,45 @@
      })
    },
    pay(){
      this.payFlag = true;  //去缴费loading
      // this.payNowFlag = true;
      // this.showFlag = true
      if(this.status3==1){
        this.$message({
          message: '您有违章未处理，请先处理或联系停车场管理人员',
          type: 'error',
          duration:3000,
        });
      if (this.paying || this.dataLoading) return; // 防止重复支付+数据加载中禁止
      this.paying = true;
      this.payFlag = true;
      if (this.status3 === 1) {
        this.$message.error('您有违章未处理，请先处理或联系停车场管理人员', 3000);
        this.payFlag = false;
        this.paying = false;
        return;
      }
      this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkJudg', {id:this.outParkId}, res => {
        if(res.code === 0){
          this.payFlag = false;  //去缴费loading
          if(res.data == 1) { //1 弹出弹框(已缴费提示)
            this.againDialogVisible = true
          }else {
            // this.dialogVisible = true;  //立即支付的弹框
            this.parkXT(this.outParkId)   //去获取微信信息
      this.$byutil.postData(
          this,
          `${this.$systemconfig.basePath}/ffzf/api/parkJudg`,
          { id: this.outParkId },
          res => {
            this.payFlag = false;
            if (res.code === 0) {
              res.data === 1 ? (this.againDialogVisible = true) : this.parkXT(this.outParkId);
            } else {
              this.$message.error(res.msg || '支付验证失败，请重试', 3000);
            }
          },
          err => {
            this.payFlag = false;
            this.$message.error('网络异常，请重试', 3000);
          }
          // this.getCode()
          // this.showFlag = false
        }else {
          this.$message({
            message:res.msg,
            type: 'error',
            duration:3000,
          });
          this.payFlag = false;
        }
      })
      ).finally(() => {
        this.paying = false;
      });

    },
    againPay() {
      this.againDialogVisible = false
      this.dataLoading = true  //页面loading打开
      this.parkXT(this.outParkId)  //获取微信用户信息

      // this.dialogVisible = true  //打开立即支付弹框
      // this.parkXT(this.outParkId)
      if (this.paying) return;
      this.paying = true;
      this.againDialogVisible = false;
      this.dataLoading = true;
      this.parkXT(this.outParkId).finally(() => {
        this.dataLoading = false;
        this.paying = false;
      });
    },
    parkXT(outParkId) {
      this.payNowFlag = true //立即支付loading
@@ -387,26 +430,40 @@
      }
    },
    noCarOut(){
      if(this.carNo){
        this.$byutil.postData(this, this.$systemconfig.basePath + '/outPark/outPark2', {code2:this.code2,carNo:this.carNo}, res => {
          if(res.success){
            this.outParkId = res.data.id;
            this.pay();
            this.showFlag = false;
          }else{
            this.$message({
              message: res.msg, type: 'error', duration:2000,
            });
          }
      // 防抖：防止重复点击
      if (this.querying) return;
      this.querying = true;

        })
      }else{
        this.$message({
          message: '请输入手机号',
          type: 'error',
          duration:2000,
        });
      const { oldCarNo, carNo, code2 } = this;
      // 简化条件判断
      if (!['无牌车', '_无_'].includes(oldCarNo)) {
        this.$message.error('非法输入');
        this.querying = false;
        return;
      }
      if (!carNo.trim()) {
        this.$message.error('请输入手机号');
        this.querying = false;
        return;
      }

      this.$byutil.postData(
          this,
          `${this.$systemconfig.basePath}/ffzf/car/outParkByPhone`,
          { code2, carNo: carNo.trim() },
          res => {
            if (res.code === 0) {
              this.statisticData = res.data;
              this.outParkId = this.statisticData.id;
              this.isShowjiaofei = true;
              this.$message.success('查询成功');
            } else {
              this.$message.error(res.message || '查询失败，请重试');
            }
          }
      ).finally(() => {
        this.querying = false; // 重置状态锁
      });

    },
    GetQueryString(name) {
@@ -543,20 +600,55 @@
}

</script>
<style lang="scss" scoped>
// 新增骨架屏样式
.skeleton {
  width: 100%;
  padding: 0 5.33vw;
  box-sizing: border-box;

  .skeleton-top {
    height: 15vh;
    background: #f5f5f5;
    border-radius: 1.33vw;
    margin-bottom: 3.33vw;
    animation: skeleton-loading 1.5s infinite alternate;
  }

<style lang="scss">
//.el-message{
//  padding: 6.944vh  /* 75/10.8 */ 0.78125vw  /* 15/19.2 */ 6.944vh  /* 75/10.8 */ 1.042vw  /* 20/19.2 */;
//}
  .skeleton-form {
    .skeleton-form-item {
      height: 8vw;
      background: #f5f5f5;
      border-radius: 1.33vw;
      margin-bottom: 3.33vw;
      animation: skeleton-loading 1.5s infinite alternate;
    }

    .skeleton-btn {
      height: 12vw;
      background: #f5f5f5;
      border-radius: 6.67vw;
      margin-top: 4.498vh;
      animation: skeleton-loading 1.5s infinite alternate;
    }
  }

  @keyframes skeleton-loading {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }
}

.weizhang-box{
  .el-form-item{
    margin-bottom: 3.8vw!important;
  }
  .el-form-item__label{
    font-size: 3.73vw  /* 28/7.5 */;
    width: 21.33vw  /* 160/7.5 */
    !important;
    line-height: 2.5;
  }
  .el-form-item__content{
@@ -581,17 +673,6 @@
      font-weight: 600;
    }
  }
  .weizhang-footer-box{
    .el-form-item__content{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .el-button--small{
      padding: 11px 15px;
      font-size: 0.347rem  /* 26/75 */;
    }
  }
  .dialog-box{
    .el-dialog{
      bottom: 0;
@@ -599,12 +680,7 @@
      left: 0;
      margin: 0;
    }
    .el-dialog__header{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.87vw  /* 14/7.5 */;
    ::v-deep .el-dialog__header {
      background: rgba(103,201,122,0.1);
    }
  }
@@ -640,12 +716,7 @@
      margin-top: 47vh!important;
      border-radius: 2.67vw  /* 20/7.5 */;
    }
    .el-dialog__header{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.87vw  /* 14/7.5 */;
    ::v-deep .el-dialog__header {
      background: rgba(103,201,122,0.1);
    }
  }
@@ -668,9 +739,6 @@
    .el-table td, .el-table th{
      padding: 2.5vw  /* 12/7.5 */ 0;
    }
    //.el-table td, .el-table th.is-leaf{
    //  border-bottom: 1px solid transparent;
    //}
    .el-table::before{
      height: 0;
    }
@@ -706,11 +774,17 @@
    }
  }
}



</style>
<style lang="scss" scoped>
.weizhang-footer-box{
  .el-form-item__content{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .el-button--small{
    padding: 11px 15px;
    font-size: 0.347rem  /* 26/75 */;
  }
}
.weizhang-box{
  height: 100%;
  overflow-y: auto;
@@ -796,9 +870,6 @@
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.weizhang-main-bootom{
  margin-top: 0.333rem  /* 25/75 */;
}
.dialog-main-box{
  .dialog-main-line{
@@ -921,4 +992,21 @@
  display: flex;
  justify-content: space-between;
}
.formLabel{
  ::v-deep .el-form-item__label{
    font-size: 18px;
  }
  ::v-deep el-input{
    border: solid 1px #ccc!important;

  }

}
.carSearch{
  border:solid 1px #ccc;
  margin-top: 15%;
  border-radius: 4%;
  box-shadow: 0px 0px 0px 10px;

}
</style>