MoeNovaClient/pages/my/follow.vue

<template>
	<view class="page">
		<view class="tabs">
			<view class="tab" 
				:class="{ active: activeTab === 'follow' }" 
				@click="switchTab('follow')">关注</view>
			<view class="tab" 
				:class="{ active: activeTab === 'fans' }"
				@click="switchTab('fans')">粉丝</view>
		</view>
		
		<view class="follow-list">
			<view class="follow-item" v-for="(item, index) in currentList" :key="index">
				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view class="desc">{{item.description}}</view>
				</view>
				<button class="unfollow-btn" @click="toggleFollow(item)">
					{{item.isFollowing ? '取消关注' : '关注'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'follow', // 当前激活的标签
				followList: [
					{
						avatar: '/static/demo/avatar1.jpg',
						name: '冷落',
						description: 'AI设计师',
						isFollowing: true
					},
					{
						avatar: '/static/demo/avatar2.jpg',
						name: '雾里',
						description: '感谢你的关注，远方的陌生人',
						isFollowing: true
					}
				],
				fansList: [
					{
						avatar: '/static/demo/avatar3.jpg',
						name: '小明',
						description: '热爱生活的人',
						isFollowing: false
					},
					{
						avatar: '/static/demo/avatar4.jpg',
						name: '阳光',
						description: '摄影师',
						isFollowing: true
					}
				]
			}
		},
		computed: {
			// 根据当前标签返回对应的列表数据
			currentList() {
				return this.activeTab === 'follow' ? this.followList : this.fansList;
			}
		},
		methods: {
			// 切换标签
			switchTab(tab) {
				this.activeTab = tab;
			},
			toggleFollow(item) {
				item.isFollowing = !item.isFollowing;
				// 这里可以添加调用后端API的逻辑
			}
		}
	}
</script>

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