From 50274f23611e6f1e7f50815e94fe857598ececf5 Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Sat, 28 Feb 2026 13:27:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E4=BC=98=E6=83=A0=E5=88=B8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=97=A8=E5=BA=97=E6=A0=87=E7=AD=BE=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=85=B7=E4=BD=93=E9=97=A8=E5=BA=97=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../coupon/components/CouponTemplateCard.vue  | 19 ++++++++++-----
 .../coupon/composables/coupon-page/helpers.ts | 24 +++++++++++++++++++
 .../composables/useMarketingCouponPage.ts     |  4 ++++
 .../src/views/marketing/coupon/index.vue      |  2 ++
 .../views/marketing/coupon/styles/card.less   | 21 ++++++++++++++++
 5 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/views/marketing/coupon/components/CouponTemplateCard.vue b/apps/web-antd/src/views/marketing/coupon/components/CouponTemplateCard.vue
index 3ac26f0..b7c8a8b 100644
--- a/apps/web-antd/src/views/marketing/coupon/components/CouponTemplateCard.vue
+++ b/apps/web-antd/src/views/marketing/coupon/components/CouponTemplateCard.vue
@@ -17,6 +17,7 @@ import {
   resolveCouponFaceConditionText,
   resolveCouponFaceValueText,
   resolveCouponRuleText,
+  resolveCouponStoreTagText,
   resolveCouponTypeClass,
   resolveCouponTypeLabel,
   resolveCouponValidityText,
@@ -25,6 +26,7 @@ import {
 
 defineProps<{
   item: CouponCardViewModel;
+  storeNameMap: Record<string, string>;
 }>();
 
 const emit = defineEmits<{
@@ -83,12 +85,17 @@ function resolveClaimedText(item: CouponCardViewModel) {
       </div>
 
       <div class="mcp-bottom">
-        <span
-          class="mcp-status-tag"
-          :class="COUPON_STATUS_TAG_CLASS_MAP[item.displayStatus]"
-        >
-          {{ COUPON_STATUS_TEXT_MAP[item.displayStatus] }}
-        </span>
+        <div class="mcp-meta-tags">
+          <span
+            class="mcp-status-tag"
+            :class="COUPON_STATUS_TAG_CLASS_MAP[item.displayStatus]"
+          >
+            {{ COUPON_STATUS_TEXT_MAP[item.displayStatus] }}
+          </span>
+          <span class="mcp-store-tag">
+            {{ resolveCouponStoreTagText(item, storeNameMap) }}
+          </span>
+        </div>
 
         <div class="mcp-actions">
           <template v-if="item.displayStatus === 'ended'">
diff --git a/apps/web-antd/src/views/marketing/coupon/composables/coupon-page/helpers.ts b/apps/web-antd/src/views/marketing/coupon/composables/coupon-page/helpers.ts
index 52e4f37..998d5b5 100644
--- a/apps/web-antd/src/views/marketing/coupon/composables/coupon-page/helpers.ts
+++ b/apps/web-antd/src/views/marketing/coupon/composables/coupon-page/helpers.ts
@@ -113,6 +113,30 @@ export function resolveCouponRuleText(item: CouponCardViewModel) {
   return `${limitText} | ${channelText}`;
 }
 
+/** 门店范围标签文本。 */
+export function resolveCouponStoreTagText(
+  item: CouponCardViewModel,
+  storeNameMap: Record<string, string>,
+) {
+  if (item.storeScopeMode === 'all') {
+    return '全部门店';
+  }
+
+  const storeNames = item.storeIds
+    .map((storeId) => storeNameMap[storeId])
+    .filter((name) => typeof name === 'string' && name.length > 0);
+
+  if (storeNames.length <= 0) {
+    return '指定门店';
+  }
+
+  if (storeNames.length === 1) {
+    return storeNames[0];
+  }
+
+  return `${storeNames[0]}等${storeNames.length}家`;
+}
+
 /** 渠道文本。 */
 export function resolveChannelsText(channels: MarketingCouponChannel[]) {
   const normalized = channels.toSorted();
diff --git a/apps/web-antd/src/views/marketing/coupon/composables/useMarketingCouponPage.ts b/apps/web-antd/src/views/marketing/coupon/composables/useMarketingCouponPage.ts
index accc57e..b32239f 100644
--- a/apps/web-antd/src/views/marketing/coupon/composables/useMarketingCouponPage.ts
+++ b/apps/web-antd/src/views/marketing/coupon/composables/useMarketingCouponPage.ts
@@ -47,6 +47,9 @@ export function useMarketingCouponPage() {
       value: item.id,
     })),
   );
+  const storeNameMap = computed<Record<string, string>>(() =>
+    Object.fromEntries(stores.value.map((item) => [item.id, item.name])),
+  );
 
   const hasStore = computed(() => !!selectedStoreId.value);
 
@@ -192,6 +195,7 @@ export function useMarketingCouponPage() {
     setStatusFilter,
     setTypeFilter,
     stats,
+    storeNameMap,
     storeOptions,
     stores,
     submitDrawer,
diff --git a/apps/web-antd/src/views/marketing/coupon/index.vue b/apps/web-antd/src/views/marketing/coupon/index.vue
index 45d2e04..d7638d0 100644
--- a/apps/web-antd/src/views/marketing/coupon/index.vue
+++ b/apps/web-antd/src/views/marketing/coupon/index.vue
@@ -62,6 +62,7 @@ const {
   setStatusFilter,
   setTypeFilter,
   stats,
+  storeNameMap,
   storeOptions,
   submitDrawer,
   total,
@@ -139,6 +140,7 @@ function onTypeFilterChange(value: unknown) {
             v-for="item in rows"
             :key="item.id"
             :item="item"
+            :store-name-map="storeNameMap"
             @edit="(row) => openEditDrawer(row.id)"
             @view="(row) => openEditDrawer(row.id)"
             @enable="enableCoupon"
diff --git a/apps/web-antd/src/views/marketing/coupon/styles/card.less b/apps/web-antd/src/views/marketing/coupon/styles/card.less
index ff94727..92f99d7 100644
--- a/apps/web-antd/src/views/marketing/coupon/styles/card.less
+++ b/apps/web-antd/src/views/marketing/coupon/styles/card.less
@@ -173,6 +173,12 @@
     margin-top: 10px;
   }
 
+  .mcp-meta-tags {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+  }
+
   .mcp-status-tag {
     display: inline-flex;
     align-items: center;
@@ -201,4 +207,19 @@
     color: #92400e;
     background: #fef3c7;
   }
+
+  .mcp-store-tag {
+    display: inline-flex;
+    align-items: center;
+    max-width: 180px;
+    height: 22px;
+    padding: 0 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    color: #475569;
+    background: #f1f5f9;
+    border-radius: 999px;
+  }
 }