zoujing/longli-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 权益的收起展示处理

Browse Source
This commit is contained in:
zoujing
2026-09-20 10:19:18 +08:00
parent 3f6b427f2f
commit 295cf0a05b
3 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/build-icons.mjs
View File

@@ -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"],

19
src/pages-sub/detail/index.vue
View File

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

1
src/styles/icons.scss
View File

@@ -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+")}