horzi_rai_wxa/pageMy/myCollection/myCollection.vue

<template>
  <view class="container myCollection-container">
    <view class="collect-ul" v-if="haveData">
      <view class="collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item.ArticleId)">
        <view class="item-left">
          <text class="title text_twoLine">{{ item.Title }}</text>
          <text class="text_twoLine desc">{{ item.Body }}</text>
        </view>
        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
      </view>
      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
    </view>
    <view class="nodata" v-else>
      <image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
      <text>暂时没有收藏的内容</text>
    </view>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  </view>
</template>

<script>
import { Mine } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
import freeCharge from "@/components/freeCharge";
export default {
  data() {
    return {
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      collectList: [],
      haveData: true,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      totalPage: "",
    };
  },
  onLoad() {
    this.getCollectList();
  },
  components: {
    freeCharge,
  },
  methods: {
    /* 获取列表 */
    getCollectList() {
      Mine.getCollect({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      }).then((res) => {
        if (res.Ret === 200) {
          this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
          this.totalPage = res.Data.Paging.Pages; //总页数
          if (this.page_no === 1) {
            this.collectList = res.Data.List || [];
            this.haveData = this.collectList.length ? true : false;
            if (this.refresh) {
              uni.stopPullDownRefresh();
              this.refresh = false;
            }
          } else {
            this.collectList = this.collectList.concat(res.Data.List);
          }
        }
      });
    },
    goDetail(id) {
      uni.navigateTo({
        url: "/pageMy/reportDetail/reportDetail?id=" + id,
      });
    },
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.getCollectList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    this.page_no = 1;
    this.refresh = true;
    this.getCollectList();
  }),
};
</script>

<style lang="scss" scoped>
.myCollection-container {
  background-color: #f7f7f7;
  .collect-ul {
    padding-top: 4rpx;
    .collect-ltem {
      display: flex;
      padding: 30rpx 34rpx;
      background: #fff;
      margin-bottom: 4rpx;
      align-items: center;
      justify-content: space-between;
      .title {
        max-width: 625rpx;
        color: #4a4a4a;
        font-size: 34rpx;
      }
      .desc {
        margin-top: 17rpx;
        width: 625rpx;
        color: #999;
      }
    }
  }
}
</style>