yicangzongtai_app_240321/pages/research/community/myfans.vue

<template>
	<view class="my-fans">
		<navbar ref="navbar" :config="config"></navbar>
		<view class="my-fans">
		<view v-if="myFans.length>0">
			<view  @click="goToHomepage(item)" class="item" v-for="(item,index) in myFans" :key="index">

				<image v-if="item.head_photo" :src="item.head_photo" style="border-radius: 50%;" mode=""></image>
				<image  v-else :src="imgUrl+'/head-on.png'"style="border-radius: 50%;"  mode=""></image>
				<view class="name-and-time">
					<view class="name u-text-width">
						{{item.nickname}}
					</view>
					<view class="time">
						{{item.concern_time}}
					</view>
				</view>
				<view v-if="item.each_concern==1">
					<view class="cancel-one" @click.stop="follow(item)">
						互相关注
					</view>
				</view>
				<view v-if="item.each_concern==0">
					<view class="cancel" @click.stop="follow(item)">
						点击关注
					</view>
				</view>

				</view>
				<loadMore v-if="myFans.length>0" :status="status"></loadMore>
			</view>
			<nodata v-else :config="{top:20,content:'暂无粉丝~'}"></nodata>
		</view>
	</view>
</template>

<script>
	import {myFans} from "../../../api/userInfo.js"
	export default{
		data(){
			return{
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '我的粉丝',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A',
					
				},
				myFans:[]		,//我的粉丝列表
				params:{
					page:1,
					limit:10,
				},
				status:"more",
				loading:true,
				noData:false,
				totalPage:null,
				currPage:1,
				fabulousNum:null,
				imgUrl: this.$mConfig.staticUrl
			}
		},
		// created() {
		// 	this.$http.get(myFans)
		// 	.then(res=>{
		// 		console.log(res)
		// 	})
		// },
		onLoad(options) {
			this.params.userId = options.user_id
			this.getList()
		},
		//下拉刷新
		onPullDownRefresh(){
			this.params.page=1
			this.myFans=[]
			this.getList()
		},	
		//上拉加载
		onReachBottom(e){
			if(this.totalPage<=this.currPage){
				this.status="noMore"
			}else{
				this.status="more"
				this.params.page++
				this.getData()
			}

		},
		methods:{
			//跳转个人页面
			goToHomepage(item){
				uni.navigateTo({
					url:"./homepage?user_id="+item.user_id
				})
			},
			//获取数据
			getList(){
				this.$http.get(myFans,this.params).then(res=>{
					if(res&&res.code==200){
						uni.stopPullDownRefresh()
						this.loading=false;
						this.myFans=this.myFans.concat(res.page.list)
						if(this.myFans.length==0){
							this.noData = true
						}else{
							this.noData=false
						}
						this.totalPage = res.page.totalPage
						this.currPage = res.page.currPage
						if(this.totalPage<=this.currPage){
							this.status="noMore";
						}else{
							this.status="more"
						}
						
					}
				})
			},
			rest(){
				this.params.page=1
				this.myFans=[]
			},
			
			follow(item){
				let id = item.user_id
				if(item.each_concern==0){
					this.$http.post("/concerns/concern",{
						concerned_user_id:id
					}).then(res=>{
						if(res&&res.code==200){
							item.each_concern = 1
							this.$mUtil.toast("关注成功")
						}
					})
				}
				if(item.each_concern==1){
					this.$http.post("/concerns/cancel-concern",{
						concerned_user_id:id
					}).then(res=>{
						if(res&&res.code==200){
							item.each_concern=0
							this.$mUtil.toast("已取消关注")
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
.item{
	margin: 30rpx 30rpx 40rpx 30rpx;
	display: flex;
	padding-bottom:40rpx;
	align-items: center;
	border-bottom: 1rpx solid #E6E6E6;
	image{
		width: 100rpx;
		height: 100rpx;
	}
	.name-and-time{
		flex: 1;
		margin-left: 28rpx;
		.name{
			color: #1A1A1A;
			font-size: 28rpx;
			font-weight: Regular;
		}
		.time{
			color: #999999;
			font-size: 24rpx;
			font-weight: Regular;
			margin-top: 10rpx;
		}
	}
	.cancel{
		padding: 12rpx 34rpx;
		color: #D5C49B;
		font-size: 	28rpx;
		font-weight: Medium;
		background-color: #0B844A;
		border-radius: 32rpx;
	}
	.cancel-one{
		padding: 12rpx 34rpx;
		color: #0B844A;
		font-size: 	28rpx;
		font-weight: Medium;
		background-color: #FFFFFF;
		border: 2rpx solid #0B844A;
		border-radius: 32rpx;
	}
}

</style>