From 295cf0a05b2bb8e46bb75fd0444426ce918cc631 Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Sun, 20 Sep 2026 10:19:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9D=83=E7=9B=8A=E7=9A=84=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E5=B1=95=E7=A4=BA=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/build-icons.mjs        |  2 +-
 src/pages-sub/detail/index.vue | 19 ++++++++++++++++++-
 src/styles/icons.scss          |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/scripts/build-icons.mjs b/scripts/build-icons.mjs
index 60f85d6..3a53209 100644
--- a/scripts/build-icons.mjs
+++ b/scripts/build-icons.mjs
@@ -68,7 +68,7 @@ const FILL_ICONS = {
 const MATRIX = {
   pin: ["ink3", "brand", "white"],
   arrow: ["white", "brandDeep", "ink"],
-  chev: ["ink3", "white", "brand", "ink2", "accentDeep"],
+  chev: ["ink3", "white", "brand", "ink2", "accentDeep", "brandDeep"],
   back: ["ink", "white", "brand"],
   phone: ["white", "brandDeep"],
   copy: ["brandDeep", "brand"],
diff --git a/src/pages-sub/detail/index.vue b/src/pages-sub/detail/index.vue
index cd2d626..09e0174 100644
--- a/src/pages-sub/detail/index.vue
+++ b/src/pages-sub/detail/index.vue
@@ -24,6 +24,14 @@ const benefits = ref([]);
 const related = ref([]);
 const current = ref(0);
 
+/** 到店权益折叠：超过 3 张默认只展示前 3 张 */
+const BENEFIT_VISIBLE = 3;
+const benefitsExpanded = ref(false);
+const collapsibleBenefit = computed(() => benefits.value.length > BENEFIT_VISIBLE);
+const shownBenefits = computed(() =>
+  benefitsExpanded.value ? benefits.value : benefits.value.slice(0, BENEFIT_VISIBLE)
+);
+
 const images = computed(() => {
   if (!merchant.value) return [];
   return unique(
@@ -213,8 +221,17 @@ onShareAppMessage(() => ({
         <view class="flex items-center gap-2 text-[16px] font-bold tracking-[-0.3px] text-ink deco-titledot">
           到店权益
         </view>
-        <BenefitCard v-for="benefit in benefits" :key="benefit.id" :benefit="benefit" mode="detail"
+        <BenefitCard v-for="benefit in shownBenefits" :key="benefit.id" :benefit="benefit" mode="detail"
           @action="onClaimBenefit" />
+
+        <view v-if="collapsibleBenefit"
+          class="mt-[11px] h-[34px] rounded-full flex items-center justify-center gap-[3px] text-cap font-semibold text-brand-deep bg-brand-soft border-[0.5px] border-brand-line"
+          hover-class="opacity-90" @click="benefitsExpanded = !benefitsExpanded">
+          <text>{{ benefitsExpanded ? "收起" : `展开全部权益 · 共 ${benefits.length} 项` }}</text>
+          <view class="flex" :class="benefitsExpanded ? '[rotate:-90deg]' : '[rotate:90deg]'">
+            <AppIcon name="chev" tone="brandDeep" :size="11" />
+          </view>
+        </view>
       </view>
 
       <!-- 附近同类推荐（图上压字卡） -->
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 538bc64..80271d0 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -13,6 +13,7 @@
 .ai-chev.t-brand{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDBCNTc4JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNOS41IDUuNSAxNiAxMmwtNi41IDYuNSIvPjwvc3ZnPg==")}
 .ai-chev.t-ink2{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNkI3MjgwJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNOS41IDUuNSAxNiAxMmwtNi41IDYuNSIvPjwvc3ZnPg==")}
 .ai-chev.t-accentDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjQzk1NTBDJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNOS41IDUuNSAxNiAxMmwtNi41IDYuNSIvPjwvc3ZnPg==")}
+.ai-chev.t-brandDeep{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDA5QTY3JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNOS41IDUuNSAxNiAxMmwtNi41IDYuNSIvPjwvc3ZnPg==")}
 .ai-back.t-ink{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMTQxODFDJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMTQuNSA1LjUgOCAxMmw2LjUgNi41Ii8+PC9zdmc+")}
 .ai-back.t-white{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRkZGRkZGJyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMTQuNSA1LjUgOCAxMmw2LjUgNi41Ii8+PC9zdmc+")}
 .ai-back.t-brand{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDBCNTc4JyBzdHJva2Utd2lkdGg9JzEuOScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSJNMTQuNSA1LjUgOCAxMmw2LjUgNi41Ii8+PC9zdmc+")}