优化领取结果和CloudTentacles平台兑换购买记录

apps/frontend/src/types/claim.ts

@@ -106,6 +106,10 @@ export interface ClaimKuaishouCloudFlowInfo {
   dispatch: {
     status: string
     dispatchAt: string | null
+    failedAt: string | null
+    failedStage: string
+    errorCode: string
+    errorMessage: string
     note: string
   }
   returnNumber: {

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

@@ -78,6 +78,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
         v-else
         :result-title="claim.resultTitle.value"
         :result-description="claim.resultDescription.value"
+        :result-variant="claim.resultVariant.value"
         :flow="claim.flow.value"
         :order="claim.order.value"
         :product="claim.product.value"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CircleCheck } from '@element-plus/icons-vue'
+import { CircleCheck, WarningFilled } from '@element-plus/icons-vue'
 
 import ClaimProductItems from './ClaimProductItems.vue'
 
@@ -8,6 +8,7 @@ import type { ClaimKuaishouCloudFlowInfo, ClaimOrderInfo, ClaimProductInfo } fro
 defineProps<{
   resultTitle: string
   resultDescription: string
+  resultVariant: 'success' | 'warning' | 'info'
   flow: ClaimKuaishouCloudFlowInfo
   order: ClaimOrderInfo | null
   product: ClaimProductInfo | null
@@ -20,7 +21,10 @@ defineProps<{
 <template>
   <section class="content-card">
     <div class="result-header">
-      <el-icon class="large-icon success"><CircleCheck /></el-icon>
+      <el-icon :class="['large-icon', resultVariant]">
+        <WarningFilled v-if="resultVariant === 'warning'" />
+        <CircleCheck v-else />
+      </el-icon>
       <div>
         <h2>{{ resultTitle }}</h2>
         <p class="muted">{{ resultDescription }}</p>
@@ -56,9 +60,13 @@ defineProps<{
 
     <ClaimProductItems :product="product" />
 
-    <div class="status-banner success">
-      <el-icon><CircleCheck /></el-icon>
-      <span>客户侧操作已经完成，后续履约结果请以后台任务界面为准。</span>
+    <div :class="['status-banner', resultVariant]">
+      <el-icon>
+        <WarningFilled v-if="resultVariant === 'warning'" />
+        <CircleCheck v-else />
+      </el-icon>
+      <span v-if="resultVariant === 'warning'">当前兑换未完成，客服会根据后台任务记录继续处理。</span>
+      <span v-else>客户侧操作已经完成，后续履约结果请以后台任务界面为准。</span>
     </div>
   </section>
 </template>
@@ -103,6 +111,14 @@ defineProps<{
   color: #16a34a;
 }
 
+.large-icon.warning {
+  color: #d97706;
+}
+
+.large-icon.info {
+  color: #2563eb;
+}
+
 .info-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -143,6 +159,16 @@ defineProps<{
   color: #166534;
 }
 
+.status-banner.warning {
+  background: #fffbeb;
+  color: #92400e;
+}
+
+.status-banner.info {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
 @media (max-width: 720px) {
   .content-card {
     max-width: 100%;

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

@@ -4,10 +4,12 @@ import { ElMessageBox } from 'element-plus'
 
 import { showError, showSuccess } from '@/lib/feedback'
 import {
+  TASK_STATUS,
   hasKuaishouCloudRedeemResultStatus,
   isClaimInactiveTaskStatus,
   isKuaishouCloudCompletedStatus,
   isKuaishouCloudRoleConfirmedStatus,
+  normalizeTaskStatus,
 } from '@/domain/task-status'
 import { formatAdminDateTime } from '@/utils/admin-time'
 import {
@@ -78,12 +80,16 @@ export function useKuaishouCloudClaim(token: () => string) {
   const isDispatched = computed(
     () => String(flow.value?.dispatch.status || '').trim() === 'success',
   )
+  const isRedeemFailed = computed(() => {
+    const status = normalizeTaskStatus(task.value?.status)
+    return (
+      status === TASK_STATUS.MANUAL_REVIEW ||
+      status === TASK_STATUS.FAILED ||
+      String(flow.value?.dispatch.status || '').trim() === 'failed'
+    )
+  })
 
-  const isCompleted = computed(
-    () =>
-      isKuaishouCloudCompletedStatus(task.value?.status) ||
-      String(flow.value?.consume.status || '').trim() === 'success',
-  )
+  const isCompleted = computed(() => isKuaishouCloudCompletedStatus(task.value?.status))
 
   const hasRedeemResult = computed(() => {
     return isDispatched.value || hasKuaishouCloudRedeemResultStatus(task.value?.status)
@@ -120,6 +126,9 @@ export function useKuaishouCloudClaim(token: () => string) {
   })
 
   const resultTitle = computed(() => {
+    if (isRedeemFailed.value) {
+      return '兑换遇到问题'
+    }
     if (isCompleted.value) {
       return '兑换成功'
     }
@@ -130,12 +139,31 @@ export function useKuaishouCloudClaim(token: () => string) {
   })
 
   const resultDescription = computed(() => {
+    if (isRedeemFailed.value) {
+      const message = String(
+        task.value?.lastError ||
+          flow.value?.dispatch.errorMessage ||
+          detail.value?.result?.resultMessage ||
+          '',
+      ).trim()
+      return message || '当前兑换流程需要客服处理，后续结果请以后台任务界面为准。'
+    }
     if (isCompleted.value) {
       return '当前兑换流程已经完成。发货、退号和核销结果会保存在后台任务界面。'
     }
     return '你的兑换请求已经提交。发货、退号和核销结果会由系统保存在后台任务界面，无需在此页面等待。'
   })
 
+  const resultVariant = computed(() => {
+    if (isRedeemFailed.value) {
+      return 'warning'
+    }
+    if (isCompleted.value || isDispatched.value) {
+      return 'success'
+    }
+    return 'info'
+  })
+
   // ── actions ─────────────────────────────────────────────
 
   async function generateQRCode(url: string) {
@@ -415,6 +443,7 @@ export function useKuaishouCloudClaim(token: () => string) {
     isRoleReady,
     isRoleConfirmed,
     isDispatched,
+    isRedeemFailed,
     isCompleted,
     hasRedeemResult,
     canSubmitTicket,
@@ -422,6 +451,7 @@ export function useKuaishouCloudClaim(token: () => string) {
     progressText,
     resultTitle,
     resultDescription,
+    resultVariant,
     // actions
     loadDetail,
     submitTicket,