horzi_rai_wxa/pages/reportForm/components/researchChoose.vue

<template>
	<view class="resear-container" v-if="haveResearch">
		<view class="theme">
			<view class="theme-title">最新主题关键词</view>
			<view class="theme-item">
					<text @click="goDetail(item,'标的')" v-for="item in listNew" :key="item.ArticleId">{{item.IndustryName}}</text>
			</view>
		</view>
		<view class="author-list" v-for="item in dataList" :key="item.DepartmentId">
			<view class="author-item">
                <view class="img-box">
                    <image :src="item.ImgUrl" @click="goDetail(item,'作者')"></image>
                </view>
				<text style="font-size: 28rpx;margin-top: 5rpx;" @click="goDetail(item,'作者')">{{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="val in item.List" :key="val.ArticleId" @click="goDetail(val)">{{val.IndustryName}}</text>   
			</view>
            <view class="lucency">
                <image src="../../../static/img/broadside-ico.png" mode=""></image>
            </view>
		</view>
		<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1"/>
		<view class="bottom-env">
			【研选系列】是机构投资者分享研究内容和原创观点的平台，试行阶段，限时免费，欢迎有内容贡献意愿的客户联系对口销售了解参与方式
		</view>
        <u-modal v-model="goFollowShow" :content-style="{fontSize: '32rpx'}" @confirm="goFollowShowBtn"
        	:show-cancel-button="isCancelBtn" :confirm-text="confirmText" @cancel="isCancelBtn=false"
             :show-title="false" :cancel-style="{borderRight:'1rpx solid #EBEBEB'}"
             :confirm-style="{fontWeight: '700'}">
        	<view class="slot-content">
        		<rich-text :nodes="accounts"></rich-text>
        	</view>
        </u-modal>
	</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,
				page_no:1,
				listNew:[],
				haveData:true,
				status:'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
				totalPage:'',
                haveResearch:false,
                goFollowShow:false,
                accounts:'',
                confirmText:'知道了',
                isCancelBtn:false,
			};
		},
		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){
                        console.log(11);
						this.page_no=1;
						this.dataList=[],
						this.listNew=[]
						this.industryListByDepartment()
                        this.$parent.pageNumFather=''
					}
				}
			}
		},
		methods:{
			reportFllowDepartment(id){
				Reports.reportFllowDepartment({
					DepartmentId:id
				}).then(res=>{
					if(res.Ret == 200){
                       if(res.Data.Status==1){
                           this.goFollowShow=true
                           this.confirmText =  res.Data.GoFollow ? '去关注':'知道了'
                           if(res.Data.GoFollow){
                               this.accounts=`作者关注成功 <br> 想要及时获取该作者新发报告时的消息推送，请关注【弘则研究】公众号`
                               this.isCancelBtn=true
                           }else {
                               this.accounts='作者关注成功，该作者发布新的报告时，【弘则研究】公众号会为您推送微信消息提醒'
                           }
                       }else {
                           uni.showToast({
                           	title: '已取消关注',
                           	duration: 2000,
                            icon:'none'
                           });
                       }
						this.dataList.forEach(item=>{
							if(item.DepartmentId==id){
								item.IsMyFollow=!item.IsMyFollow
							}
						})
						
					}
				})
			},
			industryListByDepartment(){
				Reports.industryListByDepartment({
					PageSize:this.pageSize,
					CurrentIndex:this.page_no,
					ChartPermissionId:this.tabAct
				}).then(res=>{
					if(res.Ret===200){
                        this.haveResearch=res.Data.HaveResearch
                        if(!res.Data.HaveResearch){
                            this.$util.modalShow('','您暂无查看研选权限','',()=>{
                                uni.reLaunch({
                                     url:'/pages/index/index'
                                 })
                            })
                        }                    
						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(item,genre=''){
                const {ArticleId,IndustrialManagementId,DepartmentId} = item
                let id =  IndustrialManagementId || ''
                let article = ArticleId || ''
                let genreId = DepartmentId || ''
				uni.navigateTo({
					url:'/reportPages/industrialReport/industrialReport?id=' + id + '&idArticle=' + article + '&idGenre='+genreId +'&type=研选'+'&isGenre='+genre,
				});
			},
            goFollowShowBtn(){
                if(this.confirmText=='去关注') {
                    uni.navigateTo({
                        url: '/activityPages/accountsOfficial/accountsOfficial'
                    })
                }
                this.goFollowShow=false
            }
		}	
	}
</script>

<style lang="scss" scoped>
	.resear-container {
		padding: 220rpx 0 0;
		background-color: #F7F7F7;
		.theme {
			padding: 30rpx 34rpx 0 ;
            margin-bottom: 20rpx;
			background: #FFFFFF;
			.theme-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				color: #333333;
			}
			.theme-item {
				display: flex;
				flex-wrap: wrap;
				text {
                    box-sizing: border-box;
					padding: 13rpx 45rpx;
					color: #2C83FF;
					font-size: 28rpx;
					background: #EBF4FF;
					border-radius: 35rpx;
					margin: 0 30rpx 30rpx 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow:ellipsis;
				}
			}
		}
		.author-list {
            position: relative;
			margin-bottom: 10rpx;
			padding: 20rpx  30rpx 20rpx 55rpx;
			background: #FFFFFF;
			display: flex;
			.author-item {
				height: 240rpx;
				padding: 0rpx 78rpx 0rpx 0;
				border-right: 2rpx solid #E5E5E5;
				text-align: center;
                .img-box {
                    width: 140rpx;
                    height: 140rpx;
                    overflow: hidden;
                    border-radius: 10rpx;
                    image {
                    	width: 100%;
                    	height: 100%;
                    }
                }
				
				.attention {
					margin-top: 6rpx;
					padding: 4rpx 20rpx;
					font-size: 24rpx;
					border-radius: 30rpx;
					color: #FFFFFF ;
					background: #2C83FF;
				}
				.attention-cancel {
					color: #666666 !important;
					background: #F8F8FA !important;
				}
			}
			.label-item {
				padding: 10rpx 0 0 34rpx; 
                overflow: hidden;
                white-space: nowrap;
				text {
					color: #2C83FF;
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}
			}
            .lucency {
                position: absolute;
                top: 0;
                right: 0;
                width: 80rpx;
                height: 100%;
               image {
                   width: 100%;
                   height: 100%;
               }
            }
		}
		.bottom-env {
			background: #F7F7F7;
			padding: 10rpx 50rpx;
			color: #999999;
			font-size: 26rpx;
		}
	}
</style>