JingTieXueTang.H5/src/views/home/learn/page-learn.vue

<template>
  <div>
    <van-tabs :active="active" @click="rootChange" line-width="10px">
      <!-- 根目录 -->
      <van-tab
        v-for="(item, index) in learnRootList"
        :key="index"
        :title="item.name"
      >
        <PageLearnChild v-if="index !== 0" :learnChildList="learnChildList">
        </PageLearnChild>
        <PageLearnRecommend v-if="index === 0" :swiperList="swiperList">
        </PageLearnRecommend>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "page-learn",
  components: {
    PageLearnChild: resolve => {
      require(["./page-learn-child"], resolve);
    },
    PageLearnRecommend: resolve => {
      require(["./page-learn-recommend"], resolve);
    }
  },
  data() {
    return {
      active: 0,
      learnRootList: [],
      choosedRootIndex: 0,
      learnChildList: [],
      swiperList: []
    };
  },
  computed: {},
  created() {
    this.getSwiperListDataFun();
    this.getLearnRootList();
  },
  mounted() {},
  methods: {
    // 查询轮播图数据列表
    getSwiperListDataFun() {
      this.swiperList = [
        { url: require("@/assets/image/swipe/01.jpg") },
        { url: require("@/assets/image/swipe/02.jpg") },
        { url: require("@/assets/image/swipe/03.jpg") },
        { url: require("@/assets/image/swipe/02.jpg") }
      ];
    },
    //   查询学习根目录
    getLearnRootList() {
      this.$_http
        .get(this.$_API.JTXT_GET_CATEGORIES)
        .then(res => {
          // 第一个添加推荐
          this.learnRootList = [{ id: "0", name: "推荐", parentId: null }];
          this.learnRootList = [...this.learnRootList, ...res.data];
          //   查询子目录
          this.getChildList();
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    //   查询子目录
    getChildList() {
      if (this.choosedRootIndex === 0) {
        return;
      }
      let path = {
        categoryId: this.learnRootList[this.choosedRootIndex].id
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_CATEGORIES_CATEGROYID, path))
        .then(res => {
          res.data.shift();
          this.learnChildList = res.data;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 切换根目录
    rootChange(index, title) {
      this.choosedRootIndex = index;
      this.getChildList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.contentBody {
  background-color: #fff;
}
</style>