horzi_rai_wxa/pages/reportForm/components/researchChoose.vue

<template>
	<view class="resear-container">
		<view class="theme">
			<view class="theme-title">最新主题</view>
			<view class="theme-item">
					<text @click="goDetail(item.IndustrialManagementId)" v-for="item in listNew" :key="item.IndustrialManagementId">{{item.IndustryName}}</text>
			</view>
		</view>
		<view class="author-list" v-for="item in dataList" :key="item.DepartmentId">
			<view class="author-item">
				<image :src="item.ImgUrl" @click="goDetail(item.DepartmentId,'作者')"></image>
				<text style="font-size: 28rpx;" @click="goDetail(item.DepartmentId,'作者')">{{item.NickName}}</text>
				<text class="attention  attention-cancel"  @click="reportFllowDepartment(item.DepartmentId)" v-if="item.IsMyFollow">取消关注</text>
				<text class="attention" @click="reportFllowDepartment(item.DepartmentId)" v-else>+关注</text>
				
			</view>
			<view class="label-item">
				<text v-for="key in item.List" :key="key.IndustrialManagementId" @click="goDetail(key.IndustrialManagementId)">{{key.IndustryName}}</text>
			</view>
		</view>
		<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1"/>
		<view class="bottom-env">
			【研选系列】是机构投资者分享研究内容和原创观点的平台，试行阶段，限时免费，欢迎有内容贡献意愿的客户联系18621268829了解参与方式
		</view>
	</view>
</template>

<script>
	import { Reports } from '@/config/api.js'
	import { Throttle } from '@/config/util.js'
	export default {
		props:{
			strategyIndex:{
				type:Number,
				required:true
			},
			tabAct:{
				type:Number,
				required:true
			},
			isNum:{
				type:Number,
				required:true
			},
			pageNumFather:{
				type:Number,
				default:'',
				required:true
			}
		},
		data() {
			return {
				dataList:[],
				pageSize:10,
				currentIndex:1,
				listNew:[],
				haveData:true,
				status:'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
				totalPage:''
			};
		},
		watch:{
			strategyIndex:{
				handler(val){
					if(val==5){
						this.industryListByDepartment()
					}
				},
				immediate:true
			},
			isNum:{
				handler(val){
					if(val > 1 && this.strategyIndex){
						if(this.status === 'nomore') return ;
						this.status = 'loading';
						this.page_no++;
						this.industryListByDepartment()
					}
				}
			},
			pageNumFather:{
				handler(val){
					if(val==1){
						this.page_no=1;
						this.dataList=[],
						this.listNew=[]
						this.industryListByDepartment()
					}
				}
			}
		},
		methods:{
			reportFllowDepartment(id){
				Reports.reportFllowDepartment({
					DepartmentId:id
				}).then(res=>{
					if(res.Ret == 200){
						this.dataList.forEach(item=>{
							if(item.DepartmentId==id){
								item.IsMyFollow=!item.IsMyFollow
							}
						})
						uni.showToast({
							title: res.Msg,
							duration: 2000
						});
					}
				})
			},
			industryListByDepartment(){
				Reports.industryListByDepartment({
					PageSize:this.pageSize,
					CurrentIndex:this.currentIndex,
					ChartPermissionId:this.tabAct
				}).then(res=>{
					if(res.Ret===200){
						this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
						this.totalPage = res.Data.Paging.Pages;//总页数
						this.listNew=res.Data.ListnNew ||[]
						if(this.page_no === 1) {
							this.dataList = res.Data.List || [];
							this.haveData = this.dataList.length ? true : false
							if(this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							} 
						}else {
							this.dataList = this.dataList.concat(res.Data.List)
						}
					}
				})
			},
			goDetail(id,genre=''){
				uni.navigateTo({
					url:'/reportPages/industrialReport/industrialReport?id=' + id +'&type=研选'+'&isGenre='+genre,
				});
			}
		}	
	}
</script>

<style lang="scss" scoped>
	.resear-container {
		padding: 220rpx 0 140rpx;
		background-color: #F7F7F7;
		.theme {
			padding: 30rpx 34rpx;
			background: #FFFFFF;
			.theme-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				color: #333333;
			}
			.theme-item {
				display: flex;
				flex-wrap: wrap;
				text {
					padding: 13rpx 45rpx;
					color: #2C83FF;
					font-size: 32rpx;
					background: #EBF4FF;
					border-radius: 35rpx;
					margin: 0 30rpx 30rpx 0;
				}
			}
		}
		.author-list {
			margin: 20rpx 0;
			padding: 20rpx  30rpx 20rpx 55rpx;
			background: #FFFFFF;
			display: flex;
			.author-item {
				height: 300rpx;
				padding: 20rpx 78rpx 20rpx 0;
				border-right: 2rpx solid #E5E5E5;
				text-align: center;
				image {
					width: 140rpx;
					height: 140rpx;
				}
				.attention {
					margin-top: 30rpx;
					padding: 4rpx 20rpx;
					font-size: 24rpx;
					border-radius: 30rpx;
					color: #FFFFFF ;
					background: #2C83FF;
				}
				.attention-cancel {
					color: #666666 !important;
					background: #F8F8FA !important;
				}
			}
			.label-item {
				padding: 26rpx 0 0 34rpx; 
				text {
					color: #2C83FF;
					font-size: 28rpx;
					margin-bottom: 30rpx;
				}
			}
		}
		.bottom-env {
			background: #F7F7F7;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 20rpx 50rpx;
			color: #999999;
			font-size: 26rpx;
		}
	}
</style>