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

<template>
  <div class="contentBody">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in swiperList" :key="index">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              :src="item.imageUrl"
              :show-error="true"
              @click="clickCarousels(item)"
            />
          </van-swipe-item>
        </van-swipe>
      </template>
      <van-cell
        v-for="(contentItem, contentIndex) in contentList"
        :key="contentIndex"
        @click="chooseContent(contentIndex)"
      >
        <div slot="default" class="contentItemDiv" v-if="contentItem">
          <div class="contentItemTitleTitleRow">
            <div class="contentItemTitle">{{ contentItem.name }}</div>
            <div v-if="contentItem.isNeedStudyToday" class="contentItemstates">
              今日必学
            </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>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "page-learn-recommend",
  components: {},
  props: {
    // 轮播图的数据
    swiperList: null
  },
  data() {
    return {
      contentList: [],
      loading: false,
      finished: false
    };
  },
  computed: {
    ...mapState({
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  watch: {
    // 监听：工种
    chooseEngneeringWork(value) {
      if (value.value) {
        this.getNewsfeed(); // 查询子目录
      }
    }
  },
  created() {
    this.getNewsfeed();
    this.getCarousels();
  },
  mounted() {},
  methods: {
    // 查询轮播图
    getCarousels() {
      let params = { num: 4 };
      this.$_http
        .get(this.$_API.JTXT_GET_CAROUSELS, { params })
        .then(res => {
          console.log("----res--" + JSON.stringify(res));
          this.swiperList = res.data;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    clickCarousels(item) {
      if (!item.materialId) return;
      this.$router.push({
        name: "learn-content",
        params: { materialId: item.materialId }
      });
    },
    // 查询子目录
    getNewsfeed() {
      let engineertypeid = "";
      if (this.chooseEngneeringWork) {
        engineertypeid = this.chooseEngneeringWork.id;
      }

      let params = { engineertypeid: engineertypeid };
      this.$_http
        .get(this.$_API.JTXT_GET_NEWSFEED, { params })
        .then(res => {
          this.formatNeedStudyTodayFun(res.data);
          this.finished = true;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 判断是否今日必学
    formatNeedStudyTodayFun(datas) {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month >= 10 ? "" + month : "0" + month;
      let day = date.getDate();
      let todayStr = year + month + day;
      datas.forEach(item => {
        item.tags.forEach(itemChild => {
          if (itemChild === todayStr) {
            item.isNeedStudyToday = true;
          }
        });
      });
      this.contentList = datas;
    },
    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 {
    width: 100%;
    .contentItemTitle {
      font-size: 0.65rem;
    }

    .contentItemTitleTitleRow {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contentItemTitle {
        text-align: left;
        font-size: 0.65rem;
        color: #000;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap:break-word;
        white-space:pre-wrap;
        display: -webkit-box;
        -webkit-box-orient: ho;
        -webkit-line-clamp:10;
      }
      .contentItemstates {
        font-size: 0.6rem;
        color: #f56c6c;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }
    .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>