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

This commit is contained in:
yml
2026-05-28 08:39:11 +08:00
parent 5e5413238f
commit 4a4fe9a94f
8 changed files with 293 additions and 20 deletions
@@ -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,
binding.skuName,
ticket.goodsTitle,
kuaishouCloudSource.internalSkuName,
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())
}
+15
View File
@@ -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
@@ -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"
@@ -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>
@@ -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;
@@ -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>
@@ -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>
@@ -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,