docs: 首次加载白屏添加loading

819527061@qq.com

2024-04-11 3c38598df86e697268b14865e68159d6ba989285

 src/components/page/IndexXTYH.vue

@@ -1,379 +1,487 @@
<template>
    <div class="weizhang-box">
        <!--<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>
<!--                    <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>-->
                  </el-form>
  <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>
    <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="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 class="wx-img-r">
              <img src="../../assets/images/duigouIcon.png" alt="">
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pay()" :loading="payNowFlag">立 即 支 付</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="parkXT(outParkId)" :loading="payNowFlag">立 即 支 付</el-button>
          </span>
        </el-dialog>
      </div>

      </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',
        data() {
            return {
                isShowjiaofei: true,
                dialogVisible:false,
                payFlag:false,
                payNowFlag:false,
                outParkId:"",
                type:null,
                statisticData:{
  name: 'dashboard',
  components: {
    TishiDialog,
    TishiDialog2,

                },
                showFlag:true,
                showFlag2:true,
                status3:0,
                carNo:"",
                code2:"",
                code:""
            }
        },
        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;
          // }
  },
  data() {
    return {
      tishiDialogVisiable: false,
      tishiDialogVisiable2: false,
      isShowjiaofei: true,
      dialogVisible:false,
      againDialogVisible: false, //
      payFlag:false,
      payNowFlag:false,
      outParkId:"",
      type:null,
      statisticData:{

            var url = window.location.href;
            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;
          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);
            return;
          }
          if(this.code != null && this.code != '') {
            this.dialogVisible = true
      },
      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;
    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)}`
      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]
    }
    // console.log(cs,'我是cs=====')
    // this.outParkId = cs.code;
    this.code2 = cs.code2;
    this.code = cs.code;
    // console.log(this.code2,'this.code2=====2')
    // console.log(this.code,'this.code=====1')
    //初始化跳转 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   //测试用的
      // setTimeout(function(){window.location.href = "http://192.168.0.8:8082/#/IndexXTYH39?code2="+cs.code},1000);
      return;
    }
    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.dialogVisible = false
            this.isShowjiaofei = true
          }
          this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:cs.code2}, res => {
            this.statisticData = res.data;
            this.outParkId = this.statisticData.id;
            this.status3 = this.statisticData.status3;
            this.oldCarNo = this.statisticData.carNo;
            this.payFlag = false
            if(!this.statisticData.enterTime) {
              this.isShowjiaofei = false
              this.$message({
                showClose: false,
                duration:0,
                type: 'error',
                message: '入场异常，请联系管理员'
              });
            }else if(this.statisticData.enterTime && (!this.statisticData.price || this.statisticData.price == 0)) {
              this.isShowjiaofei = false
              this.$message({
                showClose: false,
                duration:0,
                type: 'error',
                message: '入场异常，请联系管理员'
              });
            }else {
              this.isShowjiaofei = true
            }
            if(this.status3==1){
              this.$message({
                message: '您有违章未处理，请先处理或联系停车场管理人员',
                type: 'error',
                duration:5000,
              });
            }
          })
        },
        methods: {
            pay(){
                console.log('code',this.code)
                console.log('code2',this.code2)
                // this.payFlag = true;
                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/parkXT', {id:this.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;
                  }
                })
            },
            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);
                  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;
                }
              }
            })
          if(this.status3==1){
            this.$message({
              message: '您有违章未处理，请先处理或联系停车场管理人员',
              type: 'error',
              duration:5000,
            });
          }
        })
      } catch (err) {
        this.dataLoading  = false
      }finally {
        // this.dataLoading  = false
      }
    },
    pay(){
      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 => {
        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.dataLoading = true  //页面loading打开
      this.parkXT(this.outParkId)  //获取微信用户信息

      // this.dialogVisible = true  //打开立即支付弹框
      // this.parkXT(this.outParkId)
    },
    parkXT(outParkId) {
      this.payNowFlag = true //立即支付loading
      this.dataLoading = false  //页面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) {

      console.log(cur_url,'cur_url-----iiiii')
      let index = cur_url.split('?')[1]
      let index2 = cur_url.split('?')[2]
      let code = null
      let code2 = null
      let data = {}
      console.log(index,'1111111111111111index')
      let paramStr =index.split('&');

      if(paramStr.length>1) {
        code = paramStr[0].split('=')[1]
        code2 = index2.split('=')[1]
      }else {
        code2 = paramStr[0].split('=')[1]
        code = index2.split('&')[0].split('=')[1]
      }
      console.log(code,'code=====')
      console.log(code2,'code2=====')
      data.code = code
      data.code2 = code2
      return data
    },
    /**
     * 解析微信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);
          // window.location.href = `http://192.168.0.8:8082/#/Index2?code=${encodeURIComponent('123')}&state=STATE?code2=${encodeURIComponent(this.code2)}`
          // window.location.href =url;
          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";
        }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: 30px 15px 30px 20px;
  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;
@@ -381,191 +489,222 @@
.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-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 */;
    }
    .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__body{
        padding: 2.67vw  /* 20/7.5 */ 5.33vw  /* 40/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);
      }
      .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);
        }
      }
    }
  }
}
.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;
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 */;
    }
    .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);
    }
  }
  .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 */;
.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;
    }
    .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 */;
      }
      .dialog-main-line-middle{
    }
  }
  .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%;
        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>