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

<template>
  <div class="contentBody" v-if="learnChildList.length > 0">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-tabs
        :active="active"
        type="line"
        line-height="0px"
        @click="childChange"
      >
        <!-- 子目录 -->
        <van-tab
          v-for="(tabItem, tabIndex) in learnChildList"
          :key="tabIndex"
          :title="tabItem.name"
          :title-style="titleStyle"
        >
          <div class="contentLoading" v-if="contentLoading">
            <van-loading type="spinner" vertical>加载中...</van-loading>
          </div>
          <van-list
            v-else
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="(contentItem, contentIndex) in contentList"
              :key="contentIndex"
              @click="chooseContent(contentIndex)"
            >
              <div slot="default" class="contentItemDiv">
                <div class="contentItemTitleTitleRow">
                  <!-- 文章 -->
                  <div
                    v-if="contentItem.type == 'ARTICLE'"
                    class="contentItemTitleTitleRow"
                  >
                    <div class="contentItemTitle">
                      {{ contentItem.name }}
                    </div>
                    <div
                      v-if="contentItem.isNeedStudyToday"
                      class="contentItemstates"
                    >
                      今日必学
                    </div>
                  </div>
                  <!-- 视频 -->
                  <div
                    v-else-if="contentItem.type == 'VIDEO'"
                    class="contentItemTitleTitleRow-video"
                  >
                    <div class="contentVideoTitle">
                      <div class="contentVideoTitleTxt">
                        <img :src="redIcon" />
                        <span>{{ contentItem.name }}</span>
                      </div>
                      <div
                        v-if="contentItem.isNeedStudyToday"
                        class="contentItemstates"
                      >
                        今日必学
                      </div>
                    </div>
                    <div class="contentItem-video-img">
                      <img
                        class="img-bofang"
                        :src="require('@/assets/image/learn/boFang.png')"
                      />
                      <img
                        :src="getContentObj(contentItem.contents).faceUrl"
                        fit="cover"
                      />
                    </div>
                  </div>
                </div>

                <div class="contentItemDescription">
                  <div class="contentItemDescriptionTime">
                    {{
                      formateDatesFun(contentItem.createdTime) ||
                        contentItem.createdTime
                    }}
                  </div>
                  <div class="contentItemDescriptionStudyNeedTime">
                    所需学习时间：{{
                      getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                    }}
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getTodayStr } from "@/utils/date";
import { mapState } from "vuex";
export default {
  name: "page-learn-child",
  components: {},
  props: {
    // 分组的数据列表
    parentId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      active: 0,
      titleStyle: {
        fontSize: "10px"
      },
      choosedChildIndex: 0,
      contentList: [],
      loading: false,
      contentLoading: false,
      finished: false,
      learnChildList: [],
      learnPage: 0,
      learnSize: 10,
      isLoading: false,
      arrowRightPng: require("@/assets/image/learn/arrowRight.png"),
      redIcon: require("@/assets/image/learn/redIcon.jpg")
    };
  },
  computed: {
    ...mapState({
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  created() {},
  mounted() {
    this.getChildList();
  },
  destroyed() {},
  watch: {
    // 监听：工种
    chooseEngneeringWork(value) {
      if (value.value) {
        this.getContentList(); // 查询：考试的场次列表信息
      }
    }
  },
  methods: {
    //   查询子目录
    getChildList() {
      this.$store.commit("toggleLoading", true);
      let path = {
        categoryId: this.parentId
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_CATEGORIES_CATEGROYID, path))
        .then(res => {
          this.learnChildList = res.data;
          this.$store.commit("toggleLoading", false);
          this.learnPage = 0;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    childChange(index) {
      this.choosedChildIndex = index;
      this.learnPage = 0;
      this.getContentList();
    },
    //   查询子目录
    getContentList() {
      this.contentLoading = true;
      this.$store.commit("toggleLoading", true);
      let path = {
        categoryId: this.learnChildList[this.choosedChildIndex].id
      };
      let params = {
        engineertypeid: this.chooseEngneeringWork.id,
        page: this.learnPage,
        size: this.learnSize
      };
      this.$_http
        .get(
          this.$pathParams(
            this.$_API.JTXT_GET_CATEGORIES_CATEGROYID_MATERIALS,
            path
          ),
          { params }
        )
        .then(res => {
          this.formatNeedStudyTodayFun(res.data.content);
          // 分页到底了
          this.finished = res.data.last;
          this.learnPage++;
          this.$store.commit("toggleLoading", false);
          this.contentLoading = false;
        })
        .catch(() => {
          Toast("系统异常");
          this.$store.commit("toggleLoading", false);
          this.contentLoading = false;
        });
    },
    // 判断是否今日必学
    formatNeedStudyTodayFun(datas) {
      let todayStr = getTodayStr();
      datas.forEach(item => {
        item.tags.forEach(itemChild => {
          if (itemChild === todayStr) {
            item.isNeedStudyToday = true;
          }
        });
      });
      this.contentList = datas;
    },
    onLoad() {
      this.getContentList();
    },
    chooseContent(index) {
      this.$router.push({
        name: "learn-content",
        params: { materialId: this.contentList[index].id }
      });
    },
    onRefresh() {
      this.getChildList();
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    getContentObj(content) {
      console.log("---" + content);
      return JSON.parse(content);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.contentBody {
  background-color: #fff;
  .contentLoading {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contentItemDiv {
    width: 100%;
    .contentItemTitleTitleRow {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contentItemTitle {
        text-align: left;
        font-size: 0.8rem;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: ho;
        -webkit-line-clamp: 10;
        // font-family: SimSun;
        font-family: fangSong-FZFSJW;
        line-height: 1.4rem;
      }
      .contentItemstates {
        font-size: 0.6rem;
        color: #f56c6c;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
      img {
        max-width: 100%;
        width: auto;
        height: auto;
      }
    }
    .contentItemTitleTitleRow-video {
      width: 100%;
      .contentVideoTitle {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        .contentVideoTitleTxt {
          position: relative;
          display: flex;
          margin-bottom: 0.25rem;
          img {
            width: 0.1rem;
            height: 1rem;
            margin-right: 0.25rem;
          }
          span {
            font-size: 0.8rem;
            font-weight: bold;
            color: #000;
          }
        }
        .contentVideoDK {
          flex-wrap: nowrap;
          white-space: nowrap;
          margin-left: 0.5rem;
          color: #999;
          display: flex;
          align-items: center;
          img {
            width: 0.75rem;
            height: 0.75rem;
          }
        }
      }
      .contentItemstates {
        font-size: 0.6rem;
        color: #f56c6c;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
      .contentItem-video-img {
        width: 100%;
        height: 9rem;
        position: relative;
        img {
          width: 100%;
          height: 9rem;
        }
        .img-bofang {
          width: 2rem;
          height: 2rem;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
    .contentItemDescription {
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contentItemDescriptionTime {
        color: #696969;
        font-size: 0.55rem;
      }
      .contentItemDescriptionStudyNeedTime {
        color: #0088e9;
        font-size: 0.55rem;
      }
    }
  }
  .my-swipe .van-swipe-item {
    background-color: #7cc8ff;
    height: 10rem;
  }
}
</style>