horzi_rai_wxa/pageMy/myCollection/myCollection.vue

<template>
  <view class="container myCollection-container">
    <view class="second-tabs">
      <view :class="['item', item.id == tabsActive && 'tabs-active']" v-for="item in tabsList" :key="item.id" @click="handleClickTopSub(item)">
        {{ item.name }}
        <view class="active" v-if="item.id == tabsActive"></view>
      </view>
    </view>
    <view class="collect-ul" v-if="haveData">
      <view class="audio-video-content" v-if="tabsActive == 2">
        <view class="audio-item" v-for="item in collectList" :key="item.Id">
          <RoadshowItem :list="item" @isCollectionHandeler="isCollectionHandeler" />
        </view>
      </view>
      <blok v-else-if="tabsActive == 3">
        <viwe class="chart-ul">
          <view style="width: 49%" v-for="item in collectList" :key="item.Id">
            <ChartItem class="chart-item" :isMyChartCollection="true" :list="item" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
          </view>
        </viwe>
      </blok>
      <block v-else>
        <view class="content-item" v-for="item in collectList" :key="item.ArticleId">
          <blok v-if="item.NickName">
            <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>
          </blok>
          <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>
      </block>
      <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, Home, User, Chart } from "@/config/api.js";
import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
import freeCharge from "@/components/freeCharge";
import ChartItem from "@/components/ItemComponent/chartItem.vue";
export default {
  data() {
    return {
      page_no: 1,
      pageSize: 10,
      collectList: [],
      videoAudioList: [],
      status: "loadmore",
      totalPage: "",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      haveData: true, //是否有数据
      refresh: false, //正在下拉
      tabsList: [
        { name: "报告", id: 1 },
        { name: "微路演", id: 2 },
        { name: "图表", id: 3 },
      ],
      tabsActive: 1,
    };
  },
  onLoad() {
    uni.hideShareMenu();
    this.getCollectList();
  },
  components: {
    freeCharge,
    RoadshowItem,
    ChartItem,
  },
  methods: {
    /* 获取列表 */
    async getCollectList() {
      const res =
        this.tabsActive == 1
          ? await Mine.getCollect({
              PageSize: this.pageSize,
              CurrentIndex: this.page_no,
            })
          : this.tabsActive == 3
          ? await Chart.getChartcollection({
              PageSize: this.pageSize,
              CurrentIndex: this.pageNum,
            })
          : this.getrroadshowList();
      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);
        }
      }
    },
    async getrroadshowList() {
      const res = await User.getListMicroRoadshow();
      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) {
      if (item.IsRoadShow) {
        //跳转路演精华
        uni.navigateTo({
          url: "/reportPages/roadEssence/roadEssence?id=" + item.ArticleId,
        });
      } else {
        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,
          });
      }
    },

    // 点击top tabs
    handleClickTopSub(item) {
      this.tabsActive = item.id;
      this.page_no = 1;
      this.collectList = [];
      this.getCollectList();
    },

    // 微路演收藏
    async isCollectionHandeler(item) {
      const res = await Home.microRoadshowCollect({
        Id: item.Id,
        SourceType: item.Type,
        PageRouter: this.$store.state.pageRouterReport,
      });
      if (res.Ret === 200) {
        let index = this.collectList.findIndex((key) => key.Id == item.Id);
        this.collectList.splice(index, 1);
        uni.showToast({
          title: res.Msg,
          duration: 2000,
        });
      }
    },
    //我的收藏的删除
    myChartCollect(id) {
      uni.showModal({
        content: "确认要将该图表移除我的收藏吗？",
        confirmColor: "#3385FF",
        cancelColor: "#606266",
        success: async (res) => {
          if (res.confirm) {
            const res = await Chart.myChartCollect({
              ChartId: id,
            });
            if (res.Ret === 200) {
              this.page_no = 1;
              this.getCollectList();
              this.$util.toast("已取消收藏");
            }
          }
        },
      });
    },
    //我的收藏 置顶
    async myChartIsTop(id) {
      const res = await Chart.myChartTop({
        ChartId: id,
      });
      if (res.Ret === 200) {
        this.page_no = 1;
        this.getCollectList();
        this.$util.toast(res.Msg);
      }
    },
  },
  computed: {
    curVoiceId() {
      //当前正在播放的音频id
      return this.$store.state.audioBg.indexId;
    },
    curAudioPaused() {
      //当前音频是否暂停状态
      return this.$store.state.audioBg.paused;
    },
    showAudioBox() {
      return this.$store.state.audioBg.parseIntShow;
    },
  },
  onShow() {
    this.$store.commit("audioBg/parseIntAudio", true);
    this.$store.commit("setRouterReport", "收藏");
  },
  onHide() {
    this.$store.commit("audioBg/parseIntAudio", false);
    this.curVideoId = 0;
  },
  /* 触底 */
  onReachBottom() {
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.getCollectList();
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    this.page_no = 1;
    this.refresh = true;
    this.getCollectList();
  },
  /** 用户点击分享*/
  onShareAppMessage: function ({ from, target }) {
    if (from === "button") {
      let item = target.dataset.item;
      let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
      // type=2 -- 活动视频 type=3 -- 产业视频
      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
      let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
      let title_share = item.AudioTitle || item.Title;
      this.getRecordTracking("我的收藏转发", { ActivityId: item.ActivityId, Id: item.Id, Type: item.Type });
      return {
        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
        path: "/pages/material/material?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
        imageUrl: item.AudioShareImg || item.ShareImg,
      };
    }
  },
};
</script>

<style lang="scss">
.myCollection-container {
  background-color: #f7f7f7;
  .collect-ul {
    padding: 4rpx 10rpx 20rpx;
    .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;
          }
        }
      }
    }
  }
  .second-tabs {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    background-color: #fff;
    font-size: 32rpx;
    color: #333333;
    padding: 20rpx 35rpx;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .item {
      position: relative;
      padding-bottom: 16rpx;
      margin-right: 50rpx;
      flex-shrink: 0;
      .active {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4rpx;
        width: 100%;
        border-radius: 1rpx;
        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
      }
    }
    .tabs-active {
      color: #3385ff;
      font-weight: 500;
    }
  }
  .audio-video-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .audio-item {
      width: 49%;
    }
  }
  .chart-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 15rpx;
    justify-content: space-between;
  }
}
</style>