shujuju/boman-h5/src/views/Home.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="index_header">
		   <div class="inhe_one">
          <p>
            <span><i>1346</i>项</span>
            <span>总流程审批</span>
          </p>
          <p>
             <span><i>1346</i>项</span>
            <span>总流程审批</span>
          </p>
       </div>
       <div class="inhe_two">
         <img src="../assets/img/icon_hp_spjl.png" alt="">
       </div>
	 </div>
   <div class="index_header index_headertr">
		   <div class="inhe_one">
          <p>
            <span><i>1346</i>项</span>
            <span>总流程审批</span>
          </p>
          <p>
             <span><i>1346</i>项</span>
            <span>总流程审批</span>
          </p>
       </div>
       <div class="inhe_two">
         <img src="../assets/img/icon_hp_spjl.png" alt="">
       </div>
	 </div>
   <div class="index_nav">
     <p @click="lock">
       <span>考勤打卡</span>
       <img src="../assets/img/icon_hp_kqdk.png" alt="">
     </p>
     <p @click="application">
       <span>请假申请</span>
       <img src="../assets/img/icon_hp_qjsq.png" alt="">
     </p>
     <p @click="pproved">
       <span>待审批</span>
       <img src="../assets/img/icon_hp_dsp.png" alt="">
     </p>
   </div>
    </div>
   <nav-bar v-bind:active=0></nav-bar>
  </div>
</template>

<script>
import NavBar from "@/components/common/Navbar.vue";
import cover from "./cover";
export default {
  data() {
    return {
      category: [],
      active: 0
    };
  },
  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);
      console.log(456)
    },
    // categoryItem() {
    //   const categoryitem = this.category[this.active];
    //   return categoryitem;
    // } 
    // 考勤打卡
    lock(){
       this.$router.push("/lock");
    },
    // 请假申请
    application(){
    this.$router.push("/leave");
    },
    // 待审批
    pproved(){
    this.$router.push("/approval");
    }
  },
  watch: {
    // active() {
    //   const categoryitem = this.categoryItem();
    //   if (!categoryitem.list.length) {
    //     this.selectArticle();
    //   }
    // }
  },
  mounted(){
 console.log(345)
  },
  created() {
    console.log(this.active)
    console.log(345)
    // this.selectCategory();
  }
};
</script>

<style lang="less" scoped="">
.home {
  background-color: #fff;
  padding: 7.999px; 
  .categorytab{
	  width: 100%;
    height: 100%;
    .index_header{
      position: relative;
      height: 29.333vw;
      background: url('../assets/img/pic_bg_spjl.png') no-repeat ;
      background-size: 100% 100%;
      display: flex;
      margin-bottom: 2.933vw;
      .inhe_one{
        width: 70%;
         display: flex;
         justify-content: space-between;
         align-items: center;
        p{
          flex: 1;
          display: flex;
          flex-direction: column;
          text-align: center;
          line-height: 9.333vw;
          span{
             font-size: 2.667vw;
             font-family: PingFang SC ;
             font-weight: 500;
             color: #666666;
              line-height: 6.933vw;
              
             i{
               font-style: normal;
               font-size: 6.4vw;
               font-family: PingFang SC;
               font-weight: 800;
               color: #2D6B89;
               line-height: 1.6vw;
             }
          }
         
        }
        p:nth-child(1){
           border-right: 1px solid #80B1C8;
        }
      }
      .inhe_two{
        width: 30%;
        display: flex;
        justify-content: center;
        // align-items: center;
        margin-top: 8vw;
        img{
          width: 12.267vw;
          height: 12.267vw;
        }
      }
      
    }
    .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>