月租车办理页面

819527061@qq.com

2025-01-07 be39d93049f3986be4e353fab5c1e51668a6fdf2

月租车办理页面

 src/components/page/MonthFeePay.vue

@@ -1,37 +1,78 @@
<template>
    <div class="weizhang-box">
      <div class="weizhang-main-top">
        <h1 class="title">月租车办理</h1>
      </div>
        <div class="weizhang-main-box">
            <div class="weizhang-main-top">
              <h1>月租车办理</h1>
            </div>
            <div class="weizhang-main-bootom">
                <div class="weizhang-main-form">
                    <el-form label-width="100px" :model="statisticData" label-position="left">
                        <el-form-item label="车牌号：" style="margin-left: 25px;">
                    <el-form label-width="100px" :model="statisticData" ref="statisticData" :rules="rules" label-position="left">
                        <el-form-item label="车牌号：" style="margin-left: 25px;" prop="carNo">
                            <el-input v-model="statisticData.carNo" ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：" style="margin-left: 25px;">
                        <el-form-item label="手机号：" style="margin-left: 25px;" prop="phone">
                            <el-input v-model="statisticData.phone" ></el-input>
                        </el-form-item>
                        <el-form-item label="姓名：" style="margin-left: 25px;">
                        <el-form-item label="车主姓名：" style="margin-left: 25px;" prop="name">
                            <el-input v-model="statisticData.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="选择全部：" style="margin-left: 25px;">
                        <el-form-item label="选择全部：" style="margin-left: 25px;" prop="allFlag">
                          <el-select v-model="statisticData.allFlag" :onchange="changeAll">
                            <el-option label="单个" :value=0></el-option>
                            <el-option label="全部" :value=1></el-option>
                          </el-select>
                        </el-form-item>
                      <el-form-item v-if="statisticData.allFlag == 0" label="停车场：" style="margin-left: 25px;">
                        <el-select v-model="statisticData.parkId" :onchange="changePark">
                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                      <el-form-item v-if="statisticData.allFlag == 0" label="停车场：" style="margin-left: 25px;" prop="parkId">
                        <el-select v-model="statisticData.parkId" @onchange="changePark">
                          <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id + ''" ></el-option>
                        </el-select>
                      </el-form-item>
                        <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-if="showFlag">
                            <el-button class="jiaofei-btn" type="primary" @click="pay()" >查询</el-button>
                            <el-button :disabled="isDisabled" class="jiaofei-btn" type="primary" @click="pay()" >查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="yuezu-box" v-if="searchShow">
                  <div class="current-box" v-if="startTime && endTime">
                    <span class="title">当前使用时间：</span>
                      {{startTime}} - {{endTime}}
                  </div>
                  <div class="yuezuCard">
                    <div class="yuezu-line">
                      <div class="title">
                        选择时间段：
                      </div>
                      <div class="yuezu-line-right">
                        <el-menu
                            :default-active="activeIndex"
                            @select="handleSelect"
                            class="el-menu-demo"
                            mode="horizontal">
                          <el-menu-item index="1">一个月</el-menu-item>
                          <el-menu-item index="2">三个月</el-menu-item>
                          <el-menu-item index="3">六个月</el-menu-item>
                          <el-menu-item index="4">一年</el-menu-item>
                        </el-menu>
                      </div>
                    </div>
                  </div>
                  <div class="current-box">
                    <span class="title">开始时间：</span>
                    {{compStartTime}}
                  </div>
                  <div class="current-box">
                    <span class="title">结束时间：</span>
                    {{compEndTime}}
                  </div>
                  <div class="money-box" v-if="money">
                    <div class="money">￥{{money}}</div>
                    <div class="money-content">缴费金额</div>
                  </div>
                  <div class="yuezu-footer">
                    <el-button v-if="startTime && endTime" class="jiaofei-btn2" type="danger">续费</el-button>
                    <el-button v-else class="jiaofei-btn2" type="danger">开通</el-button>

                  </div>
                </div>

            </div>
@@ -41,7 +82,9 @@
</template>

