horzi_rai_wxa/pages/index/index.vue

<template>
  <view class="container New-container">
    <view class="top-content-box">
      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
        <view class="box-img" @click="goMyInfo">
          <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" @click="goSearch">
          <icon type="search" size="15" class="search_ico" />
          <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
        </view>
      </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>
          </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>
          </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>
  </view>
</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";
export default {
  data() {
    return {
      newDataList: [],
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      refresh: false, //正在下拉
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      info: {},
    };
  },
  components: {
    ChartItem,
    ReportItem,
    RoadshowItem,
    ActivityItem,
  },
  methods: {
    //获取胶囊位置
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    // 获取最先数据
    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,
            });
          });
        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;
      }
    },
  },
  mounted() {
    uni.$on("updateNewList", (data) => {
      this.getNewList();
    });
  },
  onLoad() {
    this.initNavBar();
    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;
  .top-content-box {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }
  .nav-bar-wrap {
    background-color: #fff;
    width: 100%;
    padding-left: 35rpx;
    display: flex;
    align-items: center;
    .content {
      position: relative;
      display: flex;
      align-items: center;
      width: 55%;
      height: 63rpx;
      font-size: 30rpx;
      color: #8d8d8d;
      background-color: #f3f3f3;
      padding-left: 33rpx;
      border-radius: 70rpx;
      .sea_ipt {
        padding-left: 15rpx;
      }
    }
    .box-img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64rpx;
      height: 64rpx;
      margin-right: 20rpx;
      border-radius: 50%;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .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>