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

819527061@qq.com

2024-04-07 3cc624019a6687a68690d33e9bf25702b129d77a

 src/components/page/IndexXTYH.vue

@@ -7,7 +7,7 @@
        <!--</div>-->
        <div class="weizhang-main-box">
            <div class="weizhang-main-top">
                <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">
<!--                <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">-->
                <span class="weizhang">停车收费</span>
                <span class="money">￥{{this.statisticData.price}}</span>
            </div>
@@ -33,26 +33,26 @@
                            {{this.statisticData.code}}
                            <!--<el-input v-model="statisticData.code" readonly></el-input>-->
                        </el-form-item>
                        <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-show="showFlag">
                        <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>
<!--                  <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>

@@ -91,17 +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:"",
@@ -172,6 +202,27 @@
            this.status3 = this.statisticData.status3;
            this.oldCarNo = this.statisticData.carNo;
            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: '您有违章未处理，请先处理或联系停车场管理人员',
@@ -185,8 +236,9 @@
            pay(){
                console.log('code',this.code)
                console.log('code2',this.code2)
                this.payFlag = true;
                // this.payFlag = true;
                this.payNowFlag = true;
                // this.showFlag = true
                if(this.status3==1){
                    this.$message({
                        message: '您有违章未处理，请先处理或联系停车场管理人员',
@@ -195,12 +247,46 @@
                    });
                    return;
                }
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkXT', {id:this.outParkId}, res => {
                  if(res.code === 0){
                    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.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){
@@ -252,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" +
@@ -343,6 +430,18 @@


<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;
@@ -370,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;
@@ -380,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 */;
@@ -393,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);
      }
    }

@@ -433,16 +556,17 @@
        padding:5.33vw  /* 40/7.5 */;
    }
    .weizhang-main-top{
        height: 22.489vh  /* 300/13.34 */;
        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: 6.93vw  /* 52/7.5 */;
            font-size: 7.6vw  /* 52/7.5 */;
            font-weight: 550;
            color: #000;
            margin-top: 1vw;
        }
        .weizhang{
            font-size: 0.4rem  /* 30/75 */;
@@ -529,4 +653,11 @@
        }
      }
    }
    .again-dialog-box{
      .again-dialog-main{
        h1{
          font-size: 4vw  /* 30/7.5 */;
        }
      }
    }
</style>