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="44">
            <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 class="content-my"> 我的 </view>
              </view>
            </template>
          </search-bar>
        </view>
      </view>
      <view class="banne-content" v-if="bannerDataList.length">
        <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
        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>
      <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'"> <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'">
                  <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'].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'"> <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'">
                  <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'].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/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>
  </page-meta>
</template>

<script>
import { Home, Mine } 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";
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: "",
    };
  },
  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;
    },
  },
  components: {
    ChartItem,
    ReportItem,
    RoadshowItem,
    ActivityItem,
    SearchBar,
    MorningDlg,
    ItemContent,
    videoModule,
    suspenButton,
  },
  methods: {
    // 获取最先数据
    async getNewList() {
      const res = await Home.getNewList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        TagIds: this.actIdLable,
      });
      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,
              Newchart: item.Newchart,
              Activity: item.Activity || item.Activityspecial,
              Roadshow: item.Roadshow || item.Activityvideo || item.Activityvoice,
              ThreeSummary: item.Researchsummary || item.Minutessummary || item.Meetingreviewchapt || item.ProductInterior,
            };
            listArr.push({ ...obj, IsShowData: obj.Article || obj.Newchart || obj.Roadshow || obj.Activity || obj.ThreeSummary });
          });
        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({
        Id: item.Id,
        SourceType: item.Type,
        PageRouter: this.$store.state.pageRouterReport,
      });
      if (res.Ret === 200) {
        let index = this.newDataList.findIndex((key) => key.Roadshow && key.Roadshow.Id == item.Id);
        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: "#3385FF",
        cancelColor: "#606266",
        success: function (res) {
          if (res.confirm) {
            //已授权未绑定
            uni.navigateTo({
              url: "/pageMy/login/login",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    /* 搜索 */
    goSearch() {
      this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive + "&source=首页页面");
    },
    async getUserInfo() {
      const res = await Mine.getInfo();
      if (res.Ret === 200) {
        this.info = res.Data;
      }
    },
    // 晨会弹框显示
    showMorningDialog(item) {
      console.log(item);
      if (item.Source == "meetingreviewchapt") {
        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) {
      let actId = [];
      this.$set(item, "isAct", !item.isAct);
      this.lableIsRows.forEach((item) => {
        item.forEach((_) => {
          _.isAct && actId.push(_.TagId);
        });
      });
      this.page_no = 1;
      this.actIdLable = actId.join(",");
      this.getNewList();
      if (!item.isAct) return;
      const res = await Home.tagAddHistory({
        TagId: item.TagId,
      });
    },
    // 或者标签内容
    async homeTagListCustom() {
      const res = await Home.homeTagListCustom();
      if (res.Ret === 200) {
        this.dataListLable = res.Data || [];
      }
    },
  },
  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: #f5f6fa;
  .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: 88rpx;
      width: 165rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      border-radius: 50%;
      image {
        width: 80rpx;
        height: 80rpx;
      }
      .content-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        z-index: 9;
      }
      .content-my {
        width: 163rpx;
        height: 64rpx;
        margin-left: 2rpx;
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        border-radius: 38rpx;
        color: #333333;
        font-size: 28rpx;
        padding-right: 18rpx;
        justify-content: flex-end;
      }
    }
  }

  .content-ul {
    padding: 30rpx 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: #3385ff;
    }
  }
  .lable-select-content {
    position: sticky;
    left: 0;
    top: 88px;
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
    background-color: #fff;
    padding: 10rpx 0 10rpx 20rpx;
    z-index: 9;

    .lable-row {
      display: flex;
    }
    .lable-item {
      flex-shrink: 0;
      padding: 8rpx 40rpx;
      background: #ffffff;
      border: 1rpx solid #dcdfe6;
      border-radius: 48rpx;
      margin-right: 20rpx;
      white-space: nowrap;
      margin-top: 20rpx;
    }
    .item-active {
      background: #3385ff;
      color: #fff;
    }
  }
}
</style>