From 9555ef10e00ef9223fd746dc8e109fc44d14ebeb Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Mon, 13 Oct 2025 01:03:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=B0=8A=E4=BA=ABtok?=
 =?UTF-8?q?en=E5=8C=85=E4=BA=A7=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ProductPackage/index.vue   | 785 +++++++++++++++---
 1 file changed, 688 insertions(+), 97 deletions(-)

diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
index edaa429f..1765ab6c 100644
--- a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
+++ b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { GoodsItem } from '@/api/pay';
 import { CircleCheck, Loading } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { createOrder, getOrderStatus } from '@/api';
-import { GoodsCategoryType, getGoodsList, type GoodsItem } from '@/api/pay';
+import { getGoodsList, GoodsCategoryType } from '@/api/pay';
 import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
 import ProductPage from '@/pages/products/index.vue';
 import { useUserStore } from '@/stores';
@@ -16,12 +17,13 @@ interface PackageItem {
   id: number;
   name: string;
   desc: string;
-  price: number;
-  originalPrice?: number;
-  perMonth?: number;
+  price: number; // 用户实际支付价格
+  originalPrice?: number; // 原价（官方价格）
+  perMonth?: number; // 会员：月均价；Token：我们的标准价格
   tag: string;
-  discount: string;
+  discount: string; // 累计优惠描述，如"根据累加充值已优惠 ¥47.00"
   goodsName: string; // 用于创建订单
+  discountAmount?: number; // 优惠金额（从discount字段解析）
 }
 
 // 商品数据（从接口获取）
@@ -75,17 +77,33 @@ async function fetchGoodsList() {
     }));
 
     // 转换Token商品数据
