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;
padding: 8px 20px;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
height: 56px;
margin-top: 12px;
box-sizing: border-box;
.user_info {
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">
<Text className="nickname">{user.nickname}</Text>
<Text className="signature">
{user.personal_profile || '签名写在这里'}
{user.personal_profile?.replace(/\n/g, ' ') || '签名写在这里'}
</Text>
</View>
</View>

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

@@ -96,8 +96,8 @@
&.clickable {
cursor: pointer;
transition: all 0.2s ease;
padding: 4px 8px;
border-radius: 8px;
// padding: 4px 8px;
// border-radius: 8px;
&:hover {
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 {
min-height: 100vh;
background: #FAFAFA;
display: flex;
flex-direction: column;
// 导航栏内容
.navbar_content {
display: flex;
@@ -10,7 +11,7 @@
align-items: center;
width: 100%;
height: 44px;
.navbar_back {
display: flex;
align-items: center;
@@ -18,15 +19,15 @@
width: 32px;
height: 32px;
margin-left: 10px;
.back_icon {
width: 8px;
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;
}
}
.navbar_title {
font-family: PingFang SC;
font-weight: 600;
@@ -37,7 +38,7 @@
position: absolute;
left: 50px;
}
.navbar_action {
display: flex;
align-items: center;
@@ -45,7 +46,7 @@
width: 83px;
height: 30px;
margin-right: 7px;
.action_icon {
width: 20px;
height: 20px;
@@ -54,7 +55,7 @@
}
}
}
// 标签页导航
.tab_navigation {
display: flex;
@@ -64,9 +65,14 @@
background: #ffffff;
height: 44px;
overflow-x: auto;
margin-top: 110px;
position: fixed;
top: 110px;
left: 0;
right: 0;
z-index: 100;
flex-shrink: 0;
.tab_item {
display: flex;
align-items: center;
@@ -75,7 +81,7 @@
position: relative;
flex-shrink: 0;
min-width: fit-content;
.tab_text {
font-family: PingFang SC;
font-weight: 400;
@@ -85,24 +91,24 @@
color: rgba(0, 0, 0, 0.5);
transition: all 0.2s ease;
white-space: nowrap;
// 小屏幕适配
@media (max-width: 375px) {
font-size: 13px;
}
}
// 推荐图标
.recommend_icon {
.icon_container {
width: 10px;
height: 10px;
position: relative;
.star_icon {
width: 100%;
height: 100%;
&::before {
content: '';
position: absolute;
@@ -116,7 +122,7 @@
}
}
}
// 激活状态
&.active {
/* 添加调试背景色 */
@@ -124,31 +130,36 @@
.tab_text {
font-weight: 600 !important;
color: #000000 !important;
}
// 下边框
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #000000 !important;
z-index: 1;
position: relative;
// 下边框只应用在文字上
&::after {
content: '';
position: absolute;
bottom: -8px; // 调整距离文字底部的位置
left: 0;
right: 0;
height: 2px;
background: #000000 !important;
z-index: 1;
}
}
}
// 移除默认的粉丝标签激活样式，完全依赖 active 类
}
}
// 用户列表容器
.user_list_container {
flex: 1;
margin-top: 12px;
position: absolute;
top: 154px; // 110px(导航栏高度) + 44px(tab导航高度)
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
overflow-y: auto;
// 加载状态提示
.loading_tip,
.empty_tip,
@@ -157,7 +168,7 @@
justify-content: center;
align-items: center;
padding: 40px 20px;
text {
font-family: PingFang SC;
font-weight: 400;
@@ -165,11 +176,11 @@
color: rgba(0, 0, 0, 0.5);
}
}
.empty_tip {
padding: 80px 20px;
}
.load_more_tip {
padding: 20px;
}

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

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