diff --git a/api/appUser.js b/api/appUser.js
index 7eac8e3..682c5d9 100644
--- a/api/appUser.js
+++ b/api/appUser.js
@@ -150,6 +150,14 @@ export function redeemProductByPoints(user_id, product_id, quantity) {
   return authRequest({ url: `/api/app/users/${user_id}/points/redeem-product`, method: 'POST', data: { product_id, quantity } })
 }
 
+export function redeemItemCardByPoints(user_id, item_card_id, quantity = 1) {
+  return authRequest({ url: `/api/app/users/${user_id}/points/redeem-item-card`, method: 'POST', data: { item_card_id, quantity } })
+}
+
+export function getStoreItems(kind = 'product', page = 1, page_size = 20) {
+  return authRequest({ url: '/api/app/store/items', method: 'GET', data: { kind, page, page_size } })
+}
+
 export function getTasks(page = 1, page_size = 20) {
   return authRequest({ url: '/api/app/task-center/tasks', method: 'GET', data: { page, page_size } })
 }
@@ -158,6 +166,10 @@ export function getTaskProgress(task_id, user_id) {
   return authRequest({ url: `/api/app/task-center/tasks/${task_id}/progress/${user_id}`, method: 'GET' })
 }
 
+export function claimTaskReward(task_id, user_id, tier_id) {
+  return authRequest({ url: `/api/app/task-center/tasks/${task_id}/claim/${user_id}`, method: 'POST', data: { tier_id } })
+}
+
 export function getShipments(user_id, page = 1, page_size = 20) {
   return authRequest({ url: `/api/app/users/${user_id}/shipments`, method: 'GET', data: { page, page_size } })
 }
@@ -229,3 +241,15 @@ export function checkMatchingGame(game_id, total_pairs) {
     data: { game_id, total_pairs }
   })
 }
+
+/**
+ * 支付成功后获取游戏数据
+ * @param {string} game_id - 游戏ID
+ */
+export function getMatchingGameCards(game_id) {
+  return authRequest({
+    url: '/api/app/matching/cards',
+    method: 'GET',
+    data: { game_id }
+  })
+}
diff --git a/components/YifanSelector.vue b/components/YifanSelector.vue
index f551815..3b192c1 100644
--- a/components/YifanSelector.vue
+++ b/components/YifanSelector.vue
@@ -25,7 +25,7 @@
         </view>
       </view>
       
-      <view class="action-bar">
+      <view class="action-bar" v-if="!hideActionBar">
         <view class="selection-info" v-if="selectedItems.length > 0">
           已选 <text class="highlight">{{ selectedItems.length }}</text> 个位置
         </view>
@@ -62,10 +62,11 @@ const props = defineProps({
   issueId: { type: [String, Number], required: true },
   pricePerDraw: { type: Number, default: 0 },
   disabled: { type: Boolean, default: false },
-  disabledText: { type: String, default: '' }
+  disabledText: { type: String, default: '' },
+  hideActionBar: { type: Boolean, default: false }  // 支持隐藏内置操作栏
 })
 
-const emit = defineEmits(['payment-success'])
+const emit = defineEmits(['payment-success', 'selection-change'])
 
 const choices = ref([])
 const loading = ref(false)
@@ -162,6 +163,9 @@ function handleSelect(item) {
   } else {
     selectedItems.value.push(item)
   }
+  
+  // 通知父组件选中变化
+  emit('selection-change', [...selectedItems.value])
 }
 
 function handleBuy() {
@@ -320,6 +324,13 @@ async function onPaymentConfirm(paymentData) {
     }
   }
 }
