bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修该关注页

Browse Source
This commit is contained in:
张成
2025-09-18 00:19:59 +08:00
parent 33ebba64a9
commit 2f5bfc537c
6 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/FollowUserCard/index.scss
View File

@@ -5,7 +5,9 @@
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
background: #ffffff; background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); height: 56px;
margin-top: 12px;
box-sizing: border-box;
.user_info { .user_info {
display: flex; display: flex;

2
src/components/FollowUserCard/index.tsx
View File

@@ -92,7 +92,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
<View className="user_details"> <View className="user_details">
<Text className="nickname">{user.nickname}</Text> <Text className="nickname">{user.nickname}</Text>
<Text className="signature"> <Text className="signature">
{user.personal_profile || '签名写在这里'} {user.personal_profile?.replace(/\n/g, ' ') || '签名写在这里'}
</Text> </Text>
</View> </View>
</View> </View>

4
src/components/UserInfo/index.scss
View File

@@ -96,8 +96,8 @@
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 4px 8px; // padding: 4px 8px;
border-radius: 8px; // border-radius: 8px;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);

3
src/static/userInfo/back_icon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.66675 18L1.66675 10L9.66675 2" stroke="black" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

89
src/user_pages/follow/index.scss
View File

@@ -1,8 +1,9 @@
// 球友关注页面样式 // 球友关注页面样式
.follow_page { .follow_page {
min-height: 100vh; min-height: 100vh;
background: #FAFAFA; display: flex;
flex-direction: column;
// 导航栏内容 // 导航栏内容
.navbar_content { .navbar_content {
display: flex; display: flex;
@@ -10,7 +11,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 44px; height: 44px;
.navbar_back { .navbar_back {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -18,15 +19,15 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-left: 10px; margin-left: 10px;
.back_icon { .back_icon {
width: 8px;
height: 16px; height: 16px;
background: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66667 2L1.33333 8L6.66667 14' stroke='%23000000' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; width: 8px;
background: url("../../static/userInfo/back_icon.svg") no-repeat center;
background-size: contain; background-size: contain;
} }
} }
.navbar_title { .navbar_title {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 600; font-weight: 600;
@@ -37,7 +38,7 @@
position: absolute; position: absolute;
left: 50px; left: 50px;
} }
.navbar_action { .navbar_action {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -45,7 +46,7 @@
width: 83px; width: 83px;
height: 30px; height: 30px;
margin-right: 7px; margin-right: 7px;
.action_icon { .action_icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -54,7 +55,7 @@
} }
} }
} }
// 标签页导航 // 标签页导航
.tab_navigation { .tab_navigation {
display: flex; display: flex;
@@ -64,9 +65,14 @@
background: #ffffff; background: #ffffff;
height: 44px; height: 44px;
overflow-x: auto; overflow-x: auto;
margin-top: 110px; position: fixed;
top: 110px;
left: 0;
right: 0;
z-index: 100;
flex-shrink: 0;
.tab_item { .tab_item {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -75,7 +81,7 @@
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
min-width: fit-content; min-width: fit-content;
.tab_text { .tab_text {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
@@ -85,24 +91,24 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
transition: all 0.2s ease; transition: all 0.2s ease;
white-space: nowrap; white-space: nowrap;
// 小屏幕适配 // 小屏幕适配
@media (max-width: 375px) { @media (max-width: 375px) {
font-size: 13px; font-size: 13px;
} }
} }
// 推荐图标 // 推荐图标
.recommend_icon { .recommend_icon {
.icon_container { .icon_container {
width: 10px; width: 10px;
height: 10px; height: 10px;
position: relative; position: relative;
.star_icon { .star_icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -116,7 +122,7 @@
} }
} }
} }
// 激活状态 // 激活状态
&.active { &.active {
/* 添加调试背景色 */ /* 添加调试背景色 */
@@ -124,31 +130,36 @@
.tab_text { .tab_text {
font-weight: 600 !important; font-weight: 600 !important;
color: #000000 !important; color: #000000 !important;
} position: relative;
// 下边框 // 下边框只应用在文字上
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: -8px; // 调整距离文字底部的位置
left: 0; left: 0;
right: 0; right: 0;
height: 2px; height: 2px;
background: #000000 !important; background: #000000 !important;
z-index: 1; z-index: 1;
}
} }
} }
// 移除默认的粉丝标签激活样式，完全依赖 active 类 // 移除默认的粉丝标签激活样式，完全依赖 active 类
} }
} }
// 用户列表容器 // 用户列表容器
.user_list_container { .user_list_container {
flex: 1; position: absolute;
margin-top: 12px; top: 154px; // 110px(导航栏高度) + 44px(tab导航高度)
left: 0;
right: 0;
bottom: 0;
background: #ffffff; background: #ffffff;
overflow-y: auto;
// 加载状态提示 // 加载状态提示
.loading_tip, .loading_tip,
.empty_tip, .empty_tip,
@@ -157,7 +168,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 40px 20px; padding: 40px 20px;
text { text {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
@@ -165,11 +176,11 @@
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
} }
.empty_tip { .empty_tip {
padding: 80px 20px; padding: 80px 20px;
} }
.load_more_tip { .load_more_tip {
padding: 20px; padding: 20px;
} }

22
src/user_pages/follow/index.tsx
View File

@@ -97,10 +97,8 @@ const FollowPage: React.FC = () => {
set_active_tab(tab); set_active_tab(tab);
// 如果该标签页还没有数据，则加载 // 每次切换tab都重新加载数据
if (user_lists[tab].length === 0) { load_user_list(tab, true);
load_user_list(tab, true);
}
}; };
// 处理关注状态变化 // 处理关注状态变化
@@ -108,16 +106,16 @@ const FollowPage: React.FC = () => {
try { try {
if (is_following) { if (is_following) {
await FollowService.follow_user(user_id); await FollowService.follow_user(user_id);
Taro.showToast({ // Taro.showToast({
title: '关注成功', // title: '关注成功',
icon: 'success' // icon: 'success'
}); // });
} else { } else {
await FollowService.unfollow_user(user_id); await FollowService.unfollow_user(user_id);
Taro.showToast({ // Taro.showToast({
title: '取消关注成功', // title: '取消关注成功',
icon: 'success' // icon: 'success'
}); // });
} }
// 更新用户列表中的关注状态 // 更新用户列表中的关注状态