horzi_rai_wxa/pages/purchaser/purchaser.vue

<template>
  <view class="container resear-container">
    <view class="top-content-box">
      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
    </view>
    <view class="resear-body">
      <view class="resear-banner-box">
        <view class="banner-box-left">
          <swiper autoplay :interval="4000" circular indicator-dots indicator-color="rgba(255, 255, 255, 0.43)" indicator-active-color="#ffffff">
            <swiper-item v-for="item in bannerDataList" :key="item.IndexImg" @click="bannerSwiperHandler(item)" class="swiper-item">
              <image :src="item.IndexImg"></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="banner-box-right">
          <image :src="researchBanner.IndexImg" @click="bannerSwiperHandler(researchBanner)"></image>
        </view>
      </view>
      <view class="purchaser-content-box">
        <view class="purchaser-content-box-head">
          <view class="content-box-head-title">
            <image src="https://hzstatic.hzinsights.com/cygx/icon/purchaser-report.png"></image>
            <text>近期报告更新</text>
          </view>
          <view class="content-box-head-more" @click="toReportTotal">
            <text>全部更新</text>
            <image src="https://hzstatic.hzinsights.com/cygx/icon/right-arrow-circle.png"></image>
          </view>
        </view>
        <view class="purchaser-content-box-body">
          <view class="purchaser-content-box-row" v-for="item in recentReportList" :key="item.ArticleId">
            <image class="recommend-icon" v-if="item.TopTime > 0" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/recommend_YX.png"></image>
            <text class="purchaser-content-row-tag" :style="{ padding: item.ArticleTypeName.length == 2 ? '4rpx 28rpx' : '4rpx 15rpx' }">
              {{ item.ArticleTypeName }}
            </text>
            <view class="purchaser-content-row-title" :style="{ marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }" @click="goDetail(item)">
              {{ item.Title }}
              <block v-if="item.SpecialTags">
                <text style="color: #90aeda" @click.stop="themeDetails(it, '月度收藏榜')" v-for="it in item.SpecialTags.split(',')" class="purchaser-content-row-object" :key="it">#{{ it }}</text>
              </block>
              <text v-for="it in item.List" class="purchaser-content-row-object" :key="it.IndustrialManagementId" @click.stop="themeDetails(it, '月度收藏榜')">#{{ it.IndustryName }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="purchaser-content-box">
        <view class="purchaser-content-box-head">
          <view class="content-box-head-title">
            <image src="https://hzstatic.hzinsights.com/cygx/icon/purchaser.png"></image>
            <text>研选活动</text>
          </view>
          <view class="content-box-head-more" @click="toActivityTotal">
            <text>查看全部</text>
            <image src="https://hzstatic.hzinsights.com/cygx/icon/right-arrow-circle.png"></image>
          </view>
        </view>

        <purchaserActivityList style="width: 682rpx" ref="purchaserActivityListRef">
          <view class="no-data-box">
            <view class="no-data">
              <image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png"></image>
              <text>暂无对应活动</text>
            </view>
            <view class="end-activity-text" @click="endActivity">已结束活动>></view>
          </view>
          <view class="end-activity-text" @click="endActivity" slot="finished">已结束活动>></view>
        </purchaserActivityList>
      </view>
    </view>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
    <view class="voting-entry" v-if="isShowImg && wholeShowListData.IsShowQuestionnaire">
      <image @click.stop="goThemeVoting" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/theme_voting.png"></image>
      <image @click.stop="isShowImg = false" class="close-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/close_voting.png"></image>
    </view>
    <Loading />
  </view>
</template>

<script>
import freeCharge from "@/components/freeCharge";
import SearchBar from "@/components/search-bar/searchBar.vue";
import purchaserActivityList from "@/components/activity/purchaserActivityList.vue";
import { purchaserApi } from "@/config/modules/purchaser.js";
import { Research, activity } from "@/config/api.js";
import { Throttle } from "@/config/util.js";

