修复领取界面商品数量错误

apps/frontend/src/views/claim/kuaishou-cloud/KuaishouCloudClaimView.vue

@@ -20,7 +20,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
   <main class="claim-page">
     <ClaimHeaderCard
       :order="claim.order.value"
-      :order-item="claim.orderItem.value"
+      :product="claim.product.value"
       :current-step="claim.currentStep.value"
     />
 
@@ -72,7 +72,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
         v-else-if="claim.currentStep.value === 3"
         :role-name="claim.roleName.value"
         :role-id="claim.roleId.value"
-        :order-item="claim.orderItem.value"
+        :product="claim.product.value"
         :redeeming="claim.redeeming.value"
         @confirm-redeem="claim.confirmRedeem()"
       />
@@ -83,7 +83,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
         :result-description="claim.resultDescription.value"
         :flow="claim.flow.value"
         :order="claim.order.value"
-        :order-item="claim.orderItem.value"
+        :product="claim.product.value"
         :role-name="claim.roleName.value"
         :role-id="claim.roleId.value"
         :format-date-time="claim.formatAdminDateTime"

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimConfirmStep.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { Warning } from '@element-plus/icons-vue'
 
-import type { ClaimOrderItemInfo } from '@/types/claim'
+import ClaimProductItems from './ClaimProductItems.vue'
+
+import type { ClaimProductInfo } from '@/types/claim'
 
 defineProps<{
   roleName: string
   roleId: string
-  orderItem: ClaimOrderItemInfo | null
+  product: ClaimProductInfo | null
   redeeming: boolean
 }>()
 
