优化领取界面

apps/backend/scripts/mock-kuaishou-cloud-claim.ts

@@ -381,7 +381,6 @@ function parseDeliveryItems(value: unknown): DeliveryItem[] {
   const fallback = [
     { cloudSkuId: 910001, cloudSkuName: '套餐商品 A', quantity: 1 },
     { cloudSkuId: 910002, cloudSkuName: '套餐商品 B', quantity: 2 },
-    { cloudSkuId: 910003, cloudSkuName: '套餐商品 C', quantity: 1 },
   ]
 
   if (!text) {

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

@@ -3,9 +3,6 @@ import { Loading, RefreshRight } from '@element-plus/icons-vue'
 
 import type { ClaimKuaishouCloudFlowInfo } from '@/types/claim'
 
-const bindingGuideImageUrl = '/kuaishou-cloud-guide/4.jpg'
-const bindingGuidePreviewImages = [bindingGuideImageUrl]
-
 defineProps<{
   qrCodeDataUrl: string
   isBindingPrepared: boolean
@@ -28,18 +25,12 @@ defineEmits<{
 
 <template>
   <section class="content-card">
-    <h2>第 2 步：扫码绑定角色</h2>
-    <p class="muted">
-      核销码已验证通过。请扫码或直接打开绑定页面，绑定你自己的游戏角色。绑定信息如果一开始不对，可以重新绑定后再点下一步。
-    </p>
-
     <div v-if="isBindingPrepared && qrCodeDataUrl" class="qr-block">
-      <img :src="qrCodeDataUrl" alt="绑定二维码" class="qr-code" />
+      <div class="qr-guide-panel">
-      <div class="action-row">
+        <div class="scan-label scan-label--left">Q区用Q扫</div>
-        <el-button type="primary" size="large" @click="$emit('openBindUrl', false)">
+        <img :src="qrCodeDataUrl" alt="绑定二维码" class="qr-code" />
-          新窗口打开绑定页
+        <div class="scan-label scan-label--right">V区用V扫</div>
-        </el-button>
+        <p class="save-hint">长按保存相册进行扫码绑定</p>
-        <el-button size="large" plain @click="$emit('openBindUrl', true)"> 当前页面打开 </el-button>
       </div>
     </div>
 
@@ -48,24 +39,6 @@ defineEmits<{
       <span>系统正在准备绑定资源，请稍后自动刷新。</span>
     </div>
 
-    <div class="binding-guide">
-      <div class="guide-copy">
-        <strong>绑定操作指引</strong>
-        <p>保存二维码，Q 玩的用 Q 扫，V 玩的用 V 扫，扫了后绑定角色。</p>
-        <span>点击右侧图片查看大图</span>
-      </div>
-      <el-image
-        :src="bindingGuideImageUrl"
-        alt="扫码绑定角色操作指引"
-        class="guide-image"
-        fit="cover"
-        :preview-src-list="bindingGuidePreviewImages"
-        :initial-index="0"
-        preview-teleported
-        hide-on-click-modal
-      />
-    </div>
-
     <div class="role-panel" :class="{ pending: !isRoleReady }">
       <div class="role-panel__item">
         <span>当前角色</span>
@@ -119,10 +92,10 @@ defineEmits<{
   border-radius: 20px;
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
   backdrop-filter: blur(12px);
-  padding: 28px;
+  padding: 22px;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 14px;
 }
 
 .content-card h2 {
@@ -162,75 +135,79 @@ defineEmits<{
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  padding: 14px;
-  padding: 22px;
   border-radius: 18px;
   background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
   border: 1px solid #dbeafe;
+  min-width: 0;
+}
+
+.qr-guide-panel {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 280px) 42px;
+  grid-template-areas:
+    'left code right'
+    '. hint .';
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 410px;
+  min-width: 0;
+}
+
+.scan-label {
+  align-self: stretch;
+  min-height: 150px;
+  padding: 10px 6px;
+  color: #e11d48;
+  font-weight: 900;
+  font-size: 17px;
+  line-height: 1.2;
+  letter-spacing: 0;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scan-label--left {
+  grid-area: left;
+}
+
+.scan-label--right {
+  grid-area: right;
 }
 
 .qr-code {
-  width: 280px;
+  grid-area: code;
-  height: 280px;
-  padding: 12px;
-  background: #ffffff;
-  border-radius: 18px;
-}
-
-.binding-guide {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 180px;
-  gap: 16px;
-  align-items: center;
-  padding: 16px;
-  border: 1px solid #bfdbfe;
-  border-radius: 18px;
-  background: #eff6ff;
-}
-
-.guide-copy {
-  display: grid;
-  gap: 8px;
-}
-
-.guide-copy strong {
-  color: #1e3a8a;
-  font-size: 16px;
-}
-
-.guide-copy p {
-  margin: 0;
-  color: #1d4ed8;
-  font-weight: 700;
-  line-height: 1.7;
-}
-
-.guide-copy span {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.guide-image {
   width: 100%;
+  max-width: 280px;
   aspect-ratio: 1 / 1;
+  padding: 10px;
+  background: #ffffff;
   border-radius: 14px;
   border: 1px solid #dbeafe;
-  background: #ffffff;
-  cursor: zoom-in;
-  overflow: hidden;
 }
 
-.guide-image :deep(img) {
+.save-hint {
-  width: 100%;
+  grid-area: hint;
-  height: 100%;
+  margin: 0;
-  object-fit: cover;
+  justify-self: center;
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-align: center;
 }
 
 .role-panel {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  flex-wrap: wrap;
-  gap: 12px;
+  gap: 8px 18px;
-  padding: 14px;
+  align-items: center;
+  padding: 12px 14px;
   border: 1px solid #bfdbfe;
   border-radius: 16px;
   background: #eff6ff;
@@ -244,16 +221,19 @@ defineEmits<{
 .role-panel__item {
   min-width: 0;
   display: flex;
-  flex-direction: column;
+  flex: 1 1 0;
-  gap: 4px;
+  align-items: baseline;
+  gap: 8px;
 }
 
 .role-panel__item span {
+  flex: 0 0 auto;
   color: #64748b;
   font-size: 13px;
 }
 
 .role-panel__item strong {
+  min-width: 0;
   color: #0f172a;
   font-size: 17px;
   overflow-wrap: anywhere;
@@ -281,29 +261,43 @@ defineEmits<{
 @media (max-width: 720px) {
   .content-card {
     max-width: 100%;
+    padding: 16px;
+  }
+
+  .qr-block {
+    padding: 12px;
+  }
+
+  .qr-guide-panel {
+    grid-template-columns: 34px minmax(0, 1fr) 34px;
+    gap: 8px;
+    max-width: 100%;
+  }
+
+  .scan-label {
+    min-height: 128px;
+    padding: 8px 4px;
+    font-size: 14px;
   }
 
   .qr-code {
-    width: min(280px, 100%);
+    max-width: 232px;
-    height: auto;
+    padding: 8px;
   }
 
-  .binding-guide {
+  .save-hint {
-    grid-template-columns: 1fr;
+    font-size: 13px;
-  }
+    padding: 7px 10px;
-
-  .role-panel {
-    grid-template-columns: 1fr;
-  }
-
-  .guide-image {
-    max-width: 320px;
-    justify-self: center;
   }
 
   .action-row {
     width: 100%;
     flex-direction: column;
   }
+
+  .action-row :deep(.el-button) {
+    width: 100%;
+    margin-left: 0;
+  }
 }
 </style>

docs/履约配置/快手Cloud领取mock.md

@@ -115,7 +115,6 @@ cloudSkuId:商品名:数量,cloudSkuId:商品名:数量
 | --- | --- | --- |
 | `910001` | 套餐商品 A | `1` |
 | `910002` | 套餐商品 B | `2` |
-| `910003` | 套餐商品 C | `1` |
 
 ### 指定 91 订单号