1054425342@qq.com
2 months ago
14 changed files with 1810 additions and 919 deletions
@ -0,0 +1,553 @@ |
|||
<template> |
|||
<view class="follow-tab-container"> |
|||
<!-- 搜索栏 --> |
|||
<view class="search-section"> |
|||
<view class="search-bar"> |
|||
<image class="search-icon" :src="showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png')"></image> |
|||
<input |
|||
class="search-input" |
|||
placeholder="搜索已关注的人" |
|||
v-model="searchText" |
|||
@input="handleSearch" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 我的关注标题和排序 --> |
|||
<view class="follows-header"> |
|||
<text class="follows-title">我的关注 ({{ followsList.length }})</text> |
|||
<view class="sort-option" @click="toggleSort"> |
|||
<text class="sort-text">综合排序</text> |
|||
<image class="sort-arrow" :src="showImg('/uploads/20250826/8e40deaa0bc67da3a9b104ff0e6b3e7c.png')"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 分类导航 --> |
|||
<view class="category-tabs"> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ active: activeCategory === 'all' }" |
|||
@click="switchCategory('all')" |
|||
> |
|||
全部 |
|||
</view> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ active: activeCategory === 'merchant' }" |
|||
@click="switchCategory('merchant')" |
|||
> |
|||
商家 |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 关注用户列表 --> |
|||
<view class="follows-list"> |
|||
<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> |
|||
<view class="user-info"> |
|||
<text class="user-name">{{ item.name }}</text> |
|||
<view class="update-tag" v-if="item.newItems > 0"> |
|||
{{ item.newItems }}件商品上新 |
|||
</view> |
|||
</view> |
|||
<view class="action-buttons"> |
|||
<view class="follow-status-btn"> |
|||
已关注 |
|||
</view> |
|||
<view class="more-options" @click="showOptions(item)"> |
|||
<text class="more-dots">•••</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 推荐用户分隔线 --> |
|||
<view class="divider-line"></view> |
|||
|
|||
<!-- 推荐用户区域 --> |
|||
<view class="recommend-section"> |
|||
<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> |
|||
<view class="close-btn" @click="closeRecommend"> |
|||
<text class="close-text">关闭</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="recommend-list"> |
|||
<view |
|||
class="recommend-item" |
|||
v-for="(item, index) in recommendList" |
|||
:key="item.id" |
|||
> |
|||
<image |
|||
class="user-avatar" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="user-info"> |
|||
<text class="user-name">{{ item.name }}</text> |
|||
<text class="user-desc">{{ item.description }}</text> |
|||
</view> |
|||
<view class="action-buttons"> |
|||
<view class="follow-btn" @click="followUser(item)"> |
|||
关注 |
|||
</view> |
|||
<view class="dismiss-btn" @click="dismissUser(item)"> |
|||
<text class="dismiss-text">×</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "FollowTab", |
|||
data() { |
|||
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", |
|||
}, |
|||
], |
|||
recommendList: [ |
|||
{ |
|||
id: 101, |
|||
name: "颜真卿", |
|||
avatar: "/uploads/20250826/avatar1.png", |
|||
description: "介绍介绍介绍", |
|||
}, |
|||
{ |
|||
id: 102, |
|||
name: "颜真卿", |
|||
avatar: "/uploads/20250826/avatar1.png", |
|||
description: "介绍介绍介绍", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
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; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleSearch() { |
|||
// 搜索逻辑已在computed中处理 |
|||
}, |
|||
|
|||
toggleSort() { |
|||
// 切换排序方式 |
|||
uni.showToast({ |
|||
title: "排序功能开发中", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
|
|||
switchCategory(category) { |
|||
this.activeCategory = category; |
|||
}, |
|||
|
|||
showOptions(item) { |
|||
uni.showActionSheet({ |
|||
itemList: ["取消关注", "举报", "拉黑"], |
|||
success: (res) => { |
|||
switch (res.tapIndex) { |
|||
case 0: |
|||
this.unfollowUser(item); |
|||
break; |
|||
case 1: |
|||
this.reportUser(item); |
|||
break; |
|||
case 2: |
|||
this.blockUser(item); |
|||
break; |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
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", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
reportUser(item) { |
|||
uni.showToast({ |
|||
title: "举报功能开发中", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
|
|||
blockUser(item) { |
|||
uni.showToast({ |
|||
title: "拉黑功能开发中", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
|
|||
followUser(item) { |
|||
// 添加到关注列表 |
|||
this.followsList.unshift({ |
|||
id: item.id, |
|||
name: item.name, |
|||
avatar: item.avatar, |
|||
newItems: 0, |
|||
category: "user", |
|||
}); |
|||
|
|||
// 从推荐列表移除 |
|||
const index = this.recommendList.findIndex((user) => user.id === item.id); |
|||
if (index > -1) { |
|||
this.recommendList.splice(index, 1); |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: "关注成功", |
|||
icon: "success", |
|||
}); |
|||
}, |
|||
|
|||
dismissUser(item) { |
|||
const index = this.recommendList.findIndex((user) => user.id === item.id); |
|||
if (index > -1) { |
|||
this.recommendList.splice(index, 1); |
|||
uni.showToast({ |
|||
title: "已移除推荐", |
|||
icon: "success", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
closeRecommend() { |
|||
this.recommendList = []; |
|||
uni.showToast({ |
|||
title: "已关闭推荐", |
|||
icon: "success", |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.follow-tab-container { |
|||
background: #fff; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
/* 搜索栏 */ |
|||
.search-section { |
|||
padding: 32rpx; |
|||
background: #fff; |
|||
} |
|||
|
|||
.search-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #f8f9fa; |
|||
border-radius: 40rpx; |
|||
padding: 0 32rpx; |
|||
height: 80rpx; |
|||
|
|||
.search-icon { |
|||
width:32rpx ; |
|||
height:32rpx ; |
|||
margin-right: 16rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
|
|||
&::placeholder { |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 关注标题和排序 */ |
|||
.follows-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
padding: 0 32rpx 24rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.follows-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.sort-option { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.sort-text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.sort-arrow { |
|||
width:9rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 分类导航 */ |
|||
.category-tabs { |
|||
display: flex; |
|||
padding: 0 32rpx 32rpx; |
|||
gap: 16rpx; |
|||
|
|||
.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; |
|||
|
|||
|
|||
&.active { |
|||
background: #00FFFF; |
|||
color: #000000; |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 关注用户列表 */ |
|||
.follows-list { |
|||
padding: 0 32rpx; |
|||
|
|||
.follow-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 32rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.user-avatar { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
margin-right: 24rpx; |
|||
} |
|||
|
|||
.user-info { |
|||
flex: 1; |
|||
|
|||
.user-name { |
|||
display: block; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.update-tag { |
|||
display: inline-block; |
|||
background: #f8f9fa; |
|||
border-radius: 16rpx; |
|||
padding: 10rpx 12rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
|
|||
} |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 16rpx; |
|||
|
|||
.follow-status-btn { |
|||
border-radius: 24rpx; |
|||
padding: 12rpx 24rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
|
|||
} |
|||
|
|||
.more-options { |
|||
padding: 8rpx; |
|||
|
|||
.more-dots { |
|||
font-size: 24rpx; |
|||
color: #000; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 分隔线 */ |
|||
.divider-line { |
|||
height: 1rpx; |
|||
background: #f0f0f0; |
|||
margin: 32rpx 0; |
|||
} |
|||
|
|||
/* 推荐用户区域 */ |
|||
.recommend-section { |
|||
padding: 0 32rpx; |
|||
|
|||
.recommend-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.recommend-title { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.close-btn { |
|||
padding: 8rpx 16rpx; |
|||
|
|||
.close-text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.recommend-list { |
|||
.recommend-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 32rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.user-avatar { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
margin-right: 24rpx; |
|||
} |
|||
|
|||
.user-info { |
|||
flex: 1; |
|||
|
|||
.user-name { |
|||
display: block; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.user-desc { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 16rpx; |
|||
|
|||
.follow-btn { |
|||
border: 2rpx solid #00FFFF; |
|||
border-radius: 24rpx; |
|||
padding: 12rpx 24rpx; |
|||
font-size: 26rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
|
|||
} |
|||
|
|||
.dismiss-btn { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
background: #f8f9fa; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.dismiss-text { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
font-weight: 300; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
# 这是一个空购物车图标的占位文件 |
|||
# 在实际项目中，请替换为真实的空购物车图标图片文件 |
|||
# 建议使用简洁的购物车图标，颜色为灰色或浅色 |
|||
@ -0,0 +1,2 @@ |
|||
# 这是一个搜索图标的占位文件 |
|||
# 在实际项目中，请替换为真实的搜索图标图片文件 |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue