feat: 完成激活码兑换功能

Yi.Ai.Vue3/src/components/ProductPackage/index.vue

@@ -142,6 +142,7 @@ function cleanupPayment() {
 const tabs = [
   { key: 'member', label: '会员套餐' },
   { key: 'token', label: '尊享Token包' },
+  { key: 'activation', label: '激活码' },
 ];
 
 const benefitsData = {
@@ -210,8 +211,11 @@ function selectPackage(pkg: any) {
 }
 
 watch(activeTab, () => {
+  if (activeTab.value === 'activation') {
+    return;
+  }
   const packages = packagesData.value[activeTab.value as 'member' | 'token'];
-  if (packages.length > 0) {
+  if (packages && packages.length > 0) {
     const firstPackage = packages[0];
     selectedId.value = firstPackage.id;
     selectedPrice.value = firstPackage.price;
@@ -315,6 +319,11 @@ function close() {
 function onClose() {
   emit('close');
 }
+
+function goToActivation() {
+  close();
+  userStore.openUserCenter('activationCode');
+}
 </script>
 
 <template>
@@ -386,8 +395,30 @@ function onClose() {
         </div>
       </div>
 
+      <!-- 激活码引导页 -->
+      <div v-if="activeTab === 'activation'" class="activation-guide-container">
+        <div class="activation-content">
+          <div class="guide-icon">🎁</div>
+          <h3 class="guide-title">激活码兑换</h3>
+          <p class="guide-desc">如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。</p>
+          <el-button 
+            type="primary" 
+            size="large" 
+            class="redeem-jump-btn" 
+            round 
+            @click="goToActivation"
+          >
+            前往兑换中心
+          </el-button>
+          
+          <div class="guide-tips">
+            <p>💡 兑换成功后权益将立即生效</p>
+          </div>
+        </div>
+      </div>
+
       <!-- 移动端布局 -->
-      <div v-if="isMobile" class="mobile-layout">
+      <div v-else-if="isMobile" class="mobile-layout">
         <!-- 商品加载状态（无修改） -->
         <div v-if="isLoadingGoods" class="loading-container">
           <el-icon class="is-loading" :size="40">
@@ -824,6 +855,73 @@ function onClose() {
     }
   }
 
+  /* 激活码引导页样式 */
+  .activation-guide-container {
+    padding: 40px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    background: linear-gradient(to bottom, #fff, #fdfdfd);
+    border-radius: 8px;
+    
+    .activation-content {
+      text-align: center;
+      max-width: 400px;
+      
+      .guide-icon {
+        font-size: 64px;
+        margin-bottom: 24px;
+        animation: float-icon 3s ease-in-out infinite;
+      }
+      
+      .guide-title {
+        font-size: 24px;
+        font-weight: 800;
+        color: #2c3e50;
+        margin-bottom: 16px;
+      }
+      
+      .guide-desc {
+        color: #606266;
+        line-height: 1.6;
+        margin-bottom: 32px;
+        font-size: 15px;
+      }
+      
+      .redeem-jump-btn {
+        width: 200px;
+        height: 48px;
+        font-size: 16px;
+        font-weight: bold;
+        letter-spacing: 1px;
+        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        border: none;
+        box-shadow: 0 4px 12px rgba(255, 117, 140, 0.3);
+        transition: all 0.3s;
+        
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 16px rgba(255, 117, 140, 0.4);
+        }
+      }
+      
+      .guide-tips {
+        margin-top: 24px;
+        font-size: 13px;
+        color: #909399;
+        display: flex;
+        justify-content: center;
+        gap: 8px;
+      }
+    }
+  }
+
+  @keyframes float-icon {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+
   /* 移动端样式（核心新增：主价格/弱化价格样式） */
   .mobile-layout {
     display: flex; flex-direction: column; gap: 24px;