解决 用vue+vant 写顶部tab栏 做排班表的bug

主要的更改是解决了 日期能到 31/32 的问题，实现了到月底自动切换到下一月的1号

这里博主自己封了一个新的函数 主要用到了 setDate（）这个 时间函数

        //获取几天后日期
     dateCount(arg, date) {
        var date1 = arg;
        var date2 = new Date(date1);
        date2.setDate(date2.getDate() + parseInt(date));
        var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
        var Year = 0;
        var Month = 0;
        var Day = 0;
        var CurrentDate = "";
        Year = date2.getFullYear();
        Month = date2.getMonth() + 1;
        Day = date2.getDate();
        CurrentDate += Year + "-";
        if (Month >= 10) {
            CurrentDate += Month + "-";
        } else {
            CurrentDate += "0" + Month + "-";
        }
        if (Day >= 10) {
            CurrentDate += Day;
        } else {
            CurrentDate += "0" + Day;
        }
        return CurrentDate;
    },

这是整个项目页面的代码：

<template>
  <div class="main">
    <div class="gaoStyle">
      <van-tabs
        :swipe-threshold="7"
        color="#72BEFF"
        title-active-color="#72BEFF"
        title-inactive-color="#353535"
        @click="dianjiqiehuanyisheng"
      >
        <van-tab :title=" Week[zhou_1]+ riqi ">
          <!-- 排班安排 -->
          <div v-for="(item,index) in list" :key="index">
            <div class="box">
              <a href="javascript:;">
                <img src alt />
              </a>

              <div class="zhong">
                <h2>
                  {{ item.doctorName }}
                  <span class="redColor">￥{{ item.regsitFee }}</span>
                </h2>
                <p>职称:{{ item.doctorTitle }}</p>
                <p>科室: {{ item.clinicLabel }}</p>
                <p>就诊时段: {{ item.timeType}}</p>
              </div>

              <div class="you" @click="guaHao(item)">
                <span class="blueColor">选择挂号时段</span>
                <van-icon name="arrow" />
              </div>
            </div>

            <!-- 底部那根细线 -->
            <div class="line"></div>
          </div>
        </van-tab>
        <van-tab :title=" Week[zhou_2]+ riqi_1">
          
        </van-tab>
        <van-tab :title=" Week[zhou_3]+ riqi_2">
          
        </van-tab>
        <van-tab :title=" Week[zhou_4]+ riqi_3">
          
        </van-tab>
        <van-tab :title=" Week[zhou_5]+ riqi_4">
          
        </van-tab>
        <van-tab :title=" Week[zhou_6]+ riqi_5">
           
        </van-tab>
        <van-tab :title=" Week[zhou_7]+ riqi_6">
          
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script>
import { CellGroup, Cell, Button, Toast, Icon, Tab, Tabs } from "vant";
import * as log from "loglevel";
import axios from "axios";
import properties from "../../properties.js";
import qs from "qs";
import store from 'store'


