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(null)"></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">
            <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 }}
              <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>
    <!-- <view class="notice-content" v-if="wholeShowListData.YanXuan_Explain">
      <view class="notice">
        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/placard_icon.png"></image>
        <view class="notice-bar">
          <van-notice-bar color="#3385FF" background="#DFECFF" text="买方研选内容试行阶段，限时免费。也欢迎您向我们提宝贵建议。" />
        </view>
      </view>
    </view> -->
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
    <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: [],
    };
  },
  methods: {
    getBannerData() {
      //获取banner信息
      purchaserApi.getPurchaserBanner().then((res) => {
        console.log(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/specialColumn/specialColumn" });
        return;
      }

      this.$store.commit("setRouterReport", "月度收藏榜");
      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
    },
    //去往主题详情
    themeDetails(item, source) {
      uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source });
    },
    // 跳转研选已结束活动
    endActivity() {
      uni.navigateTo({
        url: "/pages-purchaser/finishedActivity/finishedActivity",
      });
    },
    // 宣传单跳转
    bannerSwiperHandler(item) {
      if (!item) {
        // 榜单
        uni.navigateTo({
          url: "/pages-purchaser/researchList/researchList",
        });
        return;
      }
      uni.navigateTo({
        url: "/" + item.Path,
      });
    },
    toReportTotal() {
      uni.navigateTo({
        url: "/pages-purchaser/lastestReport/lastestReport",
      });
    },
    toActivityTotal() {
      uni.navigateTo({
        url: "/pages-purchaser/purchaserActivity/purchaserActivity",
      });
    },
    /* 搜索 */
    async goSearch() {
      await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=研选" + "&source=买方研选页面");
    },
  },
  onLoad() {
    this.getBannerData();
    this.getRecentReportList();
    this.$refs.purchaserActivityListRef.reloadActivityList();
  },
  onShow() {
    this.$store.commit("setRouterReport", "买方研选");
    this.getRecordTracking("买方研选");
  },
  /**
   * 用户点击分享
   */
  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: #f3f5f9;
  .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: #3385ff;
        .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: #3385ff;
              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;
      }
    }
  }
  // .notice-content {
  //   position: sticky;
  //   left: 0;
  //   top: 200rpx;
  //   z-index: 99;
  //   width: 100%;
  //   background-color: #fff;
  //   padding-bottom: 20rpx;
  // }
  // .notice {
  //   height: 56rpx;
  //   overflow: hidden;
  //   background-color: #dfecff;
  //   display: flex;
  //   align-items: center;
  //   padding-left: 30rpx;
  //   image {
  //     width: 30rpx;
  //     height: 30rpx;
  //   }
  //   .notice-bar {
  //     flex: 1;
  //   }
  //   .van-notice-bar {
  //     height: 56rpx;
  //   }
  // }
}
</style>
<style lang="scss">
wx-swiper .wx-swiper-dot {
  width: 6rpx;
  height: 6rpx;
  border-radius: 6rpx;
  margin-bottom: -16rpx;
}
</style>