horzi_rai_wxa/pages-purchaser/lastestReport/lastestReport.vue

<template>
  <view class="lastest-report-container">
    <view class="announcement">
      <view class="checkbox-content">
        <van-checkbox-group class="checkbox-ui" :value="newCheckboxValue" @change="checkboxChange">
          <van-checkbox style="margin-right: 30rpx; flex-shrink: 0" shape="square" icon-size="14" :name="item.ArticleTypeId" v-for="item in checkboxGroup" :key="item.ArticleTypeId">
            {{ item.ArticleTypeName }}
          </van-checkbox>
        </van-checkbox-group>
      </view>
      <view class="content-ul">
        <blok v-if="haveData">
          <view class="global_card_content user-li" v-for="item in collectionList" :key="item.ArticleId">
            <view class="li-item">
              <image class="recommend-icon" v-if="item.ArticleTypeId > 0" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/recommend_YX.png"></image>

              <text class="li-type global_content_center">
                {{ item.ArticleTypeName }}
              </text>
              <view>
                <text class="global_title" @click="goDetail(item)" :style="{ display: 'inline', marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }">{{ item.Title }}</text>
                <block v-if="item.SpecialTags">
                  <text style="color: #90aeda" @click="themeDetails(key, '月度收藏榜')" v-for="it in item.SpecialTags.split(',')" class="li-industry" :key="it">#{{ it }}</text>
                </block>
                <text class="li-industry" @click="themeDetails(key, '月度收藏榜')" v-for="key in item.List" :key="key.IndustrialManagementId"> # {{ key.IndustryName }} </text>
              </view>
            </view>
            <view class="li-bottom" style="color: #999999">
              <viwe class="time-user">
                <view class="time">
                  {{ item.PublishDate }}
                </view>
                <view class="li-user" @click="authorDetails(item)">
                  <image class="user_report-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/user_report.png"></image>
                  <text class="text_oneLine"> {{ item.NickName }}</text>
                </view>
              </viwe>

              <view class="user-img">
                <view class="img-box">
                  <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/examine_icon.png"></image>
                  <text>
                    {{ item.Pv }}
                  </text>
                </view>
                <view class="img-box" @click="collectClick(item)">
                  <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_act.png"></image>
                  <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_ico.png"></image>
                  <text class=""> {{ item.CollectNum }} </text>
                </view>
              </view>
            </view>
          </view>
        </blok>
        <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>暂无活动</text>
        </view>
      </view>
      <u-loadmore :status="status" :load-text="loadText" v-if="page_no > 1" />
    </view>
    <Loading />
  </view>
</template>

<script>
import { Research } from "@/config/api.js";
import purchaserReportListMixins from "../components/purchaser-report-list-mixins.js";
export default {
  data() {
    return {
      collectionList: [], //用户收藏
      newCheckboxValue: [],
      checkboxGroup: [],
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      page_no: 1,
      pageSize: 10,
      haveData: true,
    };
  },
  // purchaserReportListMixins 混入了 收藏、作者详情、文章详情、主题详情-method
  mixins: [purchaserReportListMixins],
  onLoad(option) {
    this.researchArticleTypeList();
    // this.researchArticleNewList()
    this.loadShare(option);
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "最新报告",
      path: "pages-purchaser/lastestReport/lastestReport?ArticleTypeIds=" + this.newCheckboxValue.join(","),
    };
  },
  methods: {
    loadShare(option) {
      this.newCheckboxValue = option.ArticleTypeIds ? option.ArticleTypeIds.split(",") || [] : [];
      this.researchArticleNewList();
    },
    // 复选框组的选择事件
    checkboxChange(e) {
      this.newCheckboxValue = e.detail;
      this.page_no = 1;
      this.researchArticleNewList();
    },
    // 获取最新下的文章类型
    async researchArticleTypeList() {
      const res = await Research.researchArticleTypeList();
      if (res.Ret === 200) {
        this.checkboxGroup = res.Data.List;
      }
    },
    // 获取最新的文章列表
    async researchArticleNewList() {
      const res = await Research.researchArticleNewList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        ArticleTypeIds: this.newCheckboxValue.join(","),
      });
      if (res.Ret === 200) {
        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
        this.collectionList = this.page_no === 1 ? res.Data.List || [] : [...this.collectionList, ...res.Data.List];
        if (this.page_no == 1) {
          this.haveData = this.collectionList.length ? true : false;
        }
      }
    },
  },
  onReachBottom() {
    if (this.status == "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.researchArticleNewList();
  },
};
</script>

