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

<template>
  <div class="contentBody" v-if="learnChildList.length > 0">
    <van-tabs
      :active="active"
      type="line"
      line-width="30px"
      line-height="1px"
      @click="childChange"
    >
      <!-- 子目录 -->
      <van-tab
        v-for="(tabItem, tabIndex) in learnChildList"
        :key="tabIndex"
        :title="tabItem.name"
        :title-style="titleStyle"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- <van-cell></van-cell> -->
          <van-cell
            v-for="(contentItem, contentIndex) in contentList"
            :key="contentIndex"
            @click="chooseContent(contentIndex)"
          >
            <div slot="default" class="contentItemDiv">
              <div class="contentItemTitle">{{ contentItem.name }}</div>
              <div class="contentItemDescription">
                <div class="contentItemDescriptionTime">
                  {{
                    formateDateTimeFun(contentItem.createdTime) ||
                      contentItem.createdTime
                  }}
                </div>
                <div>
                  所需学习时间：{{
                    getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                  }}
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "page-learn-child",
  components: {},
  props: {
    learnChildList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: 0,
      choosedChildIndex: 0,
      titleStyle: {
        fontSize: "10px"
      },
      contentList: [],
      loading: false,
      finished: false
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    //   第一次加载内容
    "learnChildList.length": {
      handler(newValue, oldValue) {
        if (oldValue === 0 && newValue !== 0) {
          this.getContentList();
        }
      }
    },
    active(val, oldVal) {
      if (val !== oldVal) {
        this.getContentList();
      }
    }
  },
  methods: {
    childChange(index) {
      this.finished = false;
      this.choosedChildIndex = index;
      this.getContentList();
    },
    //   查询子目录
    getContentList() {
      let path = {
        categoryId: this.learnChildList[this.choosedChildIndex].id
      };
      this.$_http
        .get(
          this.$pathParams(
            this.$_API.JTXT_GET_CATEGORIES_CATEGROYID_MATERIALS,
            path
          )
        )
        .then(res => {
          this.contentList = res.data;
          this.finished = true;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    onLoad() {},
    chooseContent(index) {
      this.$router.push({
        name: "learn-content",
        params: { materialId: this.contentList[index].id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.contentBody {
  background-color: #fff;
  .contentItemDiv {
    .contentItemTitle {
      font-size: 0.65rem;
    }
    .contentItemDescription {
      margin-top: 0.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #0088e9;
      .contentItemDescriptionTime {
        color: #999;
      }
    }
  }
}
</style>