修复领取界面商品数量错误
This commit is contained in:
@@ -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())
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user