horzi_rai_wxa/pages/index/index.vue

<template>
  <page-meta :page-style="isMorningShow ? 'overflow: hidden;' : ''">
    <view class="container New-container">
      <view :class="[1 == 2 ? 'banne-content' : 'content-search']">
        <swiper v-if="1 == 2" autoplay :interval="4000" circular indicator-dots>
          <block v-for="item in banerList" :key="item.name">
            <swiper-item>
              <image :src="item.img"></image>
              <view class="banner-title">
                {{ item.name }}
                <text class="time"> 时间</text>
              </view>
            </swiper-item>
          </block>
        </swiper>
        <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="content-ul">
        <view class="item-ul">
          <block v-for="(item, index) in newDataList" :key="index">
            <view v-if="index % 2 == 0">
              <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'].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">
              <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'].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" />
      <view v-if="newDataList.length === 4" class="bind-btn" @click="goLogin">绑定联系方式后查看更多内容>></view>
      <!-- <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" /> -->
      <morning-dlg v-if="isMorningShow" :isMorningShow.sync="isMorningShow" :morningItem.sync="morningItem" />
    </view>
  </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";
export default {
  data() {
    return {
      newDataList: [],
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      refresh: false, //正在下拉
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      info: {},
      banerList: [
        {
          img: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/test/Group%20150.png",
          name: "test1",
        },
        {
          img: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/test/Group%20152.png",
          name: "test2",
        },
        {
          img: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/test/Group%20154.png ",
          name: "test3",
        },
      ],
      isMorningShow: false, // 晨会的弹框
      morningItem: {}, // 晨会的弹框
    };
  },
  components: {
    ChartItem,
    ReportItem,
    RoadshowItem,
    ActivityItem,
    SearchBar,
    MorningDlg,
    ItemContent,
  },
  methods: {
    // 获取最先数据
    async getNewList() {
      const res = await Home.getNewList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = !res.Data.Paging.IsEnd ? "loadmore" : "nomore";
        let listArr = [];
        res.Data.List &&
          res.Data.List.forEach((item) => {
            listArr.push({
              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,
            });
          });
        this.newDataList = this.page_no === 1 ? listArr : [...this.newDataList, ...listArr];
        if (this.refresh) {
          uni.stopPullDownRefresh();
          this.refresh = false;
        }
      }
    },
    // 微路演收藏
    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.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.navigateTo({
        url: "/pageMy/login/login",
      });
    },
    /* 搜索 */
    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;
    },
  },
  mounted() {
    uni.$on("updateNewList", (data) => {
      this.getNewList();
    });
  },
  onLoad() {
    this.getNewList();
  },
  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();
  },
  /** 用户点击分享*/
  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",
        imageUrl: "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png",
        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;
    }
  }

  .banne-content {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    height: 402rpx;
    width: 100%;
    overflow: hidden;
    swiper {
      height: 402rpx;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .banner-title {
      position: absolute;
      bottom: 80rpx;
      left: 20rpx;
      color: #fff;
      font-weight: 500;
      font-size: 50rpx;
      line-height: 70rpx;
      .time {
        font-size: 27rpx;
        line-height: 38rpx;
      }
    }
    .top-content-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
    }
    /deep/ .nav-bar-wrap {
      background-color: transparent;
    }
  }

  /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: 165rpx;
        height: 64rpx;
        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: #3385ff;
    line-height: 23rpx;
    padding-bottom: 100rpx;
  }
}
</style>