+
+// 暴露方法供外部调用
+defineExpose({
+  handleRandomOne,
+  handleBuy,
+  selectedItems: () => selectedItems.value
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/activity/ActivityHeader.vue b/components/activity/ActivityHeader.vue
index 7ef4d4b..d04ef7c 100644
--- a/components/activity/ActivityHeader.vue
+++ b/components/activity/ActivityHeader.vue
@@ -74,14 +74,17 @@ const formattedPrice = computed(() => {
 
 .header-card {
   margin: $spacing-xl $spacing-lg;
-  background: rgba($bg-card, 0.85);
-  backdrop-filter: blur(24rpx);
+  background: rgba($bg-card, 0.72);
+  backdrop-filter: blur(32rpx);
   border-radius: $radius-xl;
   padding: $spacing-lg;
   display: flex;
   align-items: center;
-  box-shadow: $shadow-card;
-  border: 1rpx solid rgba(255, 255, 255, 0.6);
+  box-shadow: 
+    0 1rpx 0 rgba(255,255,255,0.5) inset,
+    0 -1rpx 0 rgba(0,0,0,0.02) inset,
+    $shadow-card;
+  border: none;
   position: relative;
   overflow: hidden;
 
diff --git a/components/activity/ActivityPageLayout.vue b/components/activity/ActivityPageLayout.vue
index 34a6fc6..46c26ce 100644
--- a/components/activity/ActivityPageLayout.vue
+++ b/components/activity/ActivityPageLayout.vue
@@ -106,15 +106,15 @@ defineProps({
   top: 0;
   left: 0;
   width: 100%;
-  height: 700rpx;
+  height: 900rpx;
   z-index: 1;
 }
 
 .bg-image {
   width: 100%;
   height: 100%;
-  filter: blur(30rpx) brightness(0.9);
-  transform: scale(1.1);
+  filter: blur(40rpx) brightness(0.85) saturate(1.1);
+  transform: scale(1.15);
 }
 
 .bg-mask {
@@ -123,7 +123,16 @@ defineProps({
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba($bg-page, 0.2) 0%, $bg-page 90%, $bg-page 100%);
+  /* 6段式平滑过渡，模拟ease-out曲线 */
+  background: 
+    linear-gradient(180deg, 
+      rgba($bg-page, 0) 0%, 
+      rgba($bg-page, 0.05) 15%,
+      rgba($bg-page, 0.2) 35%,
+      rgba($bg-page, 0.5) 55%,
+      rgba($bg-page, 0.8) 70%,
+      $bg-page 82%
+    );
 }
 
 .main-scroll {
diff --git a/components/activity/ActivityTabs.vue b/components/activity/ActivityTabs.vue
index f3e88fa..436cce1 100644
--- a/components/activity/ActivityTabs.vue
+++ b/components/activity/ActivityTabs.vue
@@ -49,11 +49,13 @@ const staggerClass = computed(() => `stagger-${props.stagger}`)
 /* Section Container - 与原始设计一致 */
 .section-container {
   margin: 0 $spacing-lg $spacing-lg;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.78);
   border-radius: $radius-xl;
   padding: $spacing-lg;
-  box-shadow: $shadow-sm;
-  backdrop-filter: blur(10rpx);
+  box-shadow: 
+    0 1rpx 0 rgba(255,255,255,0.4) inset,
+    $shadow-sm;
+  backdrop-filter: blur(16rpx);
 }
 
 /* Modern Tabs - 与原始设计完全一致 */
diff --git a/components/activity/CabinetPreviewPopup.vue b/components/activity/CabinetPreviewPopup.vue
new file mode 100644
index 0000000..d0f8d08
--- /dev/null
+++ b/components/activity/CabinetPreviewPopup.vue
@@ -0,0 +1,259 @@
+<template>
+  <view v-if="visible" class="cabinet-overlay" @touchmove.stop.prevent>
+    <view class="cabinet-mask" @tap="close"></view>
+    <view class="cabinet-panel" @tap.stop>
+      <view class="cabinet-header">
+        <text class="cabinet-title">我的盒柜</text>
+        <text class="cabinet-close" @tap="close">×</text>
+      </view>
+      
+      <scroll-view scroll-y class="cabinet-content">
+        <view v-if="loading" class="cabinet-loading">
+          <text class="loading-icon">📦</text>
+          <text class="loading-text">加载中...</text>
+        </view>
+        
+        <view v-else-if="items.length === 0" class="cabinet-empty">
+          <text class="empty-icon">🎁</text>
+          <text class="empty-text">暂无物品</text>
+          <text class="empty-hint">参与活动获得奖品后会显示在这里</text>
+        </view>
+        
+        <view v-else class="cabinet-grid">
+          <view v-for="item in displayItems" :key="item.id" class="cabinet-item">
+            <image class="item-image" :src="item.image" mode="aspectFill" />
+            <view class="item-info">
+              <text class="item-name">{{ item.name }}</text>
+              <text class="item-count">x{{ item.count }}</text>
+            </view>
+          </view>
+        </view>
+        
+        <view v-if="hasMore" class="load-more" @tap="goFullCabinet">
+          <text>查看全部 {{ total }} 件物品</text>
+          <text class="arrow">›</text>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  activityId: {
+    type: [String, Number],
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:visible'])
+
+const loading = ref(false)
+const items = ref([])
+const total = ref(0)
+const maxDisplay = 6  // 最多显示6个
+
+const displayItems = computed(() => items.value.slice(0, maxDisplay))
+const hasMore = computed(() => items.value.length > maxDisplay || total.value > items.value.length)
+
+function close() {
+  emit('update:visible', false)
+}
+
+function goFullCabinet() {
+  close()
+  uni.switchTab({ url: '/pages/cabinet/index' })
+}
+
+// 模拟加载数据，实际项目中应该调用API
+async function loadItems() {
+  if (!props.activityId) return
+  
+  loading.value = true
+  try {
+    // TODO: 调用实际API获取当前活动相关的盒柜物品
+    // const res = await getUserCabinetItems(props.activityId)
+    // items.value = res.items || []
+    // total.value = res.total || 0
+    
+    // 模拟数据
+    await new Promise(r => setTimeout(r, 300))
+    items.value = []
+    total.value = 0
+  } catch (e) {
+    console.error('加载盒柜失败', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.visible, (v) => {
+  if (v) loadItems()
+})
+</script>
+
+<style lang="scss" scoped>
+.cabinet-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9000;
+}
+
+.cabinet-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10rpx);
+}
+
+.cabinet-panel {
+  position: absolute;
+  left: $spacing-lg;
+  right: $spacing-lg;
+  bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  max-height: 65vh;
+  background: rgba($bg-card, 0.95);
+  border-radius: $radius-xl;
+  box-shadow: $shadow-card;
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+  animation: slideUp 0.25s ease-out;
+}
+
+.cabinet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-lg;
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
+}
+
+.cabinet-title {
+  font-size: $font-lg;
+  font-weight: 800;
+  color: $text-main;
+}
+
+.cabinet-close {
+  font-size: 48rpx;
+  line-height: 1;
+  color: $text-tertiary;
+  padding: 0 10rpx;
+}
+
+.cabinet-content {
+  max-height: 50vh;
+  padding: $spacing-lg;
+}
+
+.cabinet-loading,
+.cabinet-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx $spacing-lg;
+}
+
+.loading-icon,
+.empty-icon {
+  font-size: 64rpx;
+  margin-bottom: $spacing-md;
+}
+
+.loading-text,
+.empty-text {
+  font-size: $font-md;
+  color: $text-sub;
+  font-weight: 600;
+}
+
+.empty-hint {
+  font-size: $font-xs;
+  color: $text-tertiary;
+  margin-top: $spacing-xs;
+}
+
+.cabinet-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-md;
+}
+
+.cabinet-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.item-image {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: $radius-md;
+  background: $bg-secondary;
+  margin-bottom: $spacing-xs;
+}
+
+.item-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.item-name {
+  font-size: $font-xs;
+  color: $text-main;
+  font-weight: 600;
+  @include text-ellipsis(1);
+  text-align: center;
+  width: 100%;
+}
+
+.item-count {
+  font-size: 22rpx;
+  color: $brand-primary;
+  font-weight: 700;
+}
+
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: $spacing-lg 0;
+  margin-top: $spacing-md;
+  color: $brand-primary;
+  font-size: $font-sm;
+  font-weight: 600;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.04);
+}
+
+.arrow {
+  font-size: 28rpx;
+  font-weight: 700;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(40rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/components/activity/RecordsList.vue b/components/activity/RecordsList.vue
index 5b8a54c..89cae0f 100644
--- a/components/activity/RecordsList.vue
+++ b/components/activity/RecordsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="records-wrapper">
     <view class="records-list" v-if="records && records.length">
       <view v-for="(item, idx) in records" :key="item.id || idx" class="record-item">
         <image class="record-img" :src="item.image" mode="aspectFill" />
@@ -12,9 +12,12 @@
         </view>
       </view>
     </view>
-    <view class="empty-state" v-else>
-      <text class="empty-icon">📝</text>
-      <text class="empty-text">{{ emptyText }}</text>
+    <view class="empty-state-compact" v-else>
+      <view class="empty-icon-wrap">
+        <text class="empty-icon">🎁</text>
+      </view>
+      <text class="empty-title">{{ emptyText }}</text>
+      <text class="empty-hint">快来参与活动获得奖品吧</text>
     </view>
   </view>
 </template>
@@ -87,21 +90,40 @@ defineProps({
   color: $text-sub;
 }
 
-.empty-state {
+/* 紧凑优雅的空状态 */
+.empty-state-compact {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: $spacing-xl;
-  color: $text-sub;
+  padding: $spacing-lg $spacing-xl;
+  min-height: 200rpx;
+}
+
+.empty-icon-wrap {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($accent-gold, 0.1) 100%);
+  border-radius: 50%;
+  margin-bottom: $spacing-md;
 }
 
 .empty-icon {
-  font-size: 64rpx;
-  margin-bottom: $spacing-sm;
+  font-size: 40rpx;
 }
 
-.empty-text {
-  font-size: $font-sm;
+.empty-title {
+  font-size: $font-md;
+  color: $text-sub;
+  font-weight: 600;
+  margin-bottom: 8rpx;
+}
+
+.empty-hint {
+  font-size: $font-xs;
+  color: $text-tertiary;
 }
 </style>
diff --git a/components/activity/RewardsPreview.vue b/components/activity/RewardsPreview.vue
index e049896..973c8ff 100644
--- a/components/activity/RewardsPreview.vue
+++ b/components/activity/RewardsPreview.vue
@@ -223,6 +223,7 @@ const rewardGroups = computed(() => {
   justify-content: center;
   padding: $spacing-xl;
   color: $text-sub;
+  min-height: 300rpx;  /* 防止切换时布局跳动 */
 }
 
 .empty-icon {
diff --git a/components/activity/RulesPopup.vue b/components/activity/RulesPopup.vue
new file mode 100644
index 0000000..d8b76e6
--- /dev/null
+++ b/components/activity/RulesPopup.vue
@@ -0,0 +1,125 @@
+<template>
+  <view v-if="visible" class="rules-overlay" @touchmove.stop.prevent>
+    <view class="rules-mask" @tap="close"></view>
+    <view class="rules-panel" @tap.stop>
+      <view class="rules-header">
+        <text class="rules-title">{{ title }}</text>
+        <text class="rules-close" @tap="close">×</text>
+      </view>
+      <scroll-view scroll-y class="rules-content">
+        <!-- 使用 rich-text 渲染富文本 HTML -->
+        <rich-text v-if="content" class="rules-richtext" :nodes="content"></rich-text>
+        <view v-else class="rules-empty">暂无活动规则</view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '活动规则'
+  },
+  content: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:visible'])
+
+function close() {
+  emit('update:visible', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.rules-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9000;
+}
+
+.rules-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10rpx);
+}
+
+.rules-panel {
+  position: absolute;
+  left: $spacing-lg;
+  right: $spacing-lg;
+  bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  max-height: 70vh;
+  background: rgba($bg-card, 0.95);
+  border-radius: $radius-xl;
+  box-shadow: $shadow-card;
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+  animation: slideUp 0.25s ease-out;
+}
+
+.rules-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-lg;
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
+}
+
+.rules-title {
+  font-size: $font-lg;
+  font-weight: 800;
+  color: $text-main;
+}
+
+.rules-close {
+  font-size: 48rpx;
+  line-height: 1;
+  color: $text-tertiary;
+  padding: 0 10rpx;
+}
+
+.rules-content {
+  max-height: 55vh;
+  padding: $spacing-lg;
+}
+
+.rules-richtext {
+  font-size: $font-sm;
+  color: $text-main;
+  line-height: 1.8;
+}
+
+.rules-empty {
+  text-align: center;
+  color: $text-sub;
+  padding: $spacing-xl;
+  font-size: $font-sm;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(40rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>
+
diff --git a/pages.json b/pages.json
index 81a4b4f..ce1e536 100644
--- a/pages.json
+++ b/pages.json
@@ -42,6 +42,30 @@
 				"navigationBarTitleText": "积分记录"
 			}
 		},
+		{
+			"path": "pages/coupons/index",
+			"style": {
+				"navigationBarTitleText": "我的优惠券"
+			}
+		},
+		{
+			"path": "pages/item-cards/index",
+			"style": {
+				"navigationBarTitleText": "我的道具卡"
+			}
+		},
+		{
+			"path": "pages/invites/index",
+			"style": {
+				"navigationBarTitleText": "邀请记录"
+			}
+		},
+		{
+			"path": "pages/tasks/index",
+			"style": {
+				"navigationBarTitleText": "任务中心"
+			}
+		},
 		{
 			"path": "pages/orders/index",
 			"style": {
diff --git a/pages/activity/duiduipeng/index.vue b/pages/activity/duiduipeng/index.vue
index 5f520f6..042a1d2 100644
--- a/pages/activity/duiduipeng/index.vue
+++ b/pages/activity/duiduipeng/index.vue
@@ -1,5 +1,6 @@
 <template>
   <ActivityPageLayout :cover-url="coverUrl">
+    <view class="bg-decoration"></view>
     <template #header>
       <ActivityHeader 
         :title="detail.name || detail.title || '对对碰'"
@@ -78,46 +79,69 @@
     </template>
 
     <template #modals>
-      <!-- 游戏弹窗 -->
-      <view v-if="gameVisible" class="rewards-overlay" @touchmove.stop.prevent>
-        <view class="rewards-mask" @tap="closeGame"></view>
-        <view class="rewards-panel" @tap.stop>
-          <view class="rewards-header">
-            <text class="rewards-title">对对碰游戏</text>
-            <text class="rewards-close" @tap="closeGame">×</text>
+      <!-- 游戏弹窗 - 全屏沉浸式 -->
+      <view v-if="gameVisible" class="game-overlay" @touchmove.stop.prevent>
+        <view class="game-mask"></view>
+        <view class="game-fullscreen" @tap.stop>
+          <!-- 顶部标题栏 -->
+          <view class="game-topbar">
+            <text class="game-topbar-title">对对碰游戏</text>
+            <view class="game-close-btn" @tap="closeGame">
+              <text>×</text>
+            </view>
           </view>
-          <scroll-view scroll-y class="game-scroll-list">
-            <view v-if="gameLoading" class="game-empty-state">加载中...</view>
-            <view v-else-if="gameError" class="game-empty-state">{{ gameError }}</view>
-            <view v-else>
-              <view class="game-info-card">
-                <view class="game-info-content">
-                  <view class="game-info-title">总对数：{{ totalPairs }}　摸牌机会：{{ chance }}</view>
-                  <view class="game-info-meta">
-                    <text>牌组剩余 {{ deckRemaining }}</text>
-                    <text v-if="selectedPositionText">位置 {{ selectedPositionText }}</text>
-                    <text v-if="gameIdText">ID {{ gameIdText }}</text>
-                  </view>
-                </view>
-              </view>
-              <view class="match-grid">
+          
+          <!-- 游戏信息 -->
+          <view class="game-stats glass-card">
+            <view class="stat-item">
+              <text class="stat-label">总对数</text>
+              <text class="stat-value">{{ totalPairs }}</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-label">摸牌机会</text>
+              <text class="stat-value">{{ chance }}</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-label">牌组剩余</text>
+              <text class="stat-value">{{ deckRemaining }}</text>
+            </view>
+          </view>
+          
+          <!-- 游戏区域 -->
+          <view class="game-content">
+            <view v-if="gameLoading" class="game-loading">
+              <text class="loading-icon">⏳</text>
+              <text class="loading-text">加载中...</text>
+            </view>
+            <view v-else-if="gameError" class="game-error">
+              <text class="error-icon">⚠️</text>
+              <text class="error-text">{{ gameError }}</text>
+            </view>
+            <view v-else class="game-board glass-card">
+              <view class="match-grid-fullscreen">
                 <view
                   v-for="(cell, idx) in handGridCells"
                   :key="idx"
-                  class="match-cell"
+                  class="match-cell-large"
                   :class="{ empty: cell.empty, chosen: cell.isChosen, picked: cell.isPicked }"
                   @tap="() => onCellTap(cell)"
                 >
-                  <image v-if="cell.image" class="match-cell-img" :src="cell.image" mode="aspectFill" />
-                  <view v-else class="match-cell-img"></view>
-                  <text v-if="!cell.empty && cell.type" class="match-cell-type">{{ cell.type }}</text>
+                  <image v-if="cell.image" class="match-cell-img-large" :src="cell.image" mode="aspectFill" />
+                  <view v-else class="match-cell-img-large"></view>
+                  <text v-if="!cell.empty && cell.type" class="match-cell-type-large">{{ cell.type }}</text>
                 </view>
               </view>
             </view>
-          </scroll-view>
-          <view class="flip-actions" style="padding: 20rpx 24rpx;">
-            <button class="close-btn" style="flex: 1;" @tap="manualDraw" :disabled="gameLoading || !canManualDraw">摸牌</button>
-            <button class="close-btn" style="flex: 1; background: linear-gradient(135deg, #ff7a18, #ffb347); color: #fff;" @tap="advanceOne" :disabled="gameLoading">下一步</button>
+          </view>
+          
+          <!-- 底部操作栏 -->
+          <view class="game-actions">
+            <button class="game-btn btn-secondary" @tap="manualDraw" :disabled="gameLoading || !canManualDraw">
+              <text>摸牌</text>
+            </button>
+            <button class="game-btn btn-primary" @tap="advanceOne" :disabled="gameLoading">
+              <text>下一步</text>
+            </button>
           </view>
         </view>
       </view>
@@ -137,6 +161,15 @@
         :showCards="true"
         @confirm="onPaymentConfirm"
       />
+      <RulesPopup 
+        v-model:visible="rulesVisible"
+        :content="detail.gameplay_intro"
+      />
+
+      <CabinetPreviewPopup
+        v-model:visible="cabinetVisible"
+        :activity-id="activityId"
+      />
     </template>
   </ActivityPageLayout>
 </template>
@@ -151,7 +184,9 @@ import ActivityTabs from '@/components/activity/ActivityTabs.vue'
 import RewardsPreview from '@/components/activity/RewardsPreview.vue'
 import RewardsPopup from '@/components/activity/RewardsPopup.vue'
 import RecordsList from '@/components/activity/RecordsList.vue'
-import { getActivityDetail, getActivityIssues, getActivityIssueRewards, getUserCoupons, getItemCards, createWechatOrder, getMatchingCardTypes, createMatchingPreorder, checkMatchingGame, getIssueDrawLogs } from '../../../api/appUser'
+import RulesPopup from '@/components/activity/RulesPopup.vue'
+import CabinetPreviewPopup from '@/components/activity/CabinetPreviewPopup.vue'
+import { getActivityDetail, getActivityIssues, getActivityIssueRewards, getUserCoupons, getItemCards, createWechatOrder, getMatchingCardTypes, createMatchingPreorder, checkMatchingGame, getIssueDrawLogs, getMatchingGameCards } from '../../../api/appUser'
 
 const detail = ref({})
 const statusText = ref('')
@@ -173,6 +208,8 @@ const cardTypesLoading = ref(false)
 const cardTypes = ref([])
 const selectedCardTypeCode = ref('')
 const rewardsVisible = ref(false)
+const rulesVisible = ref(false)
+const cabinetVisible = ref(false)
 const resumeGame = ref(null)
 const resumeIssueId = ref('')
 const hasResumeGame = computed(() => {
@@ -613,15 +650,11 @@ function closeRewardsPopup() {
 }
 
 function showRules() {
-  uni.showModal({
-    title: '活动规则',
-    content: detail.value.rules || '1. 选择卡牌类型进行对对碰\\n2. 每次抽取随机获得奖品\\n3. 奖池与概率以页面展示为准',
-    showCancel: false
-  })
+  rulesVisible.value = true
 }
 
 function goCabinet() {
-  uni.switchTab({ url: '/pages/cabinet/index' })
+  cabinetVisible.value = true
 }
 
 function onPreviewBanner() {
@@ -823,6 +856,7 @@ function drawOne() {
 function manualDraw() {
   if (gameLoading.value) return
   if (!canManualDraw.value) return
+  uni.vibrateShort({ type: 'light' })
   drawOne()
   chance.value = Math.max(0, Number(chance.value || 0) - 1)
   pickedHandIndex.value = -1
@@ -854,6 +888,7 @@ async function autoDrawIfStuck() {
 async function onCellTap(cell) {
   if (gameLoading.value) return
   if (!cell || cell.empty) return
+  uni.vibrateShort({ type: 'light' })
   const hi = Number(cell.handIndex)
   if (!Number.isFinite(hi) || hi < 0) return
 
@@ -912,6 +947,7 @@ async function finishAndReport() {
 
 async function advanceOne() {
   if (gameLoading.value) return
+  uni.vibrateShort({ type: 'light' })
   const entry = gameEntry.value || null
   const gameId = entry && entry.game_id ? String(entry.game_id) : ''
   if (!gameId) return
@@ -969,6 +1005,7 @@ async function autoRun() {
 }
 
 async function onParticipate() {
+  uni.vibrateShort({ type: 'medium' })
   const aid = activityId.value || ''
   const iid = currentIssueId.value || ''
   if (!aid || !iid) { uni.showToast({ title: '期数未选择', icon: 'none' }); return }
@@ -1014,6 +1051,7 @@ async function applyResumeEntry(entry) {
 }
 
 async function onResumeGame() {
+  uni.vibrateShort({ type: 'medium' })
   const aid = activityId.value || ''
   const latest = syncResumeGame(aid)
   if (!latest || !latest.entry || !latest.entry.game_id) return
@@ -1060,7 +1098,7 @@ async function doDraw() {
       return
     }
 
-    // 1. 调用 createMatchingPreorder 创建对对碰订单（同时返回游戏数据）
+    // 1. 调用 createMatchingPreorder 创建对对碰订单（不再返回游戏数据）
     const preRes = await createMatchingPreorder({
       issue_id: Number(iid),
       position: String(selectedCardType.value.code || ''),
@@ -1069,12 +1107,12 @@ async function doDraw() {
     })
     if (!preRes) throw new Error('创建订单失败')
 
-    // 2. 提取订单号和游戏数据
+    // 2. 提取订单号和游戏ID（注意：all_cards 不再在这里返回）
     const orderNo = preRes.order_no || preRes.data?.order_no || preRes.result?.order_no || preRes.orderNo
     if (!orderNo) throw new Error('未获取到订单号')
     
     const gameId = preRes.game_id || preRes.data?.game_id || preRes.result?.game_id || preRes.gameId
-    const allCards = normalizeAllCards(preRes.all_cards || preRes.data?.all_cards || preRes.result?.all_cards || [])
+    if (!gameId) throw new Error('未获取到游戏ID')
 
     // 3. 用对对碰订单号调用微信支付
     uni.showLoading({ title: '拉起支付...' })
@@ -1092,20 +1130,26 @@ async function doDraw() {
       })
     })
 
-    // 4. 支付成功后保存游戏数据到本地缓存
-    if (gameId) {
-      writeMatchingGameCacheEntry(aid, iid, {
-        game_id: String(gameId),
-        position: String(selectedCardType.value.code || ''),
-        all_cards: allCards,
-        ts: Date.now()
-      })
-    }
+    // 4. 【关键】支付成功后，调用新接口获取游戏数据
+    uni.showLoading({ title: '加载游戏...' })
+    const cardsRes = await getMatchingGameCards(gameId)
+    if (!cardsRes) throw new Error('获取游戏数据失败')
+    
+    const allCards = normalizeAllCards(cardsRes.all_cards || cardsRes.data?.all_cards || [])
+    if (!allCards.length) throw new Error('游戏数据为空')
+
+    // 5. 保存游戏数据到本地缓存
+    writeMatchingGameCacheEntry(aid, iid, {
+      game_id: String(gameId),
+      position: String(selectedCardType.value.code || ''),
+      all_cards: allCards,
+      ts: Date.now()
+    })
 
     uni.hideLoading()
     uni.showToast({ title: '支付成功', icon: 'success' })
     
-    // 5. 自动打开游戏
+    // 6. 自动打开游戏
     syncResumeGame(aid)
     const latest = findLatestMatchingGameCacheEntry(aid)
     if (latest && latest.entry && latest.entry.game_id) {
@@ -1335,8 +1379,10 @@ onLoad((opts) => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  transition: all 0.2s;
   &:active {
-    opacity: 0.6;
+    transform: scale(0.92);
+    opacity: 0.8;
   }
 }
 .action-icon {
@@ -1872,4 +1918,219 @@ onLoad((opts) => {
   animation: fadeInUp 0.5s ease-out backwards;
   animation-delay: var(--delay, 0s);
 }
+
+/* ============= 全屏游戏样式 ============= */
+.game-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.game-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.92);
+  backdrop-filter: blur(16rpx);
+  animation: fadeIn 0.3s ease-out;
+}
+
+.game-fullscreen {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  animation: scaleIn 0.3s ease-out;
+}
+
+.game-topbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40rpx 32rpx;
+  padding-top: calc(40rpx + env(safe-area-inset-top));
+  position: relative;
+}
+
+.game-topbar-title {
+  font-size: 36rpx;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: 2rpx;
+}
+
+.game-close-btn {
+  position: absolute;
+  right: 32rpx;
+  top: calc(40rpx + env(safe-area-inset-top));
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  
+  text {
+    font-size: 48rpx;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1;
+  }
+  
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
+}
+
+.game-stats {
+  display: flex;
+  justify-content: center;
+  gap: 48rpx;
+  padding: 24rpx 32rpx;
+  margin: 0 32rpx;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.stat-value {
+  font-size: 44rpx;
+  font-weight: 900;
+  color: $accent-gold;
+  font-family: 'DIN Alternate', sans-serif;
+}
+
+.game-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 32rpx;
+}
+
+.game-loading,
+.game-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.loading-icon,
+.error-icon {
+  font-size: 80rpx;
+}
+
+.loading-text,
+.error-text {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.game-board {
+  width: 100%;
+  max-width: 700rpx;
+  padding: 32rpx;
+}
+
+.match-grid-fullscreen {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+}
+
+.match-cell-large {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border-radius: 20rpx;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2rpx solid rgba(255, 255, 255, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &.empty {
+    background: rgba(255, 255, 255, 0.03);
+    border-style: dashed;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  &.chosen {
+    border-color: $brand-primary;
+    box-shadow: 0 0 24rpx rgba($brand-primary, 0.5);
+    transform: scale(1.02);
+  }
+  
+  &.picked {
+    border-color: $accent-gold;
+    box-shadow: 0 0 24rpx rgba($accent-gold, 0.5);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.match-cell-img-large {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.match-cell-type-large {
+  position: absolute;
+  left: 12rpx;
+  bottom: 12rpx;
+  max-width: 85%;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 6rpx 14rpx;
+  border-radius: 12rpx;
+  @include text-ellipsis(1);
+}
+
+.game-actions {
+  display: flex;
+  gap: 24rpx;
+  padding: 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.game-btn {
+  flex: 1;
+  height: 96rpx;
+  border-radius: 48rpx;
+  font-size: 32rpx;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  transition: all 0.3s;
+  
+  &:active {
+    transform: scale(0.95);
+  }
+  
+  &[disabled] {
+    opacity: 0.4;
+  }
+}
 </style>
diff --git a/pages/activity/wuxianshang/index.vue b/pages/activity/wuxianshang/index.vue
index c8ac78e..944ba8d 100644
--- a/pages/activity/wuxianshang/index.vue
+++ b/pages/activity/wuxianshang/index.vue
@@ -72,6 +72,15 @@
         :propCards="propCards"
         @confirm="onPaymentConfirm"
       />
+      <RulesPopup 
+        v-model:visible="rulesVisible"
+        :content="detail.gameplay_intro"
+      />
+
+      <CabinetPreviewPopup
+        v-model:visible="cabinetVisible"
+        :activity-id="activityId"
+      />
     </template>
   </ActivityPageLayout>
 </template>
@@ -86,6 +95,8 @@ import ActivityTabs from '@/components/activity/ActivityTabs.vue'
 import RewardsPreview from '@/components/activity/RewardsPreview.vue'
 import RewardsPopup from '@/components/activity/RewardsPopup.vue'
 import RecordsList from '@/components/activity/RecordsList.vue'
+import RulesPopup from '@/components/activity/RulesPopup.vue'
+import CabinetPreviewPopup from '@/components/activity/CabinetPreviewPopup.vue'
 import FlipGrid from '@/components/FlipGrid.vue'
 import PaymentPopup from '@/components/PaymentPopup.vue'
 // Composables
@@ -126,6 +137,8 @@ const {
 // ============ 本地状态 ============
 const tabActive = ref('pool')
 const rewardsVisible = ref(false)
+const rulesVisible = ref(false)
+const cabinetVisible = ref(false)
 const showFlip = ref(false)
 const flipRef = ref(null)
 const drawLoading = ref(false)
@@ -141,15 +154,11 @@ const selectedCard = ref(null)
 
 // ============ 业务方法 ============
 function showRules() {
-  uni.showModal({
-    title: '活动规则',
-    content: detail.value.rules || '1. 选择档位进行抽赏\n2. 每次抽赏随机获得奖品\n3. 奖池与概率以页面展示为准',
-    showCancel: false
-  })
+  rulesVisible.value = true
 }
 
 function goCabinet() {
-  uni.switchTab({ url: '/pages/cabinet/index' })
+  cabinetVisible.value = true
 }
 
 function closeFlip() { 
diff --git a/pages/activity/yifanshang/index.vue b/pages/activity/yifanshang/index.vue
index d9fa3e3..005e7f2 100644
--- a/pages/activity/yifanshang/index.vue
+++ b/pages/activity/yifanshang/index.vue
@@ -49,20 +49,41 @@
           <text class="issue-block-text">{{ orderBlockedReason }}</text>
         </view>
 
-        <!-- 选号组件 -->
+        <!-- 选号组件 - 隐藏内置操作栏 -->
         <view class="selector-body" v-if="activityId && currentIssueId">
           <YifanSelector 
+            ref="yifanSelectorRef"
             :activity-id="activityId" 
             :issue-id="currentIssueId" 
             :price-per-draw="Number(detail.price_draw || 0) / 100"
             :disabled="!isOrderAllowed"
             :disabled-text="orderBlockedReason"
+            :hide-action-bar="true"
             @payment-success="onPaymentSuccess"
+            @selection-change="onSelectionChange"
           />
         </view>
       </view>
     </template>
 
+    <template #footer>
+      <!-- 固定底部操作栏 -->
+      <view class="float-bar">
+        <view class="float-bar-inner">
+          <view class="selection-info" v-if="selectedCount > 0">
+            已选 <text class="highlight">{{ selectedCount }}</text> 个位置
+          </view>
+          <view class="selection-info" v-else>
+            请选择位置
+          </view>
+          <view class="action-buttons">
+            <button v-if="selectedCount === 0" class="action-btn primary" @tap="handleRandomDraw" :disabled="!isOrderAllowed">随机一发</button>
+            <button v-else class="action-btn primary" @tap="handlePayment" :disabled="!isOrderAllowed">去支付</button>
+          </view>
+        </view>
+      </view>
+    </template>
+
     <template #modals>
       <!-- 翻牌弹窗 -->
       <view v-if="showFlip" class="flip-overlay" @touchmove.stop.prevent>
@@ -79,6 +100,18 @@
         :title="`${currentIssueTitle} · 奖品与概率`"
         :reward-groups="rewardGroups"
       />
+
+      <!-- 规则弹窗 -->
+      <RulesPopup 
+        v-model:visible="rulesVisible"
+        :content="detail.gameplay_intro"
+      />
+
+      <!-- 盒柜预览弹窗 -->
+      <CabinetPreviewPopup
+        v-model:visible="cabinetVisible"
+        :activity-id="activityId"
+      />
     </template>
   </ActivityPageLayout>
 </template>
@@ -93,6 +126,8 @@ import ActivityTabs from '@/components/activity/ActivityTabs.vue'
 import RewardsPreview from '@/components/activity/RewardsPreview.vue'
 import RewardsPopup from '@/components/activity/RewardsPopup.vue'
 import RecordsList from '@/components/activity/RecordsList.vue'
+import RulesPopup from '@/components/activity/RulesPopup.vue'
+import CabinetPreviewPopup from '@/components/activity/CabinetPreviewPopup.vue'
 import FlipGrid from '@/components/FlipGrid.vue'
 import YifanSelector from '@/components/YifanSelector.vue'
 // Composables
@@ -133,8 +168,31 @@ const {
 // ============ 本地状态 ============
 const tabActive = ref('pool')
 const rewardsVisible = ref(false)
+const rulesVisible = ref(false)
+const cabinetVisible = ref(false)
 const showFlip = ref(false)
 const flipRef = ref(null)
+const yifanSelectorRef = ref(null)
+const selectedCount = ref(0)  // 从外部追踪选中数量
+
+// 接收选中变化事件
+function onSelectionChange(items) {
+  selectedCount.value = Array.isArray(items) ? items.length : 0
+}
+
+// 触发随机选号
+function handleRandomDraw() {
+  if (yifanSelectorRef.value && yifanSelectorRef.value.handleRandomOne) {
+    yifanSelectorRef.value.handleRandomOne()
+  }
+}
+
+// 触发支付
+function handlePayment() {
+  if (yifanSelectorRef.value && yifanSelectorRef.value.handleBuy) {
+    yifanSelectorRef.value.handleBuy()
+  }
+}
 
 // ============ 倒计时相关（一番赏专属） ============
 const nowMs = ref(Date.now())
@@ -179,15 +237,11 @@ const orderBlockedReason = computed(() => {
 
 // ============ 业务方法 ============
 function showRules() {
-  uni.showModal({
-    title: '活动规则',
-    content: detail.value.rules || '1. 选择号码进行抽选\n2. 每个号码对应一个奖品\n3. 已售号码不可再选\n4.未满足开赏条件，将自动为所有参与用户退款，款项将原路返回',
-    showCancel: false
-  })
+  rulesVisible.value = true
 }
 
 function goCabinet() {
-  uni.switchTab({ url: '/pages/cabinet/index' })
+  cabinetVisible.value = true
 }
 
 function closeFlip() { 
@@ -426,4 +480,77 @@ watch(currentIssueId, (newId) => {
     border: none;
   }
 }
+
+/* ============= 底部固定操作栏 ============= */
+.float-bar {
+  position: fixed;
+  left: 32rpx;
+  right: 32rpx;
+  bottom: calc(40rpx + env(safe-area-inset-bottom));
+  z-index: 100;
+  animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) backwards;
+}
+
+.float-bar-inner {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(30rpx);
+  padding: 24rpx 40rpx;
+  border-radius: 999rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
+  border: 1rpx solid rgba(255, 255, 255, 0.6);
+}
+
+.selection-info {
+  font-size: 28rpx;
+  color: $text-main;
+  display: flex;
+  align-items: baseline;
+  font-weight: 800;
+}
+
+.highlight {
+  color: $brand-primary;
+  font-weight: 900;
+  font-size: 40rpx;
+  margin: 0 8rpx;
+  font-family: 'DIN Alternate', sans-serif;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 20rpx;
+}
+
+.action-btn {
+  height: 88rpx;
+  line-height: 88rpx;
+  padding: 0 56rpx;
+  border-radius: 999rpx;
+  font-size: 30rpx;
+  font-weight: 900;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border: none;
+  
+  &::after {
+    border: none;
+  }
+  
+  &:active {
+    transform: scale(0.92);
+  }
+  
+  &.primary {
+    background: $gradient-brand !important;
+    color: #FFFFFF !important;
+    box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.35);
+  }
+}
 </style>
diff --git a/pages/cabinet/index.vue b/pages/cabinet/index.vue
index 01b35d7..f0b457e 100644
--- a/pages/cabinet/index.vue
+++ b/pages/cabinet/index.vue
@@ -1,7 +1,9 @@
 <template>
   <view class="wrap">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
     <!-- 顶部 Tab -->
-    <view class="tabs">
+    <view class="tabs glass-card">
       <view class="tab-item" :class="{ active: currentTab === 0 }" @tap="switchTab(0)">
         <text class="tab-text">待处理</text>
         <text class="tab-count" v-if="aggregatedList.length > 0">({{ aggregatedList.length }})</text>
@@ -79,7 +81,7 @@
               <view class="shipment-status" :class="getStatusClass(item.status)">
                 {{ getStatusText(item.status) }}
               </view>
-              <text class="shipment-cancel" v-if="Number(item.status) === 1 && item.batch_no" @tap="onCancelShipping(item)">取消发货</text>
+              <text class="shipment-cancel" v-if="Number(item.status) === 1 && item.batch_no" @tap="onCancelShipping(item)">撤销发货</text>
             </view>
           </view>
           
@@ -301,7 +303,8 @@ function getStatusClass(status) {
     1: 'status-pending',    // 待发货
     2: 'status-shipped',    // 已发货
     3: 'status-delivered',  // 已签收
-    4: 'status-cancelled'   // 已取消
+    4: 'status-abnormal',   // 异常
+    5: 'status-cancelled'   // 已取消
   }
   return statusMap[status] || 'status-pending'
 }
@@ -311,7 +314,8 @@ function getStatusText(status) {
     1: '待发货',
     2: '运输中',
     3: '已签收',
-    4: '已取消'
+    4: '异常',
+    5: '已取消'
   }
   return statusMap[status] || '待发货'
 }
@@ -590,6 +594,7 @@ async function fetchProductPrices() {
 }
 
 function toggleSelect(item) {
+  uni.vibrateShort({ type: 'light' })
   item.selected = !item.selected
   if (item.selected) {
     // 选中时默认数量为最大值
@@ -604,6 +609,7 @@ function toggleSelect(item) {
 }
 
 function toggleSelectAll() {
+  uni.vibrateShort({ type: 'light' })
   const newState = !isAllSelected.value
   aggregatedList.value.forEach(item => {
     item.selected = newState
@@ -628,6 +634,7 @@ function changeCount(item, delta) {
 }
 
 async function onRedeem() {
+  uni.vibrateShort({ type: 'medium' })
   const user_id = uni.getStorageSync('user_id')
   if (!user_id) return
   
@@ -675,6 +682,7 @@ async function onRedeem() {
 }
 
 async function onShip() {
+  uni.vibrateShort({ type: 'medium' })
   const user_id = uni.getStorageSync('user_id')
   if (!user_id) return
   
@@ -726,15 +734,15 @@ function onCancelShipping(shipment) {
   const batchNo = shipment && shipment.batch_no
   if (!user_id || !batchNo) return
   uni.showModal({
-    title: '取消发货',
-    content: `确认取消发货单 ${batchNo} 吗？`,
-    confirmText: '确认取消',
+    title: '撤销发货',
+    content: `确认不再发货，并撤销发货单 ${batchNo} 吗？`,
+    confirmText: '确认撤销',
     success: async (res) => {
       if (!res.confirm) return
       uni.showLoading({ title: '处理中...' })
       try {
         await cancelShipping(user_id, batchNo)
-        uni.showToast({ title: '已取消发货', icon: 'success' })
+        uni.showToast({ title: '已撤销发货', icon: 'success' })
         page.value = 1
         hasMore.value = true
         shippedList.value = []
@@ -762,25 +770,28 @@ function onCancelShipping(shipment) {
   padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
+  position: relative;
+  overflow: hidden;
 }
 
 /* 顶部 Tab */
 .tabs {
+  @extend .glass-card;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 88rpx;
-  background: rgba($bg-card, 0.9);
-  backdrop-filter: blur(20rpx);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
-  box-shadow: $shadow-sm;
   padding: 0;
   margin: 0;
   border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
 }
 
 .tab-item {
@@ -1233,10 +1244,6 @@ function onCancelShipping(shipment) {
   from { opacity: 0; transform: translateY(20rpx); }
   to { opacity: 1; transform: translateY(0); }
 }
-@keyframes slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
 
 .bottom-spacer {
   height: 120rpx;
diff --git a/pages/coupons/index.vue b/pages/coupons/index.vue
new file mode 100644
index 0000000..39df375
--- /dev/null
+++ b/pages/coupons/index.vue
@@ -0,0 +1,729 @@
+<template>
+  <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
+
+    <view class="header-area">
+      <view class="page-title">我的优惠券</view>
+      <view class="page-subtitle">My Coupons</view>
+    </view>
+
+    <!-- Tab栏 - 毛玻璃风格 -->
+    <view class="tab-bar glass-card">
+      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
+        <text class="tab-text">未使用</text>
+        <view class="tab-indicator" v-if="currentTab === 1"></view>
+      </view>
+      <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
+        <text class="tab-text">已使用</text>
+        <view class="tab-indicator" v-if="currentTab === 2"></view>
+      </view>
+      <view class="tab-item" :class="{ active: currentTab === 3 }" @click="switchTab(3)">
+        <text class="tab-text">已过期</text>
+        <view class="tab-indicator" v-if="currentTab === 3"></view>
+      </view>
+    </view>
+
+    <!-- 内容区 -->
+    <scroll-view 
+      scroll-y 
+      class="content-scroll"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="loadMore"
+    >
+      <!-- 加载状态 -->
+      <view v-if="loading && list.length === 0" class="loading-state">
+        <view class="spinner"></view>
+        <text>加载中...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="list.length === 0" class="empty-state">
+        <text class="empty-icon">🎟️</text>
+        <text class="empty-text">{{ getEmptyText() }}</text>
+      </view>
+
+      <!-- 优惠券列表 -->
+      <view v-else class="coupon-list">
+        <view 
+          v-for="(item, index) in list" 
+          :key="item.id || index" 
+          class="coupon-ticket"
+          :class="getCouponClass()"
+          :style="{ animationDelay: `${index * 0.05}s` }"
+        >
+          <!-- 左侧金额区域 -->
+          <view class="coupon-left">
+            <view class="coupon-value">
+              <text class="coupon-symbol">¥</text>
+              <text class="coupon-amount">{{ formatValue(item.remaining ?? item.amount ?? 0) }}</text>
+            </view>
+            <text class="coupon-label">{{ currentTab === 1 ? '可用' : (currentTab === 2 ? '已用' : '过期') }}</text>
+          </view>
+          
+          <!-- 中间分割线 -->
+          <view class="coupon-divider">
+            <view class="divider-notch top"></view>
+            <view class="divider-dash"></view>
+            <view class="divider-notch bottom"></view>
+          </view>
+          
+          <!-- 右侧信息区域 -->
+          <view class="coupon-right">
+            <view class="coupon-header">
+              <text class="coupon-name">{{ item.name || '优惠券' }}</text>
+              <view class="coupon-original" v-if="item.amount && item.remaining !== undefined && item.remaining !== item.amount">
+                <text>原值 ¥{{ formatValue(item.amount) }}</text>
+              </view>
+            </view>
+            
+            <text class="coupon-rules">{{ item.rules || '全场通用' }}</text>
+            
+            <!-- 使用进度条 -->
+            <view class="coupon-progress" v-if="item.amount && item.remaining !== undefined && item.remaining < item.amount">
+              <view class="progress-bar">
+                <view class="progress-fill" :style="{ width: getUsedPercent(item) + '%' }"></view>
+              </view>
+              <text class="progress-text">已用 {{ formatValue(item.amount - item.remaining) }} ({{ getUsedPercent(item) }}%)</text>
+            </view>
+            
+            <view class="coupon-footer">
+              <view class="footer-left">
+                <text class="coupon-expire">{{ formatExpiry(item) }}</text>
+                <text class="coupon-used-time" v-if="currentTab === 2 && item.used_at">使用时间：{{ formatDateTime(item.used_at) }}</text>
+              </view>
+            </view>
+
+            <!-- 优化后的按钮位置 -->
+            <view class="coupon-action-wrapper" v-if="currentTab === 1">
+              <view class="use-btn" @click.stop="onUseCoupon(item)">
+                <text class="btn-text">去使用</text>
+                <view class="btn-shine"></view>
+              </view>
+            </view>
+            <view class="coupon-status" v-else>
+              <text class="status-tag" :class="currentTab === 2 ? 'used' : 'expired'">{{ currentTab === 2 ? '已使用' : '已过期' }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loading && list.length > 0" class="loading-more">
+        <view class="spinner"></view>
+        <text>加载更多...</text>
+      </view>
+      <view v-else-if="!hasMore && list.length > 0" class="no-more">- 到底啦 -</view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { getUserCoupons } from '../../api/appUser'
+
+const list = ref([])
+const loading = ref(false)
+const isRefreshing = ref(false)
+const currentTab = ref(1)
+const page = ref(1)
+const pageSize = 20
+const hasMore = ref(true)
+
+// 获取用户ID
+function getUserId() {
+  return uni.getStorageSync('user_id')
+}
+
+// 检查登录状态
+function checkAuth() {
+  const token = uni.getStorageSync('token')
+  const userId = getUserId()
+  if (!token || !userId) {
+    uni.showModal({
+      title: '提示',
+      content: '请先登录',
+      confirmText: '去登录',
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateTo({ url: '/pages/login/index' })
+        }
+      }
+    })
+    return false
+  }
+  return true
+}
+
+// 格式化金额 (分转元)
+function formatValue(val) {
+  return (Number(val) / 100).toFixed(0)
+}
+
+// 格式化有效期
+function formatExpiry(item) {
+  if (!item.end_time) return '长期有效'
+  const d = new Date(item.end_time)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `有效期至 ${y}-${m}-${day}`
+}
+
+// 格式化日期时间
+function formatDateTime(t) {
+  if (!t) return ''
+  const d = new Date(t)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  return `${y}-${m}-${day} ${hh}:${mm}`
+}
+
+// 计算使用百分比
+function getUsedPercent(item) {
+  if (!item.amount || !item.remaining) return 0
+  const used = item.amount - item.remaining
+  return Math.floor((used / item.amount) * 100)
+}
+
+// 获取空状态文本
+function getEmptyText() {
+  if (currentTab.value === 1) return '暂无可用优惠券'
+  if (currentTab.value === 2) return '暂无使用记录'
+  return '暂无过期优惠券'
+}
+
+// 获取优惠券样式类
+function getCouponClass() {
+  if (currentTab.value === 2) return 'coupon-used'
+  if (currentTab.value === 3) return 'coupon-expired'
+  return ''
+}
+
+// 切换Tab
+function switchTab(tab) {
+  if (currentTab.value === tab) return
+  uni.vibrateShort({ type: 'light' })
+  currentTab.value = tab
+  list.value = []
+  page.value = 1
+  hasMore.value = true
+  fetchData()
+}
+
+// 下拉刷新
+async function onRefresh() {
+  isRefreshing.value = true
+  page.value = 1
+  hasMore.value = true
+  await fetchData(false)
+  isRefreshing.value = false
+}
+
+// 加载更多
+async function loadMore() {
+  if (loading.value || !hasMore.value) return
+  await fetchData(true)
+}
+
+// 获取数据
+async function fetchData(append = false) {
+  if (!checkAuth()) return
+  if (loading.value) return
+  
+  loading.value = true
+  try {
+    const userId = getUserId()
+    // status: 0=unused, 1=used, 2=expired
+    const statusMap = { 1: 0, 2: 1, 3: 2 }
+    const res = await getUserCoupons(userId, statusMap[currentTab.value], page.value, pageSize)
+    const items = res.list || res.data || []
+    
+    if (append) {
+      list.value = [...list.value, ...items]
+    } else {
+      list.value = items
+    }
+    
+    if (items.length < pageSize) {
+      hasMore.value = false
+    } else {
+      page.value++
+    }
+  } catch (e) {
+    console.error('获取优惠券失败:', e)
+    hasMore.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+// 去使用优惠券
+function onUseCoupon(item) {
+  uni.vibrateShort({ type: 'medium' })
+  // 通常跳转到首页或抽盒页
+  uni.switchTab({
+    url: '/pages/index/index'
+  })
+}
+
+onLoad(() => {
+  fetchData()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: $bg-page;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景装饰 - 漂浮光球 (与个人中心统一) */
+.bg-decoration {
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100rpx; right: -100rpx;
+    width: 600rpx; height: 600rpx;
+    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
+    filter: blur(60rpx);
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: float 10s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 200rpx; left: -200rpx;
+    width: 500rpx; height: 500rpx;
+    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
+    filter: blur(50rpx);
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 15s ease-in-out infinite reverse;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30rpx, 50rpx); }
+}
+
+.header-area {
+  padding: $spacing-xl $spacing-lg;
+  padding-top: calc(env(safe-area-inset-top) + 20rpx);
+  position: relative;
+  z-index: 1;
+}
+
+.page-title {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: $text-main;
+  margin-bottom: 8rpx;
+  letter-spacing: 1rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.page-subtitle {
+  font-size: 24rpx;
+  color: $text-tertiary;
+  text-transform: uppercase;
+  letter-spacing: 2rpx;
+  font-weight: 600;
+}
+
+/* Tab栏 */
+.tab-bar {
+  @extend .glass-card;
+  display: flex;
+  margin: 0 $spacing-lg;
+  padding: 8rpx;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.tab-text {
+  font-size: 28rpx;
+  color: $text-sub;
+  font-weight: 500;
+}
+
+.tab-item.active .tab-text {
+  color: $text-main;
+  font-weight: 700;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40rpx;
+  height: 6rpx;
+  background: $brand-primary;
+  border-radius: 6rpx;
+}
+
+/* 内容滚动区 */
+.content-scroll {
+  height: calc(100vh - 280rpx);
+  padding: $spacing-lg;
+  position: relative;
+  z-index: 1;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: $text-tertiary;
+  font-size: 26rpx;
+  gap: 16rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  color: $text-tertiary;
+  font-size: 28rpx;
+}
+
+/* 优惠券列表 */
+.coupon-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+/* 优惠券卡片 */
+.coupon-ticket {
+  background: #fff;
+  border-radius: 16rpx;
+  display: flex;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+  position: relative;
+  animation: fadeInUp 0.5s ease-out backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.coupon-left {
+  width: 180rpx;
+  background: linear-gradient(135deg, #FFF5E6, #fff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx;
+  position: relative;
+}
+
+.coupon-value {
+  color: $brand-primary;
+  font-weight: 900;
+}
+
+.coupon-symbol {
+  font-size: 24rpx;
+}
+
+.coupon-amount {
+  font-size: 56rpx;
+  line-height: 1;
+}
+
+.coupon-label {
+  font-size: 20rpx;
+  color: $brand-primary;
+  margin-top: 8rpx;
+  border: 1px solid $brand-primary;
+  padding: 2rpx 8rpx;
+  border-radius: 6rpx;
+}
+
+/* 分割线 */
+.coupon-divider {
+  width: 30rpx;
+  position: relative;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.divider-notch {
+  width: 24rpx;
+  height: 24rpx;
+  background: $bg-page;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.divider-notch.top {
+  top: -12rpx;
+}
+
+.divider-notch.bottom {
+  bottom: -12rpx;
+}
+
+.divider-dash {
+  width: 0;
+  height: 80%;
+  border-left: 2rpx dashed #eee;
+}
+
+.coupon-right {
+  flex: 1;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.coupon-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.coupon-name {
+  font-size: $font-md;
+  font-weight: 700;
+  color: $text-main;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.coupon-original {
+  font-size: 20rpx;
+  color: $text-tertiary;
+  text-decoration: line-through;
+  margin-left: 8rpx;
+}
+
+.coupon-rules {
+  font-size: $font-xs;
+  color: $text-sub;
+  margin-bottom: 16rpx;
+}
+
+/* 进度条 */
+.coupon-progress {
+  margin-bottom: 12rpx;
+}
+
+.progress-bar {
+  height: 6rpx;
+  background: $bg-secondary;
+  border-radius: 100rpx;
+  overflow: hidden;
+  margin-bottom: 4rpx;
+}
+
+.progress-fill {
+  height: 100%;
+  background: $brand-primary;
+  border-radius: 100rpx;
+}
+
+.progress-text {
+  font-size: 18rpx;
+  color: $text-tertiary;
+}
+
+.coupon-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12rpx;
+}
+
+.footer-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.coupon-expire {
+  font-size: 20rpx;
+  color: $text-tertiary;
+}
+
+.coupon-used-time {
+  font-size: 18rpx;
+  color: $text-tertiary;
+  margin-top: 4rpx;
+}
+
+/* 优化后的按钮样式 */
+.coupon-action-wrapper {
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+  z-index: 10;
+}
+
+.use-btn {
+  background: linear-gradient(135deg, #FF8D3F, #FF5C00);
+  padding: 12rpx 32rpx;
+  border-radius: 40rpx;
+  box-shadow: 0 6rpx 20rpx rgba(255, 92, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+
+  &:active {
+    transform: scale(0.92);
+    box-shadow: 0 2rpx 10rpx rgba(255, 92, 0, 0.2);
+  }
+}
+
+.btn-text {
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+  position: relative;
+  z-index: 2;
+}
+
+.btn-shine {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: skewX(-25deg);
+  animation: shine 3s infinite;
+}
+
+@keyframes shine {
+  0% { left: -100%; }
+  20%, 100% { left: 150%; }
+}
+
+.status-tag {
+  font-size: 22rpx;
+  color: $text-tertiary;
+  background: #F5F5F5;
+  padding: 6rpx 16rpx;
+  border-radius: 8rpx;
+  margin-left: auto;
+}
+
+/* 过期/已使用状态 */
+.coupon-used .coupon-left,
+.coupon-expired .coupon-left {
+  background: #f9f9f9;
+}
+
+.coupon-used .coupon-value,
+.coupon-expired .coupon-value,
+.coupon-used .coupon-label,
+.coupon-expired .coupon-label {
+  color: $text-tertiary;
+  border-color: $text-tertiary;
+}
+
+.coupon-used .coupon-name,
+.coupon-expired .coupon-name {
+  color: $text-sub;
+}
+
+/* 加载更多 */
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx 0;
+  color: $text-tertiary;
+  font-size: 24rpx;
+  gap: 12rpx;
+}
+
+.spinner {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid $bg-secondary;
+  border-top-color: $text-tertiary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.no-more {
+  text-align: center;
+  padding: 40rpx 0;
+  color: $text-tertiary;
+  font-size: 24rpx;
+  opacity: 0.6;
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4b87073..3c60c3c 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,18 +1,11 @@
 <template>
   <view class="page">
-    <!-- 品牌级背景装饰系统 -->
-    <view class="premium-bg">
-      <view class="bg-shape circle-1"></view>
-      <view class="bg-shape circle-2"></view>
-      <view class="bg-shape mesh-gradient"></view>
-    </view>
+    <!-- 品牌级背景装饰系统 - 统一漂浮光球 -->
+    <view class="bg-decoration"></view>
 
     <!-- 顶部导航栏 (搜索) -->
     <view class="nav-header">
-      <view class="brand-logo">
-        <text class="brand-text">柯大鸭潮玩</text>
-        <view class="brand-star">✨</view>
-      </view>
+      <!-- 品牌标识已按需移除 -->
     </view>
 
     <!-- 滚动区域 -->
@@ -333,7 +326,7 @@ export default {
   onShareAppMessage() {
     const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
     return {
-      title: '柯大鸭潮玩 - 开箱惊喜等你来',
+      title: '柯大鸭 - 开箱惊喜等你来',
       path: `/pages/index/index?invite_code=${inviteCode}`,
       imageUrl: '/static/logo.png'
     }
@@ -342,7 +335,7 @@ export default {
   onShareTimeline() {
     const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
     return {
-      title: '柯大鸭潮玩 - 开箱惊喜等你来',
+      title: '柯大鸭 - 开箱惊喜等你来',
       query: `invite_code=${inviteCode}`,
       imageUrl: '/static/logo.png'
     }
@@ -352,88 +345,31 @@ export default {
 
 <style lang="scss">
 /* ============================================
-   柯大鸭潮玩 - 首页样式 (V6.0 Pro Refined)
+   柯大鸭 - 首页样式 (V6.0 Pro Refined)
    ============================================ */
 
 .page {
   padding: 0;
-  background-color: #F8F9FB;
+  background-color: $bg-page;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
-  overflow-x: hidden;
-}
-
-/* ========== 品牌级背景系统 ========== */
-.premium-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  pointer-events: none;
   overflow: hidden;
 }
 
-.bg-shape {
-  position: absolute;
-  filter: blur(100rpx);
-  opacity: 0.6;
-}
-
-.circle-1 {
-  width: 600rpx;
-  height: 600rpx;
-  background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
-  top: -200rpx;
-  right: -100rpx;
-  animation: float 10s ease-in-out infinite alternate;
-}
-
-.circle-2 {
-  width: 500rpx;
-  height: 500rpx;
-  background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
-  bottom: 200rpx;
-  left: -100rpx;
-  animation: float 12s ease-in-out infinite alternate-reverse;
-}
-
-.mesh-gradient {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, rgba(255, 107, 0, 0.03) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 193, 7, 0.03) 100%);
-}
-
 /* ========== 顶部导航栏 ========== */
 .nav-header {
-  display: flex;
-  align-items: center;
-  padding: $spacing-md $spacing-lg;
-  padding-top: calc($spacing-md + env(safe-area-inset-top));
+  height: env(safe-area-inset-top);
   z-index: 10;
   position: sticky;
   top: 0;
+  background: rgba($bg-page, 0.8);
+  backdrop-filter: blur(10rpx);
 }
 
-.brand-text {
-  font-size: 44rpx;
-  font-weight: 900;
-  color: $text-main;
-  font-style: italic;
-  letter-spacing: -2rpx;
-  background: linear-gradient(135deg, #1A1A1A 0%, #444 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
 
-.brand-star {
-  font-size: 28rpx;
-  margin-left: 6rpx;
-}
+/* ========== 滚动主内容区 ========== */
 
 
 /* ========== 滚动主内容区 ========== */
@@ -441,19 +377,17 @@ export default {
   flex: 1;
   position: relative;
   z-index: 1;
-  padding-top: $spacing-sm;
 }
 
 /* Banner Container (Modern Floating) */
 .banner-container {
-  padding: 0 $spacing-lg $spacing-xl;
+  padding: $spacing-sm $spacing-lg $spacing-xl;
   position: relative;
   z-index: 2;
 }
 
 .banner-swiper {
   height: 360rpx;
-  overflow: visible; /* 让阴影不被切断 */
 }
 
 .banner-card {
@@ -464,7 +398,7 @@ export default {
   position: relative;
   transform: scale(0.96);
   transition: all 0.5s $ease-out;
-  box-shadow: 0 16rpx 48rpx rgba(255, 107, 0, 0.1);
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08);
 }
 
 .banner-card.active {
@@ -541,14 +475,15 @@ export default {
 /* Notice Bar V2 (Minimalist) */
 .notice-bar-v2 {
   margin: 0 $spacing-lg $spacing-xl;
-  background: #FFFFFF;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10rpx);
   border-radius: 32rpx;
   padding: 24rpx 32rpx;
   display: flex;
   align-items: center;
   gap: 20rpx;
   box-shadow: $shadow-sm;
-  border: 1rpx solid rgba(0,0,0,0.02);
+  border: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 .notice-icon { font-size: 32rpx; }
@@ -587,6 +522,7 @@ export default {
   font-style: italic;
   display: flex;
   align-items: center;
+  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
 .section-title::before {
@@ -619,6 +555,7 @@ export default {
   padding: 22rpx;
   box-shadow: $shadow-card;
   transition: transform 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .game-card-large:active {
@@ -757,17 +694,20 @@ export default {
 }
 
 .activity-item {
-  background: #FFFFFF;
-  border-radius: 32rpx;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10rpx);
+  border-radius: $radius-xl;
   overflow: hidden;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03);
+  box-shadow: $shadow-sm;
   display: flex;
   flex-direction: column;
   transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 .activity-item:active {
   transform: translateY(4rpx);
+  box-shadow: none;
 }
 
 .activity-thumb-box {
diff --git a/pages/invites/index.vue b/pages/invites/index.vue
new file mode 100644
index 0000000..4594631
--- /dev/null
+++ b/pages/invites/index.vue
@@ -0,0 +1,403 @@
+<template>
+  <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
+
+    <view class="header-area">
+      <view class="page-title">邀请记录</view>
+      <view class="page-subtitle">Invitations</view>
+    </view>
+
+    <!-- 统计卡片 - 毛玻璃风格 -->
+    <view class="stats-card glass-card">
+      <view class="stat-item">
+        <text class="stat-num">{{ list.length }}</text>
+        <text class="stat-label">邀请人数</text>
+      </view>
+      <view class="stat-divider"></view>
+      <view class="stat-item">
+        <text class="stat-num">{{ getRewardsTotal() }}</text>
+        <text class="stat-label">累计奖励</text>
+      </view>
+    </view>
+
+    <!-- 内容区 -->
+    <scroll-view 
+      scroll-y 
+      class="content-scroll"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="loadMore"
+    >
+      <!-- 加载状态 -->
+      <view v-if="loading && list.length === 0" class="loading-state">
+        <view class="spinner"></view>
+        <text>加载中...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="list.length === 0" class="empty-state">
+        <text class="empty-icon">👥</text>
+        <text class="empty-text">暂无邀请记录</text>
+        <text class="empty-hint">分享给好友，一起来玩吧！</text>
+      </view>
+
+      <!-- 邀请列表 -->
+      <view v-else class="invite-list">
+        <view 
+          v-for="(item, index) in list" 
+          :key="item.id || index" 
+          class="invite-item"
+          :style="{ animationDelay: `${index * 0.05}s` }"
+        >
+          <image class="invite-avatar" :src="item.avatar || '/static/logo.png'" mode="aspectFill"></image>
+          <view class="invite-info">
+            <text class="invite-name">{{ item.nickname || '用户' + item.id }}</text>
+            <text class="invite-time">{{ formatDate(item.created_at) }}</text>
+          </view>
+          <view class="invite-status">
+            <text class="status-text">已邀请</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loading && list.length > 0" class="loading-more">
+        <view class="spinner"></view>
+        <text>加载更多...</text>
+      </view>
+      <view v-else-if="!hasMore && list.length > 0" class="no-more">- 到底啦 -</view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getUserInvites } from '../../api/appUser'
+
+const list = ref([])
+const loading = ref(false)
+const isRefreshing = ref(false)
+const page = ref(1)
+const pageSize = 20
+const hasMore = ref(true)
+
+// 获取用户ID
+function getUserId() {
+  return uni.getStorageSync('user_id')
+}
+
+// 检查登录状态
+function checkAuth() {
+  const token = uni.getStorageSync('token')
+  const userId = getUserId()
+  if (!token || !userId) {
+    uni.showModal({
+      title: '提示',
+      content: '请先登录',
+      confirmText: '去登录',
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateTo({ url: '/pages/login/index' })
+        }
+      }
+    })
+    return false
+  }
+  return true
+}
+
+// 格式化日期
+function formatDate(t) {
+  if (!t) return ''
+  const d = new Date(t)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+// 计算累计奖励
+function getRewardsTotal() {
+  // 根据实际业务逻辑计算，目前简单显示邀请人数 × 积分奖励
+  const rewardPerInvite = 10 // 每邀请一人奖励积分
+  return list.value.length * rewardPerInvite
+}
+
+// 下拉刷新
+async function onRefresh() {
+  isRefreshing.value = true
+  page.value = 1
+  hasMore.value = true
+  await fetchData(false)
+  isRefreshing.value = false
+}
+
+// 加载更多
+async function loadMore() {
+  if (loading.value || !hasMore.value) return
+  await fetchData(true)
+}
+
+// 获取数据
+async function fetchData(append = false) {
+  if (!checkAuth()) return
+  if (loading.value) return
+  
+  loading.value = true
+  try {
+    const userId = getUserId()
+    const res = await getUserInvites(userId, page.value, pageSize)
+    const items = res.list || res.data || []
+    
+    if (append) {
+      list.value = [...list.value, ...items]
+    } else {
+      list.value = items
+    }
+    
+    if (items.length < pageSize) {
+      hasMore.value = false
+    } else {
+      page.value++
+    }
+  } catch (e) {
+    console.error('获取邀请记录失败:', e)
+    hasMore.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+onLoad(() => {
+  fetchData()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: $bg-page;
+  position: relative;
+  overflow: hidden;
+}
+
+
+.header-area {
+  padding: $spacing-xl $spacing-lg;
+  padding-top: calc(env(safe-area-inset-top) + 20rpx);
+  position: relative;
+  z-index: 1;
+}
+
+.page-title {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: $text-main;
+  margin-bottom: 8rpx;
+  letter-spacing: 1rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.page-subtitle {
+  font-size: 24rpx;
+  color: $text-tertiary;
+  text-transform: uppercase;
+  letter-spacing: 2rpx;
+  font-weight: 600;
+}
+
+/* 统计卡片 */
+.stats-card {
+  @extend .glass-card;
+  margin: 0 $spacing-lg $spacing-lg;
+  padding: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stat-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-num {
+  font-size: 56rpx;
+  font-weight: 900;
+  color: $brand-primary;
+  font-family: 'DIN Alternate', sans-serif;
+  line-height: 1;
+  margin-bottom: 12rpx;
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: $text-sub;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 60rpx;
+  background: $border-color-light;
+  margin: 0 40rpx;
+}
+
+/* 内容滚动区 */
+.content-scroll {
+  height: calc(100vh - 400rpx);
+  padding: 0 $spacing-lg $spacing-lg;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: $text-tertiary;
+  font-size: 26rpx;
+  gap: 16rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  color: $text-tertiary;
+  font-size: 28rpx;
+  margin-bottom: 12rpx;
+}
+
+.empty-hint {
+  color: $text-tertiary;
+  font-size: 24rpx;
+  opacity: 0.6;
+}
+
+/* 邀请列表 */
+.invite-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.invite-item {
+  background: #fff;
+  border-radius: $radius-lg;
+  padding: 24rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: $shadow-sm;
+  animation: fadeInUp 0.5s ease-out backwards;
+  
+  &:active {
+    transform: scale(0.98);
+    background: rgba(255, 255, 255, 0.8);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.invite-avatar {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  background: $bg-secondary;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+}
+
+.invite-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.invite-name {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: $text-main;
+  margin-bottom: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.invite-time {
+  font-size: 24rpx;
+  color: $text-tertiary;
+}
+
+.invite-status {
+  flex-shrink: 0;
+}
+
+.status-text {
+  font-size: 24rpx;
+  color: $uni-color-success;
+  background: rgba($uni-color-success, 0.1);
+  padding: 6rpx 16rpx;
+  border-radius: 100rpx;
+}
+
+/* 加载更多 */
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx 0;
+  color: $text-tertiary;
+  font-size: 24rpx;
+  gap: 12rpx;
+}
+
+.spinner {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid $bg-secondary;
+  border-top-color: $text-tertiary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.no-more {
+  text-align: center;
+  padding: 40rpx 0;
+  color: $text-tertiary;
+  font-size: 24rpx;
+  opacity: 0.6;
+}
+</style>
diff --git a/pages/item-cards/index.vue b/pages/item-cards/index.vue
new file mode 100644
index 0000000..c7b4a2f
--- /dev/null
+++ b/pages/item-cards/index.vue
@@ -0,0 +1,623 @@
+<template>
+  <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
+
+    <view class="header-area">
+      <view class="page-title">我的道具卡</view>
+      <view class="page-subtitle">My Item Cards</view>
+    </view>
+
+    <!-- Tab栏 - 毛玻璃风格 -->
+    <view class="tab-bar glass-card">
+      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
+        <text class="tab-text">未使用</text>
+        <view class="tab-indicator" v-if="currentTab === 0"></view>
+      </view>
+      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
+        <text class="tab-text">已使用</text>
+        <view class="tab-indicator" v-if="currentTab === 1"></view>
+      </view>
+    </view>
+
+    <!-- 内容区 -->
+    <scroll-view 
+      scroll-y 
+      class="content-scroll"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+    >
+      <!-- 加载状态 -->
+      <view v-if="loading && list.length === 0" class="loading-state">
+        <view class="spinner"></view>
+        <text>加载中...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="list.length === 0" class="empty-state">
+        <text class="empty-icon">🃏</text>
+        <text class="empty-text">{{ currentTab === 0 ? '暂无可用道具卡' : '暂无使用记录' }}</text>
+      </view>
+
+      <!-- 道具卡列表 -->
+      <view v-else class="item-list">
+        <view 
+          v-for="(item, index) in list" 
+          :key="item.id || index" 
+          class="item-ticket"
+          :class="{ 'used': currentTab === 1 }"
+          :style="{ animationDelay: `${index * 0.05}s` }"
+        >
+          <!-- 左侧图标区域 -->
+          <view class="ticket-left">
+            <view class="card-icon-wrap">
+              <text class="card-icon">{{ getCardIcon(item.type || item.name) }}</text>
+            </view>
+            <view class="card-count-badge" v-if="currentTab === 0">
+              <text class="count-num">×{{ item.remaining ?? item.count ?? 1 }}</text>
+            </view>
+          </view>
+          
+          <!-- 中间分割线 -->
+          <view class="ticket-divider">
+            <view class="divider-notch top"></view>
+            <view class="divider-dash"></view>
+            <view class="divider-notch bottom"></view>
+          </view>
+          
+          <!-- 右侧信息区域 -->
+          <view class="ticket-right">
+            <view class="card-info">
+              <text class="card-name">{{ item.name || item.title || '道具卡' }}</text>
+              <text class="card-desc">{{ item.description || item.rules || '可在抽奖时使用' }}</text>
+              <view class="usage-info" v-if="currentTab === 1">
+                <text class="card-use-time" v-if="item.used_at">使用时间：{{ formatDateTime(item.used_at) }}</text>
+                <view class="usage-detail" v-if="item.used_activity_name">
+                  <text class="detail-label">使用于：</text>
+                  <text class="detail-val">{{ item.used_activity_name }}</text>
+                  <text class="detail-val" v-if="item.used_issue_number"> - 期号 {{ item.used_issue_number }}</text>
+                </view>
+                <view class="usage-detail" v-if="item.used_reward_name">
+                  <text class="detail-label">效果：</text>
+                  <text class="detail-val highlight">{{ item.used_reward_name }}</text>
+                </view>
+              </view>
+            </view>
+
+            <!-- 优化后的按钮位置 -->
+            <view class="ticket-action-wrapper" v-if="currentTab === 0">
+              <view class="use-btn" @click.stop="onUseCard(item)">
+                <text class="btn-text">去使用</text>
+                <view class="btn-shine"></view>
+              </view>
+            </view>
+            <view class="card-used-badge" v-else>
+              <text class="used-text">已使用</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getItemCards } from '../../api/appUser'
+
+const list = ref([])
+const loading = ref(false)
+const isRefreshing = ref(false)
+const currentTab = ref(0)
+
+// 获取用户ID
+function getUserId() {
+  return uni.getStorageSync('user_id')
+}
+
+// 检查登录状态
+function checkAuth() {
+  const token = uni.getStorageSync('token')
+  const userId = getUserId()
+  if (!token || !userId) {
+    uni.showModal({
+      title: '提示',
+      content: '请先登录',
+      confirmText: '去登录',
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateTo({ url: '/pages/login/index' })
+        }
+      }
+    })
+    return false
+  }
+  return true
+}
+
+// 格式化日期时间
+function formatDateTime(t) {
+  if (!t) return ''
+  const d = new Date(t)
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  const ss = String(d.getSeconds()).padStart(2, '0')
+  return `${y}-${m}-${day} ${hh}:${mm}:${ss}`
+}
+
+// 获取卡片图标
+function getCardIcon(type) {
+  const t = String(type || '').toLowerCase()
+  if (t.includes('透视')) return '👁️'
+  if (t.includes('提示')) return '💡'
+  if (t.includes('重置')) return '🔄'
+  if (t.includes('翻倍')) return '✨'
+  if (t.includes('保护')) return '🛡️'
+  return '🃏'
+}
+
+// 切换Tab
+function switchTab(tab) {
+  if (currentTab.value === tab) return
+  uni.vibrateShort({ type: 'light' })
+  currentTab.value = tab
+  list.value = []
+  fetchData()
+}
+
+// 下拉刷新
+async function onRefresh() {
+  isRefreshing.value = true
+  await fetchData()
+  isRefreshing.value = false
+}
+
+// 获取数据
+async function fetchData() {
+  if (!checkAuth()) return
+  if (loading.value) return
+  
+  loading.value = true
+  try {
+    const userId = getUserId()
+    // status: 1=unused, 2=used
+    const status = currentTab.value === 0 ? 1 : 2
+    const res = await getItemCards(userId, status)
+    
+    let items = Array.isArray(res) ? res : (res.list || res.data || [])
+    
+    // 处理数据，确保count字段存在
+    items = items.map(item => ({
+      ...item,
+      count: item.count ?? item.remaining ?? 1
+    }))
+    
+    // 未使用状态时过滤掉数量为0的卡片
+    if (currentTab.value === 0) {
+      items = items.filter(i => i.count > 0)
+    }
+    
+    list.value = items
+  } catch (e) {
+    console.error('获取道具卡失败:', e)
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 去使用道具卡
+function onUseCard(item) {
+  uni.vibrateShort({ type: 'medium' })
+  // 道具卡通常去首页或指定的活动页
+  uni.switchTab({
+    url: '/pages/index/index'
+  })
+}
+
+onLoad(() => {
+  fetchData()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: $bg-page;
+  position: relative;
+  overflow: hidden;
+}
+
+
+.header-area {
+  padding: $spacing-xl $spacing-lg;
+  padding-top: calc(env(safe-area-inset-top) + 20rpx);
+  position: relative;
+  z-index: 1;
+}
+
+.page-title {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: $text-main;
+  margin-bottom: 8rpx;
+  letter-spacing: 1rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.page-subtitle {
+  font-size: 24rpx;
+  color: $text-tertiary;
+  text-transform: uppercase;
+  letter-spacing: 2rpx;
+  font-weight: 600;
+}
+
+/* Tab栏 */
+.tab-bar {
+  @extend .glass-card;
+  display: flex;
+  margin: 0 $spacing-lg;
+  padding: 8rpx;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.tab-text {
+  font-size: 28rpx;
+  color: $text-sub;
+  font-weight: 500;
+}
+
+.tab-item.active .tab-text {
+  color: $text-main;
+  font-weight: 700;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40rpx;
+  height: 6rpx;
+  background: $brand-primary;
+  border-radius: 6rpx;
+}
+
+/* 内容滚动区 */
+.content-scroll {
+  height: calc(100vh - 280rpx);
+  padding: $spacing-lg;
+  position: relative;
+  z-index: 1;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: $text-tertiary;
+  font-size: 26rpx;
+  gap: 16rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  color: $text-tertiary;
+  font-size: 28rpx;
+}
+
+/* 道具卡列表 */
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+/* 票券式卡片 */
+.item-ticket {
+  background: #fff;
+  border-radius: 16rpx;
+  display: flex;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+  position: relative;
+  animation: fadeInUp 0.5s ease-out backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ticket-left {
+  width: 180rpx;
+  background: linear-gradient(135deg, #E6F7FF, #fff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx;
+  position: relative;
+}
+
+.card-icon-wrap {
+  width: 90rpx;
+  height: 90rpx;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 150, 250, 0.1);
+}
+
+.card-icon {
+  font-size: 48rpx;
+}
+
+.card-count-badge {
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  background: rgba(0, 150, 250, 0.1);
+  padding: 2rpx 10rpx;
+  border-radius: 100rpx;
+}
+
+.count-num {
+  font-size: 20rpx;
+  font-weight: 700;
+  color: #0096FA;
+}
+
+/* 分割线 */
+.ticket-divider {
+  width: 30rpx;
+  position: relative;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.divider-notch {
+  width: 24rpx;
+  height: 24rpx;
+  background: $bg-page;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.divider-notch.top {
+  top: -12rpx;
+}
+
+.divider-notch.bottom {
+  bottom: -12rpx;
+}
+
+.divider-dash {
+  width: 0;
+  height: 80%;
+  border-left: 2rpx dashed #eee;
+}
+
+.ticket-right {
+  flex: 1;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  padding-right: 100rpx;
+}
+
+.card-name {
+  font-size: $font-md;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+  color: $text-main;
+}
+
+.card-desc {
+  font-size: $font-xs;
+  color: $text-sub;
+  line-height: 1.4;
+}
+
+.card-desc {
+  font-size: $font-xs;
+  color: $text-sub;
+  line-height: 1.4;
+}
+
+.usage-info {
+  margin-top: 16rpx;
+  padding-top: 12rpx;
+  border-top: 1rpx dashed #eee;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.card-use-time {
+  font-size: 18rpx;
+  color: $text-tertiary;
+}
+
+.usage-detail {
+  font-size: 20rpx;
+  color: $text-sub;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.detail-label {
+  color: $text-tertiary;
+}
+
+.detail-val {
+  font-weight: 500;
+  margin-left: 4rpx;
+  
+  &.highlight {
+    color: $brand-primary;
+    font-weight: 700;
+  }
+}
+
+/* 按钮样式 */
+.ticket-action-wrapper {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.use-btn {
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+  padding: 12rpx 28rpx;
+  border-radius: 40rpx;
+  box-shadow: 0 6rpx 20rpx rgba(0, 150, 250, 0.2);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+
+  &:active {
+    transform: scale(0.92);
+    box-shadow: 0 2rpx 10rpx rgba(0, 150, 250, 0.15);
+  }
+}
+
+.btn-text {
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+  position: relative;
+  z-index: 2;
+}
+
+.btn-shine {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: skewX(-25deg);
+  animation: shine 3s infinite;
+}
+
+@keyframes shine {
+  0% { left: -100%; }
+  20%, 100% { left: 150%; }
+}
+
+.card-used-badge {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #F5F5F5;
+  padding: 6rpx 16rpx;
+  border-radius: 8rpx;
+}
+
+.used-text {
+  font-size: 22rpx;
+  color: $text-tertiary;
+}
+
+/* 已使用状态 */
+.item-ticket.used {
+  .ticket-left {
+    background: #f9f9f9;
+  }
+  
+  .card-icon-wrap {
+    filter: grayscale(1);
+    opacity: 0.5;
+  }
+  
+  .card-name {
+    color: $text-sub;
+  }
+  
+  .card-desc {
+    color: $text-tertiary;
+  }
+}
+
+/* 加载动画 */
+.spinner {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid $bg-secondary;
+  border-top-color: $text-tertiary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 3530895..2340412 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -11,7 +11,6 @@
           <view class="logo-box">
             <image class="logo" src="/static/logo.png" mode="widthFix"></image>
           </view>
-          <view class="app-name">柯大鸭潮玩</view>
           <view class="welcome-text">开启欧气之旅 ✨</view>
         </view>
 
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 205ec80..1d828f1 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -11,35 +11,36 @@
           <view class="user-meta">
             <view class="name-row">
               <text class="nickname">{{ nickname || '未登录' }}</text>
-              <view class="level-badge" v-if="nickname">
+              <view class="level-badge" v-if="title">
                 <image class="level-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiAzSDE4TDIxIDlMOSAyMSAzIDlMNiAzWiIgLz48L3N2Zz4=" mode="aspectFit"></image>
-                <text class="level-text">Lv1 青铜</text>
+                <text class="level-text">Lv1 {{ title }}</text>
               </view>
             </view>
-            <view class="progress-container" v-if="nickname">
+            <view class="userid" v-if="userId">ID: {{ userId }}</view>
+            <!-- <view class="progress-container" v-if="nickname">
               <view class="progress-bar">
                 <view class="progress-fill" style="width: 20%;"></view>
               </view>
               <text class="progress-text">100/5000 升级Lv2</text>
-            </view>
-            <view class="userid" v-else>ID: {{ userId || '-' }}</view>
+            </view> -->
+            <!-- <view class="userid" v-else>ID: {{ userId || '-' }}</view> -->
           </view>
           <view class="join-btn" @click="handleJoin" v-if="!nickname">立即登录</view>
         </view>
         
         <!-- 数据统计栏 -->
         <view class="stats-row">
-          <view class="stat-item" @click="showPointsPopup">
+          <view class="stat-item" @click="toPointsPage">
             <text class="stat-num">{{ pointsBalance || 0 }}</text>
             <text class="stat-label">积分</text>
           </view>
           <view class="stat-divider"></view>
-          <view class="stat-item" @click="showCouponsPopup">
+          <view class="stat-item" @click="toCouponsPage">
             <text class="stat-num">{{ stats.coupon_count || 0 }}</text>
             <text class="stat-label">优惠券</text>
           </view>
           <view class="stat-divider"></view>
-          <view class="stat-item" @click="showItemCardsPopup">
+          <view class="stat-item" @click="toItemCardsPage">
             <text class="stat-num">{{ stats.item_card_count || 0 }}</text>
             <text class="stat-label">道具卡</text>
           </view>
@@ -130,25 +131,25 @@
         <text class="section-title">常用功能</text>
       </view>
       <view class="grid-menu">
-        <view class="menu-item" @click="showCouponsPopup">
+        <view class="menu-item" @click="toCouponsPage">
           <view class="menu-icon-box">
              <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSA2SDNhMiAyIDAgMCAwLTIgMnY4YTIgMiAwIDAgMCAyIDJoMThhMiAyIDAgMCAwIDItMnYtOGEyIDIgMCAwIDAtMi0yWiIgLz48cGF0aCBkPSJNNiAxMnYtMiIgLz48cGF0aCBkPSJNNiAxNnYtMiIgLz48cGF0aCBkPSJNMTYgNnYxMiIgLz48L3N2Zz4=" mode="aspectFit"></image>
           </view>
           <text class="menu-label">优惠券</text>
         </view>
-        <view class="menu-item" @click="showItemCardsPopup">
+        <view class="menu-item" @click="toItemCardsPage">
           <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgLz48cGF0aCBkPSJNMjEgMTVsLTUuNDMtMy4yM2EyIDIgMCAwIDAtMS44NCAwbC0yLjMxIDEuMzciIC8+PC9zdmc+" mode="aspectFit"></image>
           </view>
           <text class="menu-label">道具卡</text>
         </view>
-        <view class="menu-item" @click="showTasksPopup">
+        <view class="menu-item" @click="toTasksPage">
           <view class="menu-icon-box">
             <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDExbDMgM0wyMiA0Ii8+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIi8+PC9zdmc+" mode="aspectFit"></image>
           </view>
           <text class="menu-label">任务中心</text>
         </view>
-        <view class="menu-item" @click="showInvitesPopup">
+        <view class="menu-item" @click="toInvitesPage">
           <view class="menu-icon-box">
              <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNyAyMXYtMmE0IDQgMCAwIDAtNC00SDdhNCA0IDAgMCAwLTQgNHYyIj48L3BhdGg+PGNpcmNsZSBjeD0iMTAiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48cGF0aCBkPSJNMjMgMjF2LTJhNCA0IDAgMCAwLTMtMy4yNyI+PC9wYXRoPjxwYXRoIGQ9Ik0xNiAzLjEzYTQgNCAwIDAgMSAwIDcuNzUiPjwvcGF0aD48L3N2Zz4=" mode="aspectFit"></image>
           </view>
@@ -462,6 +463,7 @@ export default {
       userId: '',
       nickname: '',
       avatar: '',
+      title: '', // 用户头衔
       inviteCode: '',
       pointsBalance: 0,
       
@@ -584,6 +586,7 @@ export default {
           this.nickname = cachedUser.nickname
           this.avatar = cachedUser.avatar
           this.inviteCode = cachedUser.invite_code
+          this.title = cachedUser.title || ''
           this.pointsBalance = this.normalizePointsBalance(cachedUser.points_balance)
         } else if (cachedUserId) {
           this.userId = cachedUserId
@@ -610,6 +613,7 @@ export default {
                this.userId = res.id
                this.nickname = res.nickname
                this.avatar = res.avatar
+               this.title = res.title || res.level_name || ''
                this.inviteCode = res.invite_code
                this.pointsBalance = this.normalizePointsBalance(res.points_balance)
                uni.setStorageSync('user_info', res)
@@ -629,6 +633,7 @@ export default {
       this.userId = ''
       this.nickname = ''
       this.avatar = ''
+      this.title = ''
       this.pointsBalance = 0
       this.stats = { coupon_count: 0, item_card_count: 0 }
     },
@@ -645,6 +650,21 @@ export default {
     toAddresses() {
       uni.navigateTo({ url: '/pages/address/index' })
     },
+    toPointsPage() {
+      uni.navigateTo({ url: '/pages/points/index' })
+    },
+    toCouponsPage() {
+      uni.navigateTo({ url: '/pages/coupons/index' })
+    },
+    toItemCardsPage() {
+      uni.navigateTo({ url: '/pages/item-cards/index' })
+    },
+    toInvitesPage() {
+      uni.navigateTo({ url: '/pages/invites/index' })
+    },
+    toTasksPage() {
+      uni.navigateTo({ url: '/pages/tasks/index' })
+    },
     toHelp() {
       uni.showActionSheet({
         itemList: ['购买协议', '用户协议'],
diff --git a/pages/orders/detail.vue b/pages/orders/detail.vue
index a564a6a..f217540 100644
--- a/pages/orders/detail.vue
+++ b/pages/orders/detail.vue
@@ -1,5 +1,7 @@
 <template>
   <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
     <!-- 加载状态 -->
     <view v-if="loading" class="loading-state">
       <view class="loading-spinner"></view>
@@ -64,7 +66,9 @@
               <view class="item-meta">
                 <view class="price-wrap">
                   <text class="currency" v-if="item.price > 0">¥</text>
-                  <text class="price">{{ item.price > 0 ? formatPrice(item.price) : '奖品' }}</text>
+                  <text class="price" v-if="item.price > 0">{{ formatPrice(item.price) }}</text>
+                  <text class="price" v-else-if="order.points_amount > 0">{{ Math.floor(order.points_amount / (order.items && order.items.length || 1)) }}积分</text>
+                  <text class="price" v-else>奖品</text>
                 </view>
                 <text class="item-quantity">x{{ item.quantity }}</text>
               </view>
@@ -86,9 +90,11 @@
                 <text class="tag" v-if="order.issue_number">第{{ order.issue_number }}期</text>
               </view>
               <view class="item-meta">
-                 <view class="price-wrap">
+                <view class="price-wrap">
                   <text class="currency" v-if="order.actual_amount > 0">¥</text>
-                  <text class="price">{{ order.actual_amount > 0 ? formatPrice(order.actual_amount) : '奖品' }}</text>
+                  <text class="price" v-if="order.actual_amount > 0">{{ formatPrice(order.actual_amount) }}</text>
+                  <text class="price" v-else-if="order.points_amount > 0">{{ order.points_amount }}积分</text>
+                  <text class="price" v-else>奖品</text>
                 </view>
                 <text class="item-quantity">x1</text>
               </view>
@@ -128,7 +134,8 @@
       <view class="section-card amount-section">
         <view class="info-row">
           <text class="label">商品总额</text>
-          <text class="value">¥{{ formatPrice(order.total_amount) }}</text>
+          <text class="value" v-if="order.points_amount > 0">{{ order.points_amount }}积分</text>
+          <text class="value" v-else>¥{{ formatPrice(order.total_amount) }}</text>
         </view>
         
         <!-- 优惠券 -->
@@ -159,7 +166,9 @@
         <text class="total-label">{{ order.actual_amount > 0 ? '实付款' : '状态' }}</text>
         <view class="total-price-wrap">
           <text class="currency" v-if="order.actual_amount > 0">¥</text>
-          <text class="total-price">{{ order.actual_amount > 0 ? formatPrice(order.actual_amount) : '无需支付' }}</text>
+          <text class="total-price" v-if="order.actual_amount > 0">{{ formatPrice(order.actual_amount) }}</text>
+          <text class="total-price" v-else-if="order.points_amount > 0">{{ order.points_amount }}积分</text>
+          <text class="total-price" v-else>无需支付</text>
         </view>
       </view>
       </view>
@@ -410,8 +419,47 @@ function showProofHelp() {
 .page-container {
   min-height: 100vh;
   background: $bg-page;
-  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(140rpx + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   position: relative;
+  overflow: hidden;
+}
+
+/* 背景装饰 - 漂浮光球 (与各主要页面统一) */
+.bg-decoration {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100rpx; right: -100rpx;
+    width: 600rpx; height: 600rpx;
+    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
+    filter: blur(60rpx);
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: float 10s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 200rpx; left: -200rpx;
+    width: 500rpx; height: 500rpx;
+    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
+    filter: blur(50rpx);
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 15s ease-in-out infinite reverse;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30rpx, 50rpx); }
 }
 
 /* 状态头部背景 */
@@ -420,6 +468,7 @@ function showProofHelp() {
   position: relative;
   overflow: hidden;
   border-radius: 0 0 40rpx 40rpx;
+  z-index: 1;
   
   &.status-pending { background: linear-gradient(135deg, #FF9F43 0%, #FF6B6B 100%); }
   &.status-completed { background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); }
@@ -428,7 +477,7 @@ function showProofHelp() {
   .bg-circle {
     position: absolute;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.15);
     
     &.c1 { width: 300rpx; height: 300rpx; top: -100rpx; right: -50rpx; }
     &.c2 { width: 200rpx; height: 200rpx; bottom: 50rpx; left: -50rpx; }
@@ -438,13 +487,14 @@ function showProofHelp() {
 /* 状态卡片 */
 .status-card {
   margin: -60rpx $spacing-lg 0;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20rpx);
   border-radius: $radius-xl;
   padding: $spacing-xl;
   box-shadow: $shadow-card;
   position: relative;
   z-index: 10;
+  border: 1px solid rgba(255, 255, 255, 0.6);
   
   .status-content {
     display: flex;
@@ -488,11 +538,15 @@ function showProofHelp() {
 /* 通用卡片样式 */
 .section-card {
   margin: $spacing-lg;
-  background: $bg-card;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20rpx);
   border-radius: $radius-lg;
   padding: $spacing-lg;
   box-shadow: $shadow-sm;
   animation: slideUp 0.4s ease-out;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  position: relative;
+  z-index: 5;
 }
 
 @keyframes slideUp {
diff --git a/pages/orders/index.vue b/pages/orders/index.vue
index d513e82..891d45d 100644
--- a/pages/orders/index.vue
+++ b/pages/orders/index.vue
@@ -1,7 +1,9 @@
 <template>
   <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
     <!-- 顶部 Tab -->
-    <view class="tabs">
+    <view class="tabs glass-card">
       <view 
         class="tab-item" 
         :class="{ active: currentTab === 'pending' }" 
@@ -161,7 +163,10 @@ function formatTime(t) {
   return `${m}-${day} ${hh}:${mm}`
 }
 
-function formatAmount(a) {
+function formatAmount(a, item) {
+  if (item && item.points_amount > 0) {
+    return `${item.points_amount}积分`
+  }
   if (a === undefined || a === null) return '¥0.00'
   const n = Number(a)
   if (Number.isNaN(n)) return '¥0.00'
@@ -175,6 +180,7 @@ function shouldShowAmountLabel(item) {
 }
 
 function getAmountText(item) {
+  if (item.points_amount > 0) return formatAmount(0, item)
   const amount = item.actual_amount || item.total_amount
   if (amount > 0) return formatAmount(amount)
   
@@ -283,6 +289,7 @@ function getStatusClass(item) {
 
 function switchTab(tab) {
   if (currentTab.value === tab) return
+  uni.vibrateShort({ type: 'light' })
   currentTab.value = tab
   fetchOrders(false)
 }
@@ -448,23 +455,26 @@ onReachBottom(() => {
   min-height: 100vh;
   background: $bg-page;
   position: relative;
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(40rpx + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+  overflow: hidden;
 }
 
-/* 顶部 Tab - 与盒柜页面保持一致 */
+/* 顶部 Tab */
 .tabs {
+  @extend .glass-card;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 88rpx;
-  background: rgba($bg-card, 0.95);
-  backdrop-filter: blur(20rpx);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
-  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
 }
 
 .tab-item {
@@ -614,16 +624,19 @@ onReachBottom(() => {
 
 /* 订单卡片 */
 .order-card {
-  background: $bg-card;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10rpx);
   border-radius: $radius-xl;
   overflow: hidden;
-  box-shadow: $shadow-card;
+  box-shadow: $shadow-sm;
   animation: fadeInUp 0.4s ease-out backwards;
   animation-delay: var(--delay, 0s);
   transition: all 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.6);
   
   &:active {
     transform: scale(0.98);
+    box-shadow: none;
   }
 }
 
diff --git a/pages/points/index.vue b/pages/points/index.vue
index 1ee9b0b..b8e2c70 100644
--- a/pages/points/index.vue
+++ b/pages/points/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="wrap">
-    <!-- 顶部装饰背景 -->
-    <view class="page-bg-decoration"></view>
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
 
     <view class="header-area">
       <view class="page-title">积分明细</view>
@@ -26,14 +26,14 @@
           class="record-item"
           :style="{ animationDelay: `${index * 0.05}s` }"
         >
-          <view class="record-icon" :class="{ 'is-add': (item.change || item.amount || 0) > 0 }">
-            {{ (item.change || item.amount || 0) > 0 ? '↓' : '↑' }}
+          <view class="record-icon" :class="{ 'is-add': (item.points || 0) > 0 }">
+            {{ (item.points || 0) > 0 ? '↓' : '↑' }}
           </view>
           <view class="record-content">
             <view class="record-main">
-              <view class="record-title">{{ item.title || item.reason || '积分变更' }}</view>
-              <view class="record-amount" :class="{ inc: (item.change || item.amount || 0) > 0, dec: (item.change || item.amount || 0) < 0 }">
-                {{ (item.change ?? item.amount ?? 0) > 0 ? '+' : '' }}{{ item.change ?? item.amount ?? 0 }}
+              <view class="record-title">{{ getActionText(item.action) || item.title || item.reason || '积分变更' }}</view>
+              <view class="record-amount" :class="{ inc: (item.points || 0) > 0, dec: (item.points || 0) < 0 }">
+                {{ (item.points ?? 0) > 0 ? '+' : '' }}{{ item.points ?? 0 }}
               </view>
             </view>
             <view class="record-footer">
@@ -77,6 +77,26 @@ function formatTime(t) {
   return `${y}-${m}-${day} ${hh}:${mm}`
 }
 
+function getActionText(action) {
+  const map = {
+    'signin': '每日签到',
+    'register': '注册赠送',
+    'invite_reward': '邀请奖励',
+    'order_deduct': '下单抵扣',
+    'consume_order': '下单消费',
+    'refund_restore': '退款返还',
+    'refund_points': '积分退回',
+    'refund_amount': '金额退款奖励',
+    'manual_add': '管理手动增加',
+    'manual': '系统调整',
+    'redeem_coupon': '兑换优惠券',
+    'redeem_product': '兑换商品',
+    'redeem_reward': '奖品兑换积分',
+    'redeem_item_card': '兑换道具卡'
+  }
+  return map[action] || ''
+}
+
 async function fetchRecords(append = false) {
   const user_id = uni.getStorageSync('user_id')
   const token = uni.getStorageSync('token')
@@ -106,7 +126,7 @@ async function fetchRecords(append = false) {
   error.value = ''
   try {
     const list = await getPointsRecords(user_id, page.value, pageSize.value)
-    const items = Array.isArray(list) ? list : (list && list.items) || []
+    const items = Array.isArray(list) ? list : (list && (list.list || list.items)) || []
     const total = (list && list.total) || 0
     if (append) {
       records.value = records.value.concat(items)
@@ -143,33 +163,27 @@ onReachBottom(() => {
   min-height: 100vh;
   background-color: $bg-page;
   position: relative;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
-.page-bg-decoration {
-  position: absolute;
-  top: -200rpx;
-  right: -200rpx;
-  width: 600rpx;
-  height: 600rpx;
-  background: radial-gradient(circle, rgba($brand-primary, 0.15), transparent 70%);
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 0;
-}
+/* 背景装饰 - 漂浮光球 (与个人中心统一) */
 
 .header-area {
   padding: $spacing-xl $spacing-lg;
+  padding-top: calc(env(safe-area-inset-top) + 20rpx);
   position: relative;
   z-index: 1;
 }
+
 .page-title {
   font-size: 48rpx;
   font-weight: 900;
   color: $text-main;
   margin-bottom: 8rpx;
   letter-spacing: 1rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
 }
+
 .page-subtitle {
   font-size: 24rpx;
   color: $text-tertiary;
diff --git a/pages/shop/detail.vue b/pages/shop/detail.vue
index a27967b..05aaf35 100644
--- a/pages/shop/detail.vue
+++ b/pages/shop/detail.vue
@@ -7,14 +7,15 @@
       <view class="info-card">
         <view class="title">{{ detail.title || detail.name || '-' }}</view>
         <view class="price-row">
-          <view class="points-wrap" v-if="detail.points_required">
-             <text class="points-val">{{ detail.points_required }}</text>
+          <view class="points-wrap">
+             <text class="points-val">{{ detail.points_required || (detail.price ? Math.floor(detail.price / 100) : 0) }}</text>
              <text class="points-unit">积分</text>
           </view>
-          <text class="price" v-else>¥{{ formatPrice(detail.price_sale || detail.price) }}</text>
         </view>
         <view class="stock" v-if="detail.stock !== null && detail.stock !== undefined">库存：{{ detail.stock }}</view>
-        <view class="desc" v-if="detail.description">{{ detail.description }}</view>
+        <view class="desc" v-if="detail.description">
+          <rich-text :nodes="detail.description"></rich-text>
+        </view>
         
       </view>
     </view>
@@ -23,8 +24,7 @@
     <!-- Action Bar Moved Outside info-card -->
     <view class="action-bar-placeholder" v-if="detail.id"></view>
     <view class="action-bar" v-if="detail.id">
-       <view class="action-btn redeem" v-if="detail.points_required" @tap="onRedeem">立即兑换</view>
-       <view class="action-btn buy" v-else @tap="onBuy">立即购买</view>
+       <view class="action-btn redeem" @tap="onRedeem">立即兑换</view>
     </view>
   </view>
 </template>
@@ -74,9 +74,10 @@ async function onRedeem() {
     return
   }
   
+  const points = detail.value.points_required || (detail.value.price ? Math.floor(detail.value.price / 100) : 0)
   uni.showModal({
     title: '确认兑换',
-    content: `是否消耗 ${p.points_required} 积分兑换 ${p.title}？`,
+    content: `是否消耗 ${points} 积分兑换 ${p.title || p.name}？`,
     success: async (res) => {
       if (res.confirm) {
         uni.showLoading({ title: '兑换中...' })
@@ -85,16 +86,18 @@ async function onRedeem() {
           if (!userId) throw new Error('用户ID不存在')
           
           await redeemProductByPoints(userId, p.id, 1)
-          uni.showToast({ title: '兑换成功', icon: 'success' })
-          
-          // Refresh detail
-          setTimeout(() => {
-             fetchDetail(p.id)
-          }, 1500)
-        } catch (e) {
-          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
-        } finally {
           uni.hideLoading()
+          uni.showModal({
+            title: '兑换成功',
+            content: `您已成功兑换 ${p.title || p.name}`,
+            showCancel: false,
+            success: () => {
+              fetchDetail(p.id)
+            }
+          })
+        } catch (e) {
+          uni.hideLoading()
+          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
         }
       }
     }
@@ -116,6 +119,46 @@ onLoad((opts) => {
   min-height: 100vh;
   background: $bg-page;
   padding-bottom: env(safe-area-inset-bottom);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景装饰 - 漂浮光球 (与各主要页面统一) */
+.bg-decoration {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100rpx; right: -100rpx;
+    width: 600rpx; height: 600rpx;
+    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
+    filter: blur(60rpx);
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: float 10s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 200rpx; left: -200rpx;
+    width: 500rpx; height: 500rpx;
+    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
+    filter: blur(50rpx);
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 15s ease-in-out infinite reverse;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30rpx, 50rpx); }
 }
 
 .loading, .empty {
@@ -123,30 +166,37 @@ onLoad((opts) => {
   padding: 120rpx 40rpx;
   color: $text-secondary;
   font-size: $font-md;
+  position: relative;
+  z-index: 10;
 }
 
 .detail-wrap {
   padding-bottom: 40rpx;
   animation: fadeInUp 0.4s ease-out;
+  position: relative;
+  z-index: 1;
 }
 
 .main-image {
   width: 100%;
-  height: 750rpx; /* Square aspect ratio */
+  height: 750rpx;
   display: block;
   background: $bg-secondary;
-  box-shadow: $shadow-sm;
 }
 
 .info-card {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20rpx);
   border-radius: $radius-xl $radius-xl 0 0;
   padding: $spacing-xl;
-  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
+  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.05);
   position: relative;
   z-index: 2;
-  margin-top: -40rpx; /* Slight overlap */
+  margin-top: -40rpx;
   min-height: 50vh;
+  border-top: 1px solid rgba(255, 255, 255, 0.6);
+  border-left: 1px solid rgba(255, 255, 255, 0.6);
+  border-right: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 .title {
@@ -155,6 +205,7 @@ onLoad((opts) => {
   color: $text-main;
   margin-bottom: $spacing-md;
   line-height: 1.4;
+  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
 }
 
 .price-row {
@@ -197,7 +248,7 @@ onLoad((opts) => {
   font-size: $font-sm;
   color: $text-secondary;
   margin-bottom: $spacing-lg;
-  background: $bg-secondary;
+  background: rgba(0,0,0,0.05);
   display: inline-block;
   padding: 6rpx $spacing-md;
   border-radius: $radius-sm;
@@ -218,6 +269,12 @@ onLoad((opts) => {
     margin-bottom: $spacing-sm;
     font-weight: 700;
   }
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 }
 
 .action-bar-placeholder { height: 120rpx; }
@@ -231,8 +288,9 @@ onLoad((opts) => {
   box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
   display: flex;
   justify-content: flex-end;
-  z-index: 10;
+  z-index: 100;
 }
+
 .action-btn {
   width: 100%;
   height: 88rpx;
@@ -243,6 +301,9 @@ onLoad((opts) => {
   font-size: 32rpx;
   font-weight: 700;
   color: #fff;
+  transition: transform 0.2s;
+  
+  &:active { transform: scale(0.96); }
 }
 .action-btn.redeem { background: linear-gradient(135deg, #FFB74D, #FF9800); box-shadow: 0 8rpx 20rpx rgba(255, 152, 0, 0.3); }
 .action-btn.buy { background: linear-gradient(135deg, #FF6B6B, #FF3B30); box-shadow: 0 8rpx 20rpx rgba(255, 59, 48, 0.3); }
diff --git a/pages/shop/index.vue b/pages/shop/index.vue
index a48f0e7..689177e 100644
--- a/pages/shop/index.vue
+++ b/pages/shop/index.vue
@@ -1,59 +1,112 @@
 <template>
   <view class="page">
     <view class="bg-decoration"></view>
+    
     <!-- 顶部固定区域 -->
     <view class="header-section">
       <view class="search-box">
         <view class="search-input-wrap">
           <text class="search-icon">🔍</text>
-          <input class="search-input" v-model="keyword" placeholder="搜索心仪的商品" placeholder-class="placeholder-style" confirm-type="search" @confirm="onSearchConfirm" />
+          <input class="search-input" v-model="keyword" placeholder="搜索心仪的宝贝" placeholder-class="placeholder-style" confirm-type="search" @confirm="onSearchConfirm" />
         </view>
       </view>
       
-      <view class="filter-row">
-        <view class="price-range">
-          <text class="price-label">价格区间</text>
-          <input class="price-input" type="number" v-model="minPrice" placeholder="最低" placeholder-class="price-ph" />
-          <text class="price-sep">-</text>
-          <input class="price-input" type="number" v-model="maxPrice" placeholder="最高" placeholder-class="price-ph" />
+      <!-- 分类标签 -->
+      <view class="tab-row">
+        <view 
+          v-for="tab in tabs" 
+          :key="tab.id" 
+          class="tab-item" 
+          :class="{ active: currentTab === tab.id }"
+          @tap="switchTab(tab.id)"
+        >
+          <text class="tab-text">{{ tab.name }}</text>
+          <view class="tab-line" v-if="currentTab === tab.id"></view>
         </view>
-        <button class="filter-btn" hover-class="btn-hover" @tap="onApplyFilters">筛选</button>
       </view>
     </view>
 
-    <!-- 占位，防止内容被头部遮挡 -->
+    <!-- 占位 -->
     <view class="header-placeholder"></view>
 
-    <view v-if="loading && !products.length" class="loading-wrap"><view class="spinner"></view></view>
+    <view v-if="loading && !items.length" class="loading-wrap"><view class="spinner"></view></view>
     
-    <view class="products-container" v-else>
-      <view v-if="products.length > 0" class="products-grid">
-        <view class="product-item" v-for="p in products" :key="p.id" @tap="onProductTap(p)">
+    <view class="content-container" v-else>
+      <!-- 商品视图 (网格) -->
+      <view v-if="currentTab === 'product'" class="products-grid">
+        <view class="product-item" v-for="p in items" :key="p.id" @tap="onProductTap(p)">
           <view class="product-card">
             <view class="thumb-wrap">
               <image class="product-thumb" :src="p.image" mode="aspectFill" lazy-load="true" />
-               <view class="stock-tag" v-if="p.stock !== null && p.stock < 10">仅剩{{p.stock}}件</view>
+               <view class="stock-tag" v-if="p.stock !== null && p.stock < 10 && p.stock > 0">仅剩{{p.stock}}件</view>
+               <view class="stock-tag out" v-else-if="p.stock === 0">已罄</view>
             </view>
             <view class="product-info">
               <text class="product-title">{{ p.title }}</text>
               <view class="product-bottom">
-                <view class="price-row" v-if="p.points">
-                  <text class="points-val">{{ p.points }}</text>
+                <view class="price-row">
+                  <text class="points-val">{{ p.points || 0 }}</text>
                   <text class="points-unit">积分</text>
                 </view>
-                <view class="price-row" v-else>
-                  <text class="price-symbol">￥</text>
-                  <text class="price-val">{{ p.price }}</text>
-                </view>
-                <view class="redeem-btn" v-if="p.points" @tap.stop="onRedeemTap(p)">兑换</view>
+                <view class="redeem-btn" @tap.stop="onRedeemTap(p)">兑换</view>
               </view>
             </view>
           </view>
         </view>
       </view>
-      <view v-else class="empty-state">
+
+      <!-- 优惠券视图 (票据样式列表) -->
+      <view v-else-if="currentTab === 'coupon'" class="coupons-list">
+        <view class="coupon-card" v-for="c in items" :key="c.id">
+          <view class="coupon-left">
+            <view class="coupon-val-row">
+               <text class="coupon-symbol">¥</text>
+               <text class="coupon-val">{{ (c.discount_value || 0) / 100 }}</text>
+            </view>
+            <text class="coupon-limit" v-if="c.min_spend > 0">满{{ (c.min_spend || 0) / 100 }}可用</text>
+            <text class="coupon-limit" v-else>无门槛</text>
+          </view>
+          <view class="coupon-divider">
+            <view class="notch top"></view>
+            <view class="dash"></view>
+            <view class="notch bottom"></view>
+          </view>
+          <view class="coupon-right">
+            <view class="coupon-name">{{ c.title || c.name }}</view>
+            <view class="coupon-bottom">
+               <view class="coupon-price">
+                 <text class="p-val">{{ c.points || 0 }}</text>
+                 <text class="p-unit">积分</text>
+               </view>
+               <view class="coupon-btn" @tap="onRedeemTap(c)">立即兑换</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 道具卡视图 (列表卡片) -->
+      <view v-else-if="currentTab === 'item_card'" class="item-cards-list">
+        <view class="item-card" v-for="ic in items" :key="ic.id">
+          <view class="ic-icon-wrap">
+            <text class="ic-icon">🃏</text>
+          </view>
+          <view class="ic-info">
+            <text class="ic-name">{{ ic.title || ic.name }}</text>
+            <text class="ic-desc">{{ ic.description || '可在抽奖时使用' }}</text>
+            <view class="ic-bottom">
+              <view class="ic-price">
+                <text class="p-val">{{ ic.points || 0 }}</text>
+                <text class="p-unit">积分</text>
+              </view>
+              <view class="ic-btn" @tap="onRedeemTap(ic)">兑换</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="!items.length" class="empty-state">
         <image class="empty-img" src="/static/empty.png" mode="widthFix" />
-        <text class="empty-text">暂无相关商品</text>
+        <text class="empty-text">暂无相关兑换项</text>
       </view>
     </view>
   </view>
@@ -61,22 +114,20 @@
 
 <script setup>
 import { onShow } from '@dcloudio/uni-app'
-import { ref, computed } from 'vue'
-import { request, authRequest } from '../../utils/request.js'
+import { ref, watch } from 'vue'
+import { getStoreItems, redeemProductByPoints, redeemCouponByPoints, redeemItemCardByPoints } from '../../api/appUser'
 
-const products = ref([])
-const CACHE_KEY = 'products_cache_v1'
-const TTL_MS = 10 * 60 * 1000
 const loading = ref(false)
 const keyword = ref('')
-const minPrice = ref('')
-const maxPrice = ref('')
+const currentTab = ref('product')
+const items = ref([])
+const allItems = ref([])
 
-function apiGet(url, data = {}) {
-  const token = uni.getStorageSync('token')
-  const fn = token ? authRequest : request
-  return fn({ url, method: 'GET', data })
-}
+const tabs = [
+  { id: 'product', name: '商品' },
+  { id: 'coupon', name: '优惠券' },
+  { id: 'item_card', name: '道具卡' }
+]
 
 function cleanUrl(u) {
   const s = String(u || '').trim()
@@ -85,31 +136,62 @@ function cleanUrl(u) {
   return s.replace(/[`'\"]/g, '').trim()
 }
 
-function normalizeProducts(list) {
+function normalizeItems(list, kind) {
   if (!Array.isArray(list)) return []
   return list.map((i, idx) => ({
-    id: i.id ?? i.productId ?? i._id ?? i.sku_id ?? String(idx),
-    image: cleanUrl(i.main_image ?? i.imageUrl ?? i.image_url ?? i.image ?? i.img ?? i.pic ?? ''),
-    title: i.title ?? i.name ?? i.product_name ?? i.sku_name ?? '',
-    price: (() => { const raw = i.price_sale ?? i.price ?? i.price_min ?? i.amount ?? null; return raw == null ? null : (Number(raw) / 100) })(),
-    points: i.points_required ?? i.points ?? i.integral ?? null,
-    stock: i.stock ?? i.inventory ?? i.quantity ?? null,
-    link: cleanUrl(i.linkUrl ?? i.link_url ?? i.link ?? i.url ?? '')
-  })).filter(i => i.image || i.title)
+    id: i.id,
+    kind: i.kind || kind,
+    image: cleanUrl(i.main_image || i.image || ''),
+    title: i.name || i.title || '',
+    price: i.price || i.discount_value || 0,
+    points: i.points_required || (i.price ? Math.floor(i.price / 100) : (i.discount_value ? Math.floor(i.discount_value / 100) : 0)),
+    stock: i.in_stock ? 99 : 0, // Simplified stock check if returned as bool
+    discount_value: i.discount_value || 0,
+    min_spend: i.min_spend || 0,
+    description: i.description || ''
+  })).filter(i => i.title)
 }
 
+function switchTab(id) {
+  if (currentTab.value === id) return
+  currentTab.value = id
+  loading.value = true
+  items.value = []
+  loadItems()
+}
+
+async function loadItems() {
+  loading.value = true
+  try {
+    const res = await getStoreItems(currentTab.value, 1, 100)
+    const list = res.list || res || []
+    allItems.value = normalizeItems(list, currentTab.value)
+    applyFilters()
+  } catch (e) {
+    console.error(e)
+    items.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  const k = String(keyword.value || '').trim().toLowerCase()
+  items.value = allItems.value.filter(item => {
+    const title = String(item.title || '').toLowerCase()
+    return !k || title.includes(k)
+  })
+}
+
+function onSearchConfirm() { applyFilters() }
+
 function onProductTap(p) {
-  const id = p && p.id
-  if (id !== undefined && id !== null && id !== '') {
-    uni.navigateTo({ url: `/pages/shop/detail?id=${id}` })
-    return
-  }
-  if (p.link && /^\/.+/.test(p.link)) {
-    uni.navigateTo({ url: p.link })
+  if (p.kind === 'product') {
+    uni.navigateTo({ url: `/pages/shop/detail?id=${p.id}` })
   }
 }
 
-async function onRedeemTap(p) {
+async function onRedeemTap(item) {
   const token = uni.getStorageSync('token')
   if (!token) {
     uni.showModal({
@@ -123,150 +205,51 @@ async function onRedeemTap(p) {
   
   uni.showModal({
     title: '确认兑换',
-    content: `是否消耗 ${p.points} 积分兑换 ${p.title}？`,
+    content: `是否消耗 ${item.points} 积分兑换 ${item.title}？`,
     success: async (res) => {
       if (res.confirm) {
         uni.showLoading({ title: '兑换中...' })
         try {
-          // Get user_id from storage
           const userId = uni.getStorageSync('user_id')
           if (!userId) throw new Error('用户ID不存在')
           
-          await redeemProductByPoints(userId, p.id, 1)
-          uni.showToast({ title: '兑换成功', icon: 'success' })
+          if (item.kind === 'product') {
+            await redeemProductByPoints(userId, item.id, 1)
+          } else if (item.kind === 'coupon') {
+            await redeemCouponByPoints(userId, item.id)
+          } else if (item.kind === 'item_card') {
+            await redeemItemCardByPoints(userId, item.id, 1)
+          }
           
-          // Refresh products to update stock/points if needed
-          setTimeout(() => {
-             loadProducts()
-          }, 1500)
-        } catch (e) {
-          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
-        } finally {
           uni.hideLoading()
+          uni.showModal({
+            title: '兑换成功',
+            content: `您已成功兑换 ${item.title || item.name}`,
+            showCancel: false,
+            success: () => {
+              loadItems()
+            }
+          })
+        } catch (e) {
+          uni.hideLoading()
+          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
         }
       }
     }
   })
 }
 
-// Filter logic
-const allProducts = ref([]) // Store all fetched products for client-side filtering
-
-function applyFilters() {
-  const k = String(keyword.value || '').trim().toLowerCase()
-  const min = Number(minPrice.value)
-  const max = Number(maxPrice.value)
-  const hasMin = !isNaN(min) && String(minPrice.value).trim() !== ''
-  const hasMax = !isNaN(max) && String(maxPrice.value).trim() !== ''
-  
-  const list = allProducts.value
-  products.value = list.filter(p => {
-    const title = String(p.title || '').toLowerCase()
-    if (k && !title.includes(k)) return false
-    const priceNum = typeof p.price === 'number' ? p.price : Number(p.price)
-    if (hasMin) {
-      if (isNaN(priceNum)) return false
-      if (priceNum < min) return false
-    }
-    if (hasMax) {
-      if (isNaN(priceNum)) return false
-      if (priceNum > max) return false
-    }
-    return true
-  })
-}
-
-function onSearchConfirm() { applyFilters() }
-function onApplyFilters() { applyFilters() }
-
-async function loadProducts() {
-  try {
-    const cached = uni.getStorageSync(CACHE_KEY)
-    if (cached && cached.data && Date.now() - cached.ts < TTL_MS) {
-       allProducts.value = cached.data
-       applyFilters()
-       return
-    }
-
-    const first = await apiGet('/api/app/products', { page: 1 })
-    // Simple extraction
-    let list = []
-    let total = 0
-    if (first && first.list) { list = first.list; total = first.total }
-    else if (first && first.data && first.data.list) { list = first.data.list; total = first.data.total }
-    
-    // If not too many, fetch all for better client UX
-    const pageSize = 20
-    const totalPages = Math.ceil((total || 0) / pageSize)
-    
-    if (totalPages > 1) {
-       const tasks = []
-       for (let p = 2; p <= totalPages; p++) {
-          tasks.push(apiGet('/api/app/products', { page: p }))
-       }
-       const results = await Promise.allSettled(tasks)
-       results.forEach(r => {
-         if (r.status === 'fulfilled') {
-            const val = r.value
-            const subList = (val && val.list) || (val && val.data && val.data.list) || []
-            if (Array.isArray(subList)) list = list.concat(subList)
-         }
-       })
-    }
-    
-    const normalized = normalizeProducts(list)
-    allProducts.value = normalized
-    applyFilters()
-    uni.setStorageSync(CACHE_KEY, { data: normalized, ts: Date.now() })
-
-  } catch (e) {
-    console.error(e)
-    products.value = []
-  }
-}
-
-onShow(async () => {
+onShow(() => {
   const token = uni.getStorageSync('token')
   const phoneBound = !!uni.getStorageSync('phone_bound')
-  if (!token || !phoneBound) {
-    uni.showModal({
-      title: '提示',
-      content: '请先登录并绑定手机号',
-      confirmText: '去登录',
-      success: (res) => {
-        if (res.confirm) {
-          uni.navigateTo({ url: '/pages/login/index' })
-        }
-      }
-    })
-    return
-  }
-  
-  loading.value = true
-  await loadProducts()
-  loading.value = false
-})
-
-// 分享功能
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
-
-onShareAppMessage(() => {
-  const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
-  return {
-    title: '柯大鸭潮玩商城 - 好物等你来兑',
-    path: `/pages/index/index?invite_code=${inviteCode}`,
-    imageUrl: '/static/logo.png'
+  if (token && phoneBound) {
+    loadItems()
+  } else {
+    // Redirect logic if needed
   }
 })
 
-onShareTimeline(() => {
-  const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
-  return {
-    title: '柯大鸭潮玩商城 - 好物等你来兑',
-    query: `invite_code=${inviteCode}`,
-    imageUrl: '/static/logo.png'
-  }
-})
+watch(keyword, () => applyFilters())
 
 </script>
 
@@ -279,302 +262,179 @@ onShareTimeline(() => {
   overflow-x: hidden;
 }
 
-.bg-decoration {
-  position: fixed;
-  top: 0; left: 0; width: 100%; height: 100vh;
-  pointer-events: none;
-  z-index: 0;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: -100rpx; left: -100rpx;
-    width: 600rpx; height: 600rpx;
-    background: radial-gradient(circle, rgba($brand-primary, 0.1) 0%, transparent 70%);
-    filter: blur(60rpx);
-    border-radius: 50%;
-    opacity: 0.6;
-    animation: float 10s ease-in-out infinite;
-  }
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 10%; right: -100rpx;
-    width: 500rpx; height: 500rpx;
-    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
-    filter: blur(50rpx);
-    border-radius: 50%;
-    opacity: 0.5;
-    animation: float 15s ease-in-out infinite reverse;
-  }
-}
-
-@keyframes float {
-  0%, 100% { transform: translate(0, 0); }
-  50% { transform: translate(30rpx, 50rpx); }
-}
-
 /* 顶部 Header */
 .header-section {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 0; left: 0; right: 0;
   z-index: 100;
-  background: $bg-glass;
+  background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(20rpx);
-  padding: 0 24rpx 24rpx;
-  box-shadow: $shadow-sm;
-  border-bottom: 1rpx solid $border-color-light;
-}
-.header-placeholder {
-  height: 160rpx; /* 根据 header 高度调整 */
+  padding: 20rpx 24rpx 0;
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
 }
+.header-placeholder { height: 180rpx; }
 
-.page-title {
-  font-size: 36rpx;
-  font-weight: 800;
-  color: $text-main;
-  padding: 20rpx 0;
-}
-
-/* 搜索框 */
-.search-box {
-  margin-bottom: 20rpx;
-  margin-top: 20rpx;
-}
+.search-box { margin-bottom: 20rpx; }
 .search-input-wrap {
-  display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  display: flex; align-items: center;
+  background: rgba(0, 0, 0, 0.04);
   border-radius: $radius-round;
-  padding: 18rpx 24rpx;
-  transition: all 0.3s;
-}
-.search-input-wrap:focus-within {
-  background: $bg-card;
-  border-color: $brand-primary;
-  box-shadow: 0 0 0 4rpx rgba($brand-primary, 0.1);
-}
-.search-icon {
-  font-size: 28rpx;
-  margin-right: 16rpx;
-  opacity: 0.5;
-}
-.search-input {
-  flex: 1;
-  font-size: 28rpx;
-  color: $text-main;
-}
-.placeholder-style {
-  color: $text-tertiary;
+  padding: 16rpx 24rpx;
 }
+.search-icon { font-size: 28rpx; margin-right: 16rpx; opacity: 0.5; }
+.search-input { flex: 1; font-size: 26rpx; color: $text-main; }
+.placeholder-style { color: $text-tertiary; }
 
-/* 筛选行 */
-.filter-row {
+/* Tabs */
+.tab-row {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20rpx;
+  justify-content: space-around;
+  padding-bottom: 4rpx;
 }
-.price-range {
-  flex: 1;
+.tab-item {
+  position: relative;
+  padding: 16rpx 20rpx;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  background: $bg-secondary;
-  border-radius: $radius-md;
-  padding: 10rpx 20rpx;
 }
-.price-label {
-  font-size: 24rpx;
-  color: $text-sub;
-  margin-right: 16rpx;
+.tab-text {
+  font-size: 28rpx;
+  color: $text-secondary;
+  font-weight: 500;
+  transition: all 0.2s;
 }
-.price-input {
-  flex: 1;
-  font-size: 26rpx;
-  text-align: center;
-  color: $text-main;
+.tab-item.active .tab-text {
+  color: $brand-primary;
+  font-weight: 700;
+  font-size: 30rpx;
 }
-.price-ph {
-  color: $text-tertiary;
-  font-size: 24rpx;
-}
-.price-sep {
-  color: $text-tertiary;
-  margin: 0 10rpx;
-}
-.filter-btn {
+.tab-line {
+  position: absolute;
+  bottom: 0;
+  width: 40rpx;
+  height: 6rpx;
   background: $gradient-brand;
-  color: $text-inverse;
-  font-size: 26rpx;
-  font-weight: 600;
-  border-radius: $radius-md;
-  padding: 0 32rpx;
-  height: 64rpx;
-  line-height: 64rpx;
-  border: none;
-  box-shadow: $shadow-sm;
-}
-.btn-hover {
-  opacity: 0.9;
-  transform: scale(0.98);
+  border-radius: 4rpx;
 }
 
-/* 商品 Grid 容器 */
-.products-container {
-  padding: 24rpx;
-}
+.content-container { padding: 24rpx; }
+
+/* 商品 Grid */
 .products-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20rpx;
 }
-
-/* 商品卡片 */
-.product-item {
-  animation: fadeInUp 0.5s ease-out backwards;
-}
-@for $i from 1 through 10 {
-  .product-item:nth-child(#{$i}) {
-    animation-delay: #{$i * 0.05}s;
-  }
-}
-
 .product-card {
-  background: $bg-card;
+  background: #fff;
   border-radius: $radius-lg;
   overflow: hidden;
-  box-shadow: $shadow-card;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.3s ease;
-}
-.product-item:active .product-card {
-  transform: scale(0.98);
   box-shadow: $shadow-sm;
 }
-
 .thumb-wrap {
-  position: relative;
-  width: 100%;
-  padding-top: 100%; /* 1:1 Aspect Ratio */
-  background: $bg-secondary;
-}
-.product-thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  position: relative; width: 100%; padding-top: 100%;
+  background: #f8f8f8;
 }
+.product-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 .stock-tag {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  background: rgba($accent-red, 0.9);
-  color: #fff;
-  font-size: 20rpx;
-  padding: 4rpx 12rpx;
+  position: absolute; bottom: 0; right: 0;
+  background: rgba($brand-primary, 0.9);
+  color: #fff; font-size: 20rpx; padding: 4rpx 12rpx;
   border-top-left-radius: 12rpx;
-  backdrop-filter: blur(4px);
-  font-weight: 700;
-  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.1);
+  &.out { background: #999; }
 }
-
-.product-info {
-  padding: 20rpx;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
+.product-info { padding: 16rpx; }
 .product-title {
-  font-size: 28rpx;
-  color: $text-main;
-  line-height: 1.4;
-  height: 2.8em; /* 2 lines */
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin-bottom: 16rpx;
-  font-weight: 600;
+  font-size: 26rpx; color: $text-main; font-weight: 600;
+  line-height: 1.4; height: 2.8em; overflow: hidden;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  margin-bottom: 12rpx;
 }
-
-.product-bottom {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 8rpx;
-}
-.price-row {
-  display: flex; align-items: baseline;
-}
-.points-val { font-size: 36rpx; font-weight: 700; color: #FF9800; }
-.points-unit { font-size: 22rpx; color: #FF9800; margin-left: 4rpx; }
-.price-symbol { font-size: 24rpx; color: #FF3B30; }
-.price-val { font-size: 36rpx; font-weight: 700; color: #FF3B30; }
-
+.product-bottom { display: flex; align-items: center; justify-content: space-between; }
+.points-val { font-size: 32rpx; font-weight: 800; color: #FF9800; font-family: 'DIN-Bold'; }
+.points-unit { font-size: 20rpx; color: #FF9800; margin-left: 2rpx; }
 .redeem-btn {
-  background: #FF9800;
-  color: #fff;
-  font-size: 24rpx;
-  padding: 8rpx 20rpx;
-  border-radius: 30rpx;
-  margin-left: auto;
+  background: $gradient-brand; color: #fff; font-size: 22rpx;
+  padding: 6rpx 18rpx; border-radius: 24rpx; font-weight: 600;
 }
 
-/* Loading & Empty */
-.loading-wrap {
-  padding: 100rpx 0;
+/* 优惠券 (Ticket Style) */
+.coupons-list { display: flex; flex-direction: column; gap: 24rpx; }
+.coupon-card {
   display: flex;
-  justify-content: center;
+  background: #fff;
+  border-radius: $radius-lg;
+  height: 180rpx;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
 }
+.coupon-left {
+  width: 200rpx;
+  background: linear-gradient(135deg, #FF6B6B, #FF3B30);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  color: #fff;
+}
+.coupon-val-row { display: flex; align-items: baseline; }
+.coupon-symbol { font-size: 24rpx; font-weight: 600; }
+.coupon-val { font-size: 56rpx; font-weight: 800; font-family: 'DIN-Bold'; }
+.coupon-limit { font-size: 20rpx; opacity: 0.9; }
+
+.coupon-divider {
+  width: 2rpx; position: relative;
+  background: #eee;
+  .notch {
+    position: absolute; width: 24rpx; height: 24rpx; background: $bg-page;
+    border-radius: 50%; left: -12rpx;
+    &.top { top: -12rpx; }
+    &.bottom { bottom: -12rpx; }
+  }
+}
+.coupon-right {
+  flex: 1; padding: 24rpx;
+  display: flex; flex-direction: column; justify-content: space-between;
+}
+.coupon-name { font-size: 30rpx; font-weight: 700; color: $text-main; }
+.coupon-bottom { display: flex; align-items: center; justify-content: space-between; }
+.coupon-price .p-val { font-size: 36rpx; font-weight: 800; color: #FF9800; }
+.coupon-price .p-unit { font-size: 22rpx; color: #FF9800; }
+.coupon-btn {
+  background: #333; color: #fff; font-size: 24rpx;
+  padding: 10rpx 24rpx; border-radius: 30rpx; font-weight: 600;
+}
+
+/* 道具卡 (Card Style) */
+.item-cards-list { display: flex; flex-direction: column; gap: 24rpx; }
+.item-card {
+  display: flex; background: #fff; border-radius: $radius-lg; padding: 24rpx;
+  box-shadow: $shadow-sm; align-items: center;
+}
+.ic-icon-wrap {
+  width: 100rpx; height: 100rpx; background: #f0f0f0;
+  border-radius: $radius-md; display: flex; align-items: center; justify-content: center;
+  font-size: 48rpx; margin-right: 24rpx;
+}
+.ic-info { flex: 1; display: flex; flex-direction: column; }
+.ic-name { font-size: 30rpx; font-weight: 700; color: $text-main; margin-bottom: 4rpx; }
+.ic-desc { font-size: 22rpx; color: $text-tertiary; margin-bottom: 20rpx; }
+.ic-bottom { display: flex; align-items: center; justify-content: space-between; }
+.ic-price .p-val { font-size: 32rpx; font-weight: 800; color: #FF9800; }
+.ic-btn {
+  background: $gradient-brand; color: #fff; font-size: 24rpx;
+  padding: 8rpx 24rpx; border-radius: 30rpx;
+}
+
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; padding-top: 100rpx;
+}
+.empty-img { width: 240rpx; opacity: 0.6; }
+.empty-text { color: $text-tertiary; font-size: 26rpx; margin-top: 20rpx; }
+
+.loading-wrap { padding: 100rpx 0; display: flex; justify-content: center; }
 .spinner {
-  width: 50rpx;
-  height: 50rpx;
-  border: 4rpx solid rgba($brand-primary, 0.2);
-  border-top-color: $brand-primary;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  width: 48rpx; height: 48rpx; border: 4rpx solid #eee; border-top-color: $brand-primary;
+  border-radius: 50%; animation: spin 0.8s linear infinite;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 100rpx;
-}
-.empty-img {
-  width: 240rpx;
-  margin-bottom: 24rpx;
-  opacity: 0.6;
-}
-.empty-text {
-  color: $text-tertiary;
-  font-size: 28rpx;
-}
-
-.check-text {
-  font-size: 26rpx;
-  color: $text-sub;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 </style>
diff --git a/pages/tasks/index.vue b/pages/tasks/index.vue
new file mode 100644
index 0000000..5858bf5
--- /dev/null
+++ b/pages/tasks/index.vue
@@ -0,0 +1,808 @@
+<template>
+  <view class="page-container">
+    <!-- 顶部装饰背景 - 漂浮光球 -->
+    <view class="bg-decoration"></view>
+
+    <view class="header-area">
+      <view class="page-title">任务中心</view>
+      <view class="page-subtitle">Task Center</view>
+    </view>
+
+    <!-- 进度统计卡片 - 毛玻璃风格 -->
+    <view class="progress-card glass-card">
+      <view class="progress-header">
+        <text class="progress-title">📊 我的任务进度</text>
+      </view>
+      <view class="progress-stats">
+        <view class="stat-item">
+          <text class="stat-value highlight">{{ userProgress.orderCount || 0 }}</text>
+          <text class="stat-label">累计订单</text>
+        </view>
+        <view class="stat-divider"></view>
+        <view class="stat-item">
+          <text class="stat-value highlight">{{ userProgress.inviteCount || 0 }}</text>
+          <text class="stat-label">邀请人数</text>
+        </view>
+        <view class="stat-divider"></view>
+        <view class="stat-item">
+          <view class="stat-value first-order-check" :class="{ done: userProgress.firstOrder }">
+            {{ userProgress.firstOrder ? '✓' : '—' }}
+          </view>
+          <text class="stat-label">首单完成</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 任务列表 -->
+    <scroll-view 
+      scroll-y 
+      class="content-scroll"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+    >
+      <!-- 加载状态 -->
+      <view v-if="loading && tasks.length === 0" class="loading-state">
+        <view class="spinner"></view>
+        <text>加载中...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="tasks.length === 0" class="empty-state">
+        <text class="empty-icon">📝</text>
+        <text class="empty-text">暂无可用任务</text>
+        <text class="empty-hint">敬请期待更多精彩活动</text>
+      </view>
+
+      <!-- 任务卡片列表 -->
+      <view v-else class="task-list">
+        <view 
+          v-for="(task, index) in tasks" 
+          :key="task.id" 
+          class="task-card"
+          :style="{ animationDelay: `${index * 0.1}s` }"
+        >
+          <!-- 任务头部 -->
+          <view class="task-header" @click="toggleTask(task.id)">
+            <view class="task-info">
+              <text class="task-icon">{{ getTaskIcon(task) }}</text>
+              <view class="task-meta">
+                <text class="task-name">{{ task.name }}</text>
+                <text class="task-desc">{{ task.description }}</text>
+              </view>
+            </view>
+            <view class="task-status-wrap">
+              <view class="task-status" :class="getTaskStatusClass(task)">
+                {{ getTaskStatusText(task) }}
+              </view>
+              <text class="expand-arrow" :class="{ expanded: expandedTasks[task.id] }">›</text>
+            </view>
+          </view>
+
+          <!-- 档位列表 (可展开) -->
+          <view class="tier-list" v-if="expandedTasks[task.id] && task.tiers && task.tiers.length > 0">
+            <view 
+              v-for="tier in task.tiers" 
+              :key="tier.id" 
+              class="tier-item"
+              :class="{ 'tier-claimed': isTierClaimed(task.id, tier.id), 'tier-claimable': isTierClaimable(task, tier) }"
+            >
+              <view class="tier-left">
+                <view class="tier-condition">
+                  <text class="tier-badge">{{ getTierBadge(tier) }}</text>
+                  <text class="tier-text">{{ getTierConditionText(tier) }}</text>
+                </view>
+                <view class="tier-reward">
+                  <text class="reward-icon">🎁</text>
+                  <text class="reward-text">{{ getTierRewardText(task, tier) }}</text>
+                </view>
+              </view>
+              <view class="tier-right">
+                <!-- 已领取 -->
+                <view v-if="isTierClaimed(task.id, tier.id)" class="tier-btn claimed">
+                  <text>已领取</text>
+                </view>
+                <!-- 可领取 -->
+                <view v-else-if="isTierClaimable(task, tier)" class="tier-btn claimable" @click="claimReward(task, tier)">
+                  <text>{{ claiming[`${task.id}_${tier.id}`] ? '领取中...' : '领取' }}</text>
+                </view>
+                <!-- 进度中 -->
+                <view v-else class="tier-progress">
+                  <text class="progress-text">{{ getTierProgressText(task, tier) }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 无档位提示 -->
+          <view class="no-tier-hint" v-if="expandedTasks[task.id] && (!task.tiers || task.tiers.length === 0)">
+            <text>暂无可领取档位</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getTasks, getTaskProgress, claimTaskReward } from '../../api/appUser'
+
+const tasks = ref([])
+const loading = ref(false)
+const isRefreshing = ref(false)
+const expandedTasks = reactive({})
+const claiming = reactive({})
+
+// 用户进度 (汇总)
+const userProgress = reactive({
+  orderCount: 0,
+  inviteCount: 0,
+  firstOrder: false,
+  claimedTiers: {} // { taskId: [tierId1, tierId2] }
+})
+
+// 获取用户ID
+function getUserId() {
+  return uni.getStorageSync('user_id')
+}
+
+// 检查登录状态
+function checkAuth() {
+  const token = uni.getStorageSync('token')
+  const userId = getUserId()
+  if (!token || !userId) {
+    uni.showModal({
+      title: '提示',
+      content: '请先登录',
+      confirmText: '去登录',
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateTo({ url: '/pages/login/index' })
+        }
+      }
+    })
+    return false
+  }
+  return true
+}
+
+// 获取任务图标
+function getTaskIcon(task) {
+  const name = (task.name || '').toLowerCase()
+  if (name.includes('首单') || name.includes('first')) return '🎁'
+  if (name.includes('订单') || name.includes('order')) return '📦'
+  if (name.includes('邀请') || name.includes('invite')) return '👥'
+  if (name.includes('签到') || name.includes('check')) return '📅'
+  if (name.includes('分享') || name.includes('share')) return '📣'
+  return '⭐'
+}
+
+// 获取任务状态类
+function getTaskStatusClass(task) {
+  const progress = userProgress.claimedTiers[task.id] || []
+  const allTiers = task.tiers || []
+  if (allTiers.length === 0) return 'status-waiting'
+  
+  // 检查是否全部完成
+  const allClaimed = allTiers.every(t => progress.includes(t.id))
+  if (allClaimed) return 'status-done'
+  
+  // 检查是否有可领取的
+  if (allTiers.some(t => isTierClaimable(task, t) && !progress.includes(t.id))) {
+    return 'status-claimable'
+  }
+  
+  return 'status-progress'
+}
+
+// 获取任务状态文字
+function getTaskStatusText(task) {
+  const progress = userProgress.claimedTiers[task.id] || []
+  const allTiers = task.tiers || []
+  if (allTiers.length === 0) return '暂无档位'
+  
+  const allClaimed = allTiers.every(t => progress.includes(t.id))
+  if (allClaimed) return '已完成'
+  
+  if (allTiers.some(t => isTierClaimable(task, t) && !progress.includes(t.id))) {
+    return '可领取'
+  }
+  
+  return '进行中'
+}
+
+// 展开/收起任务
+function toggleTask(taskId) {
+  expandedTasks[taskId] = !expandedTasks[taskId]
+}
+
+// 获取档位徽章
+function getTierBadge(tier) {
+  const metric = tier.metric || ''
+  if (metric === 'first_order') return '首'
+  if (metric === 'order_count') return `${tier.threshold}单`
+  if (metric === 'invite_count') return `${tier.threshold}人`
+  return tier.threshold || ''
+}
+
+// 获取档位条件文字
+function getTierConditionText(tier) {
+  const metric = tier.metric || ''
+  if (metric === 'first_order') return '完成首笔订单'
+  if (metric === 'order_count') return `累计下单 ${tier.threshold} 笔`
+  if (metric === 'invite_count') return `邀请 ${tier.threshold} 位好友`
+  return `达成 ${tier.threshold}`
+}
+
+// 获取档位奖励文字
+function getTierRewardText(task, tier) {
+  const rewards = (task.rewards || []).filter(r => r.tier_id === tier.id)
+  if (rewards.length === 0) return '神秘奖励'
+  
+  const texts = rewards.map(r => {
+    const type = r.reward_type || ''
+    const payload = r.reward_payload || {}
+    const qty = r.quantity || 1
+    
+    if (type === 'points') {
+      const value = payload.value || payload.amount || qty
+      return `${value}积分`
+    }
+    if (type === 'coupon') {
+      const value = payload.value || payload.amount
+      return value ? `¥${value / 100}优惠券` : '优惠券'
+    }
+    if (type === 'item_card') {
+      const name = payload.name || '道具卡'
+      return qty > 1 ? `${name}×${qty}` : name
+    }
+    if (type === 'title') {
+      return payload.name || '专属称号'
+    }
+    return '奖励'
+  })
+  
+  return texts.join(' + ')
+}
+
+// 是否已领取
+function isTierClaimed(taskId, tierId) {
+  const claimed = userProgress.claimedTiers[taskId] || []
+  return claimed.includes(tierId)
+}
+
+// 是否可领取
+function isTierClaimable(task, tier) {
+  const metric = tier.metric || ''
+  const threshold = tier.threshold || 0
+  const operator = tier.operator || '>='
+  
+  let current = 0
+  if (metric === 'first_order') {
+    return userProgress.firstOrder
+  } else if (metric === 'order_count') {
+    current = userProgress.orderCount || 0
+  } else if (metric === 'invite_count') {
+    current = userProgress.inviteCount || 0
+  }
+  
+  if (operator === '>=') return current >= threshold
+  if (operator === '==') return current === threshold
+  if (operator === '>') return current > threshold
+  return current >= threshold
+}
+
+// 获取进度文字
+function getTierProgressText(task, tier) {
+  const metric = tier.metric || ''
+  const threshold = tier.threshold || 0
+  
+  let current = 0
+  if (metric === 'first_order') {
+    return userProgress.firstOrder ? '已完成' : '未完成'
+  } else if (metric === 'order_count') {
+    current = userProgress.orderCount || 0
+  } else if (metric === 'invite_count') {
+    current = userProgress.inviteCount || 0
+  }
+  
+  return `${current}/${threshold}`
+}
+
+// 领取奖励
+async function claimReward(task, tier) {
+  const key = `${task.id}_${tier.id}`
+  if (claiming[key]) return
+  
+  uni.vibrateShort({ type: 'medium' })
+  claiming[key] = true
+  try {
+    const userId = getUserId()
+    await claimTaskReward(task.id, userId, tier.id)
+    
+    // 更新本地状态
+    if (!userProgress.claimedTiers[task.id]) {
+      userProgress.claimedTiers[task.id] = []
+    }
+    userProgress.claimedTiers[task.id].push(tier.id)
+    
+    uni.showToast({ title: '领取成功！', icon: 'success' })
+  } catch (e) {
+    console.error('领取失败:', e)
+    uni.showToast({ title: e.message || '领取失败', icon: 'none' })
+  } finally {
+    claiming[key] = false
+  }
+}
+
+// 下拉刷新
+async function onRefresh() {
+  isRefreshing.value = true
+  await fetchData()
+  isRefreshing.value = false
+}
+
+// 获取数据
+async function fetchData() {
+  if (!checkAuth()) return
+  
+  loading.value = true
+  try {
+    const userId = getUserId()
+    
+    // 获取任务列表
+    const res = await getTasks(1, 50)
+    const list = res.list || res.data || []
+    tasks.value = list
+    
+    // 默认展开第一个任务
+    if (list.length > 0 && Object.keys(expandedTasks).length === 0) {
+      expandedTasks[list[0].id] = true
+    }
+    
+    // 获取用户进度 (取第一个任务的进度作为汇总)
+    if (list.length > 0) {
+      try {
+        const progressRes = await getTaskProgress(list[0].id, userId)
+        userProgress.orderCount = progressRes.order_count || 0
+        userProgress.inviteCount = progressRes.invite_count || 0
+        userProgress.firstOrder = progressRes.first_order || false
+        
+        // 初始化已领取的档位
+        if (progressRes.claimed_tiers) {
+          userProgress.claimedTiers[list[0].id] = progressRes.claimed_tiers
+        }
+      } catch (e) {
+        console.error('获取进度失败:', e)
+      }
+      
+      // 并行获取其他任务的进度
+      const otherTasks = list.slice(1)
+      const progressPromises = otherTasks.map(t => 
+        getTaskProgress(t.id, userId).catch(() => null)
+      )
+      const progressResults = await Promise.allSettled(progressPromises)
+      
+      progressResults.forEach((result, index) => {
+        if (result.status === 'fulfilled' && result.value) {
+          const taskId = otherTasks[index].id
+          userProgress.claimedTiers[taskId] = result.value.claimed_tiers || []
+        }
+      })
+    }
+  } catch (e) {
+    console.error('获取任务失败:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onLoad(() => {
+  fetchData()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: $bg-page;
+  position: relative;
+  overflow: hidden;
+}
+
+
+.header-area {
+  padding: $spacing-xl $spacing-lg;
+  padding-top: calc(env(safe-area-inset-top) + 20rpx);
+  position: relative;
+  z-index: 1;
+}
+
+.page-title {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: $text-main;
+  margin-bottom: 8rpx;
+  letter-spacing: 1rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.page-subtitle {
+  font-size: 24rpx;
+  color: $text-tertiary;
+  text-transform: uppercase;
+  letter-spacing: 2rpx;
+  font-weight: 600;
+}
+
+/* 进度统计卡片 */
+.progress-card {
+  @extend .glass-card;
+  margin: 0 $spacing-lg $spacing-lg;
+  padding: 30rpx;
+}
+
+.progress-header {
+  margin-bottom: 24rpx;
+}
+
+.progress-title {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: $text-sub;
+}
+
+.progress-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-value {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: $text-main;
+  font-family: 'DIN Alternate', sans-serif;
+  line-height: 1.2;
+}
+
+.stat-value.highlight {
+  color: $brand-primary;
+}
+
+.stat-value.first-order-check {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.05);
+  font-size: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-tertiary;
+  
+  &.done {
+    background: rgba($brand-primary, 0.1);
+    color: $brand-primary;
+  }
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: $text-tertiary;
+  margin-top: 8rpx;
+  font-weight: 500;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 50rpx;
+  background: $border-color-light;
+}
+
+/* 内容滚动区 */
+.content-scroll {
+  height: calc(100vh - 400rpx);
+  padding: 0 $spacing-lg $spacing-lg;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: $text-tertiary;
+  font-size: 26rpx;
+  gap: 16rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  color: $text-tertiary;
+  font-size: 28rpx;
+  margin-bottom: 12rpx;
+}
+
+.empty-hint {
+  color: $text-tertiary;
+  font-size: 24rpx;
+  opacity: 0.6;
+}
+
+/* 任务列表 */
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+/* 任务卡片 */
+.task-card {
+  background: #fff;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+  animation: fadeInUp 0.5s ease-out backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.task-header {
+  padding: 24rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  &:active {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.task-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.task-icon {
+  font-size: 40rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.task-meta {
+  flex: 1;
+  overflow: hidden;
+}
+
+.task-name {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: $text-main;
+  display: block;
+  margin-bottom: 4rpx;
+}
+
+.task-desc {
+  font-size: 24rpx;
+  color: $text-sub;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-status-wrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
+
+.task-status {
+  font-size: 22rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 100rpx;
+  margin-right: 8rpx;
+  
+  &.status-done {
+    background: rgba($uni-color-success, 0.1);
+    color: $uni-color-success;
+  }
+  
+  &.status-claimable {
+    background: rgba($brand-primary, 0.1);
+    color: $brand-primary;
+    font-weight: 700;
+  }
+  
+  &.status-progress {
+    background: rgba($brand-primary, 0.05);
+    color: $text-sub;
+  }
+  
+  &.status-waiting {
+    background: #f5f5f5;
+    color: $text-tertiary;
+  }
+}
+
+.expand-arrow {
+  font-size: 28rpx;
+  color: $text-tertiary;
+  transition: transform 0.3s;
+  
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+/* 档位列表 */
+.tier-list {
+  border-top: 1rpx solid $border-color-light;
+  padding: 16rpx 24rpx 24rpx;
+  background: #fafafa;
+}
+
+.tier-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: #fff;
+  border-radius: $radius-md;
+  margin-bottom: 12rpx;
+  border: 1rpx solid $border-color-light;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  &.tier-claimed {
+    background: #f5f5f5;
+    opacity: 0.7;
+  }
+  
+  &.tier-claimable {
+    border-color: $brand-primary;
+    background: rgba($brand-primary, 0.02);
+  }
+}
+
+.tier-left {
+  flex: 1;
+  overflow: hidden;
+}
+
+.tier-condition {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.tier-badge {
+  background: $text-main;
+  color: #fff;
+  font-size: 18rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 6rpx;
+  margin-right: 12rpx;
+  font-weight: 700;
+}
+
+.tier-text {
+  font-size: 26rpx;
+  color: $text-main;
+  font-weight: 500;
+}
+
+.tier-reward {
+  display: flex;
+  align-items: center;
+}
+
+.reward-icon {
+  font-size: 20rpx;
+  margin-right: 6rpx;
+}
+
+.reward-text {
+  font-size: 22rpx;
+  color: $brand-primary;
+}
+
+.tier-right {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
+
+.tier-btn {
+  padding: 10rpx 24rpx;
+  border-radius: 100rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  
+  &.claimed {
+    background: #eee;
+    color: $text-tertiary;
+  }
+  
+  &.claimable {
+    background: $brand-primary;
+    color: #fff;
+    box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.3);
+    
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
+
+.tier-progress {
+  padding: 10rpx 16rpx;
+}
+
+.progress-text {
+  font-size: 24rpx;
+  color: $text-sub;
+  font-family: 'DIN Alternate', sans-serif;
+}
+
+.no-tier-hint {
+  padding: 30rpx;
+  text-align: center;
+  color: $text-tertiary;
+  font-size: 24rpx;
+  background: #fafafa;
+  border-top: 1rpx solid $border-color-light;
+}
+
+/* 加载动画 */
+.spinner {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid $bg-secondary;
+  border-top-color: $text-tertiary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/uni.scss b/uni.scss
index 3f2c5c7..ce1b5cf 100644
--- a/uni.scss
+++ b/uni.scss
@@ -182,4 +182,88 @@ $uni-font-size-paragraph: 15px;
   display: -webkit-box;
   -webkit-line-clamp: $lines;
   -webkit-box-orient: vertical;
+}
+
+/* ============================================
+   💎 核心公共 UI 类 (Premium UI 6.0)
+   ============================================ */
+
+/* 1. 统一背景装饰 - 漂浮光球 */
+.bg-decoration {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100rpx; right: -100rpx;
+    width: 600rpx; height: 600rpx;
+    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
+    filter: blur(60rpx);
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: float 10s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 200rpx; left: -200rpx;
+    width: 500rpx; height: 500rpx;
+    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
+    filter: blur(50rpx);
+    border-radius: 50%;
+    opacity: 0.6;
+    animation: float 15s ease-in-out infinite reverse;
+  }
+}
+
+/* 2. 毛玻璃卡片基类 */
+.glass-card {
+  background: $bg-glass;
+  backdrop-filter: blur(20rpx);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: $shadow-card;
+  border-radius: $radius-lg;
+  position: relative;
+  z-index: 1;
+}
+
+/* 3. 通用功能按钮 */
+.btn-primary {
+  background: $gradient-brand;
+  color: #fff;
+  font-weight: 700;
+  border-radius: $radius-round;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: $shadow-warm;
+  transition: all 0.2s $ease-out;
+  
+  &:active {
+    transform: scale(0.96);
+    opacity: 0.9;
+  }
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.9);
+  color: $text-main;
+  font-weight: 600;
+  border-radius: $radius-round;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: $shadow-sm;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.2s $ease-out;
+  
+  &:active {
+    transform: scale(0.96);
+    background: #fff;
+  }
 }
\ No newline at end of file
diff --git a/utils/activity.js b/utils/activity.js
index 878d1c0..1bf8862 100644
--- a/utils/activity.js
+++ b/utils/activity.js
@@ -94,10 +94,13 @@ export function normalizeRewards(list, cleanUrl = (u) => u) {
         level: levelToAlpha(i.prize_level ?? i.level ?? (detectBoss(i) ? 'BOSS' : '赏'))
     }))
     const total = items.reduce((acc, it) => acc + (it.weight > 0 ? it.weight : 0), 0)
-    const enriched = items.map(it => ({
-        ...it,
-        percent: total > 0 ? Math.round((it.weight / total) * 1000) / 10 : 0
-    }))
+    const enriched = items.map(it => {
+        const rawPercent = total > 0 ? (it.weight / total) * 100 : 0
+        return {
+            ...it,
+            percent: parseFloat(rawPercent.toFixed(2))  // 统一保留2位小数
+        }
+    })
     enriched.sort((a, b) => (b.percent - a.percent))
     return enriched
 }
@@ -143,7 +146,7 @@ export function groupRewardsByLevel(rewards) {
         return {
             level: key,
             rewards: levelRewards,
-            totalPercent: total.toFixed(1)
+            totalPercent: total.toFixed(2)  // 统一保留2位小数
         }
     })
 }
diff --git a/utils/cache.js b/utils/cache.js
index 4592ae9..a90b419 100644
--- a/utils/cache.js
+++ b/utils/cache.js
@@ -2,7 +2,7 @@
  * 缓存管理工具
  */
 
-const REWARD_CACHE_KEY = 'reward_cache_v1'
+const REWARD_CACHE_KEY = 'reward_cache_v2'  // v2: 修复概率精度问题
 const MATCHING_GAME_CACHE_KEY = 'matching_game_cache_v1'
 
 /**
diff --git a/utils/request.js b/utils/request.js
index 4c67358..d926771 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -22,7 +22,7 @@ function handleAuthExpired() {
 export function request({ url, method = 'GET', data = {}, header = {} }) {
   return new Promise((resolve, reject) => {
     const finalHeader = { ...buildDefaultHeaders(), ...header }
-    try { console.log('HTTP request', method, url, 'data', data, 'headers', finalHeader) } catch (e) {}
+    try { console.log('HTTP request', method, url, 'data', data, 'headers', finalHeader) } catch (e) { }
     uni.request({
       url: BASE_URL + url,
       method,
@@ -31,7 +31,7 @@ export function request({ url, method = 'GET', data = {}, header = {} }) {
       timeout: 15000,
       success: (res) => {
         const code = res.statusCode
-        try { console.log('HTTP response', method, url, 'status', code, 'body', res.data) } catch (e) {}
+        try { console.log('HTTP response', method, url, 'status', code, 'body', res.data) } catch (e) { }
         if (code >= 200 && code < 300) {
           const body = res.data
           resolve(body && body.data !== undefined ? body.data : body)
@@ -47,7 +47,7 @@ export function request({ url, method = 'GET', data = {}, header = {} }) {
         }
       },
       fail: (err) => {
-        try { console.error('HTTP fail', method, url, 'err', err) } catch (e) {}
+        try { console.error('HTTP fail', method, url, 'err', err) } catch (e) { }
         reject(err)
       }
     })
@@ -66,11 +66,11 @@ export function authRequest(options) {
   return request({ ...options, header })
 }
 
-export function redeemProductByPoints(user_id, product_id, count) {
+export function redeemProductByPoints(user_id, product_id, quantity) {
   return authRequest({
-    url: '/api/app/users/points/redeem-product',
+    url: `/api/app/users/${user_id}/points/redeem-product`,
     method: 'POST',
-    data: { user_id, product_id, count }
+    data: { product_id, quantity }
   })
 }