horzi_rai_wxa/pages/index/index.vue

<template>
  <page-meta :page-style="isMorningShow ? 'overflow: hidden;' : ''">
    <view class="container New-container">
      <view :class="['content-search', bannerClass && 'banne-bg', bannerPosition && 'banner-Position']">
        <view class="top-content-box">
          <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="58">
            <template slot="content-left">
              <view class="box-img" @click="goMyInfo">
                <view class="content-img">
                  <image v-if="info.Headimgurl" :src="info.Headimgurl" alt=""></image>
                  <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar"></image>
                </view>
              </view>
            </template>
          </search-bar>
        </view>
      </view>
      <view class="banne-content" v-if="bannerDataList.length > 0">
        <swiper autoplay :interval="4000" circular indicator-dots>
          <view v-for="item in bannerDataList" :key="item.BannerId" @click="bannerSwiperHandler(item)">
            <swiper-item>
              <image :src="item.IndexImg"></image>
              <view class="banner-title">
                <text class="text_twoLine" :style="{ 'font-size': item.Subtitle.length > 24 ? '45rpx' : '50rpx' }">
                  {{ item.Title }}
                </text>
                <text class="time text_twoLine"> {{ item.Subtitle }}</text>
              </view>
            </swiper-item>
          </view>
        </swiper>
      </view>
      <view class="lable-select-box" v-if="industryTablList.length > 0">
        <view class="global_two_tabs industry-box-tabs">
          <view
            :class="['item', item.ChartPermissionId == industrytabActId && 'tabs-active']"
            v-for="(item, index) in industryTablList"
            :key="item.ChartPermissionId"
            @click="toggleIndustryTab(item, index)"
          >
            {{ item.PermissionName }}
          </view>
        </view>
        <view
          v-if="isTopHeight"
          class="lable-select-content"
          :style="[{ top: isTopHeight }, { 'background-color': isScrollNumber >= 175 ? '#fff' : '#f5f6fa' }, { 'box-shadow': isScrollNumber >= 175 ? '0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16)' : '' }]"
        >
          <view class="lable-row" v-for="(item, index) in lableIsRows" :key="index">
            <view :class="['lable-item', lable.isAct && 'item-active']" v-for="lable in item" :key="lable.TagId" @click="lableKeysHandler(lable)">
              {{ lable.TagName }}
            </view>
          </view>
        </view>
      </view>
      <block v-if="newDataList && newDataList.length">
        <view class="content-ul">
          <view class="item-ul">
            <block v-for="(item, index) in newDataList" :key="index">
              <view v-if="index % 2 == 0 && item.IsShowData">
                <block v-if="item.Source === 'article' || item.Source === 'yanxuanspecial'"> <ReportItem :list="item.Article" /></block>
                <block v-if="item.Source === 'newchart'">
                  <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
                </block>
                <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice' || item.Source === 'askserievideo'">
                  <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
                </block>
                <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
                  <ActivityItem :list="item.Activity" />
                </block>
                <block v-if="['researchsummary', 'minutessummary', 'meetingreviewchapt', 'productinterior', 'reportselection'].includes(item.Source)">
                  <item-content :list="dataListItem(item)" @showMorningDialog="showMorningDialog" />
                </block>
              </view>
            </block>
          </view>
          <view class="item-ul">
            <block v-for="(item, index) in newDataList" :key="index">
              <view v-if="index % 2 !== 0 && item.IsShowData">
                <block v-if="item.Source === 'article' || item.Source === 'yanxuanspecial'"> <ReportItem :list="item.Article" /></block>
                <block v-if="item.Source === 'newchart'">
                  <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
                </block>
                <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice' || item.Source === 'askserievideo'">
                  <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
                </block>
                <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
                  <ActivityItem :list="item.Activity" />
                </block>
                <block v-if="['researchsummary', 'minutessummary', 'meetingreviewchapt', 'productinterior', 'reportselection'].includes(item.Source)">
                  <item-content :list="dataListItem(item)" @showMorningDialog="showMorningDialog" />
                </block>
              </view>
            </block>
          </view>
        </view>
        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
      </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 style="">暂无数据</text>
      </view>
      <!-- <view v-if="newDataList.length === 4" class="bind-btn">
        <view @click="goLogin"> 为了给您提供更好的使用体验，<br />请 <text class="login-text">登录</text>后再查看此页面内容</view>
      </view> -->
      <morning-dlg v-if="isMorningShow" :isMorningShow.sync="isMorningShow" :morningItem.sync="morningItem" />
    </view>
    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" ref="suspenButton">
      <template slot="center">
        <image mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/most_confidential.png "> </image>
      </template>
      <template slot="top">
        <image @click.stop="goSecretDetail(1)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/company_icon.png"> </image>
      </template>
      <template slot="left">
        <image @click.stop="goSecretDetail(3)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/week_summary.png"> </image>
      </template>
    </suspenButton>
    <Loading />
    <videoModule :showVideoPop.sync="showVideoPopUp" :videoPopList="videoPopListUp" />
    <view v-if="showAudioBox">
      <audioModule :showAudioPop.sync="showAudioPop" />
    </view>
  </page-meta>
