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

取消关注添加确认弹窗、个人页添加往期球局

Browse Source
This commit is contained in:
Ultrame
2025-09-22 21:33:43 +08:00
parent c4d387473c
commit 186d5b8a3a
8 changed files with 206 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,12 +4,17 @@ import Taro from '@tarojs/taro';
import { FollowUser } from '@/services/followService';
import './index.scss';
// 标签页类型
type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend';
interface FollowUserCardProps {
user: FollowUser;
tabKey: TabType;
onFollowChange?: (userId: number, isFollowing: boolean) => void;
}
const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange }) => {
const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, tabKey, onFollowChange }) => {
const [isProcessing, setIsProcessing] = useState(false);
// 防御性检查
@@ -23,7 +28,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
try {
setIsProcessing(true);
// 根据当前状态决定操作
let new_status = false;
if (user.follow_status === 'follower' || user.follow_status === 'recommend') {
@@ -53,7 +58,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
try {
setIsProcessing(true);
// TODO: 加入黑名单逻辑
Taro.showToast({
Taro.showToast({
title: '不会再为您推荐该用户',
icon: 'none'
});
@@ -107,8 +112,8 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
return (
<View className="follow_user_card">
<View className="user_info" onClick={handle_user_click}>
<Image
className="avatar"
<Image
className="avatar"
src={user.avatar_url || require('@/static/userInfo/default_avatar.svg')}
/>
<View className="user_details">
@@ -118,8 +123,8 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
</Text>
</View>
</View>
<View
<View
className={`action_button ${button_config.className} ${isProcessing ? 'processing' : ''}`}
onClick={handle_follow_action}
>
@@ -128,7 +133,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
</Text>
</View>
{
user.follow_status === 'recommend' && (
tabKey === 'recommend' && (
<View className='delete_button' onClick={add_to_blacklist}></View>
)
}

20
src/static/userInfo/female.svg
View File

@@ -1,5 +1,17 @@
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4879 3.89007V1.64008H8.23792" stroke="#FF69B4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.60338 9.62816C3.9702 10.995 6.18628 10.995 7.55313 9.62816C8.23655 8.94476 8.57825 8.04901 8.57825 7.15328C8.57825 6.25756 8.23655 5.36183 7.55313 4.67841C6.18628 3.31158 3.9702 3.31158 2.60338 4.67841C1.23654 6.04526 1.23654 8.26133 2.60338 9.62816Z" stroke="#FF69B4" stroke-linejoin="round"/>
<path d="M7.5 4.62796L9.98787 2.14008" stroke="#FF69B4" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4362_21316)">
<mask id="mask0_4362_21316" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
<path d="M12 0H0V12H12V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_4362_21316)">
<path d="M9.5945 2.46284C8.22768 1.096 6.01158 1.096 4.64475 2.46284C3.96133 3.14626 3.61963 4.04198 3.61963 4.93771C3.61963 5.83343 3.96133 6.72916 4.64475 7.41258C6.01158 8.77941 8.22768 8.77941 9.5945 7.41258C10.9613 6.04576 10.9613 3.82968 9.5945 2.46284Z" stroke="black" stroke-linejoin="round"/>
<path d="M4.61605 7.38385L1.43408 10.5658" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.79282 10.3891L1.61084 7.20706" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4362_21316">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 975 B

8
src/static/userInfo/male.svg
View File

@@ -1,5 +1,5 @@
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4879 3.89007V1.64008H8.23792" stroke="#4169E1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.60338 9.62816C3.9702 10.995 6.18628 10.995 7.55313 9.62816C8.23655 8.94476 8.57825 8.04901 8.57825 7.15328C8.57825 6.25756 8.23655 5.36183 7.55313 4.67841C6.18628 3.31158 3.9702 3.31158 2.60338 4.67841C1.23654 6.04526 1.23654 8.26133 2.60338 9.62816Z" stroke="#4169E1" stroke-linejoin="round"/>
<path d="M7.5 4.62796L9.98787 2.14008" stroke="#4169E1" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.488 3.76207V1.51208H8.23804" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.60325 9.50017C3.97008 10.867 6.18615 10.867 7.553 9.50017C8.23643 8.81677 8.57813 7.92102 8.57813 7.02529C8.57813 6.12957 8.23643 5.23384 7.553 4.55042C6.18615 3.18359 3.97008 3.18359 2.60325 4.55042C1.23642 5.91727 1.23642 8.13334 2.60325 9.50017Z" stroke="black" stroke-linejoin="round"/>
<path d="M7.5 4.49997L9.98787 2.01208" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 615 B

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

@@ -6,6 +6,7 @@ import FollowUserCard from '@/components/FollowUserCard';
import { FollowService, FollowUser } from '@/services/followService';
import { withAuth } from '@/components';
import './index.scss';
import CommonDialog from '@/components/CommonDialog'
// 标签页类型
type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend';
@@ -22,7 +23,7 @@ const FollowPage: React.FC = () => {
// 获取页面参数，支持指定默认标签页
const instance = Taro.getCurrentInstance();
const default_tab = (instance.router?.params?.tab as TabType) || 'mutual_follow';
// 当前激活的标签页 - 根据设计稿默认显示互相关注
const [active_tab, set_active_tab] = useState<TabType>(default_tab);
@@ -101,58 +102,62 @@ const FollowPage: React.FC = () => {
load_user_list(tab, true);
};
const updateFollowStatus = (user_id: number, is_following: boolean) => {
// 更新用户列表中的关注状态
set_user_lists(prev => {
const new_lists = { ...prev };
// 更新所有标签页中的用户状态
Object.keys(new_lists).forEach(tab_key => {
const tab = tab_key as TabType;
if (new_lists[tab] && Array.isArray(new_lists[tab])) {
new_lists[tab] = new_lists[tab].map(user => {
if (user.id === user_id) {
// 根据操作结果更新状态
let new_status = user.follow_status;
if (is_following) {
if (user.follow_status === 'follower') {
new_status = 'mutual_follow';
} else if (user.follow_status === 'recommend') {
new_status = 'following';
}
} else {
if (user.follow_status === 'mutual_follow') {
new_status = 'follower';
} else if (user.follow_status === 'following') {
new_status = 'recommend';
}
}
return { ...user, follow_status: new_status };
}
return user;
});
}
});
return new_lists;
});
};
// 处理关注状态变化
const handle_follow_change = async (user_id: number, is_following: boolean) => {
try {
if (is_following) {
await FollowService.follow_user(user_id);
updateFollowStatus(user_id, is_following);
// Taro.showToast({
// title: '关注成功',
// icon: 'success'
// });
} else {
await FollowService.unfollow_user(user_id);
showDeleteConfirm(user_id);
return;
// Taro.showToast({
// title: '取消关注成功',
// icon: 'success'
// });
}
// 更新用户列表中的关注状态
set_user_lists(prev => {
const new_lists = { ...prev };
// 更新所有标签页中的用户状态
Object.keys(new_lists).forEach(tab_key => {
const tab = tab_key as TabType;
if (new_lists[tab] && Array.isArray(new_lists[tab])) {
new_lists[tab] = new_lists[tab].map(user => {
if (user.id === user_id) {
// 根据操作结果更新状态
let new_status = user.follow_status;
if (is_following) {
if (user.follow_status === 'follower') {
new_status = 'mutual_follow';
} else if (user.follow_status === 'recommend') {
new_status = 'following';
}
} else {
if (user.follow_status === 'mutual_follow') {
new_status = 'follower';
} else if (user.follow_status === 'following') {
new_status = 'recommend';
}
}
return { ...user, follow_status: new_status };
}
return user;
});
}
});
return new_lists;
});
} catch (error) {
console.error('关注操作失败:', error);
Taro.showToast({
@@ -186,6 +191,46 @@ const FollowPage: React.FC = () => {
});
}
}, [default_tab]);
// 取消关注确认弹窗状态
const [deleteConfirm, setDeleteConfirm] = useState<{
visible: boolean;
userId: number | null;
}>({
visible: false,
userId: null
})
// 取消关注确认弹窗
const showDeleteConfirm = (userId: number | null) => {
setDeleteConfirm({
visible: true,
userId: userId
})
}
// 关闭取消关注确认弹窗
const closeDeleteConfirm = () => {
setDeleteConfirm({
visible: false,
userId: null
})
}
// 确认取消关注
const confirmUnfollow = async () => {
try {
await FollowService.unfollow_user(deleteConfirm.userId!);
closeDeleteConfirm();
updateFollowStatus(deleteConfirm.userId!, false);
// Taro.showToast({
// title: '取消关注成功',
// icon: 'success'
// });
} catch (error) {
console.error('取消关注失败:', error);
Taro.showToast({
title: '操作失败',
icon: 'none'
});
}
}
return (
<View className="follow_page">
@@ -216,7 +261,7 @@ const FollowPage: React.FC = () => {
{/* 推荐图标 SVG */}
<View className="icon_container">
<View className="star_icon" />
</View>
</View>
)}
@@ -238,6 +283,7 @@ const FollowPage: React.FC = () => {
<FollowUserCard
key={user.id}
user={user}
tabKey={active_tab}
onFollowChange={handle_follow_change}
/>
)) || []}
@@ -263,6 +309,17 @@ const FollowPage: React.FC = () => {
</View>
)}
</ScrollView>
{/* 取消关注确认弹窗 */}
<CommonDialog
visible={deleteConfirm.visible}
cancelText="取消"
confirmText="不再关注"
onCancel={closeDeleteConfirm}
onConfirm={confirmUnfollow}
contentTitle="不再关注该球友？"
contentDesc=""
/>
</View>
);
};

11
src/user_pages/myself/index.scss
View File

@@ -365,4 +365,15 @@
}
}
}
}
.ended_game_text {
font-family: "PingFang SC";
font-weight: 600;
font-size: 20px;
line-height: 1.4em;
letter-spacing: 1.9%;
color: rgba(0, 0, 0, 0.85);
transition: color 0.3s ease;
padding: 24px 15px;
}

