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

<template>
  <div class="contentBody">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <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
              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 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-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import { getTodayStr } from "@/utils/date";
export default {
  name: "page-learn-recommend",
  components: {},
  data() {
    return {
      contentList: [],
      loading: false,
      finished: false,
      isLoading: false,
      swiperList: [],
      arrowRightPng: require("@/assets/image/learn/arrowRight.png"),
      redIcon: require("@/assets/image/learn/redIcon.jpg")
    };
  },
  computed: {
    ...mapState({
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  watch: {
    // 监听：工种
    chooseEngneeringWork(value) {
      if (value.value) {
        this.getNewsfeed(); // 查询子目录
      }
    }
  },
  created() {
    if (this.chooseEngneeringWork) {
      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;
          if (this.swiperList === null || this.swiperList.length === 0) {
            this.swiperList = [
              { imageUrl: require("@/assets/image/swipe/00.jpg") }
            ];
          }
        })
        .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 todayStr = getTodayStr();
      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 }
      });
    },
    onRefresh() {
      this.getNewsfeed();
      this.getCarousels();
      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;
  .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.8rem;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: ho;
        -webkit-line-clamp: 10;
        // font-family: SimSun;
        font-family: FangSong;
      }
      .contentItemstates {
        font-size: 0.6rem;
        color: #f56c6c;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }
    .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;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-wrap: break-word;
            // white-space: pre-wrap;
          }
        }
        .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>