处理列表

src/components/CustomNavbar/index.tsx

@@ -9,12 +9,12 @@ interface IProps {
 const CustomNavbar = (props: IProps) => {
   const { children } = props;
   const { statusNavbarHeightInfo } = useGlobalState();
-  const { totalHeight } = statusNavbarHeightInfo;
+  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
 
   return (
     <View
       className={styles.customerNavbar}
-      style={{ height: `${totalHeight}px` }}
+      style={{ height: `${navbarHeight}px`, paddingTop: `${statusBarHeight}px`, }}
     >
       {children}
     </View>

src/components/DistanceQuickFilter/index.scss

@@ -1,5 +1,6 @@
 .distanceQuickFilterWrap {
   width: 100%;
+  --nutui-menu-bar-line-height: 30px;
 
   .nut-menu-bar {
     background-color: unset;
@@ -35,19 +36,6 @@
     border-bottom-right-radius: 30px;
   }
 
-  // .nut-menu-container-item {
-  //   color: rgba(60, 60, 67, 0.6);
-  //   font-size: 14px;
-  //   font-weight: 600;
-  //   line-height: 20px;
-  // }
-
-  // .nut-menu-container-item.active {
-  //   flex-direction: row-reverse;
-  //   justify-content: space-between;
-  //   color: #000;
-  // }
-
   .positionWrap {
     display: flex;
     align-items: center;

src/components/DistanceQuickFilter/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Menu, Button } from "@nutui/nutui-react-taro";
-import { Image, View, Text } from "@tarojs/components";
+import { useRef, useState } from "react";
+import { Menu } from "@nutui/nutui-react-taro";
+import { Image, View } from "@tarojs/components";
 import img from "@/config/images";
 import Bubble from "../Bubble";
 import "./index.scss";
 
-const Demo3 = (props) => {
+const DistanceQuickFilter = (props) => {
   const {
     cityOptions,
     quickOptions,
@@ -49,6 +49,7 @@ const Demo3 = (props) => {
   };
 
   return (
+    <View>    
     <Menu
       className={`distanceQuickFilterWrap ${filterWrapperClassName}`}
     >
@@ -105,6 +106,7 @@ const Demo3 = (props) => {
         </View>
       </Menu.Item>
     </Menu>
+    </View>
   );
 };
-export default Demo3;
+export default DistanceQuickFilter;

src/components/FilterPopup/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Popup } from "@nutui/nutui-react-taro";
 import Range from "../../components/Range";
 import Bubble from "../../components/Bubble";
@@ -29,7 +29,7 @@ const FilterPopup = (props: FilterPopupProps) => {
   } = props;
   const store = useListStore() || {};
   const { getDictionaryValue } = useDictionaryActions() || {};
-  const { timeBubbleData, gamesNum, dateRangeOptions } = store;
+  const { timeBubbleData, gamesNum } = store;
 
   /**
    * @description 处理字典选项
@@ -91,7 +91,7 @@ const FilterPopup = (props: FilterPopupProps) => {
         round
         visible={visible}
         onClose={onClose}
-        style={{ marginTop: statusNavbarHeigh + "px" }}
+        style={{ marginTop: statusNavbarHeigh + "px", maxHeight: '75vh' }}
         overlayStyle={{ marginTop: statusNavbarHeigh + "px" }}
         zIndex={1001}
       >

src/components/ListCard/index.scss

@@ -269,6 +269,15 @@
     display: flex;
     align-items: center;
     gap: 5px;
+    flex-shrink: 0;
+  }
+
+  .localAreaWrapper {
+    max-width: 69%;
+  }
+
+  .localAreaTitle {
+    flex-shrink: 0;
   }
 
   .smoothTitle {
@@ -291,5 +300,11 @@
   .localArea {
     border: 0.5px solid #FFFFFFA6;
     border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .localAreaText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

src/components/ListCard/index.tsx

@@ -18,7 +18,21 @@ const ListCard: React.FC<ListCardProps> = ({
   image_list = [],
   court_type,
   key,
+  participants, // 参与者图片
+  venue_image_list, // 场馆图片
+  venue_description,
+  game_type, // 球局类型
 }) => {
+
+  // 参与者要前三个数据
+  const participantsImageList = participants?.slice(0, 3) || [];
+  // 场地 要第一个数据
+  // const venueImageList = venue_image_list?.slice(0, 1) || [];
+  const venueImage = venue_image_list?.[0]?.url || '';
+
+  // 是否显示畅打球局
+  const isShowSmoothPlayingGame = game_type === '畅打球局';
+
   const renderItemImage = (src: string) => {
     return (
       <Image
@@ -32,7 +46,6 @@ const ListCard: React.FC<ListCardProps> = ({
   };
 
   const handleViewDetail = () => {
-    console.log("id", id);
     Taro.navigateTo({
       url: `/game_pages/detail/index?id=${id || 1}&from=list`,
     });
@@ -120,11 +133,11 @@ const ListCard: React.FC<ListCardProps> = ({
           <View className="bottom-info">
             <View className="left-section">
               <View className="avatar-group">
-                {Array.from({ length: 3 }).map((_, index) => (
+                {(participantsImageList || []).map((item, index) => (
                   <View key={index} className="avatar">
                     <Image
                       className="avatar-image"
-                      src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
+                      src={item?.user?.avatar_url}
                       mode="aspectFill"
                     />
                   </View>
@@ -157,24 +170,24 @@ const ListCard: React.FC<ListCardProps> = ({
         <View className="image-section">{renderImages()}</View>
       </View>
       {/* 畅打球局 */}
-      <View className="smoothPlayingGame">
+      {isShowSmoothPlayingGame && <View className="smoothPlayingGame">
         <View className="smoothWrapper">
           <Image
             src={img.ICON_LIST_PLAYING_GAME}
             className="iconListPlayingGame"
           />
-          <Text className="smoothTitle">畅打球局</Text>
+          <Text className="smoothTitle">{game_type}</Text>
         </View>
         <View className="line" />
-        <View>场馆方:</View>
+        <View className="localAreaTitle">场馆方:</View>
         <View className="localAreaWrapper">
           <Image
             className="localArea"
-            src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
+            src={venueImage}
           />
-          <Text className="localAreaText">仁恒河滨花园网球场</Text>
+          <Text className="localAreaText">{venue_description}</Text>
         </View>
-      </View>
+      </View>}
     </View>
   );
 };