horzi_rai_wxa/reportPages/IndustryReport/IndustryReport.vue

<template>
  <view class="container industry-content" id="industry-content">
    <block v-if="haveData">
      <view class="is-track-follow" v-if="dataFollow.IsShowFollowButton">
        <is-track-follow :isShowFollowButton.sync="dataFollow.IsShowFollowButton" source="resources" :sourceId="industrialManagementId" :isFollowData.sync="dataFollow.IsFollowButton" />
      </view>
      <view class="top-video-content">
        <!-- 详情封面图 -->
        <image :src="industryVideo.DetailImgUrl" class="industry-video-poster" v-show="industryVideo.Id && industryVideo.DetailImgUrl && !havePlayed" @click="handelVideoPlay"></image>
        <!-- 视频 -->
        <video :src="industryVideo.ResourceUrl" class="industry-video" id="industry-video" v-show="industryVideo.ResourceUrl && (havePlayed || !industryVideo.DetailImgUrl)" controls></video>
      </view>
      <view class="title-tabs-content" :style="{ top: dataFollow.IsShowFollowButton ? '60rpx' : 0 }">
        <view class="top-bg-title">产业赛道布局于{{ layoutTime }}</view>
        <view class="tab-content">
          <block v-for="(item, index) in tabBars" :key="item.CategoryId">
            <view :id="'__' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.CategoryId }" @click.stop="toggleTab(item, index)">
              {{ item.MatchTypeName }}
              <text class="reg-text" v-if="item.IsRed"></text>
            </view>
          </block>
        </view>
      </view>
      <view class="collect-ul">
        <!-- 其他tab -->
        <block v-if="tabAct_id !== 99999">
          <view class="global_card_content collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item, index)">
            <view>
              <view class="item-left">
                <text class="title global_title text_twoLine">
                  {{ item.Title }}
                  <text class="reg-text" v-if="item.IsRed"></text>
                </text>
              </view>
              <view class="item-more">
                <text>{{ item.PublishDate }}</text>
                <view class="global_pv-ollect">
                  <view>
                    <image class="pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/examine_icon.png"></image>
                    {{ item.Pv }}
                  </view>
                  <view @click.stop="collectClick(item)">
                    <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_act.png"></image>
                    <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_ico.png"></image>
                    {{ item.CollectNum }}
                  </view>
                </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
          </view>
        </block>
        <!-- 时间线 -->
        <block v-if="tabAct_id === 99999">
          <time-line ref="timeChild" :dataList="timeLine" @setRouter="setRouter" />
        </block>
        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
      </view>
    </block>
    <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" />
    <!-- 权限弹窗 -->
    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
    <Loading />
  </view>
</template>

