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.vlogerId)">
							已关注
						</text>
					</view>
					<view v-if="f.bothFriend==1" class="operator-wrapper">
						<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.vlogerId)">
							互关
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"; //缓存
	import {
		vlogFansCancel,
		vlogFansFollow,
		vlogQueryMyFollows
	} from "@/api/vlog"
	import {
		isStrEmpty
	} from '@/utils/tools.js'
	let system = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				userId: "",
				screenHeight: 0,
				page: 0,
				totalPage: 0,
				followsList: [],
				from: false
			};
		},
		onLoad(param) {
			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(vlogerId) {
				let me = this;
				let userId = this.userId;
				var data = {
					myId: userId,
					vlogerId
				}
				var result = await vlogFansCancel(data)
				console.log(result)
				if (result.data.status == 200) {
					me.reFreshList(vlogerId, 0);
				} else {
					uni.showToast({
						title: result.data.msg,
						icon: "none",
						duration: 3000,
					});
				}
			},
			async followMe(vlogerId) {
				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-self: center;
		width: 110rpx;
		height: 110rpx;
		border-radius: 100rpx;
		border-width: 2rpx;
		border-color: #f1f1f1;
	}

	.user-name {
		align-self: 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;

	}

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

	}

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