diff --git a/src/components/BenefitCard/index.vue b/src/components/BenefitCard/index.vue index f905cf2..ab507c7 100644 --- a/src/components/BenefitCard/index.vue +++ b/src/components/BenefitCard/index.vue @@ -3,13 +3,12 @@ * 权益卡(全站唯一组件 · 4 处复用) * 使用位置:权益中心 / 我的权益 / 详情页「到店权益」 * 四行固定顺序:类型 / 价格 / 规格·适用 / 有效期·名额 - * 价格两形态互斥:金额型 = 优惠价大字 + 划线原价 + 右端折扣标; - * 折扣型(price.rate)= 「门市价」小字 + 折扣大字,不再出划线原价与折扣标。 - * 「进入商家」入口在权益中心与我的权益都出现(详情页本就在该商家内,不加)。 + * 价格两形态互斥:金额型 = 优惠价大字 + 划线原价 + 右端折扣标;折扣型(price.rate)= 折扣大字。 + * ①行=类型短名(2 字,`BENEFIT_TYPE_SHORT`)+ 右端商家名胶囊(`merchant_name`,超 8 字截断),详情页不加胶囊。 */ import { computed } from "vue"; -import { BENEFIT_STATUS, BENEFIT_TYPE_ICON, BENEFIT_TYPE_LABEL } from "@/constant"; -import { basisText, discountLabel, dotDate, rateText, yuanText } from "@/utils"; +import { BENEFIT_STATUS, BENEFIT_TYPE_ICON, BENEFIT_TYPE_SHORT } from "@/constant"; +import { discountLabel, dotDate, rateText, yuanText } from "@/utils"; import { goDetail } from "@/utils/nav"; const props = defineProps({ @@ -30,14 +29,13 @@ const isClaimed = computed(() => status.value === BENEFIT_STATUS.CLAIMED); /** 权益类型键:详情页走接口的 section_key,权益中心仍是本地 type,两者取其一 */ const typeKey = computed(() => b.value.section_key || b.value.type || ""); -const typeLabel = computed(() => BENEFIT_TYPE_LABEL[typeKey.value] || "权益"); +const typeLabel = computed(() => BENEFIT_TYPE_SHORT[typeKey.value] || "权益"); const typeIcon = computed(() => BENEFIT_TYPE_ICON[typeKey.value] || "gift"); const deal = computed(() => yuanText(b.value.price?.deal)); const original = computed(() => yuanText(b.value.price?.original)); const pct = computed(() => discountLabel(b.value.price?.deal, b.value.price?.original)); const rate = computed(() => rateText(b.value.price)); -const basis = computed(() => basisText(b.value.price)); const isRate = computed(() => !!rate.value); const spec = computed(() => b.value.price?.spec || ""); const hasPrice = computed(() => isRate.value || !!deal.value); @@ -109,6 +107,13 @@ const goStateCls = computed(() => ); const goIconTone = computed(() => (isOff.value ? "ink3" : "accentDeep")); +/** 「进入商家」胶囊文案:取商家上架名称,超 8 字截断加省略号 */ +const goLabel = computed(() => { + const name = String(b.value.merchant_name || "").trim(); + if (!name) return "进入商家"; + return name.length > 8 ? `${name.slice(0, 8)}…` : name; +}); + /** 跳该权益所属商家详情 */ const onGoMerchant = () => { if (b.value.merchant_id) goDetail(b.value.merchant_id); @@ -126,15 +131,15 @@ const onTap = () => { - + - {{ typeLabel }} + {{ typeLabel }} - 进入商家 + {{ goLabel }} @@ -142,7 +147,6 @@ const onTap = () => {