horzi_rai_wxa/pageMy/myCollection/myCollection.vue

<template>
  <view class="container myCollection-container">
    <view class="collect-ul" v-if="haveData">
      <view class="content-item" v-for="item in collectList" :key="item.ArticleId">
        <view class="item-user" v-if="item.Source == 2">
          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
          <text> {{ item.NickName }}</text>
        </view>
        <view class="item-title">
          <text style="display: inline" @click="goDetailReport(item)">
            {{ item.Title }}
          </text>
          <text @click="themeDetails(item, val)" class="item-industry" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
        </view>
        <view class="item-more">
          <text>{{ item.PublishDate }}</text>
          <view class="pv-ollect" v-if="item.Source == 2">
            <view>
              <image class="pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
              {{ item.Pv }}
            </view>
            <view @click="collectClick(item)">
              <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
              <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
              {{ item.CollectNum }}人收藏
            </view>
          </view>
        </view>
      </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="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
      <text>暂时没有收藏的内容</text>
    </view>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  </view>
</template>

<script>
import { Mine, Report } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
import freeCharge from "@/components/freeCharge";
export default {
  data() {
    return {
      page_no: 1,
      pageSize: 10,
      collectList: [],
      status: "loadmore",
      totalPage: "",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      haveData: true, //是否有数据
      refresh: false, //正在下拉
    };
  },
  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);
          }
        }
      });
    },

    // 去往文章详情页面
    goDetailReport(item) {
      this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
    },

    // 去往主题详情
    themeDetails(item, val) {
      if (item.Source === 1) {
        //非严选
        this.$store.dispatch("checkHandle", "/reportPages/IndustryReport/IndustryReport?id=" + val.IndustrialManagementId);
      } else {
        //严选
        this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + val.IndustrialManagementId);
      }
    },
    
    // 收藏
    async collectClick(item) {
      const res = await Report.collectRpt({ ArticleId: item.ArticleId });
      if (res.Ret === 200) {
        item.IsCollect = !item.IsCollect;
        item.IsCollect
          ? (item.CollectNum += 1) &&
            uni.showToast({
              title: "收藏成功",
              icon: "none",
              duration: 2000,
            })
          : (item.CollectNum -= 1);
        !item.IsCollect &&
          uni.showToast({
            title: "已取消收藏",
            icon: "none",
            duration: 2000,
          });
      }
    },
  },
  /* 触底 */
  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: 4rpx 30rpx;
    .content-item {
      background-color: #fff;
      margin-top: 20rpx;
      padding: 35rpx 20rpx 0;
      .item-title {
        font-weight: 500;
        .item-industry {
          margin-left: 10rpx;
          color: #3385ff;
          display: inline-block;
        }
      }
      .item-user {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 28rpx;
        margin-bottom: 20rpx;
        image {
          width: 23rpx;
          height: 26rpx;
          margin-right: 20rpx;
        }
      }
      .item-more {
        display: flex;
        justify-content: space-between;
        color: #cecece;
        margin: 20rpx 0 0;
        padding-bottom: 30rpx;
        .pv-ollect {
          display: flex;
          align-items: center;
          width: 40%;
          justify-content: space-between;
          image {
            width: 22rpx;
            height: 21rpx;
            margin-right: 10rpx;
          }
          .pv {
            height: 16rpx;
          }
        }
      }
    }
  }
}
</style>