<script>
import { Mine, Home, Reports, Report } from "@/config/api.js";
import freeCharge from "@/components/freeCharge";
import modalDialog from "@/components/modalDialog.vue";
import IsTrackFollow from "@/components/isTrackFollow.vue";
import TimeLine from "@/components/report/timeLine.vue";
export default {
  data() {
    return {
      tabAct_id: "",
      tabBars: [],
      industrialManagementId: "",
      layoutTime: "",
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      categoryId: "",
      collectList: [],
      isShow: false,
      haveData: true,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      totalPage: "",
      toggleTabIndex: 0,
      titleReport: "",
      pcTabActive: "",
      industryVideo: {},
      authInfo: {},
      havePlayed: false,
      isShowhasPermission: false, //  联系销售的提交申请
      applyForIsShow: false, // 提交申请
      jurisdictionList: {},
      hasPermission: "", //权限
      timeLine: [], //时间线数据
      mockTimeLine: [
        {
          date: "不重要",
          Content: "<p>hello,world</p><p>hello,world</p><p>hello,world</p>",
        }, //第一项是为了获取当前手机下,三行是多少相对高度
      ],
      dataFollow: {},
      isSendWx: "",
      chapterId: 0,
    };
  },
  onLoad(option) {
    this.industrialManagementId = option.id;
    this.isSendWx = option.IsSendWx || "";
    this.tabAct_id = +option.tab || "";
    this.chapterId = Number(option.ChapterId) || 0;
    this.toArticleCategoryList();
  },
  onShow() {
    this.$store.dispatch("statistics", { PageType: "IndustryList", IndustrialManagementId: this.industrialManagementId });
  },
  components: {
    freeCharge,
    modalDialog,
    IsTrackFollow,
    TimeLine,
  },
  watch: {
    //监听tabs的变化
    tabAct_id: {
      handler(newVal) {
        if (newVal) {
          this.page_no = 1;
          this.collectList = [];
          this.getCollectList();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //tabs切换事件
    toggleTab(item, index) {
      this.toggleTabIndex = index;
      if (this.tabAct_id !== item.CategoryId) {
        this.tabAct_id = item.CategoryId;
        this.pageNum = 1;
        this.timeLine = [];
        this.totalPage = "";
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    toArticleCategoryList() {
      Reports.toArticleCategoryList({
        IndustrialManagementId: this.industrialManagementId,
        ShowTimeLine: 1,
        PageRouter: this.$store.state.pageRouterReport,
        IsSendWx: this.isSendWx,
        ChapterId: this.chapterId,
      }).then((res) => {
        if (res.Ret == 200) {
          uni.setNavigationBarTitle({
            title: res.Data.IndustryName,
          });
          this.dataFollow = res.Data;
          this.titleReport = res.Data.IndustryName;
          this.layoutTime = res.Data.LayoutTime;
          this.industryVideo = res.Data.IndustryVideo;
          this.authInfo = res.Data.AuthInfo;
          if (res.Data.List) {
            this.tabAct_id = res.Data.List[0].CategoryId;
            this.tabBars = res.Data.List;
          }
        }
      });
    },
    /* 获取列表 */
    getCollectList() {
      //just for test
      if (this.tabAct_id === 99999) {
        Reports.getArticleList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          CategoryId: 99999,
          IndustrialManagementId: this.industrialManagementId,
        }).then((res) => {
          if (res.Ret === 200) {
            this.$refs.timeChild.loadTimeLine = true;
            this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
            this.totalPage = res.Data.Paging.Pages;
            let list = res.Data.List || [];
            list = list.map((item) => {
              let temp = item;
              temp.date = item.PublishTime.split(" ")[0];
              if (item.Content.length) {
                temp.isExpand = true;
                temp.isShowBtn = true;
              }
              return temp;
            });
            if (this.page_no === 1) {
              this.timeLine = list;
              this.haveData = this.timeLine.length ? true : false;
              if (this.refresh) {
                uni.stopPullDownRefresh();
                this.refresh = false;
              }
            } else {
              this.timeLine = this.timeLine.concat(list);
            }
          }
          this.timeLine.unshift(this.mockTimeLine[0]);
          //在获取高度前把所有的晨会展开,收起的话无法获取正确高度
          this.timeLine.forEach((item) => {
            if (item.Content.length) {
              item.isExpand = true;
              item.isShowBtn = true;
            }
          });
          setTimeout(() => {
            this.$refs.timeChild.getConentsHeight();
          }, 0);
        });
        return;
      }
      Reports.getArticleList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        CategoryId: this.tabAct_id,
        IndustrialManagementId: this.industrialManagementId,
      }).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.pcTabActive = res.Data.ChartPermissionId;
            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 goDetail(item, index) {
      if (item.SubCategoryName === "路演精华") {
        //跳转路演精华
        uni.navigateTo({
          url: "/reportPages/roadEssence/roadEssence?id=" + item.ArticleId,
        });
      } else if (item.Resource === 2) {
        // 跳转产品内测详情
        uni.navigateTo({
          url: "/reportPages/internalDetials/internalDetials?id=" + item.ArticleId,
        });
      } else if (item.Resource === 1) {
        this.setRouter();
        uni.navigateTo({
          url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId,
        });
      }
    },
    // 视频播放权限判断
    async handelVideoPlay() {
      await this.$store.dispatch("showLoginModal");
      this.$store.commit("setRouterReport", "资源包详情页");
      if (this.authInfo.HasPermission == 1) {
        this.playVideo();
      } else {
        this.hasPermission = this.authInfo.HasPermission;
        this.jurisdictionList.ActivityId = this.industryVideo.Id;
        this.jurisdictionList.isAudioVideo = 3;
        if (this.hasPermission == 2) {
          this.jurisdictionList.SellerMobile = this.authInfo.SellerMobile;
          this.jurisdictionList.SellerName = this.authInfo.SellerName;
          this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
          this.isShowhasPermission = true;
        } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
          this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
          this.applyForIsShow = true;
        }
      }
    },
    // 播放视频
    playVideo() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#industry-video")
        .context((data) => {
          data.context.play();
          this.handelVideoBindplay();
          setTimeout(() => {
            this.havePlayed = true;
          }, 10);
        })
        .exec();
    },
    //
    async handelVideoBindplay() {
      const res = await Home.microAideoHistoryAdd({ SourceId: this.industryVideo.Id, SourceType: this.industryVideo.Type, PageRouter: this.$store.state.pageRouterReport });
    },
    //展开收起晨会内容
    handleExpand(item, index) {
      this.getRecordTracking("展开收起", { Id: item.Id });
      item.isExpand = !item.isExpand;
      this.timeLine.splice(index, 1, item);
    },
    async goDetailFromTimeLine(item, index) {
      if (item.Content.length !== 0) return;
      // 已授权已绑定
      if (item.SubCategoryName === "路演精华") {
        //跳转路演精华
        uni.navigateTo({
          url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
        });
      } else {
        this.setRouter();
        uni.navigateTo({
          url: "/pageMy/reportDetail/reportDetail?id=" + item.Id,
        });
      }
    },
    getNode(content, isExpand) {
      return `<div style='-webkit-line-clamp: ${isExpand ? 9999 : 3};-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;'>${content}</div>`;
    },
    // 去往文章详情的
    setRouter() {
      this.tabBars.forEach((item) => {
        if (this.tabAct_id == item.CategoryId) {
          this.$store.commit("setRouterReport", item.MatchTypeName);
        }
      });
    },
    // 收藏
    async collectClick(item) {
      const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: this.$store.state.pageRouterReport });
      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() {
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    if (this.tabAct_id) {
      this.getCollectList();
    }
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    if (this.tabAct_id) {
      this.page_no = 1;
      this.refresh = true;
      this.getCollectList();
    }
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage() {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : this.titleReport,
      path: "/reportPages/IndustryReport/IndustryReport?id=" + this.industrialManagementId + "&tab=" + this.tabAct_id + "&tabs=" + this.pcTabActive,
    };
  },
};
</script>

