|
|
@@ -1,18 +1,24 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
<view class="tabs">
|
|
|
- <view class="tab active">关注</view>
|
|
|
- <view class="tab">粉丝</view>
|
|
|
+ <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 followList" :key="index">
|
|
|
+ <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">取消关注</button>
|
|
|
+ <button class="unfollow-btn" @click="toggleFollow(item)">
|
|
|
+ {{item.isFollowing ? '取消关注' : '关注'}}
|
|
|
+ </button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -22,22 +28,52 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ activeTab: 'follow', // 当前激活的标签
|
|
|
followList: [
|
|
|
{
|
|
|
avatar: '/static/demo/avatar1.jpg',
|
|
|
name: '冷落',
|
|
|
- description: 'AI设计师'
|
|
|
+ description: 'AI设计师',
|
|
|
+ isFollowing: true
|
|
|
},
|
|
|
{
|
|
|
avatar: '/static/demo/avatar2.jpg',
|
|
|
name: '雾里',
|
|
|
- description: '感谢你的关注，远方的陌生人'
|
|
|
+ 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>
|