-    packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => ({
-      id: index + 100, // 避免ID冲突
-      name: item.goodsName,
-      desc: '',
-      price: item.goodsPrice,
-      originalPrice: item.originalPrice !== item.goodsPrice ? item.originalPrice : undefined,
-      perMonth: item.referencePrice,
-      tag: item.remark || '',
-      discount: item.discountDescription || '',
-      goodsName: item.goodsName,
-    }));
+    // 字段含义：
+    // referencePrice - 模型官方价格（最贵）
+    // originalPrice - 意心平台优惠价（推荐）
+    // goodsPrice - 用户专属价格（基于累计充值的额外优惠）
+    packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => {
+      // 解析优惠金额：从"根据累加充值已优惠 ¥47.00"中提取数字
+      let discountAmount = 0;
+      if (item.discountDescription) {
+        const match = item.discountDescription.match(/¥([\d.]+)/);
+        if (match) {
+          discountAmount = Number.parseFloat(match[1]);
+        }
+      }
+
+      return {
+        id: index + 100, // 避免ID冲突
+        name: item.goodsName,
+        desc: '',
+        price: item.goodsPrice, // 用户专属价格（最终支付价格）
+        originalPrice: item.originalPrice !== item.goodsPrice ? item.originalPrice : undefined, // 意心平台优惠价
+        perMonth: item.referencePrice, // 模型官方价格
+        tag: item.remark || '',
+        discount: item.discountDescription || '',
+        goodsName: item.goodsName,
+        discountAmount, // 额外优惠金额
+      };
+    });
 
     // 设置默认选中第一个会员套餐
     if (packagesData.value.member.length > 0) {
@@ -140,7 +158,7 @@ function cleanupPayment() {
 
 const tabs = [
   { key: 'member', label: '会员套餐' },
-  { key: 'token', label: '尊享服务' },
+  { key: 'token', label: '尊享Token包' },
 ];
 
 const benefitsData = {
@@ -157,9 +175,11 @@ const benefitsData = {
   ],
 
   token: [
-    { name: 'Token 用途', value: '用于调用 API 或模型生成内容' },
-    { name: '灵活计费', value: '按调用量扣费，更加自由' },
-    { name: '支持多模型', value: '适配多种模型调用需求' },
+    { name: '超值优惠', value: '相比官方价格，我们的价格更实惠' },
+    { name: '灵活计费', value: '按调用量扣费，用多少付多少' },
+    { name: '支持多模型', value: '适配多种主流AI模型' },
+    { name: 'Token用途', value: '用于调用API或模型生成内容' },
+    { name: '永久有效', value: 'Token永不过期，随时使用' },
   ],
 };
 
@@ -188,6 +208,17 @@ function selectPackage(pkg: any) {
   selectPackageObject.value = pkg;
 }
 
+// 监听tab切换，自动选中当前tab的第一个产品
+watch(activeTab, () => {
+  const packages = packagesData.value[activeTab.value as 'member' | 'token'];
+  if (packages.length > 0) {
+    const firstPackage = packages[0];
+    selectedId.value = firstPackage.id;
+    selectedPrice.value = firstPackage.price;
+    selectPackageObject.value = firstPackage;
+  }
+});
+
 function handleClickLogin() {
   userStore.openLoginDialog();
 }
@@ -418,36 +449,101 @@ function onClose() {
 
             <!-- 价格 -->
             <div class="package-price">
-              <!-- 官方参考价（仅Token套餐显示） -->
-              <div v-if="activeTab === 'token' && pkg.perMonth" class="reference-price-section">
-                <div class="reference-label">官方参考价</div>
-                <div class="reference-value">¥{{ pkg.perMonth }}</div>
-              </div>
-
-              <!-- 当前价格 -->
-              <div class="current-price-section">
-                <span class="price-label">{{ activeTab === 'member' ? '会员价' : '我们的价格' }}</span>
-                <div class="price-row">
-                  <span class="price">¥{{ pkg.price }}</span>
-                  <span v-if="activeTab === 'member' && pkg.perMonth" class="per-month">
-                    仅¥{{ pkg.perMonth }}/月
-                  </span>
+              <!-- Token套餐：四层价格展示 -->
+              <template v-if="activeTab === 'token'">
+                <!-- 第一层：Claude官方参考价 -->
+                <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
+                  <div class="price-label-row">
+                    <span class="label-text">❌ Claude官方参考价</span>
+                  </div>
+                  <div class="official-price">
+                    ¥{{ pkg.perMonth.toFixed(2) }}
+                  </div>
                 </div>
-              </div>
 
-              <!-- 优惠说明 -->
-              <div v-if="pkg.discount" class="discount-info">
-                <el-icon class="discount-icon"><CircleCheck /></el-icon>
-                <span class="discount-text">{{ pkg.discount }}</span>
-              </div>
+                <!-- 第二层：意心平台优惠价 -->
+                <div v-if="pkg.originalPrice" class="platform-price-section">
+                  <div class="price-label-row">
+                    <span class="label-text">⭐ 意心平台优惠价</span>
+                    <span v-if="pkg.perMonth && pkg.perMonth > pkg.originalPrice" class="save-tag">
+                      省¥{{ (pkg.perMonth - pkg.originalPrice).toFixed(2) }}
+                    </span>
+                  </div>
+                  <div class="platform-price">
+                    ¥{{ pkg.originalPrice.toFixed(2) }}
+                  </div>
+                </div>
 
-              <!-- 节省金额（如果有官方参考价） -->
-              <div v-if="activeTab === 'token' && pkg.perMonth && pkg.perMonth > pkg.price" class="save-amount">
-                立省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}
-              </div>
+                <!-- 第三层：个人尊享优惠券 -->
+                <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
+                  <div class="coupon-header">
+                    <span class="coupon-icon">🎁</span>
+                    <span class="coupon-title">您的个人尊享优惠券</span>
+                  </div>
+                  <div class="coupon-amount">
+                    -¥{{ pkg.discountAmount.toFixed(2) }}
+                  </div>
+                </div>
+
+                <!-- 第四层：您的最终专属价格 -->
+                <div class="final-price-section">
+                  <div class="price-label-row">
+                    <span class="label-text special">👑 您的最终专属价格</span>
+                  </div>
+                  <div class="final-price-value">
+                    <span class="price-symbol">¥</span>
+                    <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
+                  </div>
+                  <div v-if="pkg.discount" class="discount-desc">
+                    {{ pkg.discount }}
+                  </div>
+                </div>
+
+                <!-- 总优惠展示 -->
+                <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
+                  <span class="bar-icon">🎉</span>
+                  <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
+                </div>
+              </template>
+
+              <!-- 会员套餐：原有展示逻辑 -->
+              <template v-else>
+                <div class="current-price-section">
+                  <span class="price-label">会员价</span>
+                  <div class="price-row">
+                    <span class="price">¥{{ pkg.price }}</span>
+                    <span v-if="pkg.perMonth" class="per-month">
+                      仅¥{{ pkg.perMonth }}/月
+                    </span>
+                  </div>
+                </div>
+
+                <div v-if="pkg.discount" class="discount-info">
+                  <el-icon class="discount-icon">
+                    <CircleCheck />
+                  </el-icon>
+                  <span class="discount-text">{{ pkg.discount }}</span>
+                </div>
+              </template>
             </div>
           </div>
         </div>
+
+        <!-- Token套餐的累计充值优惠提示 -->
+        <div v-if="activeTab === 'token'" class="recharge-tip-card">
+          <div class="tip-icon">
+            💝
+          </div>
+          <div class="tip-content">
+            <div class="tip-title">
+              累计充值优惠
+            </div>
+            <div class="tip-desc">
+              充值越多，优惠越多，长期使用更划算
+            </div>
+          </div>
+        </div>
+
         <div style="display: flex;justify-content: space-between;margin-top: 15px;">
           <div>
             <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
@@ -536,9 +632,9 @@ function onClose() {
               :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
             >
               <!-- 标签 -->
-              <div v-if="pkg.discount" class="discount-tag">
-                {{ pkg.discount }}
-              </div>
+              <!--              <div v-if="pkg.discount" class="discount-tag"> -->
+              <!--                {{ pkg.discount }} -->
+              <!--              </div> -->
               <div v-if="pkg.tag" class="tag">
                 {{ pkg.tag }}
               </div>
@@ -555,36 +651,100 @@ function onClose() {
 
               <!-- 价格 -->
               <div class="package-price">
-                <!-- 官方参考价（仅Token套餐显示） -->
-                <div v-if="activeTab === 'token' && pkg.perMonth" class="reference-price-section">
-                  <div class="reference-label">官方参考价</div>
-                  <div class="reference-value">¥{{ pkg.perMonth }}</div>
-                </div>
-
-                <!-- 当前价格 -->
-                <div class="current-price-section">
-                  <span class="price-label">{{ activeTab === 'member' ? '会员价' : '我们的价格' }}</span>
-                  <div class="price-row">
-                    <span class="price">¥{{ pkg.price }}</span>
-                    <span v-if="activeTab === 'member' && pkg.perMonth" class="per-month">
-                      仅¥{{ pkg.perMonth }}/月
-                    </span>
+                <!-- Token套餐：四层价格展示 -->
+                <template v-if="activeTab === 'token'">
+                  <!-- 第一层：Claude官方参考价 -->
+                  <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
+                    <div class="price-label-row">
+                      <span class="label-text">❌ 官方参考价</span>
+                    </div>
+                    <div class="official-price">
+                      ¥{{ pkg.perMonth.toFixed(2) }}
+                    </div>
                   </div>
-                </div>
 
-                <!-- 优惠说明 -->
-                <div v-if="pkg.discount" class="discount-info">
-                  <el-icon class="discount-icon"><CircleCheck /></el-icon>
-                  <span class="discount-text">{{ pkg.discount }}</span>
-                </div>
+                  <!-- 第二层：意心平台优惠价 -->
+                  <div v-if="pkg.originalPrice" class="platform-price-section">
+                    <div class="price-label-row">
+                      <span class="label-text">⭐ 意心平台优惠价</span>
+                      <span v-if="pkg.perMonth && pkg.perMonth > pkg.originalPrice" class="save-tag">
+                        省¥{{ (pkg.perMonth - pkg.originalPrice).toFixed(2) }}
+                      </span>
+                    </div>
+                    <div class="platform-price">
+                      ¥{{ pkg.originalPrice.toFixed(2) }}
+                    </div>
+                  </div>
 
-                <!-- 节省金额（如果有官方参考价） -->
-                <div v-if="activeTab === 'token' && pkg.perMonth && pkg.perMonth > pkg.price" class="save-amount">
-                  立省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}
-                </div>
+                  <!-- 第三层：个人尊享优惠券 -->
+                  <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
+                    <div class="coupon-header">
+                      <span class="coupon-icon">🎁</span>
+                      <span class="coupon-title">您的个人尊享优惠券</span>
+                    </div>
+                    <div class="coupon-amount">
+                      -¥{{ pkg.discountAmount.toFixed(2) }}
+                    </div>
+                  </div>
+
+                  <!-- 第四层：您的最终专属价格 -->
+                  <div class="final-price-section">
+                    <div class="price-label-row">
+                      <span class="label-text special">👑 您的最终专属价格</span>
+                    </div>
+                    <div class="final-price-value">
+                      <span class="price-symbol">¥</span>
+                      <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
+                    </div>
+                    <div v-if="pkg.discount" class="discount-desc">
+                      {{ pkg.discount }}
+                    </div>
+                  </div>
+
+                  <!-- 总优惠展示 -->
+                  <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
+                    <span class="bar-icon">🎉</span>
+                    <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
+                  </div>
+                </template>
+                <!-- 会员套餐：原有展示逻辑 -->
+                <template v-else>
+                  <div class="current-price-section">
+                    <span class="price-label">会员价</span>
+                    <div class="price-row">
+                      <span class="price">¥{{ pkg.price }}</span>
+                      <span v-if="pkg.perMonth" class="per-month">
+                        仅¥{{ pkg.perMonth }}/月
+                      </span>
+                    </div>
+                  </div>
+
+                  <div v-if="pkg.discount" class="discount-info">
+                    <el-icon class="discount-icon">
+                      <CircleCheck />
+                    </el-icon>
+                    <span class="discount-text">{{ pkg.discount }}</span>
+                  </div>
+                </template>
               </div>
             </div>
           </div>
+
+          <!-- Token套餐的累计充值优惠提示 -->
+          <div v-if="activeTab === 'token'" class="recharge-tip-card">
+            <div class="tip-icon">
+              💝
+            </div>
+            <div class="tip-content">
+              <div class="tip-title">
+                累计充值优惠
+              </div>
+              <div class="tip-desc">
+                充值越多，优惠越多，长期使用更划算
+              </div>
+            </div>
+          </div>
+
           <div style="display: flex;justify-content: space-between;margin-top: 15px;">
             <div>
               <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
@@ -658,37 +818,37 @@ function onClose() {
             <div v-if="activeTab === 'member'" class="extra-description ">
               <SupportModelList />
 
-            <!--              <div class="description-card"> -->
-            <!--                <div class="title"> -->
-            <!--                  前沿模型AI对话 -->
-            <!--                </div> -->
-            <!--                <div class="subtext"> -->
-            <!--                  DP-RI深度思考、精准解答 -->
-            <!--                </div> -->
-            <!--                <div class="subtext"> -->
-            <!--                  AI写作、文档对话、AI思维导图等赋能职场 -->
-            <!--                </div> -->
-            <!--              </div> -->
+              <!--              <div class="description-card"> -->
+              <!--                <div class="title"> -->
+              <!--                  前沿模型AI对话 -->
+              <!--                </div> -->
+              <!--                <div class="subtext"> -->
+              <!--                  DP-RI深度思考、精准解答 -->
+              <!--                </div> -->
+              <!--                <div class="subtext"> -->
+              <!--                  AI写作、文档对话、AI思维导图等赋能职场 -->
+              <!--                </div> -->
+              <!--              </div> -->
 
-            <!--              <div class="description-card"> -->
-            <!--                <div class="title"> -->
-            <!--                  AI绘图与设计能力 -->
-            <!--                </div> -->
-            <!--                <div class="subtext"> -->
-            <!--                  视觉吸睛赋能 -->
-            <!--                </div> -->
-            <!--                <div class="subtext"> -->
-            <!--                  "AI+办公!"解锁300+工具箱会员权益 -->
-            <!--                </div> -->
-            <!--              </div> -->
+              <!--              <div class="description-card"> -->
+              <!--                <div class="title"> -->
+              <!--                  AI绘图与设计能力 -->
+              <!--                </div> -->
+              <!--                <div class="subtext"> -->
+              <!--                  视觉吸睛赋能 -->
+              <!--                </div> -->
+              <!--                <div class="subtext"> -->
+              <!--                  "AI+办公!"解锁300+工具箱会员权益 -->
+              <!--                </div> -->
+              <!--              </div> -->
             </div>
           </div>
 
           <!-- 查看详情 -->
           <div class="view-details">
-          <!--            <el-button text type="primary" @click="toggleDetails"> -->
-          <!--              查看详情 -->
-          <!--            </el-button> -->
+            <!--            <el-button text type="primary" @click="toggleDetails"> -->
+            <!--              查看详情 -->
+            <!--            </el-button> -->
           </div>
         </div>
       </div>
@@ -890,6 +1050,239 @@ function onClose() {
           text-align: center;
           box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
         }
+
+        // Token套餐四层价格展示样式 - 移动端
+        .official-price-section {
+          padding: 6px 10px;
+          background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
+          border-radius: 6px;
+          border: 1px solid #fecdd3;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 3px;
+
+            .label-text {
+              font-size: 11px;
+              color: #9f1239;
+              font-weight: 600;
+            }
+          }
+
+          .official-price {
+            font-size: 16px;
+            font-weight: 700;
+            color: #be123c;
+            text-decoration: line-through;
+            text-decoration-thickness: 2px;
+          }
+        }
+
+        .platform-price-section {
+          padding: 8px 10px;
+          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+          border-radius: 6px;
+          border: 1px solid #fbbf24;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 3px;
+
+            .label-text {
+              font-size: 11px;
+              color: #78350f;
+              font-weight: 600;
+            }
+
+            .save-tag {
+              background: #dc2626;
+              color: white;
+              font-size: 9px;
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .platform-price {
+            font-size: 18px;
+            font-weight: 700;
+            color: #b45309;
+          }
+        }
+
+        .coupon-card {
+          padding: 8px 10px;
+          background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+          border-radius: 6px;
+          border: 1px dashed #fb923c;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .coupon-header {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .coupon-icon {
+              font-size: 14px;
+            }
+
+            .coupon-title {
+              font-size: 10px;
+              color: #78350f;
+              font-weight: 600;
+            }
+          }
+
+          .coupon-amount {
+            font-size: 16px;
+            font-weight: 700;
+            color: #ea580c;
+          }
+        }
+
+        .our-price-section {
+          padding: 10px 12px;
+          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+          border-radius: 8px;
+          border: 1px solid #fbbf24;
+
+          .price-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 6px;
+
+            .price-tag-small {
+              font-size: 12px;
+              color: #78350f;
+              font-weight: 600;
+            }
+
+            .save-badge {
+              background: #dc2626;
+              color: white;
+              font-size: 10px;
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .our-price {
+            font-size: 24px;
+            font-weight: 700;
+            color: #b45309;
+          }
+        }
+
+        .final-price-section {
+          padding: 10px;
+          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+          border-radius: 8px;
+          border: 2px solid #60a5fa;
+          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 6px;
+
+            .label-text.special {
+              font-size: 12px;
+              color: #1e40af;
+              font-weight: 700;
+            }
+          }
+
+          .final-price-value {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 4px;
+
+            .price-symbol {
+              font-size: 16px;
+              font-weight: 700;
+              color: #1e40af;
+              margin-right: 2px;
+            }
+
+            .price-number {
+              font-size: 26px;
+              font-weight: 700;
+              color: #1e40af;
+            }
+          }
+
+          .discount-desc {
+            font-size: 10px;
+            color: #1e3a8a;
+            font-weight: 500;
+            line-height: 1.3;
+          }
+        }
+
+        .total-discount-bar {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          padding: 8px 10px;
+          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+          border-radius: 8px;
+          border: 1px solid #34d399;
+          box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
+
+          .bar-icon {
+            font-size: 14px;
+          }
+
+          .bar-text {
+            font-size: 11px;
+            font-weight: 700;
+            color: #065f46;
+          }
+        }
+      }
+    }
+
+    // 累计充值优惠提示卡片样式
+    .recharge-tip-card {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+      border-radius: 8px;
+      border: 1px solid #fbbf24;
+      margin-top: 16px;
+
+      .tip-icon {
+        font-size: 24px;
+      }
+
+      .tip-content {
+        flex: 1;
+
+        .tip-title {
+          font-size: 14px;
+          font-weight: 700;
+          color: #78350f;
+          margin-bottom: 4px;
+        }
+
+        .tip-desc {
+          font-size: 12px;
+          color: #92400e;
+          line-height: 1.4;
+        }
       }
     }
 
