feat: 缴费记录

kongdeqiang

2024-11-18 f0cad0c5ea4778036452217b4704c6875dc246e3

 src/components/page/IndexXTYH.vue

@@ -37,25 +37,57 @@
              <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>-->
          <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>

      </div>
    </div>
    <div class="moreCarNum" v-if="pipaiCarNumShow">
      <h1 class="title">以下是与您车牌号相似的入场记录</h1>
      <div class="moreCarNum-main">
        <el-table :data="moreCarNumData">
          <el-table-column
              prop="carNo"
              label="车牌"
              align="left"
              header-align="center"
              min-width="30%"
          >
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="入场时间"
              align="left"
              header-align="center"
              min-width="50%"
          >
          </el-table-column>
          <el-table-column
              label="操作"
              header-align="center"
              min-width="20%"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleClickCarNum(scope.row)">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="dialog-box">
@@ -100,13 +132,25 @@
          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>
    <div class="pipeicarNum-dialog-box">
      <el-dialog
          title="请选择识别正确的记录"
          :close-on-click-modal="false"
          :visible.sync="pipeicardialogVisible"
          width="100%">
        <div class="peipeiCarnum">
          <el-button size="mini" type="primary" @click="handleCarType(0)">入场正确</el-button>
          <el-button size="mini" type="primary" @click="handleCarType(1)">出场正确</el-button>
        </div>
      </el-dialog>
    </div>
    <tishi-dialog ref="TishiDialog" v-if="tishiDialogVisiable"></tishi-dialog>
@@ -127,6 +171,11 @@
  },
  data() {
    return {
      moreCarNumData:[],  //匹配车牌Data
      pipaiCar:false,  //匹配车牌
      pipeicardialogVisible: false,  //匹配弹框
      enterParkId:null,  //入场id
      pipaiCarNumShow:false,  //匹配内容
      tishiDialogVisiable: false,
      tishiDialogVisiable2: false,
      isShowjiaofei: true,
@@ -172,7 +221,7 @@
    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://localhost:8082/#/IndexXTYH39?code="+data.code+"&state=STATE&code2="+data.code2
      window.location.href = `http://hesuancj.cn/#/index2?code=${encodeURIComponent(data.code)}&state=STATE&code2=${encodeURIComponent(data.code2)}`
      return;
    }
@@ -182,12 +231,8 @@
    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({
@@ -196,8 +241,8 @@
      //   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);
      // window.location.href = "http://localhost:8082/#/IndexXTYH39?code2="+cs.code   //测试用的
      //window.location.href = "http://60.0.121.40:8889/#/IndexXTYH39?code2="+cs.code   //测试用的
      return;
    }
    if(this.code != null && this.code != '') {
@@ -220,23 +265,31 @@
          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: '入场异常，请联系管理员'
            // });
            if(this.statisticData.carNo =='_无_' || this.statisticData.carNo=='无牌车'){
              this.isShowjiaofei = false
            }else {
              this.isShowjiaofei = false
              this.pipaiCarNumShow = true  //匹配区域显示
              this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
                if(res.code == 0) {
                  if(res.data.length > 0) {
                    this.moreCarNumData = res.data.map(item => {
                      return {
                        ...item,
                        createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                      }
                    })
                  }else {
                    this.tishiDialogVisiable = true  //入场信息 异常提示
                  }
                }
              })
            }
          }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: '无需缴费，请原地等待，或联系管理员'
            // });
            if(this.statisticData.carNo !='_无_' && this.statisticData.carNo!='无牌车') {
              this.tishiDialogVisiable2 = true
            }
          }else {
            this.isShowjiaofei = true
          }
@@ -253,6 +306,27 @@
      }finally {
        // this.dataLoading  = false
      }
    },
    handleClickCarNum(item) {  //点击匹配区域的确定按钮
      console.log(item,'确定按钮')
      this.pipeicardialogVisible = true
      this.enterParkId = item.id

    },
    handleCarType(type) {  //识别正确的记录
      this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/editOutPark',{type:type,outParkId:this.outParkId,enterParkId:this.enterParkId},res => {
        console.log(res,'res==========')
        if(res.code == 0) {
          this.pipeicardialogVisible = false
          this.statisticData = res.data
          this.isShowjiaofei = true  //缴费按钮显示
          this.pipaiCarNumShow = false  //关掉车牌匹配区域
          this.$message.success(res.msg)
        }else {
          this.pipeicardialogVisible = false
          this.$message.error('更新失败,请联系管理员')
        }
      })
    },
    pay(){
      this.payFlag = true;  //去缴费loading
@@ -318,24 +392,34 @@
      }
    },
    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{
      if(this.oldCarNo == '无牌车' || this.oldCarNo == '_无_'){
        if(this.carNo){
          this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/car/outParkByPhone', {code2:this.code2,carNo:this.carNo}, res => {
            if(res.code===0){
              this.statisticData = res.data;
              this.outParkId = this.statisticData.id;
              this.isShowjiaofei = true
              this.$message({
                message: '查询成功',
                type: 'success',
              });
            }else {
              this.$message({
                message: res.message,
                type: 'error',
              });
            }
          })
        }else{
          this.$message({
            message: '请输入手机号',
            type: 'error',
          });
        }
      }else {
        this.$message({
          message: '请输入手机号',
          message: '非法输入',
          type: 'error',
          duration:2000,
        });
      }