<style lang="scss">
.industry-content {
  background-color: $uni-bg-color;
  .top-video-content {
    width: 100%;
    background-color: white;
    text-align: center;
    .industry-video-poster {
      border-radius: 8rpx 8rpx 0 0;
      height: 340rpx;
      width: 728rpx;
    }
    .industry-video {
      height: 340rpx;
      width: 728rpx;
    }

    .test {
      position: relative;
      span {
        position: absolute;
        left: 30rpx;
        bottom: 30rpx;
        color: white;
      }
    }
  }
  .title-tabs-content {
    position: sticky;
    top: 60rpx;
    left: 0;
    z-index: 99;
    margin-bottom: 20rpx;
    .top-bg-title {
      height: 60rpx;
      color: $uni-color-new;
      background-color: #edf4ff;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tab-content {
      width: 100%;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      padding: 30rpx 20rpx 0;
      .scroll-tab-item {
        position: relative;
        display: inline-block;
        height: 54rpx;
        line-height: 54rpx;
        padding: 0 23rpx;
        background: #f8f8fa;
        border-radius: 27px;
        color: #333;
        margin: 0rpx 20rpx 20rpx 0;

        .reg-text {
          position: absolute;
          top: -6rpx;
          right: -8rpx;
          width: 14rpx;
          height: 14rpx;
          background-color: #ff0000;
          border-radius: 50%;
        }
      }

      .active {
        color: $uni-color-new !important;
        background-color: #e5efff !important;
        font-weight: 600;
      }
    }
  }

  .collect-ul {
    padding-bottom: 50rpx;
    padding: 0 25rpx;
    .collect-ltem {
      display: flex;
      background: #fff;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      border-top: 4rpx solid $uni-color-new;
      .title {
        position: relative;
        max-width: 625rpx;
        color: #4a4a4a;
        font-size: 34rpx;
        padding-left: 28rpx;
        .reg-text {
          position: absolute;
          top: 15rpx;
          left: 0rpx;
          width: 14rpx;
          height: 14rpx;
          background-color: #ff0000;
          border-radius: 50%;
          z-index: 9;
        }
      }
      .item-more {
        width: 626rpx;
        padding: 0 10rpx 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #cecece;
        margin-top: 20rpx;
      }
    }
  }
  .is-track-follow {
    height: 60rpx;
    position: sticky;
    width: 100%;
    top: 0rpx;
    left: 0;
    z-index: 99;
  }
}
#industry-content {
  .industry-video-module {
    .global-video-box {
      .video-content {
        top: 400rpx !important;
      }
      .close-icon {
        top: 330rpx !important;
      }
    }
  }
}
.item-left {
  flex: 1;
  .item-more {
    padding-left: 20rpx;
  }
}
</style>