<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>
|
