Merge remote-tracking branch 'origin' into feat/liujie
This commit is contained in:
72
src/pages/list/FilterPopup.tsx
Normal file
72
src/pages/list/FilterPopup.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Popup } from "@nutui/nutui-react-taro";
|
||||
import Range from "../../components/Range";
|
||||
import Bubble, { BubbleOption } from "../../components/Bubble";
|
||||
import styles from "./filterPopup.module.scss";
|
||||
import TitleComponent from "src/components/Title";
|
||||
|
||||
const timeOptions: BubbleOption[] = [
|
||||
{ id: 1, label: "晨间 6:00-10:00", value: "morning" },
|
||||
{ id: 2, label: "上午 10:00-12:00", value: "forenoon" },
|
||||
{ id: 3, label: "中午 12:00-14:00", value: "noon" },
|
||||
{ id: 4, label: "下午 14:00-18:00", value: "afternoon" },
|
||||
{ id: 5, label: "晚上 18:00-22:00", value: "evening" },
|
||||
{ id: 6, label: "夜间 22:00-24:00", value: "night" },
|
||||
];
|
||||
|
||||
const locationOptions: BubbleOption[] = [
|
||||
{ id: 1, label: "室内", value: "1" },
|
||||
{ id: 2, label: "室外", value: "2" },
|
||||
{ id: 3, label: "半室外", value: "3" },
|
||||
];
|
||||
|
||||
const FilterPopup = () => {
|
||||
return (
|
||||
<>
|
||||
<Popup
|
||||
visible={true}
|
||||
destroyOnClose
|
||||
position="top"
|
||||
round
|
||||
closeOnOverlayClick={false}
|
||||
onClose={() => {
|
||||
// setShowTop(false)
|
||||
}}
|
||||
>
|
||||
<div className={styles.filterPopupWrapper}>
|
||||
{/* 时间气泡选项 */}
|
||||
<Bubble
|
||||
options={timeOptions}
|
||||
value={(value) => {}}
|
||||
onChange={(value) => {}}
|
||||
layout="grid"
|
||||
size="small"
|
||||
columns={3}
|
||||
/>
|
||||
|
||||
{/* 范围选择 */}
|
||||
<Range
|
||||
min={1.0}
|
||||
max={5.0}
|
||||
step={0.5}
|
||||
className={styles.filterPopupRange}
|
||||
/>
|
||||
|
||||
{/* 场次气泡选项 */}
|
||||
<div>
|
||||
<TitleComponent title="场地类型" />
|
||||
<Bubble
|
||||
options={locationOptions}
|
||||
value={(value) => {}}
|
||||
onChange={(value) => {}}
|
||||
layout="grid"
|
||||
size="small"
|
||||
columns={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterPopup;
|
||||
8
src/pages/list/filterPopup.module.scss
Normal file
8
src/pages/list/filterPopup.module.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.filterPopupWrapper {
|
||||
$m18: 18px;
|
||||
padding: $m18;
|
||||
.filterPopupRange {
|
||||
margin-top: $m18;
|
||||
margin-bottom: $m18;
|
||||
}
|
||||
}
|
||||
5
src/pages/list/index.config.ts
Normal file
5
src/pages/list/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundTextStyle: 'dark'
|
||||
})
|
||||
0
src/pages/list/index.scss
Normal file
0
src/pages/list/index.scss
Normal file
206
src/pages/list/index.tsx
Normal file
206
src/pages/list/index.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import ListItem from "../../components/ListItem";
|
||||
import List from "../../components/List";
|
||||
import Bubble from "../../components/Bubble/example";
|
||||
import Range from "../../components/Range/example";
|
||||
import Menu from "../../components/Menu/example";
|
||||
import CityFilter from "../../components/CityFilter/example";
|
||||
import SearchBar from "../../components/SearchBar";
|
||||
import FilterPopup from "./FilterPopup";
|
||||
import "./index.scss";
|
||||
import { useEffect } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
import {
|
||||
useTennisMatches,
|
||||
useTennisLoading,
|
||||
useTennisError,
|
||||
useTennisLastRefresh,
|
||||
useTennisActions,
|
||||
} from "../../store/listStore";
|
||||
|
||||
const ListPage = () => {
|
||||
// 从 store 获取数据和方法
|
||||
const matches = useTennisMatches();
|
||||
const loading = useTennisLoading();
|
||||
const error = useTennisError();
|
||||
const lastRefreshTime = useTennisLastRefresh();
|
||||
const { fetchMatches, refreshMatches, clearError } = useTennisActions();
|
||||
|
||||
useEffect(() => {
|
||||
// 页面加载时获取数据
|
||||
fetchMatches();
|
||||
}, [fetchMatches]);
|
||||
|
||||
// 下拉刷新处理函数 - 使用Taro生命周期钩子
|
||||
Taro.usePullDownRefresh(() => {
|
||||
console.log("触发下拉刷新");
|
||||
|
||||
// 调用 store 的刷新方法
|
||||
refreshMatches()
|
||||
.then(() => {
|
||||
// 刷新完成后停止下拉刷新动画
|
||||
Taro.stopPullDownRefresh();
|
||||
|
||||
// 显示刷新成功提示
|
||||
Taro.showToast({
|
||||
title: "刷新成功",
|
||||
icon: "success",
|
||||
duration: 1500,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// 刷新失败时也停止动画
|
||||
Taro.stopPullDownRefresh();
|
||||
|
||||
Taro.showToast({
|
||||
title: "刷新失败",
|
||||
icon: "error",
|
||||
duration: 1500,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 错误处理
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
Taro.showToast({
|
||||
title: error,
|
||||
icon: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
// 3秒后自动清除错误
|
||||
setTimeout(() => {
|
||||
clearError();
|
||||
}, 3000);
|
||||
}
|
||||
}, [error, clearError]);
|
||||
|
||||
// 格式化时间显示
|
||||
const formatRefreshTime = (timeString: string | null) => {
|
||||
if (!timeString) return "";
|
||||
const date = new Date(timeString);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
|
||||
if (minutes < 1) return "刚刚";
|
||||
if (minutes < 60) return `${minutes}分钟前`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}小时前`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
// 加载状态显示
|
||||
if (loading && matches.length === 0) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "200px",
|
||||
fontSize: "14px",
|
||||
color: "#999",
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: "10px" }}>加载中...</div>
|
||||
<div style={{ fontSize: "12px", color: "#ccc" }}>
|
||||
正在获取网球比赛数据
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 错误状态显示
|
||||
if (error && matches.length === 0) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "200px",
|
||||
fontSize: "14px",
|
||||
color: "#999",
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: "10px" }}>加载失败</div>
|
||||
<div style={{ marginBottom: "15px", fontSize: "12px", color: "#ccc" }}>
|
||||
{error}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => fetchMatches()}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
fontSize: "12px",
|
||||
color: "#fff",
|
||||
backgroundColor: "#007aff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SearchBar />
|
||||
{/* 综合筛选 */}
|
||||
<div>
|
||||
<FilterPopup />
|
||||
</div>
|
||||
{/* 筛选 */}
|
||||
<div>
|
||||
{/* 全城筛选 */}
|
||||
<CityFilter />
|
||||
{/* 智能排序 */}
|
||||
<Menu />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* 列表内容 */}
|
||||
<List>
|
||||
{matches.map((match, index) => (
|
||||
<ListItem key={match.id || index} {...match} />
|
||||
))}
|
||||
</List>
|
||||
|
||||
{/* 空状态 */}
|
||||
{!loading && matches.length === 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "200px",
|
||||
fontSize: "14px",
|
||||
color: "#999",
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: "10px" }}>暂无比赛数据</div>
|
||||
<button
|
||||
onClick={() => fetchMatches()}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
fontSize: "12px",
|
||||
color: "#fff",
|
||||
backgroundColor: "#007aff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListPage;
|
||||
Reference in New Issue
Block a user