峰峰梳理流程 修改弹框顺序

819527061@qq.com

2024-04-09 01064381459962abb286b559f35fc7fd869d67f0

峰峰梳理流程 修改弹框顺序

 src/components/page/IndexXTYH.vue

@@ -1,5 +1,5 @@
<template>
    <div class="weizhang-box">
  <div class="weizhang-box"  v-loading="dataLoading">
        <!--<div class="weizhang-header">-->
            <!--<div class="iconfont leftjiantou">&#xe606;</div>-->
            <!--<div class="text"><h1>峰峰矿区综合行政执法局</h1></div>-->
@@ -87,7 +87,7 @@
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pay()" :loading="payNowFlag">立 即 支 付</el-button>
            <el-button type="primary" @click="parkXT(outParkId)" :loading="payNowFlag">立 即 支 付</el-button>
          </span>
        </el-dialog>
      </div>
@@ -144,7 +144,8 @@
                status3:0,
                carNo:"",
                code2:"",
                code:""
      code:"",
      dataLoading:false,  //数据回显前加loading，防止没有数据 点击‘立即支付按钮’
            }
        },
        created(){
@@ -161,14 +162,14 @@
            //支付宝
            this.type = 1
          }
          // if(this.type == null){
          //   this.$message.error("请用微信或支付宝扫描二维码")
          //   return;
          // }
    if(this.type == null){
      this.$message.error("请用微信或支付宝扫描二维码")
      return;
    }

            var url = window.location.href;
            var count = url.split('?').length-1;
            if(count >1){
    if(count >1){  //获取用户信息后跳回来本页面
              let codeONE = this.getCodeFromUrl(url)
              let codeTWO = this.getCode2FromUrl(url)
              window.location.href = "http://hesuancj.cn/#/index2?code="+codeONE+"&state=STATE&code2="+codeTWO
@@ -182,13 +183,17 @@
            //this.outParkId = cs.code;
          this.code2 = cs.code2;
          this.code = cs.code;

    //初始化跳转 39 服务器
          if(this.code2 == null || this.code2 == ''){
            this.$message({
              message: '1秒后自动跳转，请稍等',
              type: 'success',
              duration:1000,
            });
            setTimeout(function(){window.location.href = "http://hesuancj.cn/#/index2?code2="+cs.code},1000);
      // 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   //测试用的
      // setTimeout(function(){window.location.href = "http://192.168.0.8:8082/#/IndexXTYH39?code2="+cs.code},1000);
            return;
          }
          if(this.code != null && this.code != '') {
@@ -196,11 +201,19 @@
          }else {
            this.dialogVisible = false
          }
          this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:cs.code2}, res => {
    this.getDataList()
  },
  methods: {
    getDataList() {  //数据回显接口
      //数据回显接口
      try{
        this.dataLoading  = true  //回显数据的loading
        this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:this.code2}, res => {
            this.statisticData = res.data;
            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
@@ -231,13 +244,15 @@
              });
            }
          })
      } catch (err) {
        // this.dataLoading  = false
      }finally {
        // this.dataLoading  = false
      }
        },
        methods: {
            pay(){
                console.log('code',this.code)
                console.log('code2',this.code2)
                // this.payFlag = true;
                this.payNowFlag = true;
      this.payFlag = true;  //去缴费loading
      // this.payNowFlag = true;
                // this.showFlag = true
                if(this.status3==1){
                    this.$message({
@@ -248,31 +263,34 @@
                    return;
                }
              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkJudg', {id:this.outParkId}, res => {
                console.log(res,'res====')
                if(res.code === 0){
                  this.payNowFlag = false;
                  if(res.data == 1) { //1 弹出弹框
          this.payFlag = false;  //去缴费loading
          if(res.data == 1) { //1 弹出弹框(已缴费提示)
                    this.againDialogVisible = true
                  }else {
                    this.parkXT(this.outParkId)
            this.dialogVisible = true;  //立即支付的弹框
            // this.parkXT(this.outParkId)
                  }
                  // this.getCode()
                  // this.showFlag = false
                }else {
                  this.$message({
                    message: '支付错误，请重新支付',
            message:res.msg,
                    type: 'error',
                    duration:3000,
                  });
                  this.payNowFlag = false;
          this.payFlag = false;
                }
              })
            },
            againPay() {
              this.againDialogVisible = false
              this.parkXT(this.outParkId)
      this.dialogVisible = true  //打开立即支付弹框
      // this.parkXT(this.outParkId)
            },
            parkXT(outParkId) {
      this.payNowFlag = true //立即支付loading
      try{
              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkXT', {id:outParkId}, res => {
                if(res.code === 0){
                  this.payNowFlag = false;
@@ -287,6 +305,9 @@
                  this.payNowFlag = false;
                }
              })
      } catch (err) {
        this.payNowFlag = false;
      }
            },
            noCarOut(){
                if(this.carNo){
@@ -334,7 +355,7 @@
              return code2
            },

            getCode(){
    getCode(){   //获取用户微信登录信息
              if(this.type == 0 ){
                //微信，获取code
                if(this.code==null||this.code==""){

 src/components/page/IndexXTYH39.vue

New file
@@ -0,0 +1,691 @@
<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="weizhang-main-top">
        <!--                <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">-->
        <span class="weizhang">停车收费</span>
        <span class="money">￥{{this.statisticData.price}}</span>
      </div>
      <div class="weizhang-main-bootom">
        <div class="weizhang-main-form">
          <el-form label-width="80px" :model="statisticData" label-position="left">
            <el-form-item label="车牌号" style="margin-left: 25px;">
              {{this.statisticData.carNo}}
            </el-form-item>
            <el-form-item label="进场时间" style="margin-left: 25px;">
              {{this.statisticData.enterTime}}
            </el-form-item>
            <el-form-item label="出场时间" style="margin-left: 25px;">
              {{this.statisticData.createTime}}
            </el-form-item>
            <el-form-item label="停留时间" style="margin-left: 25px;">
              {{this.statisticData.timeStr}}
            </el-form-item>
            <el-form-item label="位置" style="margin-left: 25px;">
              {{this.statisticData.parkName}}
            </el-form-item>
            <el-form-item label="订单号" style="margin-left: 25px;">
              {{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>
          </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>-->

        </div>

      </div>
    </div>
    <div class="dialog-box">
      <el-dialog
          title="支付"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="100%">
        <div class="dialog-main-box">
          <div class="dialog-main-line">
            <h1>合计费用</h1>
            <h1>{{this.statisticData.price}}元</h1>
          </div>
          <div class="dialog-main-line">
            <h1>停车时长</h1>
            <h1>{{this.statisticData.timeStr}}</h1>
          </div>
          <div class="dialog-main-line-middle">
            <h1>{{this.statisticData.price}}<font>元</font></h1>
          </div>
          <div class="wx-img-box">
            <div class="wx-img-l">
              <img src="../../assets/images/wxIcon.png" alt="">
              <h1>微信支付</h1>
            </div>
            <div class="wx-img-r">
              <img src="../../assets/images/duigouIcon.png" alt="">
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="parkXT(outParkId)" :loading="payNowFlag">立 即 支 付</el-button>
          </span>
      </el-dialog>
    </div>
    <div class="again-dialog-box">
      <el-dialog
          title="提示"
          :visible.sync="againDialogVisible"
          :close-on-click-modal="false"
          :show-close="false"
          width="100%">
        <div class="again-dialog-main">
          <h1>
            您已发起过此订单缴费申请，如确认缴费成功，请原地等待抬杆，如缴费未成功，请继续支付
          </h1>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="againDialogVisible = false" type="primary">取消</el-button>
            <el-button @click="againPay" type="success">确定</el-button>
          </span>
      </el-dialog>
    </div>
    <tishi-dialog ref="TishiDialog" v-if="tishiDialogVisiable"></tishi-dialog>
    <tishi-dialog2 ref="TishiDialog" v-if="tishiDialogVisiable2"></tishi-dialog2>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import TishiDialog from "@/components/page/TishiDialog";
import TishiDialog2 from "@/components/page/TishiDialog2";
export default {
  name: 'dashboard',
  components: {
    TishiDialog,
    TishiDialog2,

  },
  data() {
    return {
      tishiDialogVisiable: false,
      tishiDialogVisiable2: false,
      isShowjiaofei: true,
      dialogVisible:false,
      againDialogVisible: false, //
      payFlag:false,
      payNowFlag:false,
      outParkId:"",
      type:null,
      statisticData:{

      },
      showFlag:true,
      showFlag2:true,
      status3:0,
      carNo:"",
      code2:"",
      code:"",
      dataLoading:false,  //数据回显前加loading，防止没有数据 点击‘立即支付按钮’
    }
  },
  created(){
    this.code = ''
    this.code2 = ''
    let ua = window.navigator.userAgent.toLowerCase();
    //判断是不是微信
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      // 微信
      this.type = 0
    }
    //判断是不是支付宝
    if (ua.match(/AlipayClient/i) == "alipayclient") {
      //支付宝
      this.type = 1
    }
    // if(this.type == null){
    //   this.$message.error("请用微信或支付宝扫描二维码")
    //   return;
    // }

    var url = window.location.href;
    console.log(url,'this.url--------')
    var count = url.split('?').length-1;
    if(count >1){  //获取用户信息后跳回来本页面
      let codeONE = this.getCodeFromUrl(url)
      let codeTWO = this.getCode2FromUrl(url)
      window.location.href = "http://hesuancj.cn/#/index2?code="+codeONE+"&state=STATE&code2="+codeTWO
    }
    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.outParkId = cs.code;
    this.code2 = cs.code2;
    this.code = cs.code;

    //初始化跳转 39 服务器
    console.log(this.code2,'this.code2--------')
    if(this.code2 == null || this.code2 == ''){
      console.log(this.code2,'this.code2--------222222222')
      // this.$message({
      //   message: '1秒后自动跳转，请稍等',
      //   type: 'success',
      //   duration:1000,
      // });
      window.location.href = "http://192.168.0.8:8082/#/IndexXTYH39?code2="+cs.code
      // setTimeout(function(){window.location.href = "http://192.168.0.8:8082/#/IndexXTYH39?code2="+cs.code},1000);
      return;
    }
    console.log(this.code2,'this.code2--------333333333')
    if(this.code != null && this.code != '') {
      this.dialogVisible = true
    }else {
      this.dialogVisible = false
    }
    this.getDataList()

  },
  methods: {
    getDataList() {  //数据回显接口
      //数据回显接口
      try{
        this.dataLoading  = true  //回显数据的loading
        this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:this.code2}, res => {
          this.statisticData = res.data;
          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.tishiDialogVisiable = true
            // this.$message({
            //   showClose: false,
            //   duration:0,
            //   type: 'success',
            //   message: '入场异常，请联系管理员'
            // });
          }else if(this.statisticData.enterTime && (!this.statisticData.price || this.statisticData.price == 0)) { //金额为0
            this.isShowjiaofei = false
            this.tishiDialogVisiable2 = true
            // this.$message({
            //   showClose: false,
            //   duration:0,
            //   type: 'success',
            //   message: '无需缴费，请原地等待，或联系管理员'
            // });
          }else {
            this.isShowjiaofei = true
          }
          if(this.status3==1){
            this.$message({
              message: '您有违章未处理，请先处理或联系停车场管理人员',
              type: 'error',
              duration:5000,
            });
          }
        })
      } catch (err) {
        // this.dataLoading  = false
      }finally {
        // this.dataLoading  = false
      }
    },
    pay(){
      console.log('code',this.code)
      console.log('code2',this.code2)
      this.payFlag = true;  //去缴费loading
      // this.payNowFlag = true;
      // this.showFlag = true
      if(this.status3==1){
        this.$message({
          message: '您有违章未处理，请先处理或联系停车场管理人员',
          type: 'error',
          duration:3000,
        });
        return;
      }
      this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkJudg', {id:this.outParkId}, res => {
        console.log(res,'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.getCode()
          // this.showFlag = false
        }else {
          this.$message({
            message:res.msg,
            type: 'error',
            duration:3000,
          });
          this.payFlag = false;
        }
      })
    },
    againPay() {
      this.againDialogVisible = false
      this.dialogVisible = true  //打开立即支付弹框
      // this.parkXT(this.outParkId)
    },
    parkXT(outParkId) {
      this.payNowFlag = true //立即支付loading
      try{
        this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkXT', {id:outParkId}, res => {
          if(res.code === 0){
            this.payNowFlag = false;
            this.getCode()
            // this.showFlag = false
          }else {
            this.$message({
              message: '支付错误，请重新支付',
              type: 'error',
              duration:3000,
            });
            this.payNowFlag = false;
          }
        })
      } catch (err) {
        this.payNowFlag = false;
      }
    },
    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,
            });
          }

        })
      }else{
        this.$message({
          message: '请输入手机号',
          type: 'error',
          duration:2000,
        });
      }

    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    },
    /**
     * 解析微信redirect_uri地址中的code
     */
    getCodeFromUrl (cur_url) {
      let index = cur_url.split('?')[1]
      let paramStr =index.split('&')[0];
      let code =paramStr.split('=')[1];
      return code
    },
    /**
     * 解析微信redirect_uri地址中的code2
     */
    getCode2FromUrl (cur_url) {
      let index = cur_url.split('?')[2]
      let code2 =index.split('=')[1];
      return code2
    },

    getCode(){   //获取用户微信登录信息
      if(this.type == 0 ){
        //微信，获取code
        if(this.code==null||this.code==""){
          // var url = encodeURIComponent("http://hesuancj.cn/#/index2?code2="+this.code2);
          var url = encodeURIComponent("http://hesuancj.cn/#/index2?code2="+this.code2);
          window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?" +
              "appid=wx46e756aed958f895&redirect_uri="+url+"&response_type=code" +
              "&scope=snsapi_userinfo&state=STATE#wechat_redirect";
          //"&scope=SCOPE&state=STATE#wechat_redirect";
        }else{
          this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/getOpenId', {id:this.outParkId,code:this.code}, res => {
            if(res.code === 0){
              var param = res.data;
              // 点击支付时候调用
              if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(param), false)
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(param))
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(param))
                }
              } else {
                this.onBridgeReady(param)
              }

              this.showFlag = false
            }else {
              alert('微信支付调起失败！')
            }
          })
        }
      }else if(this.type == 1){
        //支付宝，不获取code
        this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/payByAli', {id:this.outParkId}, res => {
          if(res.code != 0){
            alert(res.data)
            this.showFlag = false
          }else {
            this.$message({
              message: '2秒后自动跳转到支付页面，防止内外网数据同步延迟，请稍等',
              type: 'success',
              duration:2000,
            });
            setTimeout(function(){window.location.href = res.msg;},2000);
            this.showFlag = false;
          }
        })

      }
    },
    onBridgeReady (params) {
      const that = this
      WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: params.appId, // 公众号名称，由商户传入
            timeStamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
            package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: params.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: params.paySign // 支付签名
          },
          (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              that.queryOrder() // 这里是查询订单是否支付完成，然后执行成功和失败的业务逻辑
            } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
              alert('支付失败！')
            } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
              alert('支付取消！')
            }
          }
      )
    },
    queryOrder() {
      this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/getById', {id: this.outParkId}, res => {
        if (res.code === 0) {
          let outpark = res.data
          if(outpark.status === 1){
            window.location.href = "http://hesuancj.cn/#/indexOk?code2="+this.code2
            return;
          }else {
            window.location.href = "http://hesuancj.cn/#/indexFail?code2="+this.code2
            return;
          }
        }
      })
    }
  }

}

