From 726c65f0f0a80a1a8a02e28c43807e9b9a0322d3 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Wed, 9 Sep 2026 10:28:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=9A=E5=91=98=E5=8D=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=94=AF=E6=8C=81=E5=88=86=E4=BA=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/pages/card/detail.vue | 28 +++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/pages/card/detail.vue b/packages/app/src/pages/card/detail.vue
index c7f8597..0d51501 100644
--- a/packages/app/src/pages/card/detail.vue
+++ b/packages/app/src/pages/card/detail.vue
@@ -9,6 +9,11 @@
       <text>{{ invite.eligible ? '好友礼遇 · 已享 95 折' : '好友礼遇 · 领取 95 折购卡优惠' }}</text>
       <text class="invite-banner-note">{{ invite.eligible ? '体验卡、次卡、期限卡均适用' : '填写邀请码，和朋友一起开始练习 ›' }}</text>
     </view>
+    <view v-if="!loading && (card || allCards.length)" class="card-share-row">
+      <button class="card-share-button" open-type="share" aria-label="分享会员卡给微信好友或群聊">
+        <text class="card-share-icon">↗</text><text>分享给好友 / 群聊</text>
+      </button>
+    </view>
     <view v-if="inviteVisible" class="purchase-sheet-layer" @touchmove.stop.prevent>
       <view class="purchase-sheet">
         <text class="sheet-kicker">A GIFT FROM YOUR FRIEND</text>
@@ -337,7 +342,7 @@
 <script setup lang="ts">
 import { useInviteStore } from '../../stores/invite'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
+import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
 import type { CardType, CreateOrderResponse } from '@mp-pilates/shared'
 import {
   CardTypeCategory,
@@ -371,6 +376,7 @@ const inviteInput = ref('')
 const inviteBusy = ref(false)
 const inviteError = ref('')
 onLoad((options) => {
+  uni.showShareMenu({ menus: ['shareAppMessage'] })
   if (options?.inviteCode) {
     invite.pendingCode = options.inviteCode.toUpperCase()
     inviteInput.value = invite.pendingCode
@@ -410,6 +416,22 @@ const paymentRedirecting = ref(false)
 const paymentConfirmationSession = ref(0)
 const failedCoverIds = ref<Set<string>>(new Set())
 
+onShareAppMessage(() => {
+  const sharedCard = showAll.value ? null : card.value
+  const id = sharedCard?.id || (!showAll.value ? cardId.value : '')
+  const path = id
+    ? `/pages/card/detail?id=${encodeURIComponent(id)}`
+    : isTrialEntry.value && !showAll.value
+      ? '/pages/card/detail?trial=1'
+      : '/pages/card/detail?showAll=1'
+  return {
+    title: sharedCard ? `${sharedCard.name} · 一起练普拉提` : '选择你的普拉提会员卡，一起开始练习',
+    path,
+    ...(sharedCard && hasCardCover(sharedCard) ? { imageUrl: sharedCard.coverUrl! } : {}),
+  }
+})
+
+
 const pageTitle = computed(() => {
   if (showAll.value) return '选择会员卡'
   return isRenewal.value ? '续卡' : '购买会员卡'
@@ -927,6 +949,10 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.card-share-row { display: flex; justify-content: flex-end; margin: 8rpx 32rpx 0; }
+.card-share-button { display: flex; align-items: center; gap: 10rpx; margin: 0; padding: 12rpx 20rpx; min-height: 64rpx; line-height: 40rpx; background: transparent; color: #526e58; font-size: 23rpx; border-radius: 32rpx; &::after { border: none; } &:active { background: #eaf0e5; } }
+.card-share-icon { font-size: 28rpx; }
+
 .invite-banner { margin: 24rpx 32rpx 0; padding: 24rpx; border-radius: 20rpx; background: #eaf0e5; color: #526e58; font-size: 27rpx; }
 .invite-banner-note { display: block; margin-top: 10rpx; color: #7b8974; font-size: 22rpx; line-height: 1.6; }
 .invite-input { margin: 26rpx 0; padding: 24rpx; border: 1rpx dashed #a9b99e; border-radius: 16rpx; font: 34rpx monospace; letter-spacing: 6rpx; height: 55rpx; text-align: center; }