MoeNovaClient/pages/my/follow.vue

<template>
	<view class="page">
		<PageHeader title="" style="border: 1px solid #F2F6F2;">
			<template slot="center">
				<view class="tabs">
					<view class="tab" :class="{ active: activeTab === 'following' }" @click="switchTab('following')">关注
					</view>
					<view class="tab" :class="{ active: activeTab === 'followers' }" @click="switchTab('followers')">粉丝
					</view>
				</view>
			</template>
		</PageHeader>
		<view style="height: 90rpx;"></view>

		<view class="follow-list">
			<view class="follow-item" v-for="(item, index) in currentList" :key="index">
				<CircleAvatar class="avator" v-if="item.avator" :src="item.avator"></CircleAvatar>
				<view class="info">
					<view class="top-box">
						<view class="name">{{ item.nickname }}</view>

						<image src="../../static/icon/wd_icon_nan.png" mode="widthFix" v-if="item.sex_id == 1" />
						<image src="../../static/icon/wd_icon_nv.png" mode="widthFix" v-else-if="item.sex_id == 2" />
						<view class="level">Lv{{ item.level }}</view>

					</view>
					<view class="desc">{{ item.description }}</view>
				</view>
				<view :class="item.is_attention ? 'unfollow-btn' : 'unfollow-btn active'" @click="toggleFollow(item)">
					<image src="../../static/me/wd_icon_guanzhu.png"></image>
					{{ item.is_attention ? '取消关注' : '关注' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import PageHeader from '@/components/PageHeader/PageHeader.vue';
import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";

export default {
	components: {
		PageHeader,
		CircleAvatar
	},
	data() {
		return {
			activeTab: 'following', // 当前激活的标签
			followList: [],
			fansList: [],
			isLoadingFollow: false, // 是否正在加载关注列表
			hasMoreFollow: true, // 是否有更多关注数据可加载
			followOffset: 0,

		}
	},
	computed: {
		// 根据当前标签返回对应的列表数据
		currentList() {
			return this.activeTab === 'following' ? this.followList : this.fansList;
		}
	},
	onLoad() {
		this.switchTab('following');
	},
	methods: {
		// 切换标签
		switchTab(tab) {
			if (tab) {
				this.activeTab = tab;
			}
			this.isLoadingFollow = false // 是否正在加载关注列表
			this.hasMoreFollow = true // 是否有更多关注数据可加载
			this.followOffset = 0
			// 加载对应的数据
			this.loadFollowList();

		},
		toggleFollow(item) { 
			//  关注的逻辑
			uni.request({
				url: this.$apiHost + '/Member/attention',
				data: {
					uuid: getApp().globalData.uuid,
					id: item.user_id,
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("关注结果:", res.data);
					uni.showToast({
						title: res.data.str,
						icon: 'none'
					});
					if (res.data.success === "yes") {
						item.is_attention = !item.is_attention;
					}
				},
				fail: (e) => {
					console.log("关注失败:", e);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
			// 这里可以添加调用后端API的逻辑
		},
		loadFollowList() {
			if (this.isLoadingFollow) return;
			this.isLoadingFollow = true;
			// 关系类型: following(我关注的用户) 或 followers(关注我的用户) 
			uni.request({
				url: this.$apiHost + "/User/getAttentions",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
					offset: this.followOffset,
					type: this.activeTab,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log("用户列表数据:", res.data);
					// 确保在任何情况下都完成加载
					if (
						res.data.success == "yes" &&
						res.data.list &&
						res.data.list.length > 0
					) {
						// 只有当列表有数据时才追加
						if (this.activeTab == 'following') {
							this.followList = [...this.followList, ...res.data.list];
						}
						if (this.activeTab == 'followers') {
							this.fansList = [...this.fansList, ...res.data.list];
						}
						this.followOffset += res.data.list.length;

						if (res.data.list.length < 20) {
							this.hasMoreFollow = false;
						}
					} else {
						// 如果列表为空，确保标记没有更多数据
						this.hasMoreFollow = false;
					}

					// 无论是否有数据，都需要通知z-paging组件完成刷新

				},
				complete: () => {
					this.isLoadingFollow = false;
				},
				fail: (e) => {
					this.isLoadingFollow = false;

				},
			});
		},
	}
}
</script>

<style scoped lang="scss">
@import 'follow.scss';
</style>