[Snow Team] claim-refactor: auto-commit work

2026-05-17 09:45:55 +08:00
parent a77198b218
commit bc15fcc349
10 changed files with 1309 additions and 842 deletions
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { CircleClose, Loading } from '@element-plus/icons-vue'
+
+import ClaimBindingStep from './components/ClaimBindingStep.vue'
+import ClaimConfirmStep from './components/ClaimConfirmStep.vue'
+import ClaimHeaderCard from './components/ClaimHeaderCard.vue'
+import ClaimResultStep from './components/ClaimResultStep.vue'
+import ClaimSummaryCard from './components/ClaimSummaryCard.vue'
+import ClaimTicketStep from './components/ClaimTicketStep.vue'
+import { useKuaishouCloudClaim } from './composables/useKuaishouCloudClaim'
+
+const props = defineProps<{
+  token: string
+}>()
+
+const claim = useKuaishouCloudClaim(() => props.token)
+</script>
+
+<template>
+  <main class="claim-page">
+    <ClaimHeaderCard
+      :order="claim.order.value"
+      :order-item="claim.orderItem.value"
+      :current-step="claim.currentStep.value"
+    />
+
+    <div v-if="claim.loading.value" class="content-card loading-card">
+      <el-icon class="large-icon spinning"><Loading /></el-icon>
+      <p>正在读取当前领取进度...</p>
+    </div>
+
+    <div v-else-if="claim.errorMessage.value" class="content-card error-card">
+      <el-icon class="large-icon error"><CircleClose /></el-icon>
+      <p>{{ claim.errorMessage.value }}</p>
+    </div>
+
+    <template v-else-if="claim.detail.value && claim.flow.value">
+      <ClaimSummaryCard
+        :progress-text="claim.progressText.value"
+        :role-name="claim.roleName.value"
+        :role-id="claim.roleId.value"
+      />
+
+      <ClaimTicketStep
+        v-if="claim.currentStep.value === 1"
+        :ticket-code="claim.ticketCode.value"
+        :can-submit-ticket="claim.canSubmitTicket.value"
+        :submitting="claim.submitting.value"
+        :is-binding-preparing="claim.isBindingPreparing.value"
+        :flow="claim.flow.value"
+        @update:ticket-code="claim.ticketCode.value = $event"
+        @submit-ticket="claim.submitTicket()"
+      />
+
+      <ClaimBindingStep
+        v-else-if="claim.currentStep.value === 2"
+        :qr-code-data-url="claim.qrCodeDataUrl.value"
+        :is-binding-prepared="claim.isBindingPrepared.value"
+        :is-binding-preparing="claim.isBindingPreparing.value"
+        :is-role-ready="claim.isRoleReady.value"
+        :refreshing-role="claim.refreshingRole.value"
+        :confirming-role="claim.confirmingRole.value"
+        :flow="claim.flow.value"
+        :format-date-time="claim.formatDateTime"
+        @open-bind-url="claim.openBindUrl($event)"
+        @refresh-role="claim.refreshRole()"
+        @confirm-role="claim.confirmRole()"
+      />
+
+      <ClaimConfirmStep
+        v-else-if="claim.currentStep.value === 3"
+        :role-name="claim.roleName.value"
+        :role-id="claim.roleId.value"
+        :order-item="claim.orderItem.value"
+        :redeeming="claim.redeeming.value"
+        @confirm-redeem="claim.confirmRedeem()"
+      />
+
+      <ClaimResultStep
+        v-else
+        :result-title="claim.resultTitle.value"
+        :result-description="claim.resultDescription.value"
+        :flow="claim.flow.value"
+        :order="claim.order.value"
+        :order-item="claim.orderItem.value"
+        :role-name="claim.roleName.value"
+        :role-id="claim.roleId.value"
+        :format-date-time="claim.formatDateTime"
+      />
+    </template>
+
+    <div v-else class="content-card error-card">
+      <el-icon class="large-icon error"><CircleClose /></el-icon>
+      <p>流程数据不完整，请联系客服处理</p>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.claim-page {
+  min-height: 100vh;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 28%),
+    linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+}
+
+.content-card {
+  width: 100%;
+  max-width: 680px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 20px;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(12px);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.loading-card,
+.error-card {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 240px;
+}
+
+.large-icon {
+  font-size: 44px;
+}
+
+.large-icon.success {
+  color: #16a34a;
+}
+
+.large-icon.error {
+  color: #dc2626;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 720px) {
+  .claim-page {
+    padding: 16px;
+  }
+
+  .content-card {
+    max-width: 100%;
+  }
+}
+</style>