JingTieXueTang.H5/src/views/home/person/collection.vue

<template>
  <div class="contentBody">
    <van-nav-bar title="收藏" left-arrow @click-left="onClickLeft" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in favorites"
        :key="index"
        @click="toMaterialDetail(item)"
      >
        <div slot="default" class="contentItemDiv">
          <div>
            <div class="contentItemTitle">{{ item.name || "学习文章" }}</div>
            <div class="contentItemDescription">
              <div>
                收藏时间:
                {{ "2021-01-01" || formateDateTimeFun(item.startTime) }}
              </div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "collection",
  components: {},
  data() {
    return {
      favorites: [],
      loading: false,
      finished: false
    };
  },
  mounted() {
    console.log("--收藏--");
    this.getFavorites();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    getFavorites() {
      let path = {
        userName: this.user.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_FAVORITES, path))
        .then(res => {
          this.favorites = res.data.materials;
          console.log("--collection--" + JSON.stringify(this.favorites));
          this.finished = true;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    onClickLeft() {
      this.$router.back();
    },
    onLoad() {},
    toMaterialDetail(item) {
      this.$router.push({
        name: "learn-content",
        params: { materialId: item }
      });
    },
    formateDateTimeFun(time) {
      // 获取当前日期
      let date = new Date(time);
      // 获取当前月份
      let nowMonth = date.getMonth() + 1;
      // 获取当前是几号
      let strDate = date.getDate();
      // 添加分隔符“-”
      let seperator = "-";
      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }
      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      return date.getFullYear() + seperator + nowMonth + seperator + strDate;
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBody {
  background-color: #fff;
  .contentItemDiv {
    .contentItemTitle {
      font-size: 0.65rem;
      font-weight: bold;
    }
    .contentItemDescription {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>