From 01d3acb6d90f51c0faf3da090ec133886d3f11ba Mon Sep 17 00:00:00 2001 From: juguohong Date: Sun, 24 Aug 2025 23:56:03 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E5=88=97=E8=A1=A8=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Bubble/index.tsx | 2 +- src/components/CourtType/index.module.scss | 3 + src/components/CourtType/index.tsx | 31 ++++ src/components/CustomNavbar/index.module.scss | 47 ++++++ src/components/CustomNavbar/index.tsx | 73 +++++++++ src/components/GamePlayType/index.module.scss | 3 + src/components/GamePlayType/index.tsx | 33 +++- src/components/ListCard/index.scss | 4 + src/components/ListCard/index.tsx | 1 - src/components/SearchBar/index.module.scss | 1 - src/config/images.js | 4 +- src/pages/list/FilterPopup.tsx | 27 +++- src/pages/list/index.config.ts | 3 +- src/pages/list/index.tsx | 141 ++++++++++-------- src/static/list/icon-change.svg | 6 + src/static/logo.svg | 3 + src/store/global.ts | 61 ++++++++ src/store/listStore.ts | 15 +- src/utils/getNavbarHeight.ts | 13 ++ types/list/types.ts | 7 +- 20 files changed, 393 insertions(+), 85 deletions(-) create mode 100644 src/components/CourtType/index.module.scss create mode 100644 src/components/CourtType/index.tsx create mode 100644 src/components/CustomNavbar/index.module.scss create mode 100644 src/components/CustomNavbar/index.tsx create mode 100644 src/static/list/icon-change.svg create mode 100644 src/static/logo.svg create mode 100644 src/store/global.ts create mode 100644 src/utils/getNavbarHeight.ts diff --git a/src/components/Bubble/index.tsx b/src/components/Bubble/index.tsx index 8f07166..30dee30 100644 --- a/src/components/Bubble/index.tsx +++ b/src/components/Bubble/index.tsx @@ -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 = ({ options, diff --git a/src/components/CourtType/index.module.scss b/src/components/CourtType/index.module.scss new file mode 100644 index 0000000..f7a1246 --- /dev/null +++ b/src/components/CourtType/index.module.scss @@ -0,0 +1,3 @@ +.courtTypeWrapper { + margin-bottom: 18px; +} \ No newline at end of file diff --git a/src/components/CourtType/index.tsx b/src/components/CourtType/index.tsx new file mode 100644 index 0000000..7f8b163 --- /dev/null +++ b/src/components/CourtType/index.tsx @@ -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 ( + + } /> + + + ); +}; +export default GamePlayType; diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss new file mode 100644 index 0000000..b3a7de1 --- /dev/null +++ b/src/components/CustomNavbar/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/components/CustomNavbar/index.tsx b/src/components/CustomNavbar/index.tsx new file mode 100644 index 0000000..4d2e368 --- /dev/null +++ b/src/components/CustomNavbar/index.tsx @@ -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 ( + + + {/* logo */} + + + + + {/* 位置 */} + {currentAddress} + {!getLocationLoading && ( + + )} + + + 附近${gamesNum}场球局 + + + + + ); +}; +export default ListHeader; diff --git a/src/components/GamePlayType/index.module.scss b/src/components/GamePlayType/index.module.scss index e69de29..2eebf1e 100644 --- a/src/components/GamePlayType/index.module.scss +++ b/src/components/GamePlayType/index.module.scss @@ -0,0 +1,3 @@ +.gamePlayWrapper { + margin-bottom: 18px; +} \ No newline at end of file diff --git a/src/components/GamePlayType/index.tsx b/src/components/GamePlayType/index.tsx index d426d8b..7a70de0 100644 --- a/src/components/GamePlayType/index.tsx +++ b/src/components/GamePlayType/index.tsx @@ -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 ( - + } /> - + {/* { console.log("onClose"); }} @@ -19,9 +37,10 @@ const GamePlayType = () => { { label: "不限", value: "不限" }, { label: "单打", value: "单打" }, { label: "双打", value: "双打" }, + { label: "娱乐", value: "娱乐" }, { label: "拉球", value: "拉球" }, ]} - /> + /> */} ); }; diff --git a/src/components/ListCard/index.scss b/src/components/ListCard/index.scss index 23ed8af..3cf2e16 100644 --- a/src/components/ListCard/index.scss +++ b/src/components/ListCard/index.scss @@ -38,6 +38,10 @@ .location { display: flex; align-items: center; + font-weight: 400; + font-size: 12px; + line-height: 18px; + color: #3C3C4399; } .location-position { diff --git a/src/components/ListCard/index.tsx b/src/components/ListCard/index.tsx index 56bbc42..a5f5f28 100644 --- a/src/components/ListCard/index.tsx +++ b/src/components/ListCard/index.tsx @@ -59,7 +59,6 @@ const ListCard: React.FC = ({ ); }; - console.log("===ttt", !title); return ( {/* 左侧内容区域 */} diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index cc20edd..fc822f1 100644 --- a/src/components/SearchBar/index.module.scss +++ b/src/components/SearchBar/index.module.scss @@ -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; diff --git a/src/config/images.js b/src/config/images.js index f647a3d..d730514 100644 --- a/src/config/images.js +++ b/src/config/images.js @@ -25,5 +25,7 @@ export default { ICON_HEART_CIRCLE: require('@/static/publishBall/icon-heartcircle.png'), ICON_ADD: require('@/static/publishBall/icon-add.svg'), ICON_COPY: require('@/static/publishBall/icon-arrow-right.svg'), - ICON_DELETE: require('@/static/publishBall/icon-delete.svg') + ICON_DELETE: require('@/static/publishBall/icon-delete.svg'), + ICON_LOGO: require('@/static/logo.svg'), + ICON_CHANGE: require('@/static/list/icon-change.svg'), } \ No newline at end of file diff --git a/src/pages/list/FilterPopup.tsx b/src/pages/list/FilterPopup.tsx index 8beea3a..382d862 100644 --- a/src/pages/list/FilterPopup.tsx +++ b/src/pages/list/FilterPopup.tsx @@ -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" }} >
{/* 时间气泡选项 */} @@ -68,7 +73,7 @@ const FilterPopup = (props: FilterPopupProps) => { /> {/* 场次气泡选项 */} -
+ {/*
} @@ -82,9 +87,21 @@ const FilterPopup = (props: FilterPopupProps) => { columns={3} name="site" /> -
+
*/} + {/* CourtType */} + {/* 玩法 */} - + {/* 按钮 */}