添加推荐页

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

@@ -0,0 +1,174 @@
+<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.url"
+              :show-error="true"
+            />
+          </van-swipe-item>
+        </van-swipe>
+      </template>
+      <van-cell
+        v-for="(contentItem, contentIndex) in contentList"
+        :key="contentIndex"
+        @click="chooseContent(contentIndex)"
+      >
+        <div slot="default" class="contentItemDiv">
+          <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>
+export default {
+  name: "page-learn-recommend",
+  components: {},
+  props: {
+    // 轮播图的数据
+    swiperList: null
+  },
+  data() {
+    return {
+      contentList: [],
+      loading: false,
+      finished: false
+    };
+  },
+  computed: {},
+  created() {
+    this.getContentList();
+    this.checkTodabTag();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    checkTodabTag(tags) {
+      let current = new Date();
+      let todayStr = current.toLocaleDateString().replace(/\//g, "");
+      console.log(todayStr);
+    },
+    //   查询子目录
+    getContentList() {
+      let path = {
+        categoryId: "6083ece7a05c7856f139a001"
+      };
+      this.$_http
+        .get(
+          this.$pathParams(
+            this.$_API.JTXT_GET_CATEGORIES_CATEGROYID_MATERIALS,
+            path
+          )
+        )
+        .then(res => {
+          this.formatNeedStudyTodayFun(res.data);
+          this.finished = true;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
+    },
+    // 判断是否今日必学
+    formatNeedStudyTodayFun(datas) {
+      console.log("222222", datas);
+      datas.forEach(item => {
+        if (item.tags.length > 0) {
+          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: center;
+        font-size: 0.65rem;
+        color: #000;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .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>