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

feat: 定位到组件异常渲染的问题

Browse Source
This commit is contained in:
刘杰
2025-11-15 20:23:15 +08:00
parent d427b9323c
commit 2a8c337b72
6 changed files with 251 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/NTRPTestEntryCard/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useCallback, memo } from "react";
import { View, Image, Text } from "@tarojs/components"; import { View, Image, Text } from "@tarojs/components";
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import { useUserInfo, useUserActions } from "@/store/userStore"; import { useUserInfo, useUserActions } from "@/store/userStore";
@@ -26,82 +26,87 @@ function NTRPTestEntryCard(props: {
console.log(userInfo); console.log(userInfo);
useEffect(() => { useEffect(() => {
fetchUserInfo(); if (!userInfo.id) {
fetchUserInfo();
}
evaluateService.getLastResult().then((res) => { evaluateService.getLastResult().then((res) => {
setTestFlag(res.code === 0 && res.data.has_ntrp_level); setTestFlag(res.code === 0 && res.data.has_ntrp_level);
}); });
}, []); }, [userInfo.id]);
function handleTest() { const handleTest = useCallback(
switch (type) { function () {
case EvaluateScene.list: switch (type) {
setCallback({ case EvaluateScene.list:
type, setCallback({
next: () => { type,
Taro.redirectTo({ url: "/game_pages/list/index" }); next: () => {
}, Taro.redirectTo({ url: "/game_pages/list/index" });
onCancel: () => { },
// Taro.redirectTo({ url: "/game_pages/list/index" }); onCancel: () => {
Taro.navigateBack(); // Taro.redirectTo({ url: "/game_pages/list/index" });
}, Taro.navigateBack();
}); },
break; });
case EvaluateScene.share: break;
setCallback({ case EvaluateScene.share:
type, setCallback({
next: () => { type,
Taro.redirectTo({ url: "/main_pages/index" }); next: () => {
}, Taro.redirectTo({ url: "/main_pages/index" });
onCancel: () => { },
Taro.redirectTo({ url: "/main_pages/index" }); onCancel: () => {
}, Taro.redirectTo({ url: "/main_pages/index" });
}); },
break; });
case EvaluateScene.detail: break;
case EvaluateScene.publish: case EvaluateScene.detail:
setCallback(evaluateCallback as EvaluateCallback); case EvaluateScene.publish:
break; setCallback(evaluateCallback as EvaluateCallback);
case EvaluateScene.user: break;
setCallback({ case EvaluateScene.user:
type, setCallback({
next: () => { type,
Taro.redirectTo({ url: "/main_pages/index" }); next: () => {
}, Taro.redirectTo({ url: "/main_pages/index" });
onCancel: () => { },
// Taro.redirectTo({ url: "/user_pages/myself/index" }); onCancel: () => {
Taro.navigateBack(); // Taro.redirectTo({ url: "/user_pages/myself/index" });
}, Taro.navigateBack();
}); },
break; });
case EvaluateScene.userEdit: break;
setCallback({ case EvaluateScene.userEdit:
type, setCallback({
next: () => { type,
Taro.redirectTo({ url: "/game_pages/list/index" }); next: () => {
}, Taro.redirectTo({ url: "/game_pages/list/index" });
onCancel: () => { },
// Taro.redirectTo({ url: "/user_pages/edit/index" }); onCancel: () => {
Taro.navigateBack(); // Taro.redirectTo({ url: "/user_pages/edit/index" });
}, Taro.navigateBack();
}); },
break; });
default: break;
setCallback({ default:
type, setCallback({
next: () => { type,
Taro.redirectTo({ url: "/main_pages/index" }); next: () => {
}, Taro.redirectTo({ url: "/main_pages/index" });
onCancel: () => { },
Taro.redirectTo({ url: "/main_pages/index" }); onCancel: () => {
}, Taro.redirectTo({ url: "/main_pages/index" });
}); },
} });
Taro.navigateTo({ }
url: `/other_pages/ntrp-evaluate/index?stage=${ Taro.navigateTo({
testFlag ? StageType.INTRO : StageType.TEST url: `/other_pages/ntrp-evaluate/index?stage=${
}`, testFlag ? StageType.INTRO : StageType.TEST
}); }`,
} });
},
[setCallback]
);
return type === EvaluateScene.list ? ( return type === EvaluateScene.list ? (
<View className={styles.higher} onClick={handleTest}> <View className={styles.higher} onClick={handleTest}>
@@ -169,4 +174,5 @@ function NTRPTestEntryCard(props: {
); );
} }
export default NTRPTestEntryCard; export default memo(NTRPTestEntryCard);
// export default NTRPTestEntryCard;

