app/pages/me/myFollows.nvue

<template>
	<view class="mpage">
		<view class="line"></view>
		<scroll-view
			scroll-y="true"
			@scrolltolower="pagingFollowsList"
		>
			<view
				class="user-wrapper"
				v-for="(f, index) in followsList"
				:key="f.vlogerId"
			>
				<view
					class="user-info"
					@click="goTovlogerInfo(f.vlogerId)"
				>
					<image
						class="face"
						:src="f.face"
					/>
					<text class="user-name">
						{{ f.nickname }}
					</text>
				</view>

				<view v-if="!from">
					<view
						v-if="f.bothFriend == 0"
						class="operator-wrapper"
					>
						<text
							class="operator-words"
							style="color: #ef274d"
							@click="cancelFollow(f)"
						>
							已关注
						</text>
					</view>
					<view
						v-if="f.bothFriend == 1"
						class="operator-wrapper"
					>
						<text
							class="operator-words"
							style="color: #ffffff"
							@click="cancelFollow(f)"
						>
							互关
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import { vlogFansCancel, vlogFansFollow, vlogQueryMyFollows } from '@/api/vlog';
import { isStrEmpty, clickFeedBack } from '@/utils/tools.js';
let system = uni.getSystemInfoSync();
export default {
	data() {
		return {
			userId: '',
			screenHeight: 0,
			page: 0,
			totalPage: 0,
			followsList: [],
			from: false,
			channelComment: null
		};
	},
	destroyed() {
		console.log('组件销毁');
		// 销毁时关闭 BroadcastChannel
		if (this.channelComment) {
			this.channelComment.close();
		}
	},
	onLoad(param) {
		this.channelComment = new BroadcastChannel('comment-counts');
		if (!isStrEmpty(param.userId)) {
			this.from = true;
			this.userId = param.userId;
		} else {
			var uinfo = storage.getVlogUserInfo();
			this.userId = uinfo.id;
		}
		this.queryMyFollowList(0);
	},
	methods: {
		goTovlogerInfo(vlogerId) {
			var id = storage.getVlogUserInfo().id;
			if (id == vlogerId) {
				uni.switchTab({
					url: 'me'
				});
			} else {
				uni.navigateTo({
					url: 'vlogerInfo?userPageId=' + vlogerId
				});
			}
		},
		// 关注, 取关后的list重新状态刷新设置
		reFreshList(vlogerId, status) {
			let me = this;
			let followsList = me.followsList;
			for (let i = 0; i < followsList.length; i++) {
				let vloger = followsList[i];
				if (vloger.vlogerId == vlogerId) {
					vloger.bothFriend = status;
					followsList.splice(i, 1);
				}
			}
			me.followsList = followsList;
		},
		async cancelFollow(item) {
			clickFeedBack();
			let me = this;
			let userId = this.userId;
			var data = {
				myId: userId,
				vlogerId: item.vlogerId
			};
			var result = await vlogFansCancel(data);
			console.log(result);
			if (result.data.status == 200) {
				me.reFreshList(item.vlogerId, 0);
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { flag: false, from: 'refresh', vlogerId: item.vlogerId, vlogId: item.vlogId }
				});
				this.channelComment.postMessage({
					type: 'comment-counts',
					data: { from: 'initGuanzhu' }
				});
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},
		async followMe(vlogerId) {
			clickFeedBack();
			let me = this;
			let userId = this.userId;
			let data = {
				myId: userId,
				vlogerId
			};
			var result = await vlogFansFollow(data);
			console.log(result);
			if (result.data.status == 200) {
				me.reFreshList(vlogerId, true);
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},
		async queryMyFollowList(page) {
			let me = this;
			page = page + 1;
			let userId = me.userId;
			var data = {
				myId: userId,
				page: page,
				pageSize: 10
			};
			var result = await vlogQueryMyFollows(data);
			if (result.data.status == 200) {
				let followsList = result.data.data.rows;
				let totalPage = result.data.data.total;
				me.followsList = me.followsList.concat(followsList);
				console.log(me.followsList);
				me.page = page;
				me.totalPage = totalPage;
			}
		},

		// 上滑分页粉丝列表
		pagingFollowsList() {
			if (this.page >= this.totalPage) {
				return;
			}
			this.queryMyFollowList(this.page);
		}
	}
};
</script>

<style scoped>
.face {
	align-items: center;
	width: 110rpx;
	height: 110rpx;
	border-radius: 100rpx;
	border-width: 2rpx;
	border-color: #f1f1f1;
}

.user-name {
	align-items: center;
	color: #ffffff;
	font-size: 30rpx;
	margin-left: 20rpx;
}

.mpage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;
}

.line {
	height: 1rpx;
	background-color: #393a41;
	width: 750rpx;
}

.user-wrapper {
	padding-left: 30rpx;
	padding-right: 30rpx;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	align-items: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.operator-wrapper {
	width: 140rpx;
	height: 60rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #ef274d;
	border-radius: 20rpx;
	align-items: center;
	border-width: 2rpx;
	border-color: #ef274d;
	background-color: #181b27;
}

.operator-words {
	align-items: center;
	font-size: 28rpx;
}
</style>