<script>
    export default {
import {isMobile} from "@/utils/validate";

export default {
        name: 'dashboard',
        data() {
            return {
@@ -51,6 +94,33 @@
                  allFlag:0
                },
                showFlag:true,
                activeIndex:'',
                searchShow:false,
                startTime:'',
                endTime:'',
                compStartTime:'',
                compEndTime:'',
                isDisabled: false,
                money: null,
                yueZuObj:{},
                rules: {
                  carNo: [
                    { required: true, message: '请输入车牌号', trigger: 'blur' },
                  ],
                  phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: isMobile, trigger: 'blur' }
                  ],
                  name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                  ],
                  allFlag: [
                    { required: true, message: '请选择停车场个数', trigger: 'change' },
                  ],
                  parkId: [
                    { required: true, message: '请选择停车场', trigger: 'change' },
                  ]
                }
            }
        },
        created(){
@@ -63,25 +133,133 @@
          }
          this.statisticData.parkId = cs.id;
          this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', null, res => {
            this.table1 = res.data;

            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByParkId', {parkId:cs.id}, res => {
              this.statisticData.parkId = res.data.id;
            })
          this.table1 = res.data;
          })
        },
        methods: {
           getNewDate(date, n) {//date 日期  n 前后相差月份
              let curDate = new Date(date),newDate = new Date(date),diff,remainder //curDate当前日期  newDate计算后日期  diff日期相差月份  remainder n对12的余数
              newDate.setMonth(curDate.getMonth() + n); //设置月份+n
              diff = newDate.getMonth() - curDate.getMonth(); //计算后月与之前月差值
              diff < 0 ? diff += 12: diff; //如果差值小于12 对其+12
              n > 0 ? remainder = n % 12 : remainder = n + 12 * Math.ceil((Math.abs(n) /12 )) //n>0时直接对12取余 n<0时，将其加上 n取绝对值后的年份（向上取整）* 12
              if(diff != remainder){
                return new Date(newDate.setMonth(newDate.getMonth(),0)) //如果diff与remainder不相等，此时的情况是Date.setMonth()方法自动处理了月末日期向后顺延到下个月，将其设置为上个月的最后一天，否则不进行处理
              }
              return newDate;
            },
            pay(){
              this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
                if(res.code == 0){
                  //未查询到月票，可正常缴费
              this.$refs.statisticData.validate((valid) => {
                if(valid) {
                  this.searchShow = true
                  this.activeIndex = ''  //重置
                  this.money = null
                  this.compStartTime = ''
                  this.compEndTime = ''
                  this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/monthFeePay/pay', this.statisticData, res => {
                    console.log(res,'res====')
                    if(res.code == 0){
                      //未查询到月票，可正常缴费
                      if(res.data) {
                        this.startTime = res.data.startTime
                        this.endTime = res.data.endTime
                      }else {
                        this.startTime = ''
                        this.endTime = ''
                        this.$message.error(res.msg)
                        console.log('我进来了----------------')
                      }
                    }else {

                }else {
                  //查询到月票，续费
                    }
                  })

                  this.getYuezuMoney()
                }
              })
            },
          getYuezuMoney() {
            let params = {
              parkId:this.statisticData.parkId,
              type:this.statisticData.allFlag
            }
            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/whiteListRule/getByPark', params, res => {
              console.log(res,'res====月租')
              if(res.code == 0){
                 this.yueZuObj = res.data
              }else {

              }
            })
          },
          handleSelect(key) {
             this.activeIndex = key
            if(key == 1) {
              this.money = this.yueZuObj.monthMoney
              if(this.startTime && this.endTime) {
                let tomorrow = new Date(this.endTime)
                tomorrow.setDate(tomorrow.getDate() + 1)
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,1)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }else {
                let today = new Date()
                let tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,1)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }
            }else if(key == 2) {
              this.money = this.yueZuObj.threeMonthMoney
              if(this.startTime && this.endTime) {
                let tomorrow = new Date(this.endTime)
                tomorrow.setDate(tomorrow.getDate() + 1)
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,3)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }else {
                let today = new Date()
                let tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,3)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }
            }else if(key == 3) {
              this.money = this.yueZuObj.sixMonthMoney
              if(this.startTime && this.endTime) {
                let tomorrow = new Date(this.endTime)
                tomorrow.setDate(tomorrow.getDate() + 1)
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,6)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }else {
                let today = new Date()
                let tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,6)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }
            }else if(key == 4) {
              this.money = this.yueZuObj.yearMoney
              if(this.startTime && this.endTime) {
                let tomorrow = new Date(this.endTime)
                tomorrow.setDate(tomorrow.getDate() + 1)
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,12)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }else {
                let today = new Date()
                let tomorrow = new Date(today);
                tomorrow.setDate(tomorrow.getDate() + 1);
                this.compStartTime = this.$moment(tomorrow).format('YYYY-MM-DD')
                let a = this.getNewDate(tomorrow,12)
                this.compEndTime = this.$moment(a).format('YYYY-MM-DD')
              }
            }
          },
          changePark(){

          },
