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-11-21 14:50:42 +08:00
parent 27264011a1
commit 1c8b6163bb
17 changed files with 485 additions and 1202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/game_pages/list/index.config.ts
View File

@@ -1,8 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '',
enablePullDownRefresh: false, // 禁用页面级下拉刷新，使用 ScrollView 的下拉刷新
backgroundTextStyle: 'dark',
navigationStyle: 'custom',
backgroundColor: '#FAFAFA',
onReachBottomDistance: 300,
})

193
src/game_pages/list/index.module.scss
View File

@@ -1,193 +0,0 @@
// GuideBar 的 z-index 通过局部样式类动态控制
.cqContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// gap: 24px;
.tips {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
.tip1 {
color: #000;
text-align: center;
font-family: "PingFang SC";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 28px;
}
.tip2 {
color: rgba(0, 0, 0, 0.65);
text-align: center;
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.qrcodeWrappper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
.qrcode {
width: 180px;
height: 180px;
// border-radius: 12px;
// border: 1px solid rgba(0, 0, 0, 0.06);
// background: lightgray 50% / cover no-repeat;
// box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.16);
}
.qrcodeTip {
color: rgba(0, 0, 0, 0.65);
text-align: center;
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: -30px;
}
}
}
}
.listPage {
background-color: #FAFAFA;
font-family: "PingFang SC";
transition: padding-top 0.3s ease-in-out; // 添加过渡动画，让布局变化更平滑
display: flex;
flex-direction: column;
height: calc(100vh - var(--status-bar-height, 0px) - var(--nav-bar-height, 0px) - 112px); // 减去底部导航栏高度 112px
overflow: hidden;
.fixedHeader {
position: sticky;
top: 0;
z-index: 90;
display: flex;
flex-direction: column;
}
.listTopSearchWrapper {
// background-color: #fafafa;
// 使用 margin-top 负值来控制可见性，保持元素高度不变，筛选项位置固定
transition: margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease-out;
padding: 10px 15px 10px 15px; // 统一边距：上下10px 左右15px
box-sizing: border-box;
overflow: hidden;
will-change: margin-top, opacity;
&.show {
opacity: 1;
margin-top: 0; // 正常显示
}
&.hide {
opacity: 0;
margin-top: -64px; // 使用负 margin 向上隐藏，但仍占据布局空间 (44px内容 + 20px padding = 64px)
pointer-events: none; // 隐藏时禁用交互
}
}
.listTopFilterWrapper {
display: flex;
box-sizing: border-box;
align-items: center;
padding: 0 15px 10px 15px;
// 上0 左右15px 下10px（与搜索框左右对齐，下边距一致）
gap: 5px;
background-color: #fafafa;
}
.listScrollView {
flex: 1;
height: 0; // 让 flex 生效
}
.menuFilter {
padding: 0;
}
}
.listNavWrapper {
position: relative;
}
.toggleElement {
/* 绝对定位使两个元素重叠 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 过渡动画设置，实现平滑切换 */
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 8px;
}
/* 第一个元素样式 */
.firstElement {
background-color: #4a90e2;
color: white;
}
/* 第二个元素样式 */
.secondElement {
background-color: #5cb85c;
color: white;
/* 初始状态：透明且稍微偏移 */
opacity: 0;
transform: translateY(20px);
}
/* 可见状态 */
.visible {
opacity: 1;
transform: translateY(0);
}
/* 隐藏状态 */
.hidden {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
/* 隐藏时不响应鼠标事件 */
}
// GuideBar 动态 z-index 控制
.guideBarLowZIndex {
z-index: 80 !important; // 筛选弹出时，降低层级，避免遮挡筛选内容
}
.guideBarHighZIndex {
z-index: 900 !important; // 正常状态，保持较高层级
}

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

