接入多发货平台与电子凭证

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

@@ -34,6 +34,42 @@ const claim = useKuaishouCloudClaim(() => props.token)
       <p>{{ claim.errorMessage.value }}</p>
     </div>
 
+    <template v-else-if="claim.detail.value?.flowType === 'kuaishou_feifei' && claim.feifei.value">
+      <section class="content-card feifei-card">
+        <div class="feifei-main">
+          <p class="feifei-label">kuaishou-feifei</p>
+          <h2>{{ claim.product.value?.title || claim.orderItem.value?.skuName || '商品领取' }}</h2>
+          <p class="feifei-status">
+            {{ claim.feifei.value.rechargeStatusLabel || '待领取' }}
+          </p>
+        </div>
+
+        <dl class="feifei-meta">
+          <div>
+            <dt>订单号</dt>
+            <dd>{{ claim.order.value?.platformOrderId || '-' }}</dd>
+          </div>
+          <div>
+            <dt>平台单号</dt>
+            <dd>{{ claim.feifei.value.orderNo || claim.feifei.value.platformOrderNo || '-' }}</dd>
+          </div>
+        </dl>
+
+        <el-button
+          type="primary"
+          size="large"
+          :disabled="!claim.feifei.value.h5.rechargeUrl && !claim.feifei.value.h5.entryUrl"
+          @click="claim.openFeifeiUrl(false)"
+        >
+          打开领取链接
+        </el-button>
+
+        <p v-if="claim.task.value?.lastError" class="feifei-error">
+          {{ claim.task.value.lastError }}
+        </p>
+      </section>
+    </template>
+
     <template v-else-if="claim.detail.value && claim.flow.value">
       <ClaimTicketStep
         v-if="claim.currentStep.value === 1"
@@ -145,6 +181,60 @@ const claim = useKuaishouCloudClaim(() => props.token)
   color: #dc2626;
 }
 
+.feifei-card {
+  gap: 22px;
+}
+
+.feifei-main {
+  display: grid;
+  gap: 8px;
+}
+
+.feifei-label {
+  margin: 0;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.feifei-main h2 {
+  margin: 0;
+  font-size: 22px;
+  color: #0f172a;
+}
+
+.feifei-status {
+  margin: 0;
+  color: #2563eb;
+  font-weight: 600;
+}
+
+.feifei-meta {
+  margin: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.feifei-meta div {
+  display: grid;
+  gap: 4px;
+}
+
+.feifei-meta dt {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.feifei-meta dd {
+  margin: 0;
+  color: #0f172a;
+  word-break: break-all;
+}
+
+.feifei-error {
+  margin: 0;
+  color: #b45309;
+}
+
 .spinning {
   animation: spin 1s linear infinite;
 }