Преглед изворни кода

✨ feat(category): 为分类页面添加分享功能

- 引入 `useShareAppMessage` 钩子,支持分享给好友
- 根据当前选中的分类或子分类动态设置分享标题和图片
- 分享路径包含来源参数,便于追踪

✨ feat(goods-list): 为商品列表页添加分享功能

- 引入 `useShareAppMessage` 和 `useShareTimeline` 钩子
- 支持分享给好友和分享到朋友圈两种场景
- 根据搜索关键词或分类ID动态生成分享标题
- 使用商品列表中的首张图片作为分享图片
- 分享链接包含分类ID和搜索关键词参数

♻️ refactor(payment-success): 移除返回首页按钮

- 注释掉支付成功页面的“返回首页”按钮,简化用户操作流程
yourname пре 1 месец
родитељ
комит
86d51464d0

+ 17 - 1
mini/src/pages/category/index.tsx

@@ -7,11 +7,12 @@ import CategorySidebarItem from '@/components/category/CategorySidebarItem';
 import CategoryTabbar, { TabItem } from '@/components/category/CategoryTabbar';
 import { Image } from '@/components/ui/image';
 import TDesignToast from '@/components/tdesign/toast';
-import { navigateTo } from '@tarojs/taro';
+import { navigateTo,useShareAppMessage } from '@tarojs/taro';
 import { InferResponseType } from 'hono';
 import { TabBarLayout } from '@/layouts/tab-bar-layout';
 import { Navbar } from '@/components/ui/navbar';
 import Taro from '@tarojs/taro';
+import TDesignIcon from '@/components/tdesign/icon';
 import './index.css';
 
 type GoodsCategoryResponse = InferResponseType<typeof goodsCategoryClient.$get, 200>
@@ -60,6 +61,21 @@ const CategoryPage: React.FC = () => {
     setDynamicHeights();
   }, []);
 
+    // 分享功能
+    useShareAppMessage(() => {
+      // 如果有当前选中的分类,使用分类图片作为分享图片
+      // 如果没有,使用默认图片或空字符串
+      const shareImageUrl = currentCategory?.imageFile?.fullUrl ||
+                           subCategories?.[0]?.imageFile?.fullUrl ||
+                           '';
+
+      return {
+        title: currentCategory ? `${currentCategory.name} - 发现好物` : '商品分类 - 发现好物',
+        path: `/pages/category/index?from=share`,
+        imageUrl: shareImageUrl
+      }
+    })
+
   // 获取分类数据
   const { data: categoryData, isLoading, error } = useQuery({
     queryKey: ['goods-categories'],

+ 42 - 1
mini/src/pages/goods-list/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState } from 'react'
-import Taro, { usePullDownRefresh , useReachBottom, useRouter} from '@tarojs/taro'
+import Taro, { usePullDownRefresh , useReachBottom, useRouter,useShareAppMessage, useShareTimeline} from '@tarojs/taro'
 import { goodsClient } from '@/api'
 import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -28,6 +28,7 @@ export default function GoodsListPage() {
     { id: 'new', name: '新品' },
   ]
 
+
   const {
     data,
     isLoading,
@@ -71,6 +72,46 @@ export default function GoodsListPage() {
   // 合并所有分页数据
   const allGoods = data?.pages.flatMap(page => page.data) || []
 
+  // 分享功能 - 分享给好友
+  useShareAppMessage(() => {
+    // 如果有商品数据,使用第一个商品的图片作为分享图片
+    const shareImageUrl = allGoods.length > 0 ? allGoods[0]?.imageFile?.fullUrl || '' : '';
+
+    // 构建分享标题
+    let shareTitle = '商品分类 - 发现好物';
+    if (searchKeyword) {
+      shareTitle = `搜索"${searchKeyword}" - 发现好物`;
+    } else if (categoryId) {
+      shareTitle = `商品分类 - 发现好物`;
+    }
+
+    return {
+      title: shareTitle,
+      path: `/pages/goods-list/index?cateId=${encodeURIComponent(categoryId)}&keyword=${encodeURIComponent(searchKeyword)}&from=share`,
+      imageUrl: shareImageUrl
+    }
+  })
+
+  // 分享到朋友圈功能
+  useShareTimeline(() => {
+    // 朋友圈分享需要图片,使用第一个商品的图片
+    const shareImageUrl = allGoods.length > 0 ? allGoods[0]?.imageFile?.fullUrl || '' : '';
+
+    // 朋友圈分享标题
+    let shareTitle = '发现好物,快来选购!';
+    if (searchKeyword) {
+      shareTitle = `搜索"${searchKeyword}"发现的好物`;
+    } else if (categoryId) {
+      shareTitle = `精选商品,等你来选`;
+    }
+
+    return {
+      title: shareTitle,
+      imageUrl: shareImageUrl,
+      query: `cateId=${encodeURIComponent(categoryId)}&keyword=${encodeURIComponent(searchKeyword)}&from=timeline`
+    }
+  })
+
   // 使用Taro全局钩子 - 触底加载更多
   useReachBottom(() => {
     if (hasNextPage && !isFetchingNextPage) {

+ 2 - 2
mini/src/pages/payment-success/index.tsx

@@ -339,13 +339,13 @@ const PaymentSuccessPage = () => {
         >
           查看订单列表
         </Button>
-        <Button
+        {/* <Button
           onClick={handleBackToHome}
           className="w-full h-12"
           variant="ghost"
         >
           返回首页
-        </Button>
+        </Button> */}
 
           {/* 订阅发货通知按钮 - 只在用户未订阅时显示 */}
           {