</template>

<script>
import { Home, Mine, Reports } from "@/config/api";
import ChartItem from "@/components/ItemComponent/chartItem.vue";
import ReportItem from "@/components/ItemComponent/reportItem.vue";
import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
import ActivityItem from "@/components/ItemComponent/activityItem.vue";
import SearchBar from "@/components/search-bar/searchBar.vue";
import MorningDlg from "./components/morningDlg.vue";
import ItemContent from "./components/ItemContent.vue";
import videoModule from "@/components/videoModule/index";
import suspenButton from "@/components/suspen_button.vue";
import audioModule from "@/components/audioModule/index";

export default {
  data() {
    return {
      newDataList: [],
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      refresh: false, //正在下拉
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      info: {},
      isMorningShow: false, // 晨会的弹框
      morningItem: {}, // 晨会的弹框
      bannerDataList: [], // banner数据
      showVideoPopUp: false, //
      videoPopListUp: {},
      isScrollNumber: 0,
      dataListLable: [], // 标签的数据
      actIdLable: "", // 标签选择后的ID
      isTopHeight: "",
      lableArrList: [],
      showAudioPop: false,
      industryTablList: [],
      industrytabActId: 0,
    };
  },
  computed: {
    bannerClass() {
      //判断banner的样式
      return this.bannerDataList.length > 0 && this.isScrollNumber < 235;
    },
    bannerPosition() {
      return this.bannerDataList.length > 0;
    },
    lableIsRows() {
      //处理标签的样式
      const numTags = this.dataListLable.length;
      const rows = [];

      if (numTags <= 4) {
        rows.push(this.dataListLable);
      } else if (numTags > 4 && numTags <= 8) {
        const firstRow = this.dataListLable.slice(0, 4);
        const secondRow = this.dataListLable.slice(4);
        rows.push(firstRow, secondRow);
      } else if (numTags >= 9) {
        const firstRow = this.dataListLable.filter((_, index) => index % 2 === 0);
        const secondRow = this.dataListLable.filter((_, index) => index % 2 !== 0);
        rows.push(firstRow, secondRow);
      }

      return rows;
    },
    showAudioBox() {
      return this.$store.state.audioBg.parseIntShow;
    },
  },
  components: {
    ChartItem,
    ReportItem,
    RoadshowItem,
    ActivityItem,
    SearchBar,
    MorningDlg,
    ItemContent,
    videoModule,
    suspenButton,
    audioModule,
  },
  methods: {
    // 获取最先数据
    async getNewList() {
      const res = await Home.getNewList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        TagIds: this.actIdLable,
        ChartPermissionId: this.industrytabActId,
      });
      if (res.Ret === 200) {
        this.status = !res.Data.Paging.IsEnd ? "loadmore" : "nomore";
        let listArr = [];
        res.Data.List &&
          res.Data.List.forEach((item) => {
            let obj = {
              Source: item.Source,
              Article: item.Article || item.YanxuanSpecial,
              Newchart: item.Newchart,
              Activity: item.Activity || item.Activityspecial,
              Roadshow: item.Roadshow || item.Activityvideo || item.Activityvoice || item.AskserieVideo,
              ThreeSummary: item.Researchsummary || item.Minutessummary || item.Meetingreviewchapt || item.ProductInterior || item.ReportSelection,
            };
            listArr.push({ ...obj, IsShowData: obj.Article || obj.Newchart || obj.Roadshow || obj.Activity || obj.ThreeSummary || item.YanxuanSpecial });
          });
        this.newDataList = this.page_no === 1 ? listArr : [...this.newDataList, ...listArr];
        if (this.refresh) {
          uni.stopPullDownRefresh();
          this.refresh = false;
        }
      }
    },
    // 微路演收藏
    async isCollectionHandeler(item) {
      await this.$store.dispatch("showLoginModal");
      const res = await Home.microRoadshowCollect({
        SourceId: item.SourceId,
        SourceType: item.Type,
        PageRouter: this.$store.state.pageRouterReport,
      });
      if (res.Ret === 200) {
        let index = this.newDataList.findIndex((key) => key.Roadshow && key.Roadshow.SourceId == item.SourceId && key.Roadshow.Type == item.Type);
        res.Data.Status == 1 ? (this.newDataList[index].Roadshow.IsCollect = true) : (this.newDataList[index].Roadshow.IsCollect = false);
        uni.showToast({
          title: res.Msg,
          duration: 2000,
        });
      }
    },
    // 跳转到我的页面
    goMyInfo() {
      uni.navigateTo({
        url: "/pageMy/myPage/myPage",
      });
    },
    // 跳转绑定页面
    goLogin() {
      uni.showModal({
        title: "即将前往登录页面，请确认是否继续",
        content: "为了给您提供更好的使用体验，请登录后再进行查看或操作",
        confirmColor: "#376cbb",
        cancelColor: "#606266",
        success: function (res) {
          if (res.confirm) {
            //已授权未绑定
            uni.navigateTo({
              url: "/pageMy/login/login",
            });
          } 
        },
      });
    },
    /* 搜索 */
    goSearch() {
      uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive + "&source=首页页面" });
    },
    async getUserInfo() {
      const res = await Mine.getInfo();
      if (res.Ret === 200) {
        this.info = res.Data;
      }
    },
    // 晨会弹框显示
    async showMorningDialog(item) {
      if (item.Source == "meetingreviewchapt") {
        const res = await Reports.morning_meeting_history({ Id: item.Id, SourcePage: "首页" });
        this.isMorningShow = true;
        this.morningItem = item;
      }
    },
    dataListItem(item) {
      let obj = item.ThreeSummary ? { ...item.ThreeSummary, Source: item.Source } : {};
      return obj;
    },
    /* 绝密标签点击后的跳转 */
    goSecretDetail(type) {
      if (type == 1) {
        uni.navigateTo({
          url: "/reportPages/keyCompany/keyCompany",
        });
      } else {
        uni.navigateTo({
          url: "/reportPages/secretDetails/secretDetails",
        });
      }
      this.$refs.suspenButton.onOpen();
    },
    // 获取banner 列表
    async getBannerList() {
      const res = await Home.bannerList();
      if (res.Ret === 200) {
        this.bannerDataList = res.Data.List || [];
      }
    },
    // bannaer 点击事件
    async bannerSwiperHandler(item) {
      let { Type, SourceId, Path } = item.BannerUrlResp;
      if (Type == 1) return;
      await Home.bannerHistory({
        BannerId: item.BannerId,
      });
      if (Type == 5) {
        let obj = {
          BackgroundImg: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png",
          Id: SourceId,
          PlaySeconds: "15",
          ResourceUrl: "https://hzstatic.hzinsights.com/static/yb/video/8617330c2a76e0c35999f6466b4470c4.mp4",
          Title: "三分钟了解弘则研究体系和方法论",
          Type: "三分钟了解弘则研究体系和方法论",
        };
        this.videoPopListUp = obj;
        this.showVideoPopUp = true;
        await Mine.addHistory();
      } else {
        Path &&
          uni.navigateTo({
            url: Path + SourceId,
          });
      }
    },
    async lableKeysHandler(item) {
      const checkList = item.CheckList;
      if (item.isAct) {
        item.isAct = false;
        this.lableArrList = this.lableArrList.filter((key) => checkList.includes(key));
        this.getLableDataList();
        return;
      }
      let isFlag = false; //是否有交集
      for (let e of checkList) {
        if (this.lableArrList.includes(e)) {
          isFlag = true;
          break;
        }
      }

      if (!isFlag) {
        this.lableArrList = [...this.lableArrList, ...checkList];
        item.isAct = true;
      } else {
        //有交集
        // 找到有交集的那个 设置为false 然后将点击的这个设置为true
        this.lableIsRows.forEach((e1) => {
          e1.forEach((e2) => {
            let flag = false;
            for (let i of e2.CheckList) {
              if (this.lableArrList.includes(i)) {
                flag = true;
                break;
              }
            }
            if (flag) {
              e2.isAct = false;
            }
          });
        });

        item.isAct = true;
      }
      this.getLableDataList();
      if (!item.isAct) return;
      const res = await Home.tagAddHistory({
        TagId: item.TagId,
      });
    },
    getLableDataList() {
      let actId = [];
      this.lableIsRows.forEach((item) => {
        item.forEach((_) => {
          _.isAct && actId.push(_.TagId);
        });
      });
      this.page_no = 1;
      this.actIdLable = actId.join(",");
      this.getNewList();
    },
    // 或者标签内容
    async homeTagListCustom() {
      const res = await Home.homeTagListCustom();
      if (res.Ret === 200) {
        this.dataListLable = res.Data.List || [];
        this.industryTablList = res.Data.ListPermission || [];
      }
    },
    // 行业选择的筛选
    toggleIndustryTab(item) {
      if (this.industrytabActId === item.ChartPermissionId) {
        this.industrytabActId = 0;
      } else {
        this.industrytabActId = item.ChartPermissionId;
      }
      this.page_no = 1;
      this.getNewList();
    },
  },
  mounted() {
    uni.$on("updateNewList", (data) => {
      this.page_no = 1;
      this.getNewList();
    });
  },
  onLoad() {
    this.getBannerList();
    this.getNewList();
    this.homeTagListCustom();
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.isTopHeight = menuButtonInfo.height + menuButtonInfo.top + 7 + "px";
  },
  onShow() {
    this.getUserInfo();
    this.getRecordTracking("首页");
    this.$store.commit("setRouterActivity", "首页");
    this.$store.commit("setRouterReport", "首页");
  },
  // 加载数据
  onReachBottom() {
    if (this.status === "nomore" || this.newDataList.length < 8) return;
    this.status = "loading";
    this.page_no++;
    this.getNewList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page_no = 1;
    this.refresh = true;
    this.getNewList();
  },
  onPageScroll(val) {
    this.isScrollNumber = val.scrollTop;
  },
  /** 用户点击分享*/
  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,
      };
    } else {
      return {
        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "弘则研究—聚焦·前瞻·客观·深度",
        path: "/pages/index/index",
        success: (res) => {},
        fail: (err) => {},
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.New-container {
  background-color: $uni-bg-color;
  .content-search {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    .top-content-box {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
    }
  }
  .banner-Position {
    position: fixed !important;
  }
  .banne-bg {
    /deep/ .nav-bar-wrap {
      background-color: transparent;
    }
  }
  .banne-content {
    height: 402rpx;
    width: 100%;
    overflow: hidden;
    swiper {
      height: 402rpx;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .banner-title {
      position: absolute;
      bottom: 35rpx;
      left: 20rpx;
      color: #fff;
      font-weight: 500;
      line-height: 65rpx;
      min-height: 160rpx;
      max-height: 225rpx;
      overflow: hidden;
      .time {
        font-size: 28rpx;
        line-height: 39rpx;
      }
    }
    .top-content-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
    }
  }

  /deep/ .nav-bar-wrap {
    padding-left: 35rpx;
    .box-img {
      position: relative;
      height: 64rpx;
      width: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      border-radius: 50%;
      image {
        width: 64rpx;
        height: 64rpx;
      }
      .content-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        z-index: 9;
      }
    }
  }

  .content-ul {
    padding: 20rpx 10rpx;
    display: flex;
    justify-content: space-between;
    .item-ul {
      width: 49%;
      &:first-child {
        margin-right: 10rpx;
      }
    }
  }
  .bind-btn {
    padding-top: 110rpx;
    text-align: center;
    font-size: 24rpx;
    color: #333;
    line-height: 39rpx;
    padding-bottom: 100rpx;
    .login-text {
      display: inline-block;
      color: #376cbb;
    }
  }
  .lable-select-box {
    position: sticky;
    left: 0;
    top: 88px;
    z-index: 9;
    width: 100%;
  }
  .lable-select-content {
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
    background-color: #fff;
    padding: 10rpx 0 20rpx 20rpx;
    .lable-row {
      display: flex;
      font-size: 24rpx;
    }
    .lable-item {
      flex-shrink: 0;
      padding: 8rpx 40rpx;
      background: #ffffff;
      border: 1rpx solid #dcdfe6;
      border-radius: 39rpx;
      margin-right: 20rpx;
      white-space: nowrap;
      margin-top: 20rpx;
      color: #999999;
    }
    .item-active {
      border: none;
      font-weight: 500;
      background: #e5efff;
      color: $uni-color-new;
    }
  }
  .industry-box-tabs {
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx;
    .item {
      background-color: #f8f8fa;
      border-radius: 200rpx;
      height: 64rpx;
    }
  }
}
</style>