@@ -477,25 +561,162 @@


<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-message{
//  padding: 6.944vh  /* 75/10.8 */ 0.78125vw  /* 15/19.2 */ 6.944vh  /* 75/10.8 */ 1.042vw  /* 20/19.2 */;
//}
.weizhang-box{
  .el-form-item{
    margin-bottom: 3.8vw!important;
  }
  .el-form-item__label{
    color: #000;
    font-weight: 600;
    font-size: 3.73vw  /* 28/7.5 */;
    line-height: 2.5;
  }
  .el-form-item__content{
    font-size: 3.73vw  /* 28/7.5 */;
    line-height: 2.5;
  }
  .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);
    }
  }
  .moreCarNum{
    tr{
      td{
        &:nth-child(3) {
          .cell{
            padding-left: 0;
          }
        }
      }
    }
    .el-button--mini, .el-button--mini.is-round{
      padding: 0.816vh  /* 7/11.36 */ 4vw  /* 15/7.5 */;
    }
    .el-button--mini, .el-button--small{
      font-size: 3.2vw  /* 24/7.5 */;
    }
    .el-table td, .el-table th{
      padding: 2.5vw  /* 12/7.5 */ 0;
    }
    //.el-table td, .el-table th.is-leaf{
    //  border-bottom: 1px solid transparent;
    //}
    .el-table::before{
      height: 0;
    }
    .el-table{
      font-size: 3.47vw  /* 26/7.5 */;
    }
    tbody{
      tr:last-child {
        td{
          border-bottom:1px solid transparent;
        }
      }
    }
  }
  .pipeicarNum-dialog-box{
    .el-dialog{
      width: 85%!important;
      margin-top: 45vh!important;
      border-radius: 2.67vw  /* 20/7.5 */;
    }
    .el-dialog__title{
      font-size: 4vw  /* 30/7.5 */;
    }
    .el-button--mini{
      padding: 3vw  /* 18/7.5 */ 8vw  /* 44/7.5 */;
      font-size:3.73vw  /* 28/7.5 */;
    }
    .el-dialog__header{
      padding: 7vw  /* 48/7.5 */ 6.4vw 4vw  /* 30/7.5 */;
    }
    .el-dialog__body{
      padding: 10vw  /* 60/7.5 */ 5.33vw  /* 40/7.5 */ 14vw 5.33vw;
    }
  }
}
.weizhang-footer-box{
@@ -509,66 +730,17 @@
    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>
.weizhang-box{
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 2.67vw  /* 20/7.5 */;
}
h1,h2,h3,h4,h5{
  font-family: '苹方 中等';
  font-weight: normal;
@@ -600,10 +772,10 @@
  width: 100%;
  display: flex;
  flex-direction: column;
  padding:5.33vw  /* 40/7.5 */;
  padding:0  /* 20/7.5 */ 5.33vw  /* 40/7.5 */ 2.67vw  /* 20/7.5 */ 5.33vw;
}
.weizhang-main-top{
  height: 21.489vh  /* 300/13.34 */;
  height: 15vh  /* 300/13.34 */;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -707,4 +879,86 @@
    }
  }
}
.moreCarNum{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .title{
    font-size: 3.47vw  /* 26/7.5 */;
    margin-bottom: 2.67vw  /* 20/7.5 */;
    padding-left: 2.67vw  /* 20/7.5 */;
    font-weight: 550;
    letter-spacing: 1px;
  }
  .moreCarNum-heard{
    width: 100%;
    display: flex;
    .moreCarNum-block{
      text-align: center;
      h1{
        font-size: 3.47vw  /* 26/7.5 */;
      }
      &:nth-child(1){
        width: 30%;
      }
      &:nth-child(2){
        width: 50%;
      }
      &:nth-child(3){
        width: 20%;
      }
    }
  }
  .moreCarNum-main{
    border: 1px solid #dbdbdb;
    border-radius: 2.67vw  /* 20/7.5 */;
    padding: 1.07vw  /* 8/7.5 */ 2.67vw  /* 20/7.5 */;
    box-sizing: border-box;
    width: 100%;
    min-height: 17.366vh  /* 220/11.36 */;
    max-height: 25vh  /* 250/11.36 */;
    overflow-y: auto;
  }
  .moreCarNum-line{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 3.2vw  /* 24/7.5 */;
    .moreCarNum-block{
      display: flex;
      h1{
        font-size: 3.73vw  /* 28/7.5 */;
        font-weight: 550;
        margin-right: 5.33vw  /* 40/7.5 */;
      }
      h2{
        font-size: 3.73vw  /* 28/7.5 */;
      }
    }
  }
}
.peipeiCarnum{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.formLabel{
  ::v-deep .el-form-item__label{
    font-size: 18px;
  }
  ::v-deep el-input{
    border: solid 1px #ccc!important;

  }

}
.carSearch{
  border:solid 1px #ccc;
  margin-top: 15%;
  border-radius: 4%;
  box-shadow: 0px 0px 0px 10px;

}
</style>