export default {
  components: { freeCharge, SearchBar, purchaserActivityList },
  data() {
    return {
      //==============================
      bannerDataList: [],
      researchBanner: {},
      recentReportList: [],
      isShowImg: true,
    };
  },
  methods: {
    getBannerData() {
      //获取banner信息
      purchaserApi.getPurchaserBanner().then((res) => {
        if (res.Ret === 200) {
          this.researchBanner = res.Data.ListB[0] || {};
          this.bannerDataList = res.Data.ListA || [];
        }
      });
    },

    async getRecentReportList() {
      // 获取最近更新报告
      const res = await Research.researchArticleNewList({
        PageSize: 5,
        CurrentIndex: 1,
        ArticleTypeIds: "",
      });
      if (res.Ret === 200) {
        this.recentReportList = res.Data.List || [];
      }
    },
    //去往文章详情页面
    goDetail(item) {
      if (item.IsSpecial == 1) {
        uni.navigateTo({ url: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + item.ArticleId });
        return;
      }

      this.$store.commit("setRouterReport", "月度收藏榜");
      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
    },
    //去往主题详情
    themeDetails(item, source) {
      if (item.IsSpecial == 1) return;
      uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source });
    },
    // 跳转研选已结束活动
    endActivity() {
      uni.navigateTo({
        url: "/pages-purchaser/finishedActivity/finishedActivity",
      });
    },
    // 宣传单跳转
    bannerSwiperHandler(item) {
      item.Path === "pages-purchaser/specialColumn/specialColumn" && this.getRecordTracking("研选专栏");
      uni.navigateTo({
        url: "/" + item.Path,
      });
    },
    toReportTotal() {
      uni.navigateTo({
        url: "/pages-purchaser/lastestReport/lastestReport",
      });
    },
    toActivityTotal() {
      uni.navigateTo({
        url: "/pages-purchaser/purchaserActivity/purchaserActivity",
      });
    },
    /* 搜索 */
    async goSearch() {
      uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?id=研选" + "&source=买方研选页面" });
    },
    // 去往投票详情
    goThemeVoting() {
      uni.navigateTo({
        url: "/pages-purchaser/themeVote/themeVote",
      });
    },
  },
  onLoad() {},
  onShow() {
    this.$store.commit("setRouterReport", "买方研选");
    this.getRecordTracking("买方研选");
    this.getBannerData();
    this.getRecentReportList();
    this.$refs.purchaserActivityListRef.reloadActivityList();
    this.isShowImg = true;
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "买方研选",
      path: "pages/purchaser/purchaser",
      success: (res) => {},
      fail: (err) => {},
    };
  },
  onReachBottom: Throttle(function () {
    if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
    this.$refs.purchaserActivityListRef.loadActivityMore();
  }),
};
</script>
<style lang="scss">
.resear-container {
  background-color: $uni-bg-color;
  .top-content-box {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding-left: 30rpx;
    background-color: white;
  }
  .resear-body {
    padding: 20rpx 34rpx;
    box-sizing: border-box;
    .resear-banner-box {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .banner-box-left {
        height: 110rpx;
        width: 448rpx;
        margin-right: 20rpx;
        swiper {
          height: 100%;
          width: 100%;
          image {
            height: 100%;
            width: 100%;
            border-radius: 8rpx;
          }
        }
      }
      .banner-box-right {
        image {
          height: 110rpx;
          width: 214rpx;
          vertical-align: bottom;
          border-radius: 8rpx;
        }
      }
    }
    .purchaser-content-box {
      margin-bottom: 20rpx;
      .purchaser-content-box-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #376cbb;
        .content-box-head-title {
          display: flex;
          align-items: center;
          image {
            height: 30rpx;
            width: 30rpx;
            margin-right: 10rpx;
          }
          text {
            font-weight: bold;
            color: #333333;
            font-size: 32rpx;
            line-height: 45rpx;
          }
        }
        .content-box-head-more {
          height: 36rpx;
          min-width: 120rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 36rpx;
          background-color: #e5efff;
          display: flex;
          align-items: center;
          text {
            font-size: 20rpx;
            line-height: 28rpx;
            font-weight: 400;
            color: #7990b1;
            margin-right: 4rpx;
          }
          image {
            height: 15rpx;
            width: 15rpx;
          }
        }
      }
      .purchaser-content-box-body {
        padding: 0 20rpx 20rpx;
        background-color: white;
        border-radius: 16rpx;
        border-top: 10rpx solid #8fa4c4;
        .purchaser-content-box-row {
          padding: 30rpx 0;
          border-bottom: solid 1px #dcdfe6;
          display: flex;
          align-items: flex-start;
          &:last-child {
            border-bottom: none;
          }
          .purchaser-content-row-tag {
            white-space: nowrap;
            // padding: 4rpx 15rpx;
            width: 110rpx;
            // min-width: 110rpx;
            height: 36rpx;
            color: white;
            font-size: 20rpx;
            line-height: 28rpx;
            font-weight: bold;
            border-radius: 38rpx;
            color: #928563;
            background-color: #f2e8cc;
            text-align: justify;
            text-justify: inter-ideograph; // IE兼容
            text-align-last: justify;
            margin-right: 8px;
            &:after {
              content: "";
              width: 110px;
              display: block;
            }
          }
          .purchaser-content-row-title {
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            line-height: 46rpx;
            .purchaser-content-row-object {
              color: #376cbb;
              display: inline-block;
              margin-left: 8rpx;
            }
          }
        }
      }
      .no-data-box {
        width: 682rpx;
        height: 710rpx;
        border-radius: 16rpx;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .no-data {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 40rpx;
          image {
            width: 412rpx;
            height: 380rpx;
            margin-bottom: 40rpx;
          }
          text {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #999999;
          }
        }
      }
      .end-activity-text {
        text-align: center;
        font-size: 24rpx;
        line-height: 34rpx;
        color: #376cbb;
      }
    }
  }
  .voting-entry {
    position: fixed;
    bottom: 200rpx;
    right: 10rpx;
    padding: 20rpx;
    z-index: 9;
    image {
      width: 126rpx;
      height: 134rpx;
    }
    .close-img {
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      z-index: 11;
    }
  }
  .recommend-icon {
    flex-shrink: 0;
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
  }
}
</style>
<style lang="scss">
wx-swiper .wx-swiper-dot {
  width: 6rpx;
  height: 6rpx;
  border-radius: 6rpx;
  margin-bottom: -16rpx;
}
</style>