@@ -119,6 +297,32 @@

</style>
<style lang="scss" scoped>
.yuezu-line{
  ::v-deep{
    .el-menu.el-menu--horizontal{
      border-bottom: none;
    }
    .el-menu--horizontal>.el-menu-item{
      height: 6.4vw  /* 48/7.5 */;
      line-height: 6.4vw  /* 48/7.5 */;
      margin: 1.33vw  /* 10/7.5 */;
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
      border-radius: 1.07vw  /* 8/7.5 */;
    }
    .el-menu-item{
      font-size: 2.93vw  /* 22/7.5 */;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
      color: #fff;
      margin: 1.33vw  /* 10/7.5 */;
      border-radius: 1.07vw  /* 8/7.5 */;
      border-bottom: none;
      background: #409eff;
    }
  }
}
h1,h2,h3,h4,h5{
    font-family: '苹方 中等';
    font-weight: normal;
@@ -153,12 +357,22 @@
    padding:5.33vw  /* 40/7.5 */;
}
.weizhang-main-top{
    height: 22.489vh  /* 300/13.34 */;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #fff;
    .title{
      font-size: 4.27vw  /* 32/7.5 */;
      font-weight: bolder;
      height: 10.67vw  /* 80/7.5 */;
      line-height: 10.67vw  /* 80/7.5 */;
    }
    .money{
        font-size: 6.93vw  /* 52/7.5 */;
        font-weight: 550;
@@ -173,6 +387,58 @@
}
    .weizhang-main-form{
    }
    .yuezu-box{
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 8vw  /* 30/7.5 */;
      .current-box{
        .title{
          font-weight: bolder;
          margin-left: 3.33vw  /* 25/7.5 */;
        }
        font-size: 3.73vw  /* 28/7.5 */;
        color: #000;
        margin-top: 4vw  /* 30/7.5 */;
      }
      .yuezuCard{
        .yuezu-line{
          .title{
            margin-left: 3.33vw  /* 25/7.5 */;
            font-size: 3.73vw  /* 28/7.5 */;
            color: #000;
            font-weight: bolder;
            width: 100%;
          }
          .yuezu-line-right{
            margin-top: 2.67vw  /* 20/7.5 */;
          }
          margin-top: 4vw  /* 30/7.5 */;
        }
      }
      .money-box{
        margin: 5.33vw  /* 40/7.5 */ auto 2.67vw  /* 20/7.5 */;
        .money{
          font-size:5.33vw  /* 40/7.5 */;
          color: #000;
          font-weight: bolder;
          text-align: center;
        }
        .money-content{
          font-size: 3.2vw  /* 24/7.5 */;
          color: #888;
          text-align: center;
        }
      }
      .yuezu-footer{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 6vw  /* 30/7.5 */;
        margin-bottom: 6vw;
      }
    }
    .weizhang-tiaokuan{
        margin-top: 2.67vw  /* 20/7.5 */;
        h1{
@@ -187,6 +453,10 @@
        border-radius: 5.33vw  /* 40/7.5 */;
        background-image: linear-gradient(to right,#33b1fe,#0679dc);
    }
    .jiaofei-btn2{
      width: 64.53vw  /* 484/7.5 */;
      border-radius: 5.33vw  /* 40/7.5 */;
    }
.logoPhone{
    margin-top: 0.67vw;
    width: 1.333rem  /* 100/75 */;

 src/utils/validate.js

New file
@@ -0,0 +1,12 @@
/**
 * 手机号码
 * @param {*} s
 */
export const isMobile = (rule, value, callback) => {
    var reg = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
    if (!reg.test(value)) {
        callback(new Error('手机号格式错误'));
    } else {
        callback();
    }
};