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 === 'follow' }" @click="switchTab('follow')">关注</view>
					<view class="tab" :class="{ active: activeTab === 'fans' }" @click="switchTab('fans')">粉丝</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" :src="item.avator"></CircleAvatar>
				<view class="info">
					<view class="top-box">
						<view class="name">{{ item.name }}</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.my_level }}</view>

					</view>
					<view class="desc">{{ item.description }}</view>
				</view>
				<view :class=" item.isFollowing ? 'unfollow-btn' : 'unfollow-btn active' " @click="toggleFollow(item)">
					<image src="../../static/me/wd_icon_guanzhu.png"></image>
					{{ item.isFollowing ? '取消关注' : '关注' }}
				</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: 'follow', // 当前激活的标签
			followList: [
				{
					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
					name: '冷落',
					description: 'AI设计师',
					isFollowing: true,
					sex_id: 1,
					my_level: 10
				},
				{
					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
					name: '雾里',
					description: '感谢你的关注，远方的陌生人',
					isFollowing: true,
					sex_id: 2,
					my_level: 210
				}
			],
			fansList: [
				{
					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
					name: '小明',
					description: '热爱生活的人',
					isFollowing: false,
					sex_id: 1,
					my_level: 20
				},
				{
					avatar: 'http://e.zhichao.art/upload/2025-03/a6e7f16b074da870527bf49b3c337555_new.png',
					name: '阳光',
					description: '摄影师',
					isFollowing: true,
					sex_id: 2,
					my_level: 30
				}
			]
		}
	},
	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>