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

apps/backend/src/services/claim/kuaishou-cloud-claim-context.ts

@@ -86,8 +86,14 @@ export async function getClaimContext(token: unknown) {
 }
 
 export function buildClaimDetailPayload({ claimToken, task, order, orderItem }: ClaimContext) {
+  const kuaishouCloudSource = resolveClaimKuaishouCloudSource(task)
   const kuaishouCloudFulfillment = mapClaimKuaishouCloudFulfillment(task, order)
-  const displaySkuName = resolveClaimOrderItemDisplaySkuName(orderItem, kuaishouCloudFulfillment)
+  const displaySkuName = resolveClaimOrderItemDisplaySkuName(
+    orderItem,
+    kuaishouCloudFulfillment,
+    kuaishouCloudSource,
+  )
+  const product = buildClaimProductPayload(displaySkuName, orderItem, kuaishouCloudSource)
 
   return {
     tokenStatus: claimToken.status,
@@ -123,6 +129,7 @@ export function buildClaimDetailPayload({ claimToken, task, order, orderItem }:
       skuName: displaySkuName,
       quantity: orderItem.quantity,
     },
+    product,
     session: null as null,
     kuaishouCloudFulfillment,
     result: task.redeemed_at
@@ -139,6 +146,7 @@ export function buildClaimDetailPayload({ claimToken, task, order, orderItem }:
 function resolveClaimOrderItemDisplaySkuName(
   orderItem: OrderItemRow,
   kuaishouCloudFulfillment: JsonObject | null,
+  kuaishouCloudSource: JsonObject = {},
 ) {
   const fulfillment = isPlainObject(kuaishouCloudFulfillment) ? kuaishouCloudFulfillment : {}
   const binding = isPlainObject(fulfillment.binding) ? fulfillment.binding : {}
@@ -146,10 +154,10 @@ function resolveClaimOrderItemDisplaySkuName(
   const skuCode = String(orderItem.sku_code || '').trim()
   const rawSkuName = String(orderItem.sku_name || '').trim()
   const candidates = [
-    fulfillment.internalSkuName,
+    kuaishouCloudSource.internalSkuName,
-    binding.skuName,
-    ticket.goodsTitle,
     rawSkuName,
+    ticket.goodsTitle,
+    binding.skuName,
     skuCode,
   ]
 
@@ -163,6 +171,65 @@ function resolveClaimOrderItemDisplaySkuName(
   return rawSkuName || skuCode
 }
 
+function buildClaimProductPayload(
+  displaySkuName: string,
+  orderItem: OrderItemRow,
+  kuaishouCloudSource: JsonObject = {},
+) {
+  const binding = isPlainObject(kuaishouCloudSource.binding) ? kuaishouCloudSource.binding : {}
+  const deliveryItems = normalizeClaimDeliveryItems(kuaishouCloudSource.deliveryItems, binding)
+    .map((item) => ({
+      cloudSkuId: item.cloudSkuId,
+      name: item.cloudSkuName,
+      quantity: item.quantity,
+    }))
+    .filter((item) => item.name)
+  const normalizedDeliveryItems = deliveryItems.length > 0
+    ? mergeClaimProductItems(deliveryItems)
+    : [{
+      cloudSkuId: 0,
+      name: displaySkuName,
+      quantity: Math.max(1, Number(orderItem.quantity || 1) || 1),
+    }]
+
+  return {
+    title: displaySkuName,
+    skuCode: String(orderItem.sku_code || '').trim(),
+    quantity: Math.max(1, Number(orderItem.quantity || 1) || 1),
+    isBundle: normalizedDeliveryItems.length > 1,
+    items: normalizedDeliveryItems,
+  }
+}
+
+function mergeClaimProductItems(
+  items: Array<{ cloudSkuId: number; name: string; quantity: number }>,
+) {
+  const merged = new Map<string, { cloudSkuId: number; name: string; quantity: number }>()
+
+  for (const item of items) {
+    const key = item.cloudSkuId > 0 ? `id:${item.cloudSkuId}` : `name:${item.name}`
+    const existing = merged.get(key)
+    if (existing) {
+      existing.quantity += item.quantity
+      existing.name = existing.name || item.name
+      continue
+    }
+
+    merged.set(key, { ...item })
+  }
+
+  return Array.from(merged.values())
+}
+
+function resolveClaimKuaishouCloudSource(task: TaskRow): JsonObject {
+  if (String(task?.executor_key || '').trim() !== 'kuaishou_ct_assisted') {
+    return {}
+  }
+
+  const source = parseTaskContext(task).kuaishouCloudFulfillment
+  return isPlainObject(source) ? source : {}
+}
+
 export function mapClaimKuaishouCloudFulfillment(task: TaskRow, order: OrderRow) {
   if (String(task?.executor_key || '').trim() !== 'kuaishou_ct_assisted') {
     return null
@@ -279,6 +346,63 @@ function isPlainObject(value: unknown): value is JsonObject {
   return Object.prototype.toString.call(value) === '[object Object]'
 }
 
+function normalizeClaimDeliveryItems(value: unknown, binding: JsonObject) {
+  const rawItems = Array.isArray(value) ? value : []
+  const items = rawItems
+    .map((item) => normalizeClaimDeliveryItem(item))
+    .filter((item): item is { cloudSkuId: number; cloudSkuName: string; quantity: number } => Boolean(item))
+
+  if (items.length > 0) {
+    return mergeClaimDeliveryItems(items)
+  }
+
+  const cloudSkuId = Number(binding.skuId || 0) || 0
+  if (!cloudSkuId) {
+    return []
+  }
+
+  return [{
+    cloudSkuId,
+    cloudSkuName: String(binding.skuName || '').trim(),
+    quantity: 1,
+  }]
+}
+
+function normalizeClaimDeliveryItem(value: unknown) {
+  const source = isPlainObject(value) ? value : {}
+  const cloudSkuId = Number(source.cloudSkuId || source.skuId || 0) || 0
+
+  if (!Number.isInteger(cloudSkuId) || cloudSkuId <= 0) {
+    return null
+  }
+
+  const quantity = Number(source.quantity || 1) || 1
+  return {
+    cloudSkuId,
+    cloudSkuName: String(source.cloudSkuName || source.skuName || '').trim(),
+    quantity: Number.isInteger(quantity) && quantity > 0 ? quantity : 1,
+  }
+}
+
+function mergeClaimDeliveryItems(
+  items: Array<{ cloudSkuId: number; cloudSkuName: string; quantity: number }>,
+) {
+  const merged = new Map<number, { cloudSkuId: number; cloudSkuName: string; quantity: number }>()
+
+  for (const item of items) {
+    const existing = merged.get(item.cloudSkuId)
+    if (existing) {
+      existing.quantity += item.quantity
+      existing.cloudSkuName = existing.cloudSkuName || item.cloudSkuName
+      continue
+    }
+
+    merged.set(item.cloudSkuId, { ...item })
+  }
+
+  return Array.from(merged.values())
+}
+
 function isClaimPlaceholderSkuName(value: string) {
   return ['测试链接专用', '商品领取', '测试商品'].includes(String(value || '').trim())
 }

apps/frontend/src/types/claim.ts

@@ -52,6 +52,18 @@ export interface ClaimOrderItemInfo {
   quantity: number
 }
 
+export interface ClaimProductInfo {
+  title: string
+  skuCode: string
+  quantity: number
+  isBundle: boolean
+  items: Array<{
+    cloudSkuId: number
+    name: string
+    quantity: number
+  }>
+}
+
 export interface ClaimResultInfo {
   resultCode: string
   resultMessage: string
@@ -117,6 +129,8 @@ export interface ClaimKuaishouCloudFlowInfo {
   }
   consume: {
     status: string
+    shopId: string
+    shopName: string
     consumedAt: string | null
     errorMessage: string
   }
@@ -129,6 +143,7 @@ export interface ClaimDetailData {
   task: ClaimTaskInfo
   order: ClaimOrderInfo
   orderItem: ClaimOrderItemInfo
+  product: ClaimProductInfo
   session: unknown | null
   kuaishouCloudFulfillment: ClaimKuaishouCloudFlowInfo | null
   result: ClaimResultInfo | null

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>
+        <span>领取商品</span>
-        <strong>{{ orderItem?.skuName || '-' }}</strong>
+        <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>
+        <span>领取商品</span>
-        <strong>{{ orderItem?.skuName || '-' }}</strong>
+        <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,