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">
          <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
            <block v-if="item.Type == 2 || item.Type == 3">
              <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
            </block>
            <block v-else>
              <image
                class="img-bg"
                @click.stop="handelPlay(item)"
                :src="
                  curVoiceId === item.ActivityId && !curAudioPaused
                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
                "
              ></image>
            </block>
            <text class="time">{{ item.PublishTime }}</text>
            <view :class="['identification', item.Type != 1 && 'identification-video']"> </view>
            <image
              class="identification-img"
              :src="item.Type == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/video-iocn.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'"
            ></image>
          </view>
          <view class="title-share">
            <view class="title text_twoLine">{{ item.Title }}</view>
            <view class="share share-collected">
              <image @click="myLeavingMessageHandler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
              <image v-if="item.IsCollect" @click="isCollectionHandeler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png"></image>
              <image v-else @click="isCollectionHandeler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png"></image>
              <button class="share-icon" open-type="share" :data-item="item">
                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
              </button>
            </view>
          </view>
        </view>
      </view>
      <block v-else>
        <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>
      </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 v-if="showAudioBox">
      <audioModule :showAudioPop.sync="showAudioPop" />
    </view>
    <videoModule :showVideoPop="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
  </view>
</template>

<script>
import { Mine, Report, Home, User } from "@/config/api.js";
import videoModule from "@/components/videoModule/index";
import audioModule from "@/components/audioModule/index";
import freeCharge from "@/components/freeCharge";
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 },
      ],
      tabsActive: 1,
      showAudioPop: false, //播放音频
      curVideoId: 0, //音频Id
      showVideoPop: false,
      videoPopList: {},
    };
  },
  onLoad() {
    uni.hideShareMenu();
    this.getCollectList();
  },
  components: {
    freeCharge,
    audioModule,
    videoModule,
  },
  methods: {
    /* 获取列表 */
    async getCollectList() {
      const res =
        this.tabsActive == 1
          ? await Mine.getCollect({
              PageSize: this.pageSize,
              CurrentIndex: this.page_no,
            })
          : 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) {
        let VideoIds = res.Data.VideoIds;
        let AudioIds = res.Data.AudioIds;
        let ActivityVideoIds = res.Data.ActivityVideoIds;
        const resRoadshow = await Home.microRoadshowList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          AudioIds,
          VideoIds,
          ActivityVideoIds,
        });
        if (resRoadshow.Ret === 200) {
          this.status = this.page_no < resRoadshow.Data.Paging.Pages ? "loadmore" : "nomore";
          this.totalPage = resRoadshow.Data.Paging.Pages; //总页数
          if (this.page_no === 1) {
            this.collectList = resRoadshow.Data.List || [];
            this.haveData = this.collectList.length ? true : false;
            if (this.refresh) {
              uni.stopPullDownRefresh();
              this.refresh = false;
            }
          } else {
            this.collectList = this.collectList.concat(resRoadshow.Data.List);
          }
        }
      }
      console.log(res);
    },
    // 去往文章详情页面
    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,
          });
      }
    },

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

    //播放的权限判断
    handelPlay(item) {
      let content_item = null;
      if (item.AudioActivityId) {
        content_item = {
          ActivityId: item.AudioActivityId,
          PlaySeconds: item.AudioPlaySeconds,
          ResourceUrl: item.AudioResourceUrl,
          Title: item.AudioTitle,
          Type: item.AudioType,
        };
      }
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        if (item.AuthInfo.HasPermission == 1) {
          item.Type == 1 || item.AudioType == 1 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
        } else {
          this.hasPermission = item.AuthInfo.HasPermission;
          this.jurisdictionList.ActivityId = item.Id;
          this.jurisdictionList.isAudioVideo = item.Type;
          if (this.hasPermission == 2) {
            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
            this.isShowhasPermission = true;
          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
            this.applyForIsShow = true;
          }
        }
      } else {
        this.$store.dispatch("checkHandle");
      }
    },

    //视频的播放事件
    handelVideoPlay(item) {
      if (this.$store.state.videoPlay.playVideoId != item.Id) {
        this.$store.commit("videoPlay/palyTimeUpdate", 0);
        console.log(this.$store.state.videoPlay.palyCurrentTime);
        this.$store.commit("videoPlay/playVideo", item.Id);
      }
      this.globalBgAudioManager.stop();
      this.videoPopList = item;
      this.showVideoPop = true;
    },

    //音频的播放事件
    async audioPlayBack(item) {
      this.curVideoId = 0;
      this.$store.commit("audioBg/parseIntAudio", true);
      // 判断是否为同一个音频
      if (this.$store.state.audioBg.indexId == item.ActivityId) {
        if (this.globalBgAudioManager.paused) {
          this.globalBgAudioManager.play();
        } else {
          this.globalBgAudioManager.pause();
        }
      } else {
        let VoiceList = {
          Url: item.ResourceUrl,
          Name: item.Title,
          PlaySeconds: item.PlaySeconds,
        };
        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title });
      }
      this.showAudioPop = true;
    },
    // 微路演留言
    myLeavingMessageHandler(item) {
      uni.navigateTo({
        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
      });
    },

    // 微路演收藏
    async isCollectionHandeler(item) {
      const res = await Home.microRoadshowCollect({
        Id: item.Id,
        SourceType: item.Type,
      });
      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,
        });
      }
    },
  },
  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);
  },
  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;
      return {
        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
        path: "/pages/index/index?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
        imageUrl: item.AudioShareImg || item.ShareImg,
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.myCollection-container {
  background-color: #f7f7f7;
  .collect-ul {
    padding: 4rpx 30rpx 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;
    }
  }
  @import "@/components/audioVideo.scss";
}
</style>