feat: 修改支付页面

kongdeqiang

7 小时以前 5788c53ae08862613544ec224212024e18ccf7cd

 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>
@@ -58,6 +61,8 @@

      </div>
    </div>


    <div class="moreCarNum" v-if="pipaiCarNumShow">
      <h1 class="title">以下是与您车牌号相似的入场记录</h1>
      <div class="moreCarNum-main">
@@ -110,11 +115,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 +150,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 +169,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 +208,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 +248,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://localhost: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://localhost: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,6 +292,7 @@
        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;
@@ -329,45 +363,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
@@ -392,36 +426,40 @@
      }
    },
    noCarOut(){
      if(this.oldCarNo == '无牌车' || this.oldCarNo == '_无_'){
        if(this.carNo){
          this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/car/outParkByPhone', {code2:this.code2,carNo:this.carNo}, res => {
            if(res.code===0){
      // 防抖：防止重复点击
      if (this.querying) return;
      this.querying = true;

      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({
                message: '查询成功',
                type: 'success',
              });
            }else {
              this.$message({
                message: res.message,
                type: 'error',
              });
              this.isShowjiaofei = true;
              this.$message.success('查询成功');
            } else {
              this.$message.error(res.message || '查询失败，请重试');
            }
          })
        }else{
          this.$message({
            message: '请输入手机号',
            type: 'error',
          });
        }
      }else {
        this.$message({
          message: '非法输入',
          type: 'error',
        });
      }
          }
      ).finally(() => {
        this.querying = false; // 重置状态锁
      });

    },
    GetQueryString(name) {
@@ -558,12 +596,49 @@
}

</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;
@@ -594,17 +669,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;
@@ -612,12 +676,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);
    }
  }
@@ -653,12 +712,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);
    }
  }
@@ -681,9 +735,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;
    }
@@ -730,10 +781,6 @@
    font-size: 0.347rem  /* 26/75 */;
  }
}


</style>
<style lang="scss" scoped>
.weizhang-box{
  height: 100%;
  overflow-y: auto;
@@ -819,9 +866,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{