我的关注页面

xiangpei

2025-07-04 a3e2d496e80dd4f5331978b1ad4805a1714c8df4

我的关注页面

 api/user.js

@@ -77,3 +77,16 @@
  });
}

/**
 * 我的关注分页
 * 
 * @param params
 */
 export function mySubscribePage(params) {
  return http.request({
    url: "/lmk/my-subscribe/page",
    method: Method.GET,
    needToken: true,
    params: params
  });
}

 pages.json

@@ -827,6 +827,14 @@
                            "u-loadmore": "view"
                        }
                    }
                },
                {
                    "path" : "myAttention",
                    "style" : 
                    {
                        "navigationBarTitleText" : "关注列表",
                        "enablePullDownRefresh": true
                    }
                }
            ]
        },

 pages/mine/myAttention.vue

New file
@@ -0,0 +1,132 @@
<template>
  <view class="container">

    <view class="user-list">
      <view class="user-item" v-for="(user, index) in followList" :key="user.id">
        <image class="avatar" :src="user.subscribeUserAvatar" @click="jumpToHome(user.subscribeUserId)" mode="aspectFill"></image>
        <text class="nickname">{{user.subscribeUserNickname}}</text>
        <button class="unfollow-btn" @click="handleUnfollow(user.subscribeUserId)">取消关注</button>
      </view>
      
      <view v-if="followList.length === 0" class="empty-tip">
        <text>您还没有关注任何用户</text>
      </view>
    </view>
  </view>
</template>

<script>
    import {mySubscribePage} from "@/api/user.js"
    import {unSubscribe} from "@/api/video.js"
export default {
  data() {
    return {
      followList: [],
      query: {
          pageNumber: 1,
          pageSize: 10
      }
    }
  },
  onPullDownRefresh() {
      this.query.pageNumber = 1
    this.getFollowList()
  },
  onLoad() {
    // 页面加载时获取关注列表
    this.getFollowList();
  },
  methods: {
    // 获取关注列表
    getFollowList() {
      mySubscribePage(this.query).then(res => {
          this.followList = res.data.data
      })
    },
    // 取消关注
    handleUnfollow(userId) {
      unSubscribe(userId).then(res => {
          this.getFollowList()
      })
    },
    // 跳转TA的主页
    jumpToHome(authorId) {
        uni.navigateTo({
            url: `/pages/video/home-page?authorId=${authorId}`
        })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.header {
  padding: 30rpx 0;
  text-align: center;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.user-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .user-item {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .nickname {
    flex: 1;
    font-size: 32rpx;
    color: #333;
  }
  
  .unfollow-btn {
    margin: 0;
    padding: 0 20rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    
    &::after {
      border: none;
    }
  }
  
  .empty-tip {
    padding: 40rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #999;
  }
}
</style>

 pages/tabbar/user/my.vue

@@ -78,7 +78,7 @@
          </view>
          <view>视频主页</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/mine/myCollect')">
        <view class="order-item" @click="navigateTo('/pages/mine/myAttention')">
          <view>
            <text class="iconfont">&#xe66f;</text>
          </view>