|
|
|
@ -3,19 +3,24 @@ |
|
|
|
<!-- 搜索栏 --> |
|
|
|
<view class="search-section"> |
|
|
|
<view class="search-bar"> |
|
|
|
<image class="search-icon" :src="showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png')"></image> |
|
|
|
<image |
|
|
|
class="search-icon" |
|
|
|
:src=" |
|
|
|
showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png') |
|
|
|
" |
|
|
|
></image> |
|
|
|
<input |
|
|
|
class="search-input" |
|
|
|
placeholder="搜索已关注的人" |
|
|
|
v-model="searchText" |
|
|
|
@input="handleSearch" |
|
|
|
@confirm="handleSearch" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 我的关注标题和排序 --> |
|
|
|
<view class="follows-header"> |
|
|
|
<text class="follows-title">我的关注 ({{ followsList.length||0 }})</text> |
|
|
|
<text class="follows-title">我的关注 ({{ totalCount || 0 }})</text> |
|
|
|
<!-- <view class="sort-option" @click="toggleSort"> |
|
|
|
<text class="sort-text">综合排序</text> |
|
|
|
<image class="sort-arrow" :src="showImg('/uploads/20250826/8e40deaa0bc67da3a9b104ff0e6b3e7c.png')"></image> |
|
|
|
@ -42,25 +47,52 @@ |
|
|
|
|
|
|
|
<!-- 关注用户列表 --> |
|
|
|
<view class="follows-list"> |
|
|
|
<!-- 加载状态 --> |
|
|
|
<view class="loading-state" v-if="loading"> |
|
|
|
<view class="loading-spinner"></view> |
|
|
|
<text class="loading-text">加载中...</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 空状态显示 --> |
|
|
|
<view class="empty-state" v-else-if="filteredFollowsList.length === 0"> |
|
|
|
<image |
|
|
|
class="empty-icon" |
|
|
|
:src=" |
|
|
|
showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png') |
|
|
|
" |
|
|
|
mode="aspectFit" |
|
|
|
></image> |
|
|
|
<text class="empty-text">{{ |
|
|
|
searchText ? "未找到相关用户" : "暂无关注" |
|
|
|
}}</text> |
|
|
|
<text class="empty-desc">{{ |
|
|
|
searchText ? "换个关键词试试吧" : "关注你感兴趣的人，获取更多精彩内容" |
|
|
|
}}</text> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="follow-item" |
|
|
|
v-for="(item, index) in filteredFollowsList" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<image class="user-avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image> |
|
|
|
<image |
|
|
|
class="user-avatar" |
|
|
|
:src=" |
|
|
|
item.followUserHeadimg || |
|
|
|
'https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png' |
|
|
|
" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<view class="user-info"> |
|
|
|
<text class="user-name">{{ item.name }}</text> |
|
|
|
<view class="update-tag" v-if="item.newItems > 0"> |
|
|
|
{{ item.newItems }}件商品上新 |
|
|
|
<text class="user-name">{{ item.followUserNickname }}</text> |
|
|
|
<view class="update-time"> |
|
|
|
{{ item.formatTime }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="action-buttons"> |
|
|
|
<view class="follow-status-btn"> |
|
|
|
已关注 |
|
|
|
</view> |
|
|
|
<!-- <view class="more-options" @click="showOptions(item)"> |
|
|
|
<view class="follow-status-btn"> 已关注 </view> |
|
|
|
<view class="more-options" @click="showOptions(item)"> |
|
|
|
<text class="more-dots">•••</text> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -71,9 +103,17 @@ |
|
|
|
<!-- 推荐用户区域 --> |
|
|
|
<view class="recommend-section" v-if="false"> |
|
|
|
<view class="recommend-header"> |
|
|
|
<view class="recommend-title" style="display: flex;align-items: center;"> |
|
|
|
你可能感兴趣的人 |
|
|
|
<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" :src="showImg('/uploads/20250826/f1422cbef4c33e8c21d9e7e805c8bad9.png')"></image> |
|
|
|
<view |
|
|
|
class="recommend-title" |
|
|
|
style="display: flex; align-items: center" |
|
|
|
> |
|
|
|
你可能感兴趣的人 |
|
|
|
<image |
|
|
|
style="width: 30rpx; height: 30rpx; margin-left: 10rpx" |
|
|
|
:src=" |
|
|
|
showImg('/uploads/20250826/f1422cbef4c33e8c21d9e7e805c8bad9.png') |
|
|
|
" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
<view class="close-btn" @click="closeRecommend"> |
|
|
|
<text class="close-text">关闭</text> |
|
|
|
@ -88,7 +128,7 @@ |
|
|
|
> |
|
|
|
<image |
|
|
|
class="user-avatar" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<view class="user-info"> |
|
|
|
@ -96,9 +136,7 @@ |
|
|
|
<text class="user-desc">{{ item.description }}</text> |
|
|
|
</view> |
|
|
|
<view class="action-buttons"> |
|
|
|
<view class="follow-btn" @click="followUser(item)"> |
|
|
|
关注 |
|
|
|
</view> |
|
|
|
<view class="follow-btn" @click="followUser(item)"> 关注 </view> |
|
|
|
<view class="dismiss-btn" @click="dismissUser(item)"> |
|
|
|
<text class="dismiss-text">×</text> |
|
|
|
</view> |
|
|
|
@ -116,29 +154,7 @@ export default { |
|
|
|
return { |
|
|
|
searchText: "", |
|
|
|
activeCategory: "all", |
|
|
|
followsList: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: "主理人—颜真卿", |
|
|
|
avatar: "/uploads/20250826/avatar1.png", |
|
|
|
newItems: 1, |
|
|
|
category: "merchant", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: "主理人—颜真卿", |
|
|
|
avatar: "/uploads/20250826/avatar1.png", |
|
|
|
newItems: 0, |
|
|
|
category: "merchant", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: "主理人—颜真卿", |
|
|
|
avatar: "/uploads/20250826/avatar1.png", |
|
|
|
newItems: 2, |
|
|
|
category: "user", |
|
|
|
}, |
|
|
|
], |
|
|
|
followsList: [], |
|
|
|
recommendList: [ |
|
|
|
{ |
|
|
|
id: 101, |
|
|
|
@ -153,32 +169,36 @@ export default { |
|
|
|
description: "介绍介绍介绍", |
|
|
|
}, |
|
|
|
], |
|
|
|
// 分页相关数据 |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
loading: false, |
|
|
|
hasMore: true, |
|
|
|
totalCount: 0, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
filteredFollowsList() { |
|
|
|
let filtered = this.followsList; |
|
|
|
|
|
|
|
// 按分类过滤 |
|
|
|
if (this.activeCategory !== "all") { |
|
|
|
filtered = filtered.filter( |
|
|
|
(item) => item.category === this.activeCategory |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
// 按搜索文本过滤 |
|
|
|
if (this.searchText.trim()) { |
|
|
|
filtered = filtered.filter((item) => |
|
|
|
item.name.toLowerCase().includes(this.searchText.toLowerCase()) |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
return filtered; |
|
|
|
// 直接返回关注列表，搜索过滤已由后端处理 |
|
|
|
return this.followsList; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 组件挂载时获取关注列表 |
|
|
|
this.getFollowList(); |
|
|
|
}, |
|
|
|
// 监听页面滚动到底部事件 |
|
|
|
onReachBottom() { |
|
|
|
this.loadMoreFollows(); |
|
|
|
}, |
|
|
|
// 下拉刷新 |
|
|
|
onPullDownRefresh() { |
|
|
|
this.getFollowList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleSearch() { |
|
|
|
// 搜索逻辑已在computed中处理 |
|
|
|
// 调用接口进行搜索 |
|
|
|
this.getFollowList(); |
|
|
|
}, |
|
|
|
|
|
|
|
toggleSort() { |
|
|
|
@ -193,9 +213,84 @@ export default { |
|
|
|
this.activeCategory = category; |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取关注列表数据 |
|
|
|
getFollowList(refresh = true) { |
|
|
|
let token = uni.getStorageSync("token1"); |
|
|
|
if (!token) { |
|
|
|
uni.showToast({ |
|
|
|
title: "请先登录", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
uni.navigateTo({ |
|
|
|
url: "/pages/login/login", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.loading) return; |
|
|
|
|
|
|
|
if (refresh) { |
|
|
|
this.pageNum = 1; |
|
|
|
this.hasMore = true; |
|
|
|
} |
|
|
|
|
|
|
|
this.loading = true; |
|
|
|
const params = { |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize: this.pageSize, |
|
|
|
}; |
|
|
|
|
|
|
|
// 如果有搜索文本，添加到请求参数中 |
|
|
|
if (this.searchText.trim()) { |
|
|
|
params.followUserNickname = this.searchText.trim(); |
|
|
|
} |
|
|
|
|
|
|
|
this.Post(params, "/framework/follow/followList", "DES") |
|
|
|
.then((res) => { |
|
|
|
if (res.code === 200 && res.rows) { |
|
|
|
const newItems = res.rows || []; |
|
|
|
|
|
|
|
if (this.pageNum === 1) { |
|
|
|
// 首次加载或刷新 |
|
|
|
this.followsList = newItems; |
|
|
|
this.totalCount = res.total || 0; |
|
|
|
} else { |
|
|
|
// 加载更多 |
|
|
|
this.followsList.push(...newItems); |
|
|
|
} |
|
|
|
|
|
|
|
// 判断是否还有更多数据 |
|
|
|
this.hasMore = newItems.length === this.pageSize; |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.msg || "获取关注列表失败", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error("获取关注列表失败:", error); |
|
|
|
uni.showToast({ |
|
|
|
title: "加载失败，请重试", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
this.loading = false; |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 加载更多关注数据 |
|
|
|
loadMoreFollows() { |
|
|
|
if (!this.loading && this.hasMore) { |
|
|
|
this.pageNum++; |
|
|
|
this.getFollowList(false); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
showOptions(item) { |
|
|
|
uni.showActionSheet({ |
|
|
|
itemList: ["取消关注", "举报", "拉黑"], |
|
|
|
itemList: ["取消关注"], |
|
|
|
success: (res) => { |
|
|
|
switch (res.tapIndex) { |
|
|
|
case 0: |
|
|
|
@ -213,14 +308,52 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
unfollowUser(item) { |
|
|
|
const index = this.followsList.findIndex((user) => user.id === item.id); |
|
|
|
if (index > -1) { |
|
|
|
this.followsList.splice(index, 1); |
|
|
|
uni.showToast({ |
|
|
|
title: "已取消关注", |
|
|
|
icon: "success", |
|
|
|
}); |
|
|
|
} |
|
|
|
uni.showModal({ |
|
|
|
title: "提示", |
|
|
|
content: "确定要取消关注该用户吗？", |
|
|
|
success: (res) => { |
|
|
|
if (res.confirm) { |
|
|
|
// 调用取消关注接口 |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
followUserId: item.followUserId, |
|
|
|
type: 2, // 2表示取消关注 |
|
|
|
}, |
|
|
|
"/framework/follow/followUser", |
|
|
|
"DES" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
if (res.code === 200) { |
|
|
|
// 从列表中移除 |
|
|
|
const index = this.followsList.findIndex( |
|
|
|
(user) => user.id === item.id |
|
|
|
); |
|
|
|
if (index > -1) { |
|
|
|
this.followsList.splice(index, 1); |
|
|
|
this.totalCount--; |
|
|
|
} |
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
title: "已取消关注", |
|
|
|
icon: "success", |
|
|
|
}); |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.msg || "取消关注失败", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error("取消关注失败:", error); |
|
|
|
uni.showToast({ |
|
|
|
title: "操作失败，请重试", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
reportUser(item) { |
|
|
|
@ -301,8 +434,8 @@ export default { |
|
|
|
height: 80rpx; |
|
|
|
|
|
|
|
.search-icon { |
|
|
|
width:32rpx ; |
|
|
|
height:32rpx ; |
|
|
|
width: 32rpx; |
|
|
|
height: 32rpx; |
|
|
|
margin-right: 16rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
@ -344,8 +477,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.sort-arrow { |
|
|
|
width:9rpx; |
|
|
|
height: 24rpx; |
|
|
|
width: 9rpx; |
|
|
|
height: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -359,19 +492,17 @@ export default { |
|
|
|
.tab-item { |
|
|
|
border-radius: 32rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 15rpx 30rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 15rpx 30rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: #00FFFF; |
|
|
|
color: #000000; |
|
|
|
|
|
|
|
background: #00ffff; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -380,6 +511,69 @@ font-size: 28rpx; |
|
|
|
.follows-list { |
|
|
|
padding: 0 32rpx; |
|
|
|
|
|
|
|
/* 加载状态样式 */ |
|
|
|
.loading-state { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 60rpx 0; |
|
|
|
|
|
|
|
.loading-spinner { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border: 4rpx solid #f3f3f3; |
|
|
|
border-top: 4rpx solid #00ffff; |
|
|
|
border-radius: 50%; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 空状态样式 */ |
|
|
|
.empty-state { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 100rpx 0; |
|
|
|
|
|
|
|
.empty-icon { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-desc { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
text-align: center; |
|
|
|
max-width: 80%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.follow-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -413,9 +607,13 @@ font-size: 28rpx; |
|
|
|
background: #f8f9fa; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 10rpx 12rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.update-time { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -427,10 +625,9 @@ font-size: 24rpx; |
|
|
|
.follow-status-btn { |
|
|
|
border-radius: 24rpx; |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
border: 2rpx solid #e5e5e5; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
|
|
|
|
border: 2rpx solid #e5e5e5; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.more-options { |
|
|
|
@ -467,7 +664,7 @@ font-size: 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #666666; |
|
|
|
margin-right: 10rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
@ -521,13 +718,12 @@ font-size: 24rpx; |
|
|
|
gap: 16rpx; |
|
|
|
|
|
|
|
.follow-btn { |
|
|
|
border: 2rpx solid #00FFFF; |
|
|
|
border: 2rpx solid #00ffff; |
|
|
|
border-radius: 24rpx; |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #000; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
font-size: 26rpx; |
|
|
|
color: #000; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.dismiss-btn { |
|
|
|
|
1054425342@qq.com
4 weeks ago
