feat: 权益的收起展示处理

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>
 
       <!-- 附近同类推荐（图上压字卡） -->