</script>


<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 */;
}
.el-icon-success:before{
  content: none;
}
.el-message__content{
  font-size: 5vw;
}
.el-icon-error:before{
  font-size: 5vw
}
.weizhang-main-bootom{
  .el-input__inner{
    border:none;
  }
  .el-form-item__label{
    color: #000;
    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;
    position: fixed;
    left: 0;
    margin: 0;
  }
  .el-dialog__header{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.87vw  /* 14/7.5 */;
    background: rgba(103,201,122,0.1);
  }
}
.dialog-box,.again-dialog-box{
  .el-dialog__body{
    padding: 2.67vw  /* 20/7.5 */ 5.33vw  /* 40/7.5 */;
  }
  .el-dialog__title{
    font-size: 4vw  /* 30/7.5 */;
  }
  .el-dialog__headerbtn{
    top: 2.67vw  /* 20/7.5 */;
  }
  .dialog-footer{
    display: flex;
    width: 100% !important;
    .el-button{
      width: 100%;
      background: rgba(74,76,89,1);
      padding: 1.056vh  /* 12/11.36 */ 1.761vh  /* 20/11.36 */;
    }
  }
}
.again-dialog-box{
  .el-button--success{
    background: linear-gradient(to right, #33b1fe, #0679dc)!important;
  }
  .el-dialog__body{
    padding: 8.67vw 5.33vw;
  }
  .el-dialog{
    width: 80%!important;
    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 */;
    background: rgba(103,201,122,0.1);
  }
}

</style>
<style lang="scss" scoped>
h1,h2,h3,h4,h5{
  font-family: '苹方 中等';
  font-weight: normal;
}
.weizhang-header{
  display: flex;
  height: 12.8vw  /* 96/7.5 */;
  align-items: center;
  border-bottom:1px solid rgba(154,154,154,0.2);
  .text{
    flex: 1;
    text-align: center;
    h1{
      font-size: 2.699vh  /* 36/13.34 */;
    }
  }
  .right{
    width: 6.747vh  /* 90/13.34 */;
  }
  .leftjiantou{
    font-size: 5.33vw;
    width: 6.747vh  /* 90/13.34 */;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.weizhang-main-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding:5.33vw  /* 40/7.5 */;
}
.weizhang-main-top{
  height: 21.489vh  /* 300/13.34 */;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  .money{
    font-size: 7.6vw  /* 52/7.5 */;
    font-weight: 550;
    color: #000;
    margin-top: 1vw;
  }
  .weizhang{
    font-size: 0.4rem  /* 30/75 */;
    line-height: 2;
    font-weight: normal;
    margin-top:1.33vw  /* 10/7.5 */;
    color: #000;
  }
}
.weizhang-main-form{
}
.weizhang-tiaokuan{
  margin-top: 2.67vw  /* 20/7.5 */;
  h1{
    font-size:3.2vw  /* 24/7.5 */;
    color: #999999;
    text-indent: 2.5em;
    line-height: 2;
  }
}
.jiaofei-btn{
  width: 80%;
  border-radius: 5.33vw  /* 40/7.5 */;
  background-image: linear-gradient(to right,#33b1fe,#0679dc);
}

.logoPhone{
  margin-top: 0.67vw;
  width: 1.333rem  /* 100/75 */;
  height: 1.333rem  /* 100/75 */;
}
.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{
    display: flex;
    justify-content: space-between;
    h1{
      font-size: 3.2vw  /* 24/7.5 */;
      color: rgba(0,0,0,0.9);
      line-height: 2;
    }
  }
  .dialog-main-line-middle{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2.67vw  /* 20/7.5 */ 0;
    h1{
      font-size: 8vw  /* 60/7.5 */;
      line-height: 2;
      color: rgba(0,0,0,1);
      font{
        font-size: 3.73vw  /* 28/7.5 */;
        margin-left: 0.67vw  /* 5/7.5 */;
      }
    }
  }
  .wx-img-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .wx-img-l{
      display: flex;
      img{
        width: 5.33vw  /* 40/7.5 */;
        object-fit: contain;
      }
      h1{
        font-size: 3.47vw  /* 26/7.5 */;
        margin-left: 1.33vw  /* 10/7.5 */;
      }
    }
    .wx-img-r{
      width: 4vw  /* 30/7.5 */;
      height: 4vw  /* 30/7.5 */;
      img{
        width: 100%;
      }
    }
  }
}
.again-dialog-box{
  .again-dialog-main{
    h1{
      font-size: 4vw  /* 30/7.5 */;
    }
  }
}
</style>

 src/router/index.js

@@ -106,6 +106,11 @@
            meta: { title: '峰峰矿区智慧停车' }
        },
        {
            path: '/IndexXTYH39',
            component: resolve => require(['../components/page/IndexXTYH39.vue'], resolve),
            meta: { title: '峰峰矿区智慧停车' }
        },
        {
            path: '/indexOk',
            component: resolve => require(['../components/page/IndexOk.vue'], resolve),
            meta: { title: '智慧泊车' }