@@ -30,15 +32,17 @@ defineEmits<{
         <strong>{{ roleId || '-' }}</strong>
       </div>
       <div class="info-item">
-        <span>商品名称</span>
-        <strong>{{ orderItem?.skuName || '-' }}</strong>
+        <span>领取商品</span>
+        <strong>{{ product?.title || '-' }}</strong>
       </div>
       <div class="info-item">
         <span>商品数量</span>
-        <strong>{{ orderItem?.quantity || 0 }}</strong>
+        <strong>{{ product?.quantity || 0 }}</strong>
       </div>
     </div>
 
+    <ClaimProductItems :product="product" />
+
     <div class="status-banner warning">
       <el-icon><Warning /></el-icon>
       <span>兑换后不可取消，也不可退货。</span>

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimHeaderCard.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import type { ClaimOrderInfo, ClaimOrderItemInfo } from '@/types/claim'
+import ClaimProductItems from './ClaimProductItems.vue'
+
+import type { ClaimOrderInfo, ClaimProductInfo } from '@/types/claim'
 
 defineProps<{
   order: ClaimOrderInfo | null
-  orderItem: ClaimOrderItemInfo | null
+  product: ClaimProductInfo | null
   currentStep: number
 }>()
 </script>
@@ -12,8 +14,9 @@ defineProps<{
   <section class="header-card">
     <div class="header-copy">
       <span class="eyebrow">快手 Cloud 客户领取</span>
-      <h1>{{ orderItem?.skuName || '商品领取' }}</h1>
+      <h1>{{ product?.title || '商品领取' }}</h1>
       <p>订单号：{{ order?.platformOrderId || '-' }}</p>
+      <ClaimProductItems :product="product" compact />
     </div>
     <div class="step-indicator">
       <div
@@ -56,6 +59,11 @@ defineProps<{
   line-height: 1.6;
 }
 
+.header-copy {
+  min-width: 0;
+  flex: 1;
+}
+
 .eyebrow {
   display: inline-flex;
   margin-bottom: 8px;

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimProductItems.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { ClaimProductInfo } from '@/types/claim'
+
+const props = withDefaults(defineProps<{
+  product: ClaimProductInfo | null
+  compact?: boolean
+}>(), {
+  compact: false,
+})
+
+const productItems = computed(() => {
+  const items = Array.isArray(props.product?.items) ? props.product.items : []
+  return items
+    .map((item) => ({
+      key: item.cloudSkuId || item.name,
+      name: String(item.name || '').trim(),
+      quantity: Math.max(1, Number(item.quantity || 1) || 1),
+    }))
+    .filter((item) => item.name)
+})
+
+const hasMultipleItems = computed(() => props.product?.isBundle || productItems.value.length > 1)
+</script>
+
+<template>
+  <div v-if="productItems.length" class="product-items" :class="{ compact }">
+    <div class="product-items__header">
+      <span>{{ hasMultipleItems ? '包含商品' : '商品明细' }}</span>
+      <strong v-if="hasMultipleItems">{{ productItems.length }} 项</strong>
+    </div>
+
+    <div class="product-items__list">
+      <div v-for="item in productItems" :key="item.key" class="product-items__row">
+        <span>{{ item.name }}</span>
+        <strong>x{{ item.quantity }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.product-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.product-items__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.product-items__header strong {
+  color: #2563eb;
+  font-weight: 700;
+}
+
+.product-items__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.product-items__row {
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.product-items__row span {
+  min-width: 0;
+  color: #0f172a;
+  font-weight: 700;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.product-items__row strong {
+  flex: 0 0 auto;
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.product-items.compact {
+  margin-top: 10px;
+  gap: 8px;
+}
+
+.product-items.compact .product-items__list {
+  gap: 6px;
+}
+
+.product-items.compact .product-items__row {
+  min-height: 36px;
+  padding: 8px 10px;
+  background: rgba(248, 250, 252, 0.72);
+}
+
+@media (max-width: 720px) {
+  .product-items__row {
+    align-items: flex-start;
+  }
+}
+</style>

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimResultStep.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { CircleCheck } from '@element-plus/icons-vue'
 
-import type { ClaimKuaishouCloudFlowInfo, ClaimOrderInfo, ClaimOrderItemInfo } from '@/types/claim'
+import ClaimProductItems from './ClaimProductItems.vue'
+
+import type { ClaimKuaishouCloudFlowInfo, ClaimOrderInfo, ClaimProductInfo } from '@/types/claim'
 
 defineProps<{
   resultTitle: string
   resultDescription: string
   flow: ClaimKuaishouCloudFlowInfo
   order: ClaimOrderInfo | null
-  orderItem: ClaimOrderItemInfo | null
+  product: ClaimProductInfo | null
   roleName: string
   roleId: string
   formatDateTime: (value: string | null) => string
@@ -31,8 +33,8 @@ defineProps<{
         <strong>{{ formatDateTime(flow.dispatch.dispatchAt) }}</strong>
       </div>
       <div class="info-item">
-        <span>商品名称</span>
-        <strong>{{ orderItem?.skuName || '-' }}</strong>
+        <span>领取商品</span>
+        <strong>{{ product?.title || '-' }}</strong>
       </div>
       <div class="info-item">
         <span>角色名称</span>
@@ -48,10 +50,12 @@ defineProps<{
       </div>
       <div class="info-item">
         <span>购买数量</span>
-        <strong>{{ orderItem?.quantity || 0 }}</strong>
+        <strong>{{ product?.quantity || 0 }}</strong>
       </div>
     </div>
 
+    <ClaimProductItems :product="product" />
+
     <div class="status-banner success">
       <el-icon><CircleCheck /></el-icon>
       <span>客户侧操作已经完成，后续履约结果请以后台任务界面为准。</span>

apps/frontend/src/views/claim/kuaishou-cloud/composables/useKuaishouCloudClaim.ts

@@ -29,6 +29,7 @@ export function useKuaishouCloudClaim(token: () => string) {
   const flow = computed(() => detail.value?.kuaishouCloudFulfillment || null);
   const order = computed(() => detail.value?.order || null);
   const orderItem = computed(() => detail.value?.orderItem || null);
+  const product = computed(() => detail.value?.product || null);
   const task = computed(() => detail.value?.task || null);
 
   // ── computed status flags ───────────────────────────────
@@ -342,6 +343,7 @@ export function useKuaishouCloudClaim(token: () => string) {
     flow,
     order,
     orderItem,
+    product,
     task,
     // computed status
     roleName,