shujuju/boman-h5/src/views/workbench.vue

<template>
  <div class="home" v-if="category">
    <div class="categorytab">
      <!-- <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div> -->
     <van-nav-bar
                    title="工作台"
                    :left-arrow="false"
                />
     <div class="workben_header">
		   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
             <van-swipe-item><img src="../assets/img/pic_gzt_banner.png" alt=""></van-swipe-item>
             <van-swipe-item><img src="../assets/img/pic_gzt_banner.png" alt=""></van-swipe-item>
       </van-swipe>
	 </div>
   <div class="index_nav">
     <p>
       <span>考勤打卡</span>
       <img src="../assets/img/icon_hp_kqdk.png" alt="">
     </p>
     <p>
       <span>请假申请</span>
       <img src="../assets/img/icon_hp_qjsq.png" alt="">
     </p>
     <p>
       <span>待审批</span>
       <img src="../assets/img/icon_hp_dsp.png" alt="">
     </p>
   </div>
    </div>
	<nav-bar v-bind:active=1></nav-bar>
  </div>
</template>

<script>
import NavBar from "@/components/common/Navbar.vue";
import cover from "./cover";
export default {
  data() {
    return {
      category: [],
      active: 1
    };
  },
  components: {
    NavBar,
    cover
  },
  activated() {
    if(localStorage.getItem('newCat')) {
        let newCat = JSON.parse(localStorage.getItem('newCat'))
        this.category = this.changeCategory(newCat)
        this.selectArticle();
    }
  },
  methods: {
    async selectCategory() {
      if(localStorage.getItem('newCat')) {
        return
      }
      const res = await this.$http.get("/category");
      this.category = this.changeCategory(res.data);
      this.selectArticle();
    },
    changeCategory(data) {
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        item.finished = false;
        item.loading = true;
        item.pagesize = 10;
        return item;
      });
      return category1;
    },
    async selectArticle() {
      const categoryitem = this.categoryItem();
      const res = await this.$http.get("/detail/" + categoryitem._id, {
        params: {
          page: categoryitem.page,
          pagesize: categoryitem.pagesize
        }
      });
      categoryitem.list.push(...res.data);
      categoryitem.loading = false;
      if (res.data.length < categoryitem.pagesize) {
        categoryitem.finished = true;
      }
    },
    onLoad() {
      const categoryitem = this.categoryItem();
      setTimeout(() => {
        categoryitem.page += 1;
        this.selectArticle();
      }, 1000);
    },
    categoryItem() {
      const categoryitem = this.category[this.active];
      return categoryitem;
    }
  },
  watch: {
    active() {
      const categoryitem = this.categoryItem();
      if (!categoryitem.list.length) {
        this.selectArticle();
      }
    }
  },
  created() {
    console.log(34)
    this.selectCategory();
  }
};
</script>

<style lang="less" scoped>
.home {
  background-color: #fff;
  padding: 7.999px; 
  .categorytab{
	  width: 100%;
    height: 100%;
    .workben_header{
      margin-bottom: 7.467vw;
       .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 5.333vw;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    img{
      width: 100%;
      height: 100%;
    }
  }
      
    }
    .index_headertr{
       background: url('../assets/img/pic_bg_qjjl.png') no-repeat ;
       background-size: 100% 100%;
       .inhe_one{
        p:nth-child(1){
           border-right: 1px solid #E09404;
        }
      }
    }

  //  第三部分样式
  .index_nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    p{
      flex: 1;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      span{
       font-size: 3.467vw;
       font-family: PingFang SC;
       font-weight: 400;
       color: #343434;
      }
      img{
        width: 18.4vw;
        height: 18.4vw;
        margin-bottom: 3.467vw;
      }
    }
  }
	  
  }
}



</style>