56
src/container/listContainer/index.tsx
View File

@@ -8,7 +8,7 @@ import { setStorage, getStorage } from "@/store/storage";
import { NTRPTestEntryCard } from "@/components"; import { NTRPTestEntryCard } from "@/components";
import { EvaluateScene } from "@/store/evaluateStore"; import { EvaluateScene } from "@/store/evaluateStore";
import "./index.scss"; import "./index.scss";
import { useRef, useEffect, useState } from "react"; import { useRef, useEffect, useState, useMemo } from "react";
const ListContainer = (props) => { const ListContainer = (props) => {
const { const {
@@ -26,6 +26,7 @@ const ListContainer = (props) => {
style, style,
collapse = false, collapse = false,
defaultShowNum, defaultShowNum,
evaluateFlag,
} = props; } = props;
const timerRef = useRef<NodeJS.Timeout | null>(null); const timerRef = useRef<NodeJS.Timeout | null>(null);
const loadingStartTimeRef = useRef<number | null>(null); const loadingStartTimeRef = useRef<number | null>(null);
@@ -47,19 +48,17 @@ const ListContainer = (props) => {
}); });
useEffect(() => { useEffect(() => {
setShowNumber( setShowNumber(() => {
() => { return defaultShowNum === undefined ? data?.length : defaultShowNum;
return defaultShowNum === undefined ? data?.length : defaultShowNum });
}, [data]);
})
}, [data])
// 控制骨架屏显示逻辑 // 控制骨架屏显示逻辑
useEffect(() => { useEffect(() => {
if (loading) { if (loading) {
// 开始加载时记录时间 // 开始加载时记录时间
loadingStartTimeRef.current = Date.now(); loadingStartTimeRef.current = Date.now();
// 延迟 300ms 后再显示骨架屏 // 延迟 300ms 后再显示骨架屏
skeletonTimerRef.current = setTimeout(() => { skeletonTimerRef.current = setTimeout(() => {
setShowSkeleton(true); setShowSkeleton(true);
@@ -102,6 +101,7 @@ const ListContainer = (props) => {
// 对于没有ntrp等级的用户每个月展示一次, 插在第三个位置 // 对于没有ntrp等级的用户每个月展示一次, 插在第三个位置
function insertEvaluateCard(list) { function insertEvaluateCard(list) {
if (!evaluateFlag) return list;
if (!list || list.length === 0) { if (!list || list.length === 0) {
return list; return list;
} }
@@ -122,6 +122,11 @@ const ListContainer = (props) => {
return [item1, item2, item3, { type: "evaluateCard" }, ...rest]; return [item1, item2, item3, { type: "evaluateCard" }, ...rest];
} }
const memoizedList = useMemo(
() => insertEvaluateCard(data),
[evaluateFlag, data, userInfo.ntrp_level]
);
// 渲染列表 // 渲染列表
const renderList = (list) => { const renderList = (list) => {
// 请求数据为空 // 请求数据为空
@@ -137,12 +142,12 @@ const ListContainer = (props) => {
); );
} }
showNumber !== undefined && (list = list.slice(0, showNumber)) showNumber !== undefined && (list = list.slice(0, showNumber));
// 渲染数据 // 渲染数据
return ( return (
<> <>
{insertEvaluateCard(list).map((match, index) => { {memoizedList.map((match, index) => {
if (match.type === "evaluateCard") { if (match.type === "evaluateCard") {
return ( return (
<NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} /> <NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} />
@@ -164,20 +169,33 @@ const ListContainer = (props) => {
</View> </View>
{renderList(recommendList)} */} {renderList(recommendList)} */}
{/* 到底了 */} {/* 到底了 */}
{collapse ? {collapse ? (
data?.length > defaultShowNum ? data?.length > defaultShowNum ? (
data?.length > showNumber ? data?.length > showNumber ? (
<View className="collapse-btn fold" onClick={() => { setShowNumber(data?.length) }}> <View
className="collapse-btn fold"
onClick={() => {
setShowNumber(data?.length);
}}
>
<Text>更多球局</Text> <Text>更多球局</Text>
<Image src={require("@/static/userInfo/fold.svg")}></Image> <Image src={require("@/static/userInfo/fold.svg")}></Image>
</View> : </View>
<View className="collapse-btn" onClick={() => { setShowNumber(defaultShowNum) }}> ) : (
<View
className="collapse-btn"
onClick={() => {
setShowNumber(defaultShowNum);
}}
>
<Text>收起</Text> <Text>收起</Text>
<Image src={require("@/static/userInfo/fold.svg")}></Image> <Image src={require("@/static/userInfo/fold.svg")}></Image>
</View> </View>
: )
null ) : null
: data?.length > 0 && <View className="bottomTextWrapper">到底了</View>} ) : (
data?.length > 0 && <View className="bottomTextWrapper">到底了</View>
)}
</View> </View>
); );
}; };

84
src/game_pages/list/index.tsx
View File

@@ -66,7 +66,7 @@ const ListPage = () => {
const scrollViewRef = useRef(null); // ScrollView 的 ref const scrollViewRef = useRef(null); // ScrollView 的 ref
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null); const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0); const lastScrollTopRef = useRef(0);
const scrollDirectionRef = useRef<'up' | 'down' | null>(null); const scrollDirectionRef = useRef<"up" | "down" | null>(null);
const lastScrollTimeRef = useRef(Date.now()); const lastScrollTimeRef = useRef(Date.now());
const loadingMoreRef = useRef(false); // 防止重复加载更多 const loadingMoreRef = useRef(false); // 防止重复加载更多
const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置 const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置
@@ -74,45 +74,54 @@ const ListPage = () => {
const [scrollTop, setScrollTop] = useState(0); // 控制 ScrollView 滚动位置 const [scrollTop, setScrollTop] = useState(0); // 控制 ScrollView 滚动位置
// 动态控制 GuideBar 的 z-index // 动态控制 GuideBar 的 z-index
const [guideBarZIndex, setGuideBarZIndex] = useState<'low' | 'high'>('high'); const [guideBarZIndex, setGuideBarZIndex] = useState<"low" | "high">("high");
const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false); const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false);
const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false); const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false);
const [isCityPickerVisible, setIsCityPickerVisible] = useState(false); const [isCityPickerVisible, setIsCityPickerVisible] = useState(false);
// 处理 PublishMenu 显示/隐藏 // 处理 PublishMenu 显示/隐藏
const handlePublishMenuVisibleChange = useCallback((visible: boolean) => { const handlePublishMenuVisibleChange = useCallback((visible: boolean) => {
setIsPublishMenuVisible(visible); setIsPublishMenuVisible(visible);
}, []); }, []);
// 处理 DistanceQuickFilter 显示/隐藏 // 处理 DistanceQuickFilter 显示/隐藏
const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => { const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
setIsDistanceFilterVisible(visible); setIsDistanceFilterVisible(visible);
}, []); }, []);
// 处理 CityPicker 显示/隐藏 // 处理 CityPicker 显示/隐藏
const handleCityPickerVisibleChange = useCallback((visible: boolean) => { const handleCityPickerVisibleChange = useCallback((visible: boolean) => {
setIsCityPickerVisible(visible); setIsCityPickerVisible(visible);
}, []); }, []);
// 滚动到顶部的方法 // 滚动到顶部的方法
const scrollToTop = useCallback(() => { const scrollToTop = useCallback(() => {
// 使用一个唯一值触发 scrollTop 更新，确保每次都能滚动到顶部 // 使用一个唯一值触发 scrollTop 更新，确保每次都能滚动到顶部
setScrollTop(prev => prev === 0 ? 0.1 : 0); setScrollTop((prev) => (prev === 0 ? 0.1 : 0));
}, []); }, []);
// 监听所有弹窗和菜单的状态，动态调整 GuideBar 的 z-index // 监听所有弹窗和菜单的状态，动态调整 GuideBar 的 z-index
useEffect(() => { useEffect(() => {
if (isPublishMenuVisible) { if (isPublishMenuVisible) {
// PublishMenu 展开时，GuideBar 保持高层级 // PublishMenu 展开时，GuideBar 保持高层级
setGuideBarZIndex('high'); setGuideBarZIndex("high");
} else if (isShowFilterPopup || isDistanceFilterVisible || isCityPickerVisible) { } else if (
isShowFilterPopup ||
isDistanceFilterVisible ||
isCityPickerVisible
) {
// 任何筛选组件或选择器展开时，GuideBar 降低层级 // 任何筛选组件或选择器展开时，GuideBar 降低层级
setGuideBarZIndex('low'); setGuideBarZIndex("low");
} else { } else {
// 都关闭时，GuideBar 保持高层级 // 都关闭时，GuideBar 保持高层级
setGuideBarZIndex('high'); setGuideBarZIndex("high");
} }
}, [isShowFilterPopup, isPublishMenuVisible, isDistanceFilterVisible, isCityPickerVisible]); }, [
isShowFilterPopup,
isPublishMenuVisible,
isDistanceFilterVisible,
isCityPickerVisible,
]);
// ScrollView 滚动处理函数 // ScrollView 滚动处理函数
const handleScrollViewScroll = useCallback( const handleScrollViewScroll = useCallback(
@@ -133,28 +142,34 @@ const ListPage = () => {
if (Math.abs(scrollDiff) > 15) { if (Math.abs(scrollDiff) > 15) {
if (scrollDiff > 0) { if (scrollDiff > 0) {
// 方向改变时，记录新的起始位置 // 方向改变时，记录新的起始位置
if (newDirection !== 'up') { if (newDirection !== "up") {
scrollStartPositionRef.current = lastScrollTop; scrollStartPositionRef.current = lastScrollTop;
} }
newDirection = 'up'; newDirection = "up";
} else { } else {
// 方向改变时，记录新的起始位置 // 方向改变时，记录新的起始位置
if (newDirection !== 'down') { if (newDirection !== "down") {
scrollStartPositionRef.current = lastScrollTop; scrollStartPositionRef.current = lastScrollTop;
} }
newDirection = 'down'; newDirection = "down";
} }
scrollDirectionRef.current = newDirection; scrollDirectionRef.current = newDirection;
} }
// 计算从开始滚动到现在的累计距离 // 计算从开始滚动到现在的累计距离
const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPositionRef.current); const totalScrollDistance = Math.abs(
currentScrollTop - scrollStartPositionRef.current
);
// 滚动阈值 // 滚动阈值
const positionThreshold = 120; // 需要滚动到距离顶部120px const positionThreshold = 120; // 需要滚动到距离顶部120px
const distanceThreshold = 80; // 需要连续滚动80px才触发 const distanceThreshold = 80; // 需要连续滚动80px才触发
if (newDirection === 'up' && currentScrollTop > positionThreshold && totalScrollDistance > distanceThreshold) { if (
newDirection === "up" &&
currentScrollTop > positionThreshold &&
totalScrollDistance > distanceThreshold
) {
// 上滑超过阈值，且连续滚动距离足够，隐藏搜索框 // 上滑超过阈值，且连续滚动距离足够，隐藏搜索框
if (showSearchBar || !isShowInputCustomerNavBar) { if (showSearchBar || !isShowInputCustomerNavBar) {
setShowSearchBar(false); setShowSearchBar(false);
@@ -164,7 +179,10 @@ const ListPage = () => {
// 重置起始位置 // 重置起始位置
scrollStartPositionRef.current = currentScrollTop; scrollStartPositionRef.current = currentScrollTop;
} }
} else if ((newDirection === 'down' && totalScrollDistance > distanceThreshold) || currentScrollTop <= positionThreshold) { } else if (
(newDirection === "down" && totalScrollDistance > distanceThreshold) ||
currentScrollTop <= positionThreshold
) {
// 下滑且连续滚动距离足够，或者回到顶部附近，显示搜索框 // 下滑且连续滚动距离足够，或者回到顶部附近，显示搜索框
if (!showSearchBar || isShowInputCustomerNavBar) { if (!showSearchBar || isShowInputCustomerNavBar) {
setShowSearchBar(true); setShowSearchBar(true);
@@ -296,7 +314,7 @@ const ListPage = () => {
updateFilterOptions(params); updateFilterOptions(params);
}; };
const handleSearchChange = () => { }; const handleSearchChange = () => {};
// 距离筛选 // 距离筛选
const handleDistanceOrQuickChange = (name, value) => { const handleDistanceOrQuickChange = (name, value) => {
@@ -433,7 +451,6 @@ const ListPage = () => {
return ( return (
<> <>
{/* 自定义导航 */} {/* 自定义导航 */}
<HomeNavbar <HomeNavbar
config={{ config={{
@@ -467,7 +484,11 @@ const ListPage = () => {
{/* 固定在顶部的搜索框和筛选 */} {/* 固定在顶部的搜索框和筛选 */}
<View className={styles.fixedHeader}> <View className={styles.fixedHeader}>
{/* 搜索框 - 可隐藏 */} {/* 搜索框 - 可隐藏 */}
<View className={`${styles.listTopSearchWrapper} ${showSearchBar ? styles.show : styles.hide}`}> <View
className={`${styles.listTopSearchWrapper} ${
showSearchBar ? styles.show : styles.hide
}`}
>
<SearchBar <SearchBar
handleFilterIcon={toggleShowPopup} handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0} isSelect={filterCount > 0}
@@ -507,7 +528,11 @@ const ListPage = () => {
lowerThreshold={100} lowerThreshold={100}
onScrollToLower={async () => { onScrollToLower={async () => {
// 防止重复调用，检查 loading 状态和是否正在加载更多 // 防止重复调用，检查 loading 状态和是否正在加载更多
if (!loading && !loadingMoreRef.current && listPageState?.isHasMoreData) { if (
!loading &&
!loadingMoreRef.current &&
listPageState?.isHasMoreData
) {
loadingMoreRef.current = true; loadingMoreRef.current = true;
try { try {
await loadMoreMatches(); await loadMoreMatches();
@@ -529,14 +554,19 @@ const ListPage = () => {
error={error} error={error}
reload={refreshMatches} reload={refreshMatches}
loadMoreMatches={loadMoreMatches} loadMoreMatches={loadMoreMatches}
evaluateFlag
/> />
</ScrollView> </ScrollView>
</View> </View>
</View> </View>
)} )}
<GuideBar <GuideBar
currentPage="list" currentPage="list"
guideBarClassName={`${styles.guideBarList} ${guideBarZIndex === 'low' ? styles.guideBarLowZIndex : styles.guideBarHighZIndex}`} guideBarClassName={`${styles.guideBarList} ${
guideBarZIndex === "low"
? styles.guideBarLowZIndex
: styles.guideBarHighZIndex
}`}
onPublishMenuVisibleChange={handlePublishMenuVisibleChange} onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
/> />
</> </>

66
src/main_pages/components/ListPageContent.tsx
View File

@@ -36,9 +36,10 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
}) => { }) => {
const store = useListStore() || {}; const store = useListStore() || {};
const { fetchUserInfo } = useUserActions(); const { fetchUserInfo } = useUserActions();
const { statusNavbarHeightInfo, getCurrentLocationInfo } = useGlobalState() || {}; const { statusNavbarHeightInfo, getCurrentLocationInfo } =
useGlobalState() || {};
const { totalHeight = 98 } = statusNavbarHeightInfo || {}; const { totalHeight = 98 } = statusNavbarHeightInfo || {};
const { const {
listPageState, listPageState,
loading, loading,
@@ -77,7 +78,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
const scrollViewRef = useRef(null); const scrollViewRef = useRef(null);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null); const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0); const lastScrollTopRef = useRef(0);
const scrollDirectionRef = useRef<'up' | 'down' | null>(null); const scrollDirectionRef = useRef<"up" | "down" | null>(null);
const lastScrollTimeRef = useRef(Date.now()); const lastScrollTimeRef = useRef(Date.now());
const loadingMoreRef = useRef(false); const loadingMoreRef = useRef(false);
const scrollStartPositionRef = useRef(0); const scrollStartPositionRef = useRef(0);
@@ -86,17 +87,20 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
// 处理距离筛选显示/隐藏 // 处理距离筛选显示/隐藏
const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => { const handleDistanceFilterVisibleChange = useCallback(
onDistanceFilterVisibleChange?.(visible); (visible: boolean) => {
onNavStateChange?.({ isDistanceFilterVisible: visible }); onDistanceFilterVisibleChange?.(visible);
}, [onDistanceFilterVisibleChange, onNavStateChange]); onNavStateChange?.({ isDistanceFilterVisible: visible });
},
[onDistanceFilterVisibleChange, onNavStateChange]
);
// 处理城市选择器显示/隐藏（由主容器统一管理，通过 onNavStateChange 通知） // 处理城市选择器显示/隐藏（由主容器统一管理，通过 onNavStateChange 通知）
// 注意：CustomerNavBar 的 onCityPickerVisibleChange 由主容器直接处理 // 注意：CustomerNavBar 的 onCityPickerVisibleChange 由主容器直接处理
// 滚动到顶部（用于 ScrollView 内部滚动） // 滚动到顶部（用于 ScrollView 内部滚动）
const scrollToTopInternal = useCallback(() => { const scrollToTopInternal = useCallback(() => {
setScrollTop(prev => prev === 0 ? 0.1 : 0); setScrollTop((prev) => (prev === 0 ? 0.1 : 0));
}, []); }, []);
// 监听外部滚动触发 // 监听外部滚动触发
@@ -120,24 +124,30 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
let newDirection = scrollDirectionRef.current; let newDirection = scrollDirectionRef.current;
if (Math.abs(scrollDiff) > 15) { if (Math.abs(scrollDiff) > 15) {
if (scrollDiff > 0) { if (scrollDiff > 0) {
if (newDirection !== 'up') { if (newDirection !== "up") {
scrollStartPositionRef.current = lastScrollTop; scrollStartPositionRef.current = lastScrollTop;
} }
newDirection = 'up'; newDirection = "up";
} else { } else {
if (newDirection !== 'down') { if (newDirection !== "down") {
scrollStartPositionRef.current = lastScrollTop; scrollStartPositionRef.current = lastScrollTop;
} }
newDirection = 'down'; newDirection = "down";
} }
scrollDirectionRef.current = newDirection; scrollDirectionRef.current = newDirection;
} }
const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPositionRef.current); const totalScrollDistance = Math.abs(
currentScrollTop - scrollStartPositionRef.current
);
const positionThreshold = 120; const positionThreshold = 120;
const distanceThreshold = 80; const distanceThreshold = 80;
if (newDirection === 'up' && currentScrollTop > positionThreshold && totalScrollDistance > distanceThreshold) { if (
newDirection === "up" &&
currentScrollTop > positionThreshold &&
totalScrollDistance > distanceThreshold
) {
if (showSearchBar || !isShowInputCustomerNavBar) { if (showSearchBar || !isShowInputCustomerNavBar) {
setShowSearchBar(false); setShowSearchBar(false);
updateListPageState({ updateListPageState({
@@ -146,7 +156,10 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
onNavStateChange?.({ isShowInputCustomerNavBar: true }); onNavStateChange?.({ isShowInputCustomerNavBar: true });
scrollStartPositionRef.current = currentScrollTop; scrollStartPositionRef.current = currentScrollTop;
} }
} else if ((newDirection === 'down' && totalScrollDistance > distanceThreshold) || currentScrollTop <= positionThreshold) { } else if (
(newDirection === "down" && totalScrollDistance > distanceThreshold) ||
currentScrollTop <= positionThreshold
) {
if (!showSearchBar || isShowInputCustomerNavBar) { if (!showSearchBar || isShowInputCustomerNavBar) {
setShowSearchBar(true); setShowSearchBar(true);
updateListPageState({ updateListPageState({
@@ -160,7 +173,12 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
lastScrollTopRef.current = currentScrollTop; lastScrollTopRef.current = currentScrollTop;
lastScrollTimeRef.current = currentTime; lastScrollTimeRef.current = currentTime;
}, },
[showSearchBar, isShowInputCustomerNavBar, updateListPageState, onNavStateChange] [
showSearchBar,
isShowInputCustomerNavBar,
updateListPageState,
onNavStateChange,
]
); );
useEffect(() => { useEffect(() => {
@@ -253,7 +271,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
updateFilterOptions(params); updateFilterOptions(params);
}; };
const handleSearchChange = () => { }; const handleSearchChange = () => {};
const handleDistanceOrQuickChange = (name, value) => { const handleDistanceOrQuickChange = (name, value) => {
updateDistanceQuickFilter({ updateDistanceQuickFilter({
@@ -341,7 +359,11 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
</View> </View>
)} )}
<View className={styles.fixedHeader}> <View className={styles.fixedHeader}>
<View className={`${styles.listTopSearchWrapper} ${showSearchBar ? styles.show : styles.hide}`}> <View
className={`${styles.listTopSearchWrapper} ${
showSearchBar ? styles.show : styles.hide
}`}
>
<SearchBar <SearchBar
handleFilterIcon={toggleShowPopup} handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0} isSelect={filterCount > 0}
@@ -378,7 +400,11 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
onRefresherRefresh={handleRefresh} onRefresherRefresh={handleRefresh}
lowerThreshold={100} lowerThreshold={100}
onScrollToLower={async () => { onScrollToLower={async () => {
if (!loading && !loadingMoreRef.current && listPageState?.isHasMoreData) { if (
!loading &&
!loadingMoreRef.current &&
listPageState?.isHasMoreData
) {
loadingMoreRef.current = true; loadingMoreRef.current = true;
try { try {
await loadMoreMatches(); await loadMoreMatches();
@@ -399,6 +425,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
error={error} error={error}
reload={refreshMatches} reload={refreshMatches}
loadMoreMatches={loadMoreMatches} loadMoreMatches={loadMoreMatches}
evaluateFlag
/> />
</ScrollView> </ScrollView>
</View> </View>
@@ -409,4 +436,3 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
}; };
export default ListPageContent; export default ListPageContent;

14
src/main_pages/components/MyselfPageContent.tsx
View File

@@ -16,7 +16,7 @@ const MyselfPageContent: React.FC = () => {
const pickerOption = usePickerOption(); const pickerOption = usePickerOption();
const { statusNavbarHeightInfo } = useGlobalState() || {}; const { statusNavbarHeightInfo } = useGlobalState() || {};
const { totalHeight = 98 } = statusNavbarHeightInfo || {}; const { totalHeight = 98 } = statusNavbarHeightInfo || {};
const instance = (Taro as any).getCurrentInstance(); const instance = (Taro as any).getCurrentInstance();
const user_id = instance.router?.params?.userid || ""; const user_id = instance.router?.params?.userid || "";
const is_current_user = !user_id; const is_current_user = !user_id;
@@ -26,7 +26,9 @@ const MyselfPageContent: React.FC = () => {
const [ended_game_records, setEndedGameRecords] = useState<TennisMatch[]>([]); const [ended_game_records, setEndedGameRecords] = useState<TennisMatch[]>([]);
const [loading] = useState(false); const [loading] = useState(false);
const [is_following, setIsFollowing] = useState(false); const [is_following, setIsFollowing] = useState(false);
const [active_tab, setActiveTab] = useState<"hosted" | "participated">("hosted"); const [active_tab, setActiveTab] = useState<"hosted" | "participated">(
"hosted"
);
useEffect(() => { useEffect(() => {
pickerOption.getCities(); pickerOption.getCities();
@@ -66,7 +68,7 @@ const MyselfPageContent: React.FC = () => {
const load_game_data = async () => { const load_game_data = async () => {
try { try {
if (!user_info || !('id' in user_info)) { if (!user_info || !("id" in user_info)) {
return; return;
} }
let games_data; let games_data;
@@ -136,7 +138,10 @@ const MyselfPageContent: React.FC = () => {
return ( return (
<View className="myself_page"> <View className="myself_page">
<View className="myself_page_content_main" style={{ paddingTop: `${totalHeight}px` }}> <View
className="myself_page_content_main"
style={{ paddingTop: `${totalHeight}px` }}
>
<View className="user_info_section"> <View className="user_info_section">
<UserInfoCard <UserInfoCard
editable={is_current_user} editable={is_current_user}
@@ -234,4 +239,3 @@ const MyselfPageContent: React.FC = () => {
}; };
export default MyselfPageContent; export default MyselfPageContent;

37
src/store/evaluateStore.ts
View File

@@ -10,21 +10,25 @@ export enum EvaluateScene {
} }
export interface EvaluateCallback { export interface EvaluateCallback {
type: EvaluateScene | '' type: EvaluateScene | "";
// flag是用来区分跳转ntrp测试后的操作和直接修改ntrp水平成功后的操作 // flag是用来区分跳转ntrp测试后的操作和直接修改ntrp水平成功后的操作
// score是用在加入球局前判断是否满足球局要求的返回值，限定为必传 // score是用在加入球局前判断是否满足球局要求的返回值，限定为必传
// next有两个地方调用：ntrp结果页handleGoon、ntrp弹窗（NTRPEvaluatePopup）直接修改点击保存按钮时 // next有两个地方调用：ntrp结果页handleGoon、ntrp弹窗（NTRPEvaluatePopup）直接修改点击保存按钮时
next: ({ flag, score }: { flag?: boolean, score: string }) => void, next: ({ flag, score }: { flag?: boolean; score: string }) => void;
onCancel: () => void, onCancel: () => void;
} }
export interface EvaluateCallbackType extends EvaluateCallback { export interface EvaluateCallbackType extends EvaluateCallback {
setCallback: (options: { type: EvaluateScene | '', next: () => void, onCancel: () => void }) => void, setCallback: (options: {
clear: () => void, type: EvaluateScene | "";
next: ({ flag, score }: { flag?: boolean; score: string }) => void;
onCancel: () => void;
}) => void;
clear: () => void;
} }
export const useEvaluateCallback = create<EvaluateCallbackType>()((set) => ({ export const useEvaluateCallback = create<EvaluateCallbackType>()((set) => ({
type: '', type: "",
next: () => { }, next: () => { },
onCancel: () => { }, onCancel: () => { },
setCallback: ({ type, next, onCancel }) => { setCallback: ({ type, next, onCancel }) => {
@@ -32,15 +36,18 @@ export const useEvaluateCallback = create<EvaluateCallbackType>()((set) => ({
type, type,
next, next,
onCancel, onCancel,
}) });
},
clear: () => {
set({ type: "", next: () => { }, onCancel: () => { } });
}, },
clear: () => { set({ type: '', next: () => { }, onCancel: () => { } }) }
})); }));
export const useEvaluate = () => useEvaluateCallback(({ type, next, onCancel, setCallback, clear }) => ({ export const useEvaluate = () =>
type, useEvaluateCallback(({ type, next, onCancel, setCallback, clear }) => ({
next, type,
onCancel, next,
setCallback, onCancel,
clear, setCallback,
})) clear,
}));