分享卡片

src/game_pages/list/index.module.scss

@@ -1,3 +1,9 @@
+:global {
+  .guide-bar {
+    z-index: 9999;
+  }
+}
+
 .listPage {
   background-color: #fefefe;
 
@@ -29,7 +35,7 @@
 }
 
 .listNavWrapper {
-   position: relative;
+  position: relative;
 }
 
 .toggleElement {
@@ -39,10 +45,10 @@
   left: 0;
   width: 100%;
   height: 100%;
-  
+
   /* 过渡动画设置，实现平滑切换 */
   transition: opacity 0.5s ease, transform 0.5s ease;
-  
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,5 +81,6 @@
 .hidden {
   opacity: 0;
   transform: translateY(20px);
-  pointer-events: none; /* 隐藏时不响应鼠标事件 */
+  pointer-events: none;
+  /* 隐藏时不响应鼠标事件 */
 }

src/game_pages/list/index.tsx

@@ -1,8 +1,8 @@
 import SearchBar from "@/components/SearchBar";
 import FilterPopup from "@/components/FilterPopup";
 import styles from "./index.module.scss";
-import { useEffect, useRef, useCallback } from "react";
-import Taro, { usePageScroll } from "@tarojs/taro";
+import { useEffect, useRef, useCallback, useState } from "react";
+import Taro, { usePageScroll, useShareAppMessage, useShareTimeline } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import { View } from "@tarojs/components";
@@ -12,6 +12,7 @@ import ListContainer from "@/container/listContainer";
 import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import { withAuth } from "@/components";
 import { updateUserLocation } from "@/services/userService";
+// import ShareCardCanvas from "@/components/ShareCardCanvas";
 
 const ListPage = () => {
 
@@ -206,7 +207,7 @@ const ListPage = () => {
     updateFilterOptions(params);
   };
 
-  const handleSearchChange = () => { }; 
+  const handleSearchChange = () => { };
 
   // 距离筛选
   const handleDistanceOrQuickChange = (name, value) => {
@@ -227,6 +228,48 @@ const ListPage = () => {
     });
   };
 
+  // ====== 分享 测试 ======
+  // const [shareImagePath, setShareImagePath] = useState('')
+
+  // const handleShare = (imagePath: string) => {
+  //   console.log('===imagePath', imagePath)
+
+  //   // 避免重复设置相同的图片路径
+  //   if (imagePath && imagePath !== shareImagePath) {
+  //     setShareImagePath(imagePath)
+
+  //     // 图片生成完成后，显示分享菜单
+  //     Taro.showShareMenu({
+  //       withShareTicket: true,
+  //       success: () => {
+  //         console.log('分享菜单显示成功')
+  //       },
+  //       fail: (error) => {
+  //         console.error('分享菜单显示失败:', error)
+  //       }
+  //     })
+  //   }
+  // }
+
+  // // 页面级分享钩子
+  // useShareAppMessage(() => {
+  //   console.log('页面分享给好友，图片路径:', shareImagePath)
+  //   return {
+  //     title: '列表页-邀你加入球局',
+  //     path: '/game_pages/list/index',
+  //     imageUrl: shareImagePath || ''
+  //   }
+  // })
+
+  // useShareTimeline(() => {
+  //   console.log('页面分享到朋友圈，图片路径:', shareImagePath)
+  //   return {
+  //     title: '列表页-邀你加入球局',
+  //     query: 'from=timeline',
+  //     imageUrl: shareImagePath || ''
+  //   }
+  // })
+
   return (
     <>
       {/* 自定义导航 */}
@@ -236,25 +279,24 @@ const ListPage = () => {
         }}
       />
       <View ref={scrollContextRef}>
-        {/* <ShareCardCanvas /> */}
         {/* 列表内容 */}
         <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
           {/* 综合筛选 */}
-        {isShowFilterPopup && (
-          <View>
-            <FilterPopup
-              loading={loading}
-              onCancel={toggleShowPopup}
-              onConfirm={handleFilterConfirm}
-              onChange={handleUpdateFilterOptions}
-              filterOptions={filterOptions}
-              onClear={clearFilterOptions}
-              visible={isShowFilterPopup}
-              onClose={toggleShowPopup}
-              statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
-            />
-          </View>
-        )}
+          {isShowFilterPopup && (
+            <View>
+              <FilterPopup
+                loading={loading}
+                onCancel={toggleShowPopup}
+                onConfirm={handleFilterConfirm}
+                onChange={handleUpdateFilterOptions}
+                filterOptions={filterOptions}
+                onClear={clearFilterOptions}
+                visible={isShowFilterPopup}
+                onClose={toggleShowPopup}
+                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+              />
+            </View>
+          )}
           <View
             className={`${styles.listTopSearchWrapper}`}
           >
@@ -295,6 +337,22 @@ const ListPage = () => {
           />
         </View>
       </View>
+      {/* 测试分享功能 */}
+      {/* <ShareCardCanvas data={
+        {
+          userAvatar: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
+          userNickname: "华巴抡卡",
+          gameType: "单打",
+          skillLevel: "NTRP 2.5 - 3.0",
+          gameDate: "6月20日(周五)",
+          gameTime: "下午5点 2小时",
+          venueName: "因乐驰网球俱乐部(嘉定江桥万达店)",
+          venueImage: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
+          playerImage: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
+        }
+      }
+        onGenerated={handleShare}
+      /> */}
       <GuideBar currentPage="list" />
     </>
   );