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 @@ |
|||||
|
# 这是一个搜索图标的占位文件 |
||||
|
# 在实际项目中，请替换为真实的搜索图标图片文件 |
||||
Loading…
Reference in new issue