export default {
  components: {
    "van-cell-group": CellGroup,
    "van-cell": Cell,
    "van-button": Button,
    Toast: Toast,
    "van-icon": Icon,
    "van-tabs": Tabs,
    "van-tab": Tab
  },

  data() {
    return {
      deptCode: "",
      list: [],
      riqi: new Date().getDate(),
      riqi_1: '',
      riqi_2: '',
      riqi_3: '',
      riqi_4: '',
      riqi_5: '',
      riqi_6: '',
      Week: ["日", "一", "二", "三", "四", "五", "六"],
      zhou_1: 0,
      zhou_2: 0,
      zhou_3: 0,
      zhou_4: 0,
      zhou_5: 0,
      zhou_6: 0,
      zhou_7: 0
    };
  },
  created() {

      let a = new Date();
      let b_1 = this.dateCount(a,1)
      let b_2 = this.dateCount(a,2)
      let b_3 = this.dateCount(a,3)
      let b_4 = this.dateCount(a,4)
      let b_5 = this.dateCount(a,5)
      let b_6 = this.dateCount(a,6)
      

      this.riqi_1= new Date(b_1).getDate() ;
      this.riqi_2= new Date(b_2).getDate() ;
      this.riqi_3= new Date(b_3).getDate() ;
      this.riqi_4= new Date(b_4).getDate() ;
      this.riqi_5= new Date(b_5).getDate();
      this.riqi_6= new Date(b_6).getDate();

    this.getWeek();
    this.deptCode = this.$route.query.deptCode;
    // console.log(this.deptCode);
    const dt = new Date();   
    var date = this.getTime(dt)
    this.getYiShengLieBiao(this.deptCode, date);
  },

  methods: {

    // 格式化 周
    getWeek() {
      this.zhou_1 = (new Date().getDay() + 0) % 7;
      this.zhou_2 = (new Date().getDay() + 1) % 7;
      this.zhou_3 = (new Date().getDay() + 2) % 7;
      this.zhou_4 = (new Date().getDay() + 3) % 7;
      this.zhou_5 = (new Date().getDay() + 4) % 7;
      this.zhou_6 = (new Date().getDay() + 5) % 7;
      this.zhou_7 = (new Date().getDay() + 6) % 7;
    },

    // 格式化日期
    getTime (originVal,day) {
      const dt = new Date(originVal);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate()  +"").padStart(2, "0");

      // const hh = (dt.getHours() + "").padStart(2, "0");
      // const mm = (dt.getMinutes() + "").padStart(2, "0");
      // const ss = (dt.getSeconds() + "").padStart(2, "0");

      // return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
      return `${y}-${m}-${d} `;

    },

        //获取几天后日期
     dateCount(arg, date) {
        var date1 = arg;
        var date2 = new Date(date1);
        date2.setDate(date2.getDate() + parseInt(date));
        var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
        var Year = 0;
        var Month = 0;
        var Day = 0;
        var CurrentDate = "";
        Year = date2.getFullYear();
        Month = date2.getMonth() + 1;
        Day = date2.getDate();
        CurrentDate += Year + "-";
        if (Month >= 10) {
            CurrentDate += Month + "-";
        } else {
            CurrentDate += "0" + Month + "-";
        }
        if (Day >= 10) {
            CurrentDate += Day;
        } else {
            CurrentDate += "0" + Day;
        }
        return CurrentDate;
    },


    // 点击tab 切换 医生
    dianjiqiehuanyisheng (name,title) {
       let dt = new Date();   
       
        if(name === 0){
          
          var date = this.dateCount(dt,0)
          this.getYiShengLieBiao(this.deptCode, date);
          // this.$toast(this.deptCode)
           this.$toast(date)

        } else if (name === 1){

          var date = this.dateCount(dt,1)
          this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)
        } else if (name === 2){

          var date = this.dateCount(dt,2)
          this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)

        } else if (name === 3){

         var date = this.dateCount(dt,3)
         this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)

        } else if (name === 4){

          var date = this.dateCount(dt,4)
          this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)

        } else if (name === 5){

          var date = this.dateCount(dt,5)
          this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)

        } else if (name === 6){

          var date = this.dateCount(dt,6)
          this.getYiShengLieBiao(this.deptCode, date)
          this.$toast(date)

        } 
    },


    // 点击挂号，跳转到号源详情页面
    guaHao(item) {
      console.log(item);
      
      // this.$router.push({ path:'/guahao_yishengxiangqing',query: { clinicDate: ,regsitFee:, clinicFee:,deptAddr:,residualSource:}});
      this.$router.push({ path:'/guahao_yishengxiangqing',query: {item:item}})
    },

    // 获取医生列表
    getYiShengLieBiao(val, date) {
      // console.log(val + 'lalaal');
      const  hospitalId = store.get('__hospitalId__')
      const  areaId = store.get('__areaId__')
      const patientId = store.get('__patientId__')
      console.log(patientId);
      

      axios
        .post(properties.api_url + "/his/proxy", {
          tranCode: "2003",
          hospitalId: hospitalId,
          areaId: areaId,
          patientId: patientId,
          date: date,
          clinicClass: "全部",
          deptCode: val,
          operatorNo: "2012"
        })
        .then(resp => {
          // console.log(resp.data);
          this.list = resp.data.list;
          console.log(this.list);
        });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.main,
body {
  background-color: #eee !important;
  font-size: 16px;
}
h3 {
  height: 87px;
  margin: 0;
  margin-left: 16px;
  font-size: 12px;

  line-height: 30px;
  color: #aaa;
  font-weight: normal;
}
.box {
  position: relative;
  width: 100%;
  height: 110px;
  background-color: #fff;
  overflow: hidden;
}
.line {
  height: 1px;
  width: 100%;
  background: #e5e5e5;
}
.box a {
  float: left;
}
.box a {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid #b4b4b4;
  border-radius: 9px;
  border-radius: 9px;
  margin: 20px 13px 12px 15px;
  background-color: pink;
}
.box a img {
  width: 100%;
  height: 100%;
}
.zhong {
  width: 56.5%;
  height: 100%;
  margin: 12px 13px 0px 77px;
}
.zhong h2 {
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0;
}
.zhong h2 .redColor {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ff7977;
  letter-spacing: 0;
  text-align: right;
}
.zhong p {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #9b9b9b;
}
.you {
  position: absolute;
  top: 25%;
  right: 5px;
  width: 27%;
  height: 40px;
  line-height: 41px;
}
.you .blueColor {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #72beff;
  letter-spacing: 0;
  text-align: right;
}
.you .van-icon {
  position: absolute;
  top: 12px;
  right: -8px;
}
/* 排班表下面样式 */
.gaoStyle .van-ellipsis {
  overflow: initial;
  white-space: normal;
  text-overflow: inherit;
}
/* 排班表下面样式 */
.gaoStyle .van-tabs--line .van-tabs__wrap {
  height: 90px;
}
</style>
<style >
.gaoStyle .van-tab {
  padding: 0 5%;
}
.gaoStyle .van-ellipsis {
  overflow: initial;
  white-space: normal;
  text-overflow: inherit;
}
.gaoStyle .van-tabs--line .van-tabs__wrap {
  height: 90px;
}
.van-button--default {
  background-color: #fff;
}
</style>