@@ -1,613 +0,0 @@
import SearchBar from "@/components/SearchBar";
import FilterPopup from "@/components/FilterPopup";
import styles from "./index.module.scss";
import { useEffect, useRef, useCallback, useState } from "react";
import Taro from "@tarojs/taro";
import { useListStore } from "@/store/listStore";
import { useGlobalState } from "@/store/global";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import HomeNavbar from "@/components/HomeNavbar";
import GuideBar from "@/components/GuideBar";
import ListContainer from "@/container/listContainer";
import DistanceQuickFilter from "@/components/DistanceQuickFilter";
import { withAuth } from "@/components";
import { updateUserLocation } from "@/services/userService";
// import ShareCardCanvas from "@/components/ShareCardCanvas";
import { useUserActions } from "@/store/userStore";
import { useDictionaryStore } from "@/store/dictionaryStore";
import { saveImage } from "@/utils";
import { waitForAuthInit } from "@/utils/authInit";
const ListPage = () => {
// 从 store 获取数据和方法
const store = useListStore() || {};
const { fetchUserInfo } = useUserActions();
const { statusNavbarHeightInfo, getCurrentLocationInfo } =
useGlobalState() || {};
const { totalHeight = 98 } = statusNavbarHeightInfo || {}; // 设置默认值，避免从0跳到实际值
const {
listPageState,
loading,
error,
searchValue,
distanceData,
quickFilterData,
getMatchesData,
updateState,
updateListPageState,
updateFilterOptions, // 更新筛选条件
clearFilterOptions,
initialFilterSearch,
loadMoreMatches,
fetchGetGamesCount,
updateDistanceQuickFilter,
getCities,
getCityQrCode,
area,
cityQrCode,
} = store;
const {
isShowFilterPopup,
data: matches,
recommendList,
filterCount,
filterOptions,
distanceQuickFilter,
isShowInputCustomerNavBar,
pageOption,
isShowNoData,
} = listPageState || {};
// 滚动相关状态
const scrollContextRef = useRef(null);
const scrollViewRef = useRef(null); // ScrollView 的 ref
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0);
const scrollDirectionRef = useRef<"up" | "down" | null>(null);
const lastScrollTimeRef = useRef(Date.now());
const loadingMoreRef = useRef(false); // 防止重复加载更多
const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置
const [showSearchBar, setShowSearchBar] = useState(true); // 控制搜索框显示/隐藏（筛选始终显示）
const [scrollTop, setScrollTop] = useState(0); // 控制 ScrollView 滚动位置
// 动态控制 GuideBar 的 z-index
const [guideBarZIndex, setGuideBarZIndex] = useState<"low" | "high">("high");
const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false);
const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false);
const [isCityPickerVisible, setIsCityPickerVisible] = useState(false);
// 处理 PublishMenu 显示/隐藏
const handlePublishMenuVisibleChange = useCallback((visible: boolean) => {
setIsPublishMenuVisible(visible);
}, []);
// 处理 DistanceQuickFilter 显示/隐藏
const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
setIsDistanceFilterVisible(visible);
}, []);
// 处理 CityPicker 显示/隐藏
const handleCityPickerVisibleChange = useCallback((visible: boolean) => {
setIsCityPickerVisible(visible);
}, []);
// 滚动到顶部的方法
const scrollToTop = useCallback(() => {
// 使用一个唯一值触发 scrollTop 更新，确保每次都能滚动到顶部
setScrollTop((prev) => (prev === 0 ? 0.1 : 0));
}, []);
// 监听所有弹窗和菜单的状态，动态调整 GuideBar 的 z-index
useEffect(() => {
if (isPublishMenuVisible) {
// PublishMenu 展开时，GuideBar 保持高层级
setGuideBarZIndex("high");
} else if (
isShowFilterPopup ||
isDistanceFilterVisible ||
isCityPickerVisible
) {
// 任何筛选组件或选择器展开时，GuideBar 降低层级
setGuideBarZIndex("low");
} else {
// 都关闭时，GuideBar 保持高层级
setGuideBarZIndex("high");
}
}, [
isShowFilterPopup,
isPublishMenuVisible,
isDistanceFilterVisible,
isCityPickerVisible,
]);
// 使用 ref 保存最新的状态值，避免依赖项变化导致函数重新创建
const showSearchBarRef = useRef(showSearchBar);
const isShowInputCustomerNavBarRef = useRef(isShowInputCustomerNavBar);
useEffect(() => {
showSearchBarRef.current = showSearchBar;
isShowInputCustomerNavBarRef.current = isShowInputCustomerNavBar;
}, [showSearchBar, isShowInputCustomerNavBar]);
// ScrollView 滚动处理函数
const handleScrollViewScroll = useCallback(
(e: any) => {
const currentScrollTop = e?.detail?.scrollTop || 0;
const lastScrollTop = lastScrollTopRef.current;
const currentTime = Date.now();
const timeDiff = currentTime - lastScrollTimeRef.current;
// 节流：提高到100ms，减少触发频率
if (timeDiff < 100) return;
// 计算滚动距离
const scrollDiff = currentScrollTop - lastScrollTop;
// 判断滚动方向（提高阈值到15px）
let newDirection = scrollDirectionRef.current;
if (Math.abs(scrollDiff) > 15) {
if (scrollDiff > 0) {
// 方向改变时，记录新的起始位置
if (newDirection !== "up") {
scrollStartPositionRef.current = lastScrollTop;
}
newDirection = "up";
} else {
// 方向改变时，记录新的起始位置
if (newDirection !== "down") {
scrollStartPositionRef.current = lastScrollTop;
}
newDirection = "down";
}
scrollDirectionRef.current = newDirection;
}
// 计算从开始滚动到现在的累计距离
const totalScrollDistance = Math.abs(
currentScrollTop - scrollStartPositionRef.current
);
// 滚动阈值
const positionThreshold = 120; // 需要滚动到距离顶部120px
const distanceThreshold = 80; // 需要连续滚动80px才触发
// 使用 ref 获取最新值，避免依赖项变化
const currentShowSearchBar = showSearchBarRef.current;
const currentIsShowInputCustomerNavBar = isShowInputCustomerNavBarRef.current;
if (
newDirection === "up" &&
currentScrollTop > positionThreshold &&
totalScrollDistance > distanceThreshold
) {
// 上滑超过阈值，且连续滚动距离足够，隐藏搜索框
if (currentShowSearchBar || !currentIsShowInputCustomerNavBar) {
setShowSearchBar(false);
updateListPageState({
isShowInputCustomerNavBar: true,
});
// 重置起始位置
scrollStartPositionRef.current = currentScrollTop;
}
} else if (
(newDirection === "down" && totalScrollDistance > distanceThreshold) ||
currentScrollTop <= positionThreshold
) {
// 下滑且连续滚动距离足够，或者回到顶部附近，显示搜索框
if (!currentShowSearchBar || currentIsShowInputCustomerNavBar) {
setShowSearchBar(true);
updateListPageState({
isShowInputCustomerNavBar: false,
});
// 重置起始位置
scrollStartPositionRef.current = currentScrollTop;
}
}
lastScrollTopRef.current = currentScrollTop;
lastScrollTimeRef.current = currentTime;
},
[updateListPageState]
// 移除 showSearchBar 和 isShowInputCustomerNavBar 依赖，使用 ref 获取最新值
);
useEffect(() => {
// 分批异步执行初始化操作，避免阻塞首屏渲染
// 1. 立即执行：获取城市和二维码（轻量操作）
getCities();
getCityQrCode();
// 2. 延迟执行：等待静默登录完成后获取用户信息
requestAnimationFrame(async () => {
try {
await waitForAuthInit();
await fetchUserInfo();
} catch (error) {
console.error('获取用户信息失败:', error);
}
});
// 3. 延迟执行：获取位置信息（可能较慢，不阻塞首屏）
requestAnimationFrame(() => {
requestAnimationFrame(() => {
getLocation().catch((error) => {
console.error('获取位置信息失败:', error);
});
});
});
}, []);
// 监听数据变化，如果是第一页就恢复显示搜索框
useEffect(() => {
if (pageOption?.page === 1 && matches?.length > 0) {
// 恢复搜索框显示
setShowSearchBar(true);
updateListPageState({
isShowInputCustomerNavBar: false,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [matches?.length, pageOption?.page]);
// 注意：updateListPageState 是稳定的函数引用，不需要加入依赖项
// 只依赖实际会变化的数据：matches 的长度和 pageOption.page
// 清理定时器
useEffect(() => {
return () => {
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
};
}, []);
// 监听距离和排序方式变化，自动调用接口
// useEffect(() => {
// // 只有当 distanceQuickFilter 有值时才调用接口
// if (distanceQuickFilter?.distanceFilter !== undefined || distanceQuickFilter?.order !== undefined) {
// // if (distanceQuickFilter?.quick !== "0") {
// getMatchesData();
// // }
// }
// }, [distanceQuickFilter?.distanceFilter, distanceQuickFilter?.order]);
// 获取位置信息
const getLocation = async () => {
const location = await getCurrentLocationInfo();
// 保存位置到全局状态
updateState({ location });
// 同时更新用户位置到后端和 store
if (location && location.latitude && location.longitude) {
try {
await updateUserLocation(location.latitude, location.longitude);
} catch (error) {
console.error("更新用户位置失败:", error);
}
}
fetchGetGamesCount();
// 页面加载时获取数据
getMatchesData();
return location;
};
const refreshMatches = async () => {
await initialFilterSearch(true);
};
// 下拉刷新状态
const [refreshing, setRefreshing] = useState(false);
// ScrollView 下拉刷新处理函数
const handleRefresh = async () => {
setRefreshing(true);
try {
// 调用刷新方法
await refreshMatches();
} catch (error) {
Taro.showToast({
title: "刷新失败，请重试",
icon: "error",
duration: 1000,
});
} finally {
// 使用 requestAnimationFrame 替代 setTimeout(0)，性能更好
requestAnimationFrame(() => {
setRefreshing(false);
});
}
};
/**
* @description 综合筛选确认
* @returns
*/
const handleFilterConfirm = () => {
toggleShowPopup();
getMatchesData();
};
/**
* @description 综合筛选弹框
* @returns
*/
const toggleShowPopup = () => {
updateListPageState({
isShowFilterPopup: !isShowFilterPopup,
});
};
/**
* @description 更新筛选条件
* @param {Record<string, any>} params 筛选项
*/
const handleUpdateFilterOptions = (params: Record<string, any>) => {
updateFilterOptions(params);
};
const handleSearchChange = () => {};
// 距离筛选
const handleDistanceOrQuickChange = (name, value) => {
updateDistanceQuickFilter({
[name]: value,
});
// updateListPageState({
// distanceQuickFilter: {
// ...distanceQuickFilter,
// [name]: value,
// },
// });
};
const handleSearchClick = () => {
Taro.navigateTo({
url: "/game_pages/search/index",
});
};
// ====== 分享 测试 ======
// const [shareImagePath, setShareImagePath] = useState('')
// const handleShare = (imagePath: string) => {
// console.log('===imagePath', imagePath)
// // 避免重复设置相同的图片路径
// if (imagePath && imagePath !== shareImagePath) {
// setShareImagePath(imagePath)
// // 图片生成完成后，显示分享菜单
// Taro.showShareMenu({
// withShareTicket: true,
// success: () => {
// console.log('分享菜单显示成功')
// },
// fail: (error) => {
// console.error('分享菜单显示失败:', error)
// }
// })
// }
// }
// // 页面级分享钩子
// useShareAppMessage(() => {
// console.log('页面分享给好友，图片路径:', shareImagePath)
// return {
// title: '列表页-邀你加入球局',
// path: '/game_pages/list/index',
// imageUrl: shareImagePath || ''
// }
// })
// useShareTimeline(() => {
// console.log('页面分享到朋友圈，图片路径:', shareImagePath)
// return {
// title: '列表页-邀你加入球局',
// query: 'from=timeline',
// imageUrl: shareImagePath || ''
// }
// })
// 初始化字典数据
const initDictionaryData = async () => {
try {
const { fetchDictionary } = useDictionaryStore.getState();
await fetchDictionary();
} catch (error) {
console.error("初始化字典数据失败:", error);
}
};
useEffect(() => {
initDictionaryData();
}, []);
// useEffect(() => {
// generateShareImage({
// userAvatar: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
// userNickname: "华巴抡卡",
// gameType: "单打",
// skillLevel: "NTRP 2.5 - 3.0",
// gameDate: "6月20日(周五)",
// gameTime: "下午5点 2小时",
// venueName: "因乐驰网球俱乐部(嘉定江桥万达店)",
// venueImages: ["https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
// //"https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
// ],
// playerImage: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
// }).then((imagePath) => {
// console.log('===imagePath666', imagePath)
// if (imagePath) {
// setShareImagePath(imagePath)
// }
// })
// }, [])
const area_city = area?.at(-2) || "上海"; // 设置默认值，避免条件渲染的突然切换
function renderCityQrcode() {
let item = cityQrCode.find((item) => item.city_name === area_city);
if (!item) item = cityQrCode.find((item) => item.city_name === "其他");
return (
<View className={styles.cqContainer}>
{item ? (
<View className={styles.wrapper}>
<View className={styles.tips}>
<Text className={styles.tip1}>当前城市暂无球局</Text>
<Text className={styles.tip2}>
加入城市球友群，获得最新球局消息
</Text>
</View>
<View className={styles.qrcodeWrappper}>
<Image
className={styles.qrcode}
src={item.qr_code_url}
mode="widthFix"
onClick={() => {
saveImage(item.qr_code_url);
}}
/>
<Text className={styles.qrcodeTip}>
点击图片保存，使用微信扫码加入群聊
</Text>
</View>
</View>
) : (
<View>
<Text>当前城市暂无球局, 敬请期待</Text>
</View>
)}
</View>
);
}
return (
<>
{/* 自定义导航 */}
<HomeNavbar
config={{
showInput: isShowInputCustomerNavBar,
}}
onCityPickerVisibleChange={handleCityPickerVisibleChange}
onScrollToTop={scrollToTop}
/>
{area_city !== "上海" ? (
renderCityQrcode()
) : (
<View ref={scrollContextRef}>
{/* 列表内容 */}
<View className={styles.listPage} style={{ paddingTop: totalHeight }}>
{/* 综合筛选 */}
{isShowFilterPopup && (
<View>
<FilterPopup
loading={loading}
onCancel={toggleShowPopup}
onConfirm={handleFilterConfirm}
onChange={handleUpdateFilterOptions}
filterOptions={filterOptions}
onClear={clearFilterOptions}
visible={isShowFilterPopup}
onClose={toggleShowPopup}
statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
/>
</View>
)}
{/* 固定在顶部的搜索框和筛选 */}
<View className={styles.fixedHeader}>
{/* 搜索框 - 可隐藏 */}
<View
className={`${styles.listTopSearchWrapper} ${
showSearchBar ? styles.show : styles.hide
}`}
>
<SearchBar
handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0}
filterCount={filterCount}
onChange={handleSearchChange}
value={searchValue}
onInputClick={handleSearchClick}
/>
</View>
{/* 筛选 - 始终显示，固定在原位置 */}
<View className={styles.listTopFilterWrapper}>
<DistanceQuickFilter
cityOptions={distanceData}
quickOptions={quickFilterData}
onChange={handleDistanceOrQuickChange}
cityName="distanceFilter"
quickName="order"
cityValue={distanceQuickFilter?.distanceFilter}
quickValue={distanceQuickFilter?.order}
onMenuVisibleChange={handleDistanceFilterVisibleChange}
/>
</View>
</View>
{/* 可滚动的列表内容 */}
<ScrollView
ref={scrollViewRef}
scrollY
scrollTop={scrollTop}
className={styles.listScrollView}
scrollWithAnimation
enhanced
showScrollbar={false}
refresherEnabled={true}
refresherTriggered={refreshing}
onRefresherRefresh={handleRefresh}
lowerThreshold={100}
onScrollToLower={async () => {
// 防止重复调用，检查 loading 状态和是否正在加载更多
if (
!loading &&
!loadingMoreRef.current &&
listPageState?.isHasMoreData
) {
loadingMoreRef.current = true;
try {
await loadMoreMatches();
} catch (error) {
console.error("加载更多失败:", error);
} finally {
// 接口完成后重置状态，允许下次加载
loadingMoreRef.current = false;
}
}
}}
onScroll={handleScrollViewScroll}
>
<ListContainer
data={matches}
recommendList={recommendList}
loading={loading}
isShowNoData={isShowNoData}
error={error}
reload={refreshMatches}
loadMoreMatches={loadMoreMatches}
evaluateFlag
/>
</ScrollView>
</View>
</View>
)}
<GuideBar
currentPage="list"
guideBarClassName={`${styles.guideBarList} ${
guideBarZIndex === "low"
? styles.guideBarLowZIndex
: styles.guideBarHighZIndex
}`}
onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
/>
</>
);
};
export default ListPage;