自定列表导航栏

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<BubbleProps> = ({
   options,

src/components/CourtType/index.module.scss

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

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 (
+    <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;

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;
+  }
+}

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 (
+    <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;

src/components/GamePlayType/index.module.scss

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

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 (
-    <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>
   );
 };

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 {

src/components/ListCard/index.tsx

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

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;