horzi_rai_wxa/pages-purchaser/lastestReport/lastestReport.vue

<template>
	<view class="lastest-report-container">
		<view class="announcement" >
			<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 class="content-ul">
		    <blok v-if="haveData">
		      <view class="user-li" v-for="(item, index) in collectionList" :key="item.ArticleId">
		        <view class="li-item">
		          <text class="li-type" :style="{ background: item.ButtonStyle }">
		            {{ item.ArticleTypeName }}
		          </text>
		          <view>
		            <text
		              class="title"
		              @click="goDetail(item)"
		              :style="{ display: 'inline', marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }"
		              >{{ item.Title }}</text
		            >
		            <text class="li-industry" @click="themeDetails(key, '月度收藏榜')" v-for="key in item.List" :key="key.IndustrialManagementId">
		              # {{ key.IndustryName }}
		            </text>
		          </view>
		        </view>
		        <view class="li-item li-bottom" style="color: #999999">
		          <viwe class="time-user">
		            <text>
		              {{ item.PublishDate }}
		            </text>
		            <view class="li-user" @click="authorDetails(item)">
		              <image class="user_report-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
		              <text class="text_oneLine"> {{ item.NickName }}</text>
		            </view>
		          </viwe>
		
		          <view class="li-item user-img">
		            <view class="img-box">
		              <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/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/cygx/czbk/collect_act.png"></image>
		              <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/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>
	@import "../components/purchaser-report-list.scss";
	.lastest-report-container{
		background-color: #f7f7f7;
		padding-top: 20rpx;
		box-sizing: border-box;
		.checkbox-ui {
			width: 100%;
			padding: 30rpx 0;
			overflow: hidden;
			overflow-x: auto;
			display: flex;
			border-bottom: 1rpx solid #ececec;
		}
	}
</style>
<style lang="scss">
	.van-checkbox-group {
	  display: flex;
	  flex-wrap: wrap;
	}
	
</style>