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

Merge branch 'master' of https://gitee.com/ballminiprogramwe/mini-programs

Browse Source
This commit is contained in:
刘杰
2025-08-24 23:57:27 +08:00
parent 97720b99cb 7249539c10
commit aaea9ee6ed
20 changed files with 392 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Bubble/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import styles from "./index.module.scss";
import BubbleItem from "./BubbleItem";
import {BubbleProps} from '../../../types/list/types'
import {BubbleOption, BubbleProps} from '../../../types/list/types'
const Bubble: React.FC<BubbleProps> = ({
options,

3
src/components/CourtType/index.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.courtTypeWrapper {
margin-bottom: 18px;
}

31
src/components/CourtType/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { View, Image } from "@tarojs/components";
import TitleComponent from "@/components/Title";
import img from "@/config/images";
import Bubble from "../Bubble";
import { BubbleOption } from "types/list/types";
import styles from './index.module.scss'
interface IProps {
name: string;
options: BubbleOption[];
value: string;
onChange: (name: string, value: string) => void;
}
const GamePlayType = (props: IProps) => {
const { name, onChange , options, value} = props;
return (
<View className={styles.courtTypeWrapper}>
<TitleComponent title="场地类型" icon={<Image src={img.ICON_SITE} />} />
<Bubble
options={options}
value={value}
onChange={onChange}
layout="grid"
size="small"
columns={3}
name={name}
/>
</View>
);
};
export default GamePlayType;

47
src/components/CustomNavbar/index.module.scss Normal file
View File

@@ -0,0 +1,47 @@
.customerNavbar {
// background-color: red;
.container {
padding-left: 17px;
display: flex;
align-items: center;
gap: 8px;
}
.line {
width: 1px;
height: 25px;
background-color: #0000000F;
}
.logo {
width: 60px;
height: 34px;
}
.change {
width: 12px;
height: 12px;
}
.cityWrapper {
line-height: 20px;
}
.city {
font-weight: 600;
font-size: 13px;
line-height: 20px;
}
.infoWrapper {
line-height: 12px;
}
.info {
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #3C3C4399;
}
}

73
src/components/CustomNavbar/index.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { View, Text, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import { getNavbarHeight } from "@/utils/getNavbarHeight";
import styles from "./index.module.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
const ListHeader = () => {
const { statusBarHeight, navbarHeight, totalHeight } = getNavbarHeight();
const {
updateState,
location,
getLocationText,
getLocationLoading,
getNavbarHeightInfo,
} = useGlobalState();
const { gamesNum } = useListState();
// 获取位置信息
const getCurrentLocal = () => {
updateState({
getLocationLoading: true,
});
getCurrentLocation().then((res) => {
updateState({
getLocationLoading: false,
location: res || {},
});
});
};
useEffect(() => {
getNavbarHeightInfo();
getCurrentLocal();
}, []);
const currentAddress = getLocationLoading
? getLocationText
: location?.address;
return (
<View
className={styles.customerNavbar}
style={{ height: `${totalHeight}px` }}
>
<View
className={styles.container}
style={{
height: `${navbarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
{/* logo */}
<Image src={img.ICON_LOGO} className={styles.logo} />
<View className={styles.line} />
<View className={styles.content}>
<View className={styles.cityWrapper}>
{/* 位置 */}
<Text className={styles.city}>{currentAddress}</Text>
{!getLocationLoading && (
<Image src={img.ICON_CHANGE} className={styles.change} />
)}
</View>
<View className={styles.infoWrapper}>
<Text className={styles.info}>附近${gamesNum}场球局</Text>
</View>
</View>
</View>
</View>
);
};
export default ListHeader;

3
src/components/GamePlayType/index.module.scss
View File

@@ -0,0 +1,3 @@
.gamePlayWrapper {
margin-bottom: 18px;
}

33
src/components/GamePlayType/index.tsx
View File

@@ -1,13 +1,31 @@
import PopupGameplay from "../../pages/publishBall/components/PopupGameplay";
import { View, Text, Image } from "@tarojs/components";
// import PopupGameplay from "../../pages/publishBall/components/PopupGameplay";
import { View, Image } from "@tarojs/components";
import TitleComponent from "@/components/Title";
import img from "@/config/images";
const GamePlayType = () => {
import Bubble from "../Bubble";
import styles from "./index.module.scss";
import { BubbleOption } from "types/list/types";
interface IProps {
name: string;
value: string;
options: BubbleOption[];
onChange: (name: string, value: string) => void;
}
const GamePlayType = (props: IProps) => {
const { name, onChange, value, options } = props;
return (
<View>
<View className={styles.gamePlayWrapper}>
<TitleComponent title="玩法" icon={<Image src={img.ICON_SITE} />} />
<PopupGameplay
<Bubble
options={options}
value={value}
onChange={onChange}
layout="grid"
size="small"
columns={3}
name={name}
/>
{/* <PopupGameplay
onClose={() => {
console.log("onClose");
}}
@@ -19,9 +37,10 @@ const GamePlayType = () => {
{ label: "不限", value: "不限" },
{ label: "单打", value: "单打" },
{ label: "双打", value: "双打" },
{ label: "娱乐", value: "娱乐" },
{ label: "拉球", value: "拉球" },
]}
/>
/> */}
</View>
);
};

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

@@ -38,6 +38,10 @@
.location {
display: flex;
align-items: center;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #3C3C4399;
}
.location-position {

1
src/components/ListCard/index.tsx
View File

@@ -59,7 +59,6 @@ const ListCard: React.FC<ListCardProps> = ({
</View>
);
};
console.log("===ttt", !title);
return (
<View className="list-item">
{/* 左侧内容区域 */}

1
src/components/SearchBar/index.module.scss
View File

@@ -1,5 +1,4 @@
.searchBar {
--nutui-searchbar-padding: 10px 15px;
--nutui-searchbar-font-size: 16px;
--nutui-searchbar-input-height: 44px;
--nutui-searchbar-content-border-radius: 44px;

2
src/config/images.js
View File

@@ -31,4 +31,6 @@ export default {
ICON_CIRCLE_UNSELECT: require('@/static/publishBall/icon-circle-unselect.svg'),
ICON_CIRCLE_SELECT: require('@/static/publishBall/icon-circle-select-ring.svg'),
ICON_CIRCLE_SELECT_ARROW: require('@/static/publishBall/icon-circle-select-arrow.svg'),
ICON_LOGO: require('@/static/logo.svg'),
ICON_CHANGE: require('@/static/list/icon-change.svg'),
}

27
src/pages/list/FilterPopup.tsx
View File

@@ -8,6 +8,9 @@ import { Image } from "@tarojs/components";
import img from "../../config/images";
import { useListStore } from "src/store/listStore";
import { FilterPopupProps } from "../../../types/list/types";
// 场地
import CourtType from "@/components/CourtType";
// 玩法
import GamePlayType from "@/components/GamePlayType";
const FilterPopup = (props: FilterPopupProps) => {
@@ -20,10 +23,11 @@ const FilterPopup = (props: FilterPopupProps) => {
onClear,
visible,
onClose,
statusNavbarHeigh,
} = props;
const store = useListStore() || {};
const { timeBubbleData, locationOptions } = store;
const { timeBubbleData, locationOptions, gamePlayOptions } = store;
const handleFilterChange = (name, value) => {
onChange({ [name]: value });
@@ -42,7 +46,8 @@ const FilterPopup = (props: FilterPopupProps) => {
round
visible={visible}
onClose={onClose}
// closeOnOverlayClick={true}
style={{ marginTop: statusNavbarHeigh + "px" }}
overlayStyle={{ marginTop: statusNavbarHeigh + "px" }}
>
<div className={styles.filterPopupWrapper}>
{/* 时间气泡选项 */}
@@ -68,7 +73,7 @@ const FilterPopup = (props: FilterPopupProps) => {
/>
{/* 场次气泡选项 */}
<div>
{/* <div>
<TitleComponent
title="场地类型"
icon={<Image src={img.ICON_SITE} />}
@@ -82,9 +87,21 @@ const FilterPopup = (props: FilterPopupProps) => {
columns={3}
name="site"
/>
</div>
</div> */}
{/* CourtType */}
<CourtType
onChange={handleFilterChange}
name="court_type"
options={locationOptions}
value={filterOptions?.site}
/>
{/* 玩法 */}
<GamePlayType />
<GamePlayType
onChange={handleFilterChange}
name="game_play"
options={gamePlayOptions}
value={filterOptions?.game_play}
/>
{/* 按钮 */}
<div className={styles.filterPopupBtnWrapper}>
<Button

3
src/pages/list/index.config.ts
View File

@@ -1,5 +1,6 @@
export default definePageConfig({
navigationBarTitleText: '',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
backgroundTextStyle: 'dark',
navigationStyle: 'custom',
})

29
src/pages/list/index.tsx
View File

@@ -7,14 +7,19 @@ import SearchBar from "../../components/SearchBar";
import FilterPopup from "./FilterPopup";
import styles from "./index.module.scss";
import { useEffect } from "react";
import Taro from "@tarojs/taro";
import { useListStore } from "../../store/listStore";
import Taro, { useReachBottom } from "@tarojs/taro";
import { useListStore } from "@/store/listStore";
import {useGlobalState} from '@/store/global'
import { View } from "@tarojs/components";
import CustomerNavBar from "@/components/CustomNavbar";
const ListPage = () => {
// 从 store 获取数据和方法
const store = useListStore() || {};
console.log("===store===", store);
const {statusNavbarHeightInfo } = useGlobalState() || {}
// console.log("===store===", store);
// console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
const {
isShowFilterPopup,
error,
@@ -33,6 +38,12 @@ const ListPage = () => {
distanceQuickFilter,
} = store;
useReachBottom(() => {
console.log("触底了");
// 调用 store 的加载更多方法
// loadMoreMatches();
});
useEffect(() => {
// 页面加载时获取数据
fetchMatches();
@@ -143,10 +154,6 @@ const ListPage = () => {
updateState({ isShowFilterPopup: !isShowFilterPopup });
};
const updateFilterSelect = (params) => {
updateState(params);
};
/**
* @description 更新筛选条件
* @param {Record<string, any>} params 筛选项
@@ -166,8 +173,11 @@ const ListPage = () => {
},
});
};
console.log("===visible", isShowFilterPopup);
return (
<>
<CustomerNavBar />
<View className={styles.listPage}>
<View className={styles.listTopSearchWrapper}>
<SearchBar
@@ -188,6 +198,7 @@ const ListPage = () => {
onClear={clearFilterOptions}
visible={isShowFilterPopup}
onClose={toggleShowPopup}
statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
/>
</div>
)}
@@ -224,11 +235,13 @@ const ListPage = () => {
{/* 空状态 */}
{loading &&
matches.length === 0 &&
new Array(10).fill(0).map(() => {
return <ListCardSkeleton />;
})}
</View>
</View>
</>
);
};

6
src/static/list/icon-change.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 4.75H1.5" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 1.75L10.5 4.75" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.69977 7.25H10.6998" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.69971 7.25L4.69972 10.25" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 492 B

3
src/static/logo.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="58" height="26" viewBox="0 0 58 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.354376 14.418V11.5176C0.354376 4.85547 4.53797 0.583984 11.2352 0.583984C13.8895 0.583984 16.3505 1.28711 18.1434 2.42969C19.9013 3.51953 21.0263 5.01367 21.0263 6.54297C21.0263 8.16016 19.8837 9.28516 18.2489 9.28516C17.5458 9.28516 16.9657 9.07422 16.4559 8.72266C15.0321 7.77344 13.9071 6.38477 11.7802 6.38477C8.7743 6.38477 7.29774 8.21289 7.29774 11.8867V14.4004C7.29774 18.0215 8.7743 19.9375 11.6044 19.9375C13.7138 19.9375 15.1376 18.707 15.1376 16.9316V16.4395H14.0653C12.3251 16.4395 11.3759 15.5957 11.3759 14.0664C11.3759 12.5371 12.3075 11.7461 14.0653 11.7461H17.8798C20.5165 11.7461 21.6591 12.8535 21.6591 15.3672V16.3164C21.6591 21.8887 17.5809 25.5273 11.3055 25.5273C4.41492 25.5273 0.354376 21.3613 0.354376 14.418ZM24.4648 14.4004V11.7988C24.4648 4.78516 28.4902 0.583984 35.4688 0.583984C42.4473 0.583984 46.4551 4.80273 46.4551 11.7988V14.4004C46.4551 21.3613 42.4473 25.5273 35.4688 25.5273C28.4902 25.5273 24.4648 21.3438 24.4648 14.4004ZM31.4082 11.7461V14.3828C31.4082 17.916 32.9023 19.9551 35.4688 19.9551C38.0352 19.9551 39.5117 17.916 39.5117 14.3828V11.7461C39.5117 8.21289 38.0352 6.15625 35.4688 6.15625C32.9023 6.15625 31.4082 8.21289 31.4082 11.7461ZM50.4562 14.9453L49.9464 3.67773C49.8585 1.72656 51.3527 0.126953 53.4796 0.126953C55.6066 0.126953 57.1359 1.72656 57.0304 3.67773L56.4679 14.9453C56.3624 16.6504 55.0792 17.7754 53.462 17.7754C51.8097 17.7754 50.5265 16.5801 50.4562 14.9453ZM49.9816 22.2578C49.9816 20.3418 51.5636 19.1641 53.4972 19.1641C55.4132 19.1641 56.9777 20.3418 56.9777 22.2578C56.9777 24.1914 55.4132 25.3691 53.4972 25.3691C51.5636 25.3691 49.9816 24.1914 49.9816 22.2578Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

61
src/store/global.ts Normal file
View File

@@ -0,0 +1,61 @@
import { create } from 'zustand'
import { getNavbarHeight } from '@/utils/getNavbarHeight'
interface GlobalState {
location: Record<string, any>
getLocationLoading: boolean
getLocationText: string
statusNavbarHeightInfo: {
statusBarHeight: number
navbarHeight: number
totalHeight: number
}
}
interface GlobalActions {
updateState: (payload: Record<string, any>) => void
getNavbarHeightInfo: () => void
}
// 完整的 Store 类型
type GlobalStore = GlobalState & GlobalActions
// 创建 store
export const useGlobalStore = create<GlobalStore>()((set, get) => ({
// 位置信息
location: {},
// 正在获取位置信息
getLocationLoading: false,
// 获取位置信息文本
getLocationText: '定位中...',
// 状态栏和导航栏高度信息
statusNavbarHeightInfo: {
statusBarHeight: 0,
navbarHeight: 0,
totalHeight: 0
},
// 获取导航栏高度信息
getNavbarHeightInfo: () => {
const { statusBarHeight, navbarHeight } = getNavbarHeight();
set({
statusNavbarHeightInfo: {
statusBarHeight,
navbarHeight,
totalHeight: statusBarHeight + navbarHeight
}
})
},
// 更新store数据
updateState: (payload: Record<string, any>) => {
const state = get();
set({
...state,
...(payload || {})
})
}
}))
// 导出便捷的 hooks
export const useGlobalState = () => useGlobalStore((state) => state)

15
src/store/listStore.ts
View File

@@ -9,8 +9,8 @@ const defaultFilterOptions: IFilterOptions = {
location: '', // 位置
time: '', // 时间
ntrp: [1.0, 5.0], // NTRP 水平区间
site: '', // 场地类型
wanfa: '', // 玩法
court_type: '', // 场地类型
game_play: '', // 玩法
};
const defaultDistance = 'all'; // 默认距离
@@ -65,6 +65,16 @@ export const useListStore = create<TennisStore>()((set, get) => ({
{ id: 2, label: "室外", value: "2" },
{ id: 3, label: "半室外", value: "3" },
],
// 玩法数据
gamePlayOptions: [
{ id: 1, label: "不限", value: "不限" },
{ id: 2, label: "单打", value: "单打" },
{ id: 3, label: "双打", value: "双打" },
{ id: 4, label: "娱乐", value: "娱乐" },
{ id: 5, label: "拉球", value: "拉球" },
],
// 球局数量
gamesNum: 124,
// 获取比赛数据
fetchMatches: async (params) => {
@@ -106,6 +116,7 @@ export const useListStore = create<TennisStore>()((set, get) => ({
// 更新综合筛选项
updateFilterOptions: (payload: Record<string, any>) => {
console.log('===更新综合筛选项', payload)
const preFilterOptions = get()?.filterOptions || {}
const filterOptions = { ...preFilterOptions, ...payload }
const filterCount = Object.values(filterOptions).filter(Boolean).length

13
src/utils/getNavbarHeight.ts Normal file
View File

@@ -0,0 +1,13 @@
import Taro from "@tarojs/taro";
export const getNavbarHeight = (): { statusBarHeight: number; navbarHeight: number; totalHeight: number; } => {
const systemInfo = Taro.getSystemInfoSync();
const statusBarHeight = systemInfo?.statusBarHeight || 0;
const isIOS = systemInfo.platform === "ios";
const navbarHeight = isIOS ? 44 : 48;
return {
statusBarHeight,
navbarHeight,
totalHeight: statusBarHeight + navbarHeight,
};
};

7
types/list/types.ts
View File

@@ -16,8 +16,8 @@ export interface IFilterOptions {
location: string
time: string
ntrp: [number, number]
site: string
wanfa: string
court_type: string
game_play: string
}
export interface ListState {
matches: TennisMatch[]
@@ -37,6 +37,8 @@ export interface ListState {
}
timeBubbleData: BubbleOption[]
locationOptions: BubbleOption[]
gamePlayOptions: BubbleOption[]
gamesNum: number
}
export interface ListState {
@@ -139,6 +141,7 @@ export interface FilterPopupProps {
onClear: () => void;
visible: boolean;
onClose: () => void;
statusNavbarHeigh: number
}
// 列表卡片