feat: 优化结算完成页设计与排版，新增微信支付分品牌元素

- 顶部：微信支付分标识 + 分数展示 + 支付金额
- 商户卡片：头像、名称、服务项目/地点
- 商品清单：缩略图、名称、单价、数量、小计
- 优惠金额行（有优惠时显示）
- 支付合计：金额 + 支付方式（自动识别 payChannel）
- 订单详情：时间、单号、交易账单入口
- 底部品牌：安全支付保障（实名认证/资金安全/隐私保护）
- 加载动画改为旋转 spinner

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

haha-mp/src/api/order.ts

@@ -42,6 +42,7 @@ export interface OrderInfo {
   payStatus: string;
   payChannel?: string; // 支付渠道：wechat/alipay/balance/wechat_payscore
   payScoreOrderId?: string; // 微信支付分服务订单号
+  payScoreValue?: number; // 微信支付分分数值
   refundStatus?: string; // 退款状态
   refundAmount?: number; // 累计退款金额
   currentRefundId?: string; // 当前退款记录ID

haha-mp/src/pages/orderComplete/orderComplete.vue

@@ -2,6 +2,7 @@
   <view class="container">
     <!-- 加载中 -->
     <view v-if="loading" class="loading-wrapper">
+      <view class="loading-spinner" />
       <text class="loading-text">加载中...</text>
     </view>
 
@@ -9,107 +10,175 @@
     <view v-else-if="order" class="content">
       <!-- 顶部成功状态 -->
       <view class="success-header">
+        <!-- 微信支付分标识 -->
+        <view class="payscore-badge">
+          <view class="payscore-badge-icon">
+            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="24" cy="24" r="22" fill="#07C160" />
+              <path d="M14 24 L20 30 L34 18" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </view>
+          <text class="payscore-badge-text">微信支付分</text>
+        </view>
+
+        <!-- 分数展示 -->
+        <view v-if="order.payScoreValue" class="score-display">
+          <text class="score-value">{{ order.payScoreValue }}</text>
+          <text class="score-label">分</text>
+        </view>
+
+        <!-- 成功图标 -->
         <view class="success-icon-wrapper">
           <view class="success-icon">
-            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="50" cy="50" r="45" fill="#07C160" />
-              <path d="M 30 50 L 45 65 L 70 35" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
+            <view class="check-circle" />
+            <view class="check-stem" />
           </view>
         </view>
-        <text class="success-title">已完成</text>
-        <text class="success-subtitle">计入按时支付记录</text>
+
+        <text class="success-title">支付成功</text>
+        <text class="success-amount">¥{{ (order.paidAmount || order.totalAmount || 0).toFixed(2) }}</text>
+        <text class="success-subtitle">计入微信支付分按时支付记录</text>
       </view>
 
-      <!-- 商户信息 -->
-      <view class="merchant-section">
+      <!-- 商户信息卡片 -->
+      <view class="card merchant-card">
         <view class="merchant-header">
-          <view class="merchant-icon">
-            <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="20" cy="20" r="18" fill="#FF9800" />
-              <path d="M 12 28 L 20 12 L 28 28 Z" fill="#fff" />
-              <rect x="17" y="20" width="6" height="8" fill="#FF9800" />
-            </svg>
+          <view class="merchant-avatar">
+            <text class="merchant-avatar-text">AI</text>
+          </view>
+          <view class="merchant-info">
+            <text class="merchant-name">AI零售柜</text>
+            <text class="merchant-desc">智慧零售 · 自助先购后付</text>
           </view>
-          <text class="merchant-name">AI零售柜</text>
-        </view>
-        <view class="merchant-info-row">
-          <text class="info-label">先享服务</text>
-          <text class="info-value">自助先购后付</text>
         </view>
-        <view class="merchant-info-row">
-          <text class="info-label">服务信息</text>
-          <text class="info-value">智慧零售</text>
+        <view class="merchant-divider" />
+        <view class="merchant-meta">
+          <view class="meta-item">
+            <text class="meta-label">服务项目</text>
+            <text class="meta-value">自助购物</text>
+          </view>
+          <view class="meta-item" v-if="order.storeName">
+            <text class="meta-label">服务地点</text>
+            <text class="meta-value">{{ order.storeName }}</text>
+          </view>
         </view>
       </view>
 
-      <!-- 商品信息 -->
-      <view class="products-section">
-        <view class="section-label">商品信息</view>
-        <view v-for="(product, index) in order.products" :key="index" class="product-row">
-          <text class="product-name">{{ product.name }}</text>
-          <view class="product-right">
-            <text class="product-qty">X{{ product.quantity }}</text>
-            <text class="product-price">¥{{ (product.price * product.quantity).toFixed(2) }}</text>
+      <!-- 商品清单 -->
+      <view class="card products-card">
+        <view class="card-header">
+          <text class="card-title">商品清单</text>
+          <text class="card-count">共 {{ order.products?.length || 0 }} 件</text>
+        </view>
+        <view class="product-list">
+          <view v-for="(product, index) in order.products" :key="index" class="product-item">
+            <view class="product-thumb">
+              <text class="product-thumb-text">{{ (product.name || '商')[0] }}</text>
+            </view>
+            <view class="product-body">
+              <text class="product-name">{{ product.name }}</text>
+              <text class="product-unit-price">¥{{ product.price.toFixed(2) }}</text>
+            </view>
+            <view class="product-right">
+              <text class="product-qty">×{{ product.quantity }}</text>
+              <text class="product-subtotal">¥{{ (product.price * product.quantity).toFixed(2) }}</text>
+            </view>
           </view>
         </view>
-      </view>
 
-      <!-- 总计支付 -->
-      <view class="total-section">
-        <text class="total-label">总计支付</text>
-        <view class="total-amount-wrapper">
-          <text class="total-symbol">¥</text>
-          <text class="total-amount">{{ (order.paidAmount || order.totalAmount || 0).toFixed(2) }}</text>
+        <!-- 优惠信息 -->
+        <view v-if="order.discountAmount && order.discountAmount > 0" class="discount-row">
+          <text class="discount-label">优惠金额</text>
+          <text class="discount-value">-¥{{ order.discountAmount.toFixed(2) }}</text>
         </view>
       </view>
 
-      <!-- 订单详情 -->
-      <view class="detail-section">
-        <view class="detail-row">
-          <text class="detail-label">付款方式</text>
-          <text class="detail-value">服务结束后自动扣费</text>
-        </view>
-        <view class="detail-row" v-if="order.storeName">
-          <text class="detail-label">服务地点</text>
-          <text class="detail-value">{{ order.storeName }}</text>
-        </view>
-        <view class="detail-row">
-          <text class="detail-label">开始时间</text>
-          <text class="detail-value">{{ formatTime(order.createTime) }}</text>
-        </view>
-        <view class="detail-row" v-if="order.payTime">
-          <text class="detail-label">结束时间</text>
-          <text class="detail-value">{{ formatTime(order.payTime) }}</text>
+      <!-- 支付合计 -->
+      <view class="card total-card">
+        <view class="total-row">
+          <text class="total-label">合计</text>
+          <view class="total-amount-wrapper">
+            <text class="total-symbol">¥</text>
+            <text class="total-amount">{{ (order.paidAmount || order.totalAmount || 0).toFixed(2) }}</text>
+          </view>
         </view>
-        <view class="detail-row">
-          <text class="detail-label">服务单号</text>
-          <text class="detail-value detail-value-long">{{ order.outTradeNo }}</text>
+        <view class="total-method">
+          <text class="method-icon">💳</text>
+          <text class="method-text">{{ payMethodText }}</text>
         </view>
-        <view class="detail-row">
-          <text class="detail-label">商户单号</text>
-          <text class="detail-value detail-value-long">{{ order.orderNo }}</text>
+      </view>
+
+      <!-- 订单详情 -->
+      <view class="card detail-card">
+        <view class="card-header">
+          <text class="card-title">订单详情</text>
         </view>
-        <view class="detail-row detail-row-link" @click="goToOrderDetail">
-          <text class="detail-label">交易账单</text>
-          <view class="detail-link">
-            <text class="link-text">详情</text>
-            <text class="link-arrow">></text>
+        <view class="detail-list">
+          <view class="detail-item">
+            <text class="detail-label">开始时间</text>
+            <text class="detail-value">{{ formatTime(order.createTime) }}</text>
+          </view>
+          <view class="detail-item" v-if="order.payTime">
+            <text class="detail-label">结束时间</text>
+            <text class="detail-value">{{ formatTime(order.payTime) }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">服务单号</text>
+            <text class="detail-value detail-code">{{ order.outTradeNo || '-' }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">商户单号</text>
+            <text class="detail-value detail-code">{{ order.orderNo }}</text>
+          </view>
+          <view class="detail-item detail-link-item" @click="goToOrderDetail">
+            <text class="detail-label">交易账单</text>
+            <view class="detail-link">
+              <text class="link-text">查看详情</text>
+              <text class="link-arrow">›</text>
+            </view>
           </view>
         </view>
       </view>
 
-      <!-- 按时支付记录 -->
-      <view class="payment-record-section" @click="goToOrderDetail">
-        <text class="payment-record-text">按时支付记录</text>
-        <text class="payment-record-arrow">></text>
+      <!-- 底部品牌区 -->
+      <view class="footer-brand">
+        <view class="footer-divider-row">
+          <view class="footer-divider" />
+          <text class="footer-divider-text">安全支付保障</text>
+          <view class="footer-divider" />
+        </view>
+        <view class="footer-icons">
+          <view class="footer-icon-item">
+            <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="footer-icon-svg">
+              <circle cx="20" cy="20" r="18" fill="#07C160" opacity="0.15" />
+              <path d="M12 22 L16 26 L28 16" stroke="#07C160" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <text class="footer-icon-label">实名认证</text>
+          </view>
+          <view class="footer-icon-item">
+            <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="footer-icon-svg">
+              <circle cx="20" cy="20" r="18" fill="#07C160" opacity="0.15" />
+              <rect x="12" y="14" width="16" height="14" rx="2" stroke="#07C160" stroke-width="2" fill="none" />
+              <circle cx="20" cy="22" r="3" fill="#07C160" />
+            </svg>
+            <text class="footer-icon-label">资金安全</text>
+          </view>
+          <view class="footer-icon-item">
+            <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="footer-icon-svg">
+              <circle cx="20" cy="20" r="18" fill="#07C160" opacity="0.15" />
+              <path d="M14 20 L18 24 L26 16" stroke="#07C160" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <text class="footer-icon-label">隐私保护</text>
+          </view>
+        </view>
+        <text class="footer-powered">微信支付分 · 先享后付</text>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { getOrderDetail } from '../../api/order';
 import type { OrderInfo } from '../../api/order';
@@ -118,12 +187,29 @@ import { logger } from '../../utils/logger';
 const order = ref<OrderInfo | null>(null);
 const loading = ref(true);
 
+const payMethodText = computed(() => {
+  if (!order.value) return '自动扣费';
+  const ch = order.value.payChannel;
+  if (ch === 'wechat_payscore') return '微信支付分 · 服务结束后自动扣费';
+  if (ch === 'wechat') return '微信支付';
+  if (ch === 'alipay') return '支付宝';
+  if (ch === 'balance') return '余额支付';
+  return '自动扣费';
+});
+
 const formatTime = (time: string | undefined) => {
   if (!time) return '-';
-  if (typeof time === 'string' && time.includes('-')) {
-    return time.replace('T', ' ').substring(0, 19);
+  try {
+    const d = new Date(time);
+    if (isNaN(d.getTime())) {
+      if (time.includes('-')) return time.replace('T', ' ').substring(0, 19);
+      return time;
+    }
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  } catch {
+    return time;
   }
-  return time;
 };
 
 const loadOrderDetail = async (orderId: string) => {
@@ -143,13 +229,16 @@ const loadOrderDetail = async (orderId: string) => {
       outTradeNo: 'TEST_OUT_TRADE_NO_123456',
       hahaOrderNo: '',
       deviceId: 'TEST_DEVICE_001',
-      totalAmount: 12.50,
-      paidAmount: 12.50,
+      totalAmount: 18.50,
+      paidAmount: 18.50,
+      discountAmount: 0,
       payStatus: 'PAID',
+      payChannel: 'wechat_payscore',
+      payScoreValue: 687,
       status: 3,
       products: [
-        { name: '芝士牛肉卷', quantity: 1, price: 8.50 },
-        { name: '可乐330ml', quantity: 1, price: 4.00 }
+        { name: '芝士牛肉卷', quantity: 1, price: 12.50 },
+        { name: '可乐330ml', quantity: 1, price: 6.00 }
       ],
       storeName: '人民广场旗舰店',
       createTime: new Date().toISOString(),
@@ -181,47 +270,66 @@ onLoad((options: any) => {
 </script>
 
 <style lang="scss">
+$wechat-green: #07C160;
+$wechat-green-light: #e8f8ee;
+
 .container {
   min-height: 100vh;
-  background: $color-bg-secondary;
+  background: #f5f5f5;
   padding-bottom: env(safe-area-inset-bottom);
 }
 
+/* ========== 加载中 ========== */
 .loading-wrapper {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 600rpx;
+  gap: 24rpx;
+}
+
+.loading-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx solid #e0e0e0;
+  border-top-color: $wechat-green;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
 .loading-text {
   font-size: 28rpx;
-  color: $color-text-secondary;
+  color: #999;
 }
 
 .content {
-  padding-bottom: $spacing-xxl;
+  padding-bottom: 60rpx;
 }
 
-/* ========== 顶部成功状态 ========== */
+/* ========== 顶部 ========== */
 .success-header {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: $spacing-xxl 0 $spacing-xl;
-  background: $color-bg-primary;
+  padding: 60rpx 0 40rpx;
+  background: linear-gradient(180deg, #fff 0%, #f9fdfa 100%);
 }
 
-.success-icon-wrapper {
-  width: 140rpx;
-  height: 140rpx;
-  margin-bottom: $spacing-md;
-  animation: successPop 0.4s ease;
+.payscore-badge {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 12rpx;
 }
 
-.success-icon {
-  width: 100%;
-  height: 100%;
+.payscore-badge-icon {
+  width: 36rpx;
+  height: 36rpx;
 
   svg {
     width: 100%;
@@ -229,134 +337,295 @@ onLoad((options: any) => {
   }
 }
 
+.payscore-badge-text {
+  font-size: 24rpx;
+  color: $wechat-green;
+  font-weight: 500;
+}
+
+.score-display {
+  display: flex;
+  align-items: baseline;
+  gap: 4rpx;
+  margin-bottom: 24rpx;
+}
+
+.score-value {
+  font-size: 72rpx;
+  font-weight: 800;
+  color: $wechat-green;
+  line-height: 1;
+  letter-spacing: -2rpx;
+}
+
+.score-label {
+  font-size: 28rpx;
+  color: $wechat-green;
+  font-weight: 500;
+}
+
+.success-icon-wrapper {
+  width: 120rpx;
+  height: 120rpx;
+  margin-bottom: 24rpx;
+  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.success-icon {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: $wechat-green;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+}
+
+.check-circle {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.check-stem {
+  position: absolute;
+  width: 24rpx;
+  height: 52rpx;
+  border-right: 6rpx solid #fff;
+  border-bottom: 6rpx solid #fff;
+  transform: rotate(45deg);
+  margin-top: -6rpx;
+}
+
+@keyframes successPop {
+  0% { transform: scale(0); opacity: 0; }
+  60% { transform: scale(1.15); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
 .success-title {
-  font-size: 44rpx;
+  font-size: 36rpx;
   font-weight: 700;
-  color: $color-text-primary;
-  margin-bottom: $spacing-xs;
+  color: #1a1a1a;
+  margin-bottom: 8rpx;
 }
 
-.success-subtitle {
-  font-size: 26rpx;
-  color: $color-text-secondary;
+.success-amount {
+  font-size: 56rpx;
+  font-weight: 800;
+  color: #1a1a1a;
+  margin-bottom: 12rpx;
+  letter-spacing: -1rpx;
 }
 
-@keyframes successPop {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  60% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+.success-subtitle {
+  font-size: 24rpx;
+  color: #999;
 }
 
-/* ========== 商户信息 ========== */
-.merchant-section {
-  background: $color-bg-primary;
-  margin-top: $spacing-md;
-  padding: $spacing-lg;
+/* ========== 通用卡片 ========== */
+.card {
+  background: #fff;
+  margin: 16rpx 24rpx;
+  border-radius: 16rpx;
+  padding: 28rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 
+/* ========== 商户卡片 ========== */
 .merchant-header {
   display: flex;
   align-items: center;
-  margin-bottom: $spacing-md;
+  gap: 20rpx;
 }
 
-.merchant-icon {
-  width: 48rpx;
-  height: 48rpx;
-  margin-right: $spacing-sm;
-
-  svg {
-    width: 100%;
-    height: 100%;
-  }
+.merchant-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 16rpx;
+  background: linear-gradient(135deg, #FFC107, #FF9800);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.merchant-name {
+.merchant-avatar-text {
   font-size: 32rpx;
   font-weight: 700;
-  color: $color-text-primary;
+  color: #fff;
 }
 
-.merchant-info-row {
+.merchant-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.merchant-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.merchant-desc {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.merchant-divider {
+  height: 1rpx;
+  background: #f0f0f0;
+  margin: 24rpx 0;
+}
+
+.merchant-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.meta-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing-sm 0;
 }
 
-.info-label {
+.meta-label {
   font-size: 26rpx;
-  color: $color-text-secondary;
+  color: #999;
 }
 
-.info-value {
+.meta-value {
   font-size: 26rpx;
-  color: $color-text-primary;
+  color: #333;
 }
 
-/* ========== 商品信息 ========== */
-.products-section {
-  background: $color-bg-primary;
-  margin-top: $spacing-md;
-  padding: $spacing-lg;
+/* ========== 商品卡片 ========== */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
 }
 
-.section-label {
-  font-size: 26rpx;
-  color: $color-text-secondary;
-  margin-bottom: $spacing-md;
+.card-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.card-count {
+  font-size: 24rpx;
+  color: #999;
 }
 
-.product-row {
+.product-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.product-item {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: $spacing-sm 0;
+  gap: 16rpx;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
 }
 
-.product-name {
+.product-thumb {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 12rpx;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.product-thumb-text {
   font-size: 28rpx;
-  color: $color-text-primary;
+  color: #bbb;
+  font-weight: 600;
+}
+
+.product-body {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  min-width: 0;
+}
+
+.product-name {
+  font-size: 28rpx;
+  color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: $spacing-md;
+}
+
+.product-unit-price {
+  font-size: 22rpx;
+  color: #999;
 }
 
 .product-right {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4rpx;
   flex-shrink: 0;
 }
 
 .product-qty {
-  font-size: 26rpx;
-  color: $color-text-secondary;
-  margin-right: $spacing-md;
+  font-size: 24rpx;
+  color: #999;
 }
 
-.product-price {
+.product-subtotal {
   font-size: 28rpx;
-  color: $color-text-primary;
+  color: #333;
   font-weight: 500;
-  min-width: 120rpx;
-  text-align: right;
 }
 
-/* ========== 总计支付 ========== */
-.total-section {
-  background: $color-bg-primary;
-  margin-top: $spacing-md;
-  padding: $spacing-lg;
+/* 优惠 */
+.discount-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.discount-label {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.discount-value {
+  font-size: 26rpx;
+  color: $wechat-green;
+  font-weight: 500;
+}
+
+/* ========== 合计卡片 ========== */
+.total-card {
+  background: linear-gradient(135deg, #f9fdfa 0%, #fff 100%);
+  border: 1rpx solid #e8f5ee;
+}
+
+.total-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
@@ -364,109 +633,164 @@ onLoad((options: any) => {
 
 .total-label {
   font-size: 30rpx;
-  color: $color-text-secondary;
+  color: #666;
+  font-weight: 500;
 }
 
 .total-amount-wrapper {
   display: flex;
   align-items: baseline;
+  gap: 2rpx;
 }
 
 .total-symbol {
   font-size: 32rpx;
-  color: $color-text-primary;
+  color: #1a1a1a;
   font-weight: 700;
-  margin-right: 4rpx;
 }
 
 .total-amount {
   font-size: 56rpx;
-  color: $color-text-primary;
+  color: #1a1a1a;
   font-weight: 800;
+  letter-spacing: -1rpx;
 }
 
-/* ========== 订单详情 ========== */
-.detail-section {
-  background: $color-bg-primary;
-  margin-top: $spacing-md;
-  padding: $spacing-lg;
+.total-method {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx dashed #e0e8e2;
 }
 
-.detail-row {
+.method-icon {
+  font-size: 28rpx;
+}
+
+.method-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* ========== 详情卡片 ========== */
+.detail-list {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: $spacing-md 0;
-  border-bottom: 1rpx solid $color-bg-secondary;
+  flex-direction: column;
+}
 
-  &:last-child {
-    border-bottom: none;
-  }
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18rpx 0;
 
-  &.detail-row-link {
-    &:active {
-      opacity: 0.6;
-    }
+  &:not(:last-child) {
+    border-bottom: 1rpx solid #f8f8f8;
   }
 }
 
 .detail-label {
   font-size: 26rpx;
-  color: $color-text-secondary;
+  color: #999;
   flex-shrink: 0;
-  margin-right: $spacing-lg;
 }
 
 .detail-value {
   font-size: 26rpx;
-  color: $color-text-primary;
+  color: #333;
   text-align: right;
   word-break: break-all;
 }
 
-.detail-value-long {
-  max-width: 420rpx;
-  font-size: 24rpx;
+.detail-code {
+  font-size: 22rpx;
+  color: #666;
+  max-width: 380rpx;
+  font-family: "SF Mono", "Menlo", monospace;
+}
+
+.detail-link-item {
+  &:active {
+    background: #f9f9f9;
+    margin: 0 -28rpx;
+    padding-left: 28rpx;
+    padding-right: 28rpx;
+  }
 }
 
 .detail-link {
   display: flex;
   align-items: center;
-  flex-shrink: 0;
+  gap: 4rpx;
 }
 
 .link-text {
   font-size: 26rpx;
-  color: $color-wechat-green;
-  margin-right: 4rpx;
+  color: $wechat-green;
 }
 
 .link-arrow {
-  font-size: 26rpx;
-  color: $color-wechat-green;
+  font-size: 32rpx;
+  color: $wechat-green;
+  font-weight: 300;
 }
 
-/* ========== 按时支付记录 ========== */
-.payment-record-section {
+/* ========== 底部品牌 ========== */
+.footer-brand {
+  padding: 48rpx 24rpx 40rpx;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  background: $color-bg-primary;
-  margin-top: $spacing-md;
-  padding: $spacing-lg;
+  gap: 24rpx;
+}
 
-  &:active {
-    opacity: 0.7;
-  }
+.footer-divider-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  width: 100%;
 }
 
-.payment-record-text {
-  font-size: 28rpx;
-  color: $color-text-primary;
+.footer-divider {
+  flex: 1;
+  height: 1rpx;
+  background: #e0e0e0;
 }
 
-.payment-record-arrow {
-  font-size: 28rpx;
-  color: $color-text-tertiary;
+.footer-divider-text {
+  font-size: 22rpx;
+  color: #bbb;
+  flex-shrink: 0;
+}
+
+.footer-icons {
+  display: flex;
+  justify-content: center;
+  gap: 60rpx;
+}
+
+.footer-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.footer-icon-svg {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.footer-icon-label {
+  font-size: 20rpx;
+  color: #999;
+}
+
+.footer-powered {
+  font-size: 22rpx;
+  color: #bbb;
+  margin-top: 8rpx;
 }
 </style>