66
src/user_pages/myself/index.tsx
View File

@@ -41,6 +41,8 @@ const MyselfPage: React.FC = () => {
// 球局记录状态
const [game_records, set_game_records] = useState<TennisMatch[]>([]);
// 往期球局
const [ended_game_records, setEndedGameRecords] = useState<TennisMatch[]>([]);
const [loading, set_loading] = useState(true);
// 关注状态
@@ -99,7 +101,26 @@ const MyselfPage: React.FC = () => {
load_game_data();
}
}, [active_tab]);
// 分类球局数据
const classifyGameRecords = (
game_records: TennisMatch[]
): { notEndGames: TennisMatch[]; finishedGames: TennisMatch[] } => {
const now = new Date().getTime();
return game_records.reduce(
(result, cur) => {
let { end_time } = cur;
end_time = end_time.replace(/\s/, "T");
new Date(end_time).getTime() > now
? result.notEndGames.push(cur)
: result.finishedGames.push(cur);
return result;
},
{
notEndGames: [] as TennisMatch[],
finishedGames: [] as TennisMatch[],
}
);
};
// 加载球局数据
const load_game_data = async () => {
try {
@@ -109,7 +130,13 @@ const MyselfPage: React.FC = () => {
} else {
games_data = await UserService.get_participated_games(user_info.id);
}
set_game_records(games_data);
const sorted_games = games_data.sort((a, b) => {
return new Date(a.original_start_time.replace(/\s/, 'T')).getTime() - new Date(b.original_start_time.replace(/\s/, 'T')).getTime();
});
const { notEndGames, finishedGames } = classifyGameRecords(sorted_games);
set_game_records(notEndGames);
setEndedGameRecords(finishedGames);
// set_game_records(games_data);
} catch (error) {
console.error("加载球局数据失败:", error);
}
@@ -225,6 +252,41 @@ const MyselfPage: React.FC = () => {
/>
</ScrollView>
</View>
{/* 往期球局 */}
<View className="ended_game_text">往期球局</View>
<View className="game_list_section">
{/* <View className="date_header">
<Text className="date_text">5月29日</Text>
<Text className="separator">/</Text>
<Text className="weekday_text">星期六</Text>
</View> */}
{/* 球局列表 */}
{/* <View className="game_list_section"> */}
<ScrollView scrollY>
<ListContainer
data={ended_game_records}
recommendList={[]}
loading={loading}
error={null}
reload={load_game_data}
loadMoreMatches={() => { }}
/>
</ScrollView>
{/* </View> */}
{/* 球局卡片 */}
{/* <View className="game_cards">
{game_records.map((game) => (
<GameCard
key={game.id}
game={game}
on_click={handle_game_detail}
/>
))}
</View> */}
</View>
</View>
<GuideBar currentPage="personal" />
</View>

2
src/user_pages/other/index.scss
View File

@@ -554,5 +554,5 @@
letter-spacing: 1.9%;
color: rgba(0, 0, 0, 0.85);
transition: color 0.3s ease;
padding: 12px 15px;
padding: 24px 15px;
}

3
types/list/types.ts
View File

@@ -10,7 +10,8 @@ export interface TennisMatch {
skillLevel: string
matchType: string
images: string[]
shinei: string
shinei: string,
end_time: string,
}
export interface IFilterOptions {
dateRange: [string, string], // 日期区间