@@ -1124,6 +1517,204 @@ function onClose() {
           text-align: center;
           box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
         }
+
+        // Token套餐四层价格展示样式 - 桌面端
+        .official-price-section {
+          padding: 8px 12px;
+          background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
+          border-radius: 8px;
+          border: 1px solid #fecdd3;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .label-text {
+              font-size: 12px;
+              color: #9f1239;
+              font-weight: 700;
+            }
+          }
+
+          .official-price {
+            font-size: 20px;
+            font-weight: 700;
+            color: #be123c;
+            text-decoration: line-through;
+            text-decoration-thickness: 2px;
+          }
+        }
+
+        .platform-price-section {
+          padding: 10px 12px;
+          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+          border-radius: 8px;
+          border: 1px solid #fbbf24;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .label-text {
+              font-size: 12px;
+              color: #78350f;
+              font-weight: 700;
+            }
+
+            .save-tag {
+              background: #dc2626;
+              color: white;
+              font-size: 10px;
+              padding: 2px 8px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .platform-price {
+            font-size: 22px;
+            font-weight: 700;
+            color: #b45309;
+          }
+        }
+
+        .coupon-card {
+          padding: 10px 12px;
+          background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+          border-radius: 8px;
+          border: 1px dashed #fb923c;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .coupon-header {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            .coupon-icon {
+              font-size: 16px;
+            }
+
+            .coupon-title {
+              font-size: 11px;
+              color: #78350f;
+              font-weight: 700;
+            }
+          }
+
+          .coupon-amount {
+            font-size: 20px;
+            font-weight: 700;
+            color: #ea580c;
+          }
+        }
+
+        .final-price-section {
+          padding: 12px;
+          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+          border-radius: 10px;
+          border: 2px solid #60a5fa;
+          box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+
+            .label-text.special {
+              font-size: 14px;
+              color: #1e40af;
+              font-weight: 700;
+            }
+          }
+
+          .final-price-value {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 6px;
+
+            .price-symbol {
+              font-size: 18px;
+              font-weight: 700;
+              color: #1e40af;
+              margin-right: 2px;
+            }
+
+            .price-number {
+              font-size: 30px;
+              font-weight: 700;
+              color: #1e40af;
+            }
+          }
+
+          .discount-desc {
+            font-size: 11px;
+            color: #1e3a8a;
+            font-weight: 500;
+            line-height: 1.4;
+          }
+        }
+
+        .total-discount-bar {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          padding: 10px 12px;
+          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+          border-radius: 10px;
+          border: 1px solid #34d399;
+          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+
+          .bar-icon {
+            font-size: 16px;
+          }
+
+          .bar-text {
+            font-size: 13px;
+            font-weight: 700;
+            color: #065f46;
+          }
+        }
+      }
+    }
+
+    // 累计充值优惠提示卡片样式 - 桌面端
+    .recharge-tip-card {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+      border-radius: 8px;
+      border: 1px solid #fbbf24;
+      margin-top: 16px;
+
+      .tip-icon {
+        font-size: 28px;
+      }
+
+      .tip-content {
+        flex: 1;
+
+        .tip-title {
+          font-size: 15px;
+          font-weight: 700;
+          color: #78350f;
+          margin-bottom: 4px;
+        }
+
+        .tip-desc {
+          font-size: 13px;
+          color: #92400e;
+          line-height: 1.5;
+        }
       }
     }