yicangzongtai_app_240321/pages/research/community/myfollow.vue

<template>
	<view class="myfollow">
		<navbar ref="navbar" :config="config"></navbar>
		<view class="follow">
			<view v-if="myfollow.length>0">
			<view class="item" v-for="(item,index) in myfollow" :key="index" @click="goToDetail(item)">
				
				<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 class="cancel" @click.stop="cancelfollow(item)">
					取消关注
				</view>
					</view>
					<loadMore v-if="myfollow.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无关注~'}"></nodata>
		</view>
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	import {myConcerns} 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',
				},
				myfollow:[] 	,//我的关注列表
				params:{
					page:1,
					limit:10,
				},
				totalPage:null,
				currPage:1,
				status:"more",
				noData: false,
				loading: true,
				imgUrl: this.$mConfig.staticUrl
			}
		},
		
		onLoad(options) {
			console.log(options)
			this.params.userId = options.user_id
			this.getData()
		},
		//下拉刷新
		onPullDownRefresh(){
			this.params.page=1
			this.myfollow=[]
			this.getData()
		},
		//上拉加载
		onReachBottom(e){
			if(this.totalPage<=this.currPage){
				this.status = "noMore"
			}else{
				this.status="more"
				this.params.page++
				this.getData()
			}
		},
		
		methods:{
			goToDetail(item){
				console.log(item.user_id)
				uni.navigateTo({
					url:"../community/homepage?user_id="+item.user_id
				})
			},
			getData(){
				this.$http.get(myConcerns,this.params)
				.then(res=>{
					if(res&&res.code==200){
						this.loading = false
						uni.stopPullDownRefresh()
						this.myfollow = this.myfollow.concat(res.page.list)
						if(this.myfollow.length==0){
							this.noData = true
						}else{
							this.noData = false
						}
						this.totalPage = res.page.totalPage
						this.currPage = res.page.currPage
						if(res.page.totalPage<=res.page.currPage){
							this.status = "noMore";
						}else{
							this.status= "more"
						}
					}
				})
			},
			cancelfollow(e){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: `您确认要取消关注${e.nickname}吗？`,
				    success: async function (res) {
				        if (res.confirm) {
							let concerned_user_id =e.user_id
							that.$http.post("/concerns/cancel-concern",{
								concerned_user_id:concerned_user_id
							}).then(res=>{
								if(res&&res.code==200){
									that.$mUtil.toast("取消成功")
									that.myfollow.forEach((item,index) => {
										if(item.user_id == e.user_id) {
											that.myfollow.splice(index,1)
										}
									})
								}
							})
						}
					}
				})
			}
		},

	}
</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: #ffffff;
		font-size: 	28rpx;
		font-weight: Medium;
		background-color: #0B844A;
		border-radius: 32rpx;
		
	}
}

</style>