新增订单缴费弹框及其他弹框提示细节完善

819527061@qq.com

2024-04-07 3cc624019a6687a68690d33e9bf25702b129d77a

新增订单缴费弹框及其他弹框提示细节完善

 src/components/page/IndexXTYH.vue

@@ -37,22 +37,22 @@
                            <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-->
<!--                      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>
<!--&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>

@@ -91,18 +91,47 @@
          </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:"",
@@ -173,22 +202,24 @@
            this.status3 = this.statisticData.status3;
            this.oldCarNo = this.statisticData.carNo;
            this.payFlag = false
            if(!this.statisticData.enterTime) {
            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.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.$message({
                showClose: false,
                duration:0,
                type: 'error',
                message: '入场异常，请联系管理员'
              });
              this.tishiDialogVisiable2 = true
              // this.$message({
              //   showClose: false,
              //   duration:0,
              //   type: 'success',
              //   message: '无需缴费，请原地等待，或联系管理员'
              // });
            }else {
              this.isShowjiaofei = true
            }
@@ -216,20 +247,46 @@
                    });
                    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
              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.againDialogVisible = true
                  }else {
                    this.$message({
                      message: '支付错误，请重新支付',
                      type: 'error',
                      duration:3000,
                    });
                    this.payNowFlag = false;
                    this.parkXT(this.outParkId)
                  }
                })
                  // this.getCode()
                  // this.showFlag = false
                }else {
                  this.$message({
                    message: '支付错误，请重新支付',
                    type: 'error',
                    duration:3000,
                  });
                  this.payNowFlag = false;
                }
              })
            },
            againPay() {
              this.againDialogVisible = false
              this.parkXT(this.outParkId)
            },
            parkXT(outParkId) {
              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;
                }
              })
            },
            noCarOut(){
                if(this.carNo){
@@ -281,6 +338,7 @@
              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" +
@@ -373,7 +431,10 @@

<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;
@@ -408,9 +469,6 @@
        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;
@@ -418,6 +476,11 @@
        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 */;
@@ -431,7 +494,29 @@
        .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);
      }
    }

@@ -568,4 +653,11 @@
        }
      }
    }
    .again-dialog-box{
      .again-dialog-main{
        h1{
          font-size: 4vw  /* 30/7.5 */;
        }
      }
    }
</style>

 src/components/page/TishiDialog.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div class="wrong-tishi">
    <div class="again-dialog-box">
      <el-dialog
          :visible.sync="wrongDialogVisible"
          :close-on-click-modal="false"
          :show-close="false"
          width="100%">
        <div class="again-dialog-main">
          <img src="../../assets/images/wrongIcon.png" alt="">
          <h1>
            入场异常，请联系管理员
          </h1>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "TishiDialog",
  data() {
    return {
      wrongDialogVisible: true,
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.wrong-tishi{
  .el-dialog__header{
    background: transparent!important;
  }
}

</style>
<style lang="scss" scoped>
.wrong-tishi{
  .again-dialog-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 13.33vw  /* 100/7.5 */;
      height: 13.33vw  /* 100/7.5 */;
    }
    h1{
      font-size: 4vw  /* 30/7.5 */;
      margin-top: 3.521vh  /* 40/11.36 */;
    }
  }
}
</style>

 src/components/page/TishiDialog2.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div class="wrong-tishi">
    <div class="again-dialog-box">
      <el-dialog
          :visible.sync="wrongDialogVisible"
          :close-on-click-modal="false"
          :show-close="false"
          width="100%">
        <div class="again-dialog-main">
          <img src="../../assets/images/wrongIcon.png" alt="">
          <h1>
            无需缴费，请原地等待，或联系管理员
          </h1>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "TishiDialog",
  data() {
    return {
      wrongDialogVisible: true,
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.wrong-tishi{
  .el-dialog__header{
    background: transparent!important;
  }
}

</style>
<style lang="scss" scoped>
.wrong-tishi{
  .again-dialog-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 13.33vw  /* 100/7.5 */;
      height: 13.33vw  /* 100/7.5 */;
    }
    h1{
      font-size: 4vw  /* 30/7.5 */;
      margin-top: 3.521vh  /* 40/11.36 */;
    }
  }
}
</style>

 src/main.js

@@ -76,19 +76,20 @@
// 配置文件
Vue.prototype.$systemconfig = {
// 服务端路径
    //basePath: 'http://183.196.93.178:8089',
    basePath:'http://127.0.0.1:8089'
    basePath: 'http://183.196.93.178:8089',
    // basePath:'http://192.168.0.40:8089'
}
Vue.prototype.$byutil = byUtils
Vue.prototype.$stringUtil = StringUtil
Vue.prototype.$tscPrintUtil = TscPrintUtil
// const rolesList = JSON.parse(localStorage.getItem('userRouters'))
//使用钩子函数对路由进行权限跳转
// router.beforeEach((to, from, next) => {
//     let user = byUtils.getUser()
//     if (!user && to.path!== '/') {
//         next('/');
//     }
router.beforeEach((to,from,next) => {
    if(to.meta.title === '峰峰矿区智慧停车') {
       document.title = to.meta.title
   }
    next();
})

//    console.log(to,"触发了",router.options.routes);
//    // type 2 : all admin