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 favoritesList"
        :key="index"
        @click="toMaterialDetail(item)"
      >
        <div slot="default" class="contentItemDiv">
          <div>
            <div class="contentItemTitle">
              {{ item.materialTitle || "学习文章标题" }}
            </div>
            <div class="contentItemDescription">
              收藏时间:
              <span>{{
                formateDatesFun(item.addedTime)
              }}</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "collection",
  components: {},
  data() {
    return {
      favoritesList: [],
      loading: false,
      finished: false
    };
  },
  created() {
    this.getFavorites();
    this.setLanXinNavigator();
  },
  activated() {
    this.setLanXinNavigator();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "收藏"
      });
    },
    // 查询：收藏的文字ID列表
    getFavorites() {
      this.$store.commit("toggleLoading", true);
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_FAVORITES, path))
        .then(res => {
          if (res.data) {
            this.favoritesList = res.data;
            console.log("--index--" + JSON.stringify(this.favoritesList));
            this.finished = true;
          } else {
            this.$store.commit("toggleLoading", false);
          }
          this.loading = false;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    onLoad() {},
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    },
    toMaterialDetail(item) {
      this.$router.push({
        name: "learn-content",
        params: { materialId: item.id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBody {
  background-color: #fff;
  .contentItemDiv {
    .contentItemTitle {
      font-size: 0.65rem;
      font-weight: bold;
    }
    .contentItemDescription {
      margin-top: 0.5rem;
      color: #696969;
      span {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>