<style lang="scss" scoped>
.lastest-report-container {
  background-color: $uni-bg-color;
  box-sizing: border-box;
  padding: 116rpx 30rpx 30rpx;
  .checkbox-content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    // height: 80rpx;
    background-color: #fff;
    padding: 30rpx;
  }

  /deep/ .van-checkbox-group {
    display: flex;
    overflow: hidden;
    overflow-x: auto;
  }
  .content-ul {
    margin: 20rpx 0 0;
    border-top: 1px solid #f6f6f6;
    .user-li,
    .kol-li,
    .hot-li {
      margin-bottom: 20rpx;
      background-color: #fff;
    }
    .li-serial {
      width: 26rpx;
      height: 26rpx;
      line-height: 26rpx;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      margin: 7rpx 10rpx 0 20rpx;
      flex-shrink: 0;
    }
    .serial-number {
      margin-top: 0 !important;
    }
    .li-item {
      display: flex;
      .li-industry {
        color: $uni-color-new;
        margin-left: 20rpx;
        display: inline-block;
        font-size: 32rpx;
        font-weight: 600;
      }

      .li-title {
        display: flex;
      }
      .recommend-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 15rpx;
      }
    }
    .li-type {
      width: 126rpx;
      height: 42rpx;
      color: #928563;
      font-size: 24rpx;
      font-weight: 500;
      border-radius: 38rpx;
      background-color: #f2e8cc;
      flex-shrink: 0;
      margin-right: 10rpx;
    }
    .kol-item {
      display: flex;
      flex-wrap: wrap;
      width: 480rpx;
      height: 120rpx;
      align-items: baseline;
      margin-bottom: 20rpx;

      .item-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 29rpx;
        font-weight: 700;
      }

      .kol-text {
        width: 50%;
        margin-top: 10rpx;
        flex-shrink: 0;
        font-size: 24rpx;
        font-weight: 400;
        color: #333;
      }
    }
    .li-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30rpx;
      width: 100%;
      font-size: 24rpx;
      .user-img {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 39%;
        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 10rpx;
        }
        view {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          margin-left: 20rpx;
        }
        .user-pv {
          width: 30rpx;
          height: 30rpx;
        }
      }
      .time-user {
        display: flex;
        align-items: center;
        flex: 1;
        .time {
          width: 200rpx;
        }
        view {
          display: flex;
          align-items: center;
          flex-shrink: 0;
        }
        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 10rpx;
        }
      }
    }
    .read-more {
      margin-top: 10rpx;
      display: flex;
      flex-wrap: wrap;
      .industry-video-item {
        height: 106rpx;
        width: 150rpx;
        margin: 0 10rpx 10rpx 0;
        border-radius: 8rpx;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        font-weight: 500;
        font-size: 24rpx;
        color: white;
        line-height: 45rpx;
        padding: 20rpx;
        position: relative;
        overflow: hidden;

        .industry-video-icon {
          height: 0rpx;
          width: 0rpx;
          border-style: solid;
          border-color: #376cbb #376cbb transparent transparent;
          border-width: 28rpx;
          position: absolute;
          right: 0;
          top: 0;
          image {
            position: absolute;
            right: -24rpx;
            bottom: 0;
            height: 20rpx;
            width: 20rpx;
          }
        }
      }
      .text-box {
        padding: 0;
        margin: 0 10rpx 10rpx 0;
        font-size: 24rpx;
        color: $uni-color-new;
        width: 150rpx;
        height: 48rpx;
        text-indent: 0em;
        line-height: 48rpx;
        text-align: center;
        background-color: #f8f8fa;
        border-radius: 200rpx;
      }
    }
    .hot-item {
      justify-content: space-between;
      align-items: center;
      .hot-new {
        align-items: center;
        flex: 1;
        padding-right: 20rpx;
      }
      .new-img {
        width: 26rpx;
        height: 28rpx;
        margin-left: 15rpx;
        flex-shrink: 0;
      }
    }
  }

  .kol-li {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin: 0 20rpx 0 15rpx;
      overflow: hidden;
      flex-shrink: 0;
    }
  }
  .content-bottom {
    background-color: $uni-bg-color;
    text-align: center;
    line-height: 100rpx;
    color: #c4c4c4;
    font-size: 20rpx;
  }
  .industry-color {
    font-size: 26rpx;
    padding: 0rpx 20rpx;
    border-radius: 4rpx;
    margin-left: 20rpx;
  }
  .follw {
    color: #fff;
    border-radius: 4rpx;
    font-size: 24rpx;
    width: 110rpx;
    height: 42rpx;
    background-color: $uni-color-new;
  }
  .cancel-follw {
    background-color: #e5efff;
    color: $uni-color-new;
  }
}
</style>
<style lang="scss"></style>