微信分享功能

apps/mini-user/src/pages/store-detail/index.tsx

@@ -1,10 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { View, Text } from '@tarojs/components';
-import Taro, { usePageScroll, useRouter } from '@tarojs/taro';
+import Taro, { usePageScroll, useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
 import PageShell from '../../components/PageShell';
 import PageNavBar from '../../components/PageNavBar';
 import ProductCarousel from '../../components/ProductCarousel';
+import ShareNavButton from '../../components/ShareNavButton';
+import WechatShareReady from '../../components/WechatShareReady';
 import { request, toast } from '../../lib/api';
+import {
+  DEFAULT_SHARE_DESC,
+  DEFAULT_SHARE_TITLE,
+  toWeappShareMessage,
+} from '../../lib/wechat-share';
 
 type Store = {
   id: string;
@@ -44,6 +51,23 @@ export default function StoreDetailPage() {
       });
   }, [storeId]);
 
+  const sharePayload = useMemo(
+    () => ({
+      title: store?.name || DEFAULT_SHARE_TITLE,
+      desc: store?.address || DEFAULT_SHARE_DESC,
+      path: `/pages/store-detail/index?id=${storeId}`,
+      imgUrl: store?.coverUrl || store?.carouselUrls?.[0] || undefined,
+    }),
+    [store, storeId],
+  );
+
+  useShareAppMessage(() => toWeappShareMessage(sharePayload));
+  useShareTimeline(() => ({
+    title: sharePayload.title || DEFAULT_SHARE_TITLE,
+    query: storeId ? `id=${storeId}` : '',
+    imageUrl: sharePayload.imgUrl,
+  }));
+
   function goBack() {
     const pages = Taro.getCurrentPages();
     if (pages.length > 1) Taro.navigateBack();
@@ -68,11 +92,13 @@ export default function StoreDetailPage() {
 
   return (
     <PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
+      <WechatShareReady payload={sharePayload} />
       <PageNavBar
         title={store.name}
         solid={headerSolid}
         titleVisible={headerSolid}
         onBack={goBack}
+        right={<ShareNavButton payload={sharePayload} />}
       />
 
       <View className="store-detail-hero full-bleed">
@@ -98,17 +124,9 @@ export default function StoreDetailPage() {
         </View>
       </View>
 
-      <View className="store-detail-section">
-        <Text className="store-detail-section-title">门店服务</Text>
-        <Text className="store-detail-meta">支持好客权益到店核销，部分门店提供包间预约。</Text>
-      </View>
-
       <View className="store-detail-bar">
-        <View
-          className="store-detail-bar-btn store-detail-bar-btn--primary store-detail-bar-btn--full"
-          onClick={() => Taro.navigateTo({ url: '/pages/redeem/index' })}
-        >
-          <Text>去核销</Text>
+        <View className="u-btn u-btn--block" onClick={() => toast('核销请前往「好客权益」')}>
+          <Text>到店核销</Text>
         </View>
       </View>
     </PageShell>