From dd12d8e500c50baa4a02ace9e8ee5c3ccab014d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=96=B9=E6=88=90?= <zfc9393@163.com>
Date: Wed, 17 Dec 2025 01:55:23 +0800
Subject: [PATCH] feat: add app sharing and enhance UI with animations and
 revamped coupon display.

---
 api/appUser.js                |   21 +-
 pages/activity/list/index.vue |   97 +++
 pages/cabinet/index.vue       |  142 ++++
 pages/index/index.vue         |  196 +++++
 pages/mine/index.vue          | 1462 +++++++++++++++++++++++++++++++--
 pages/shop/index.vue          |  126 +--
 6 files changed, 1856 insertions(+), 188 deletions(-)

diff --git a/api/appUser.js b/api/appUser.js
index 259d647..724bc6f 100644
--- a/api/appUser.js
+++ b/api/appUser.js
@@ -5,8 +5,8 @@ export function wechatLogin(code, invite_code) {
   return request({ url: '/api/app/users/weixin/login', method: 'POST', data })
 }
 
-export function getInventory(user_id, page = 1, page_size = 20){
-	return authRequest({ url: `/api/app/users/${user_id}/inventory`, method: 'GET', data: { page, page_size } })
+export function getInventory(user_id, page = 1, page_size = 20) {
+  return authRequest({ url: `/api/app/users/${user_id}/inventory`, method: 'GET', data: { page, page_size } })
 }
 
 export function bindPhone(user_id, code, extraHeader = {}) {
@@ -99,6 +99,18 @@ export function getUserCoupons(user_id, status, page = 1, page_size = 20) {
   return authRequest({ url: `/api/app/users/${user_id}/coupons`, method: 'GET', data })
 }
 
+export function getCouponStats(user_id) {
+  return authRequest({ url: `/api/app/users/${user_id}/coupons/stats`, method: 'GET' })
+}
+
+export function getCouponUsage(user_id, user_coupon_id, page = 1, page_size = 20) {
+  return authRequest({ url: `/api/app/users/${user_id}/coupons/${user_coupon_id}/usage`, method: 'GET', data: { page, page_size } })
+}
+
+export function redeemCouponByPoints(user_id, coupon_id) {
+  return authRequest({ url: `/api/app/users/${user_id}/points/redeem-coupon`, method: 'POST', data: { coupon_id } })
+}
+
 export function redeemCoupon(user_id, code) {
   return authRequest({ url: `/api/app/users/${user_id}/coupons/redeem`, method: 'POST', data: { code } })
 }
@@ -130,3 +142,8 @@ export function getTasks(page = 1, page_size = 20) {
 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 } })
 }
+
+// 获取用户邀请记录
+export function getUserInvites(user_id, page = 1, page_size = 20) {
+  return authRequest({ url: `/api/app/users/${user_id}/invites`, method: 'GET', data: { page, page_size } })
+}
diff --git a/pages/activity/list/index.vue b/pages/activity/list/index.vue
index 67cfed8..4775eb0 100644
--- a/pages/activity/list/index.vue
+++ b/pages/activity/list/index.vue
@@ -116,6 +116,27 @@ onLoad((opts) => {
   }
   loadData()
 })
+
+// 分享功能
+import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+
+onShareAppMessage(() => {
+  const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
+  return {
+    title: `${title.value || '精彩活动'} - 奇盒潮玩`,
+    path: `/pages/index/index?invite_code=${inviteCode}`,
+    imageUrl: '/static/logo.png'
+  }
+})
+
+onShareTimeline(() => {
+  const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
+  return {
+    title: `${title.value || '精彩活动'} - 奇盒潮玩`,
+    query: `invite_code=${inviteCode}`,
+    imageUrl: '/static/logo.png'
+  }
+})
 </script>
 
 <style scoped>
@@ -230,4 +251,80 @@ onLoad((opts) => {
   color: #999;
   font-size: 28rpx;
 }
+
+/* ============================================
+   活动列表 UX/UI 增强
+   ============================================ */
+
+/* 入场动画 */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6rpx); }
+}
+
+/* 卡片交错入场 */
+.activity-item:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.1s both; }
+.activity-item:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.15s both; }
+.activity-item:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.2s both; }
+.activity-item:nth-child(4) { animation: fadeInUp 0.4s ease-out 0.25s both; }
+.activity-item:nth-child(n+5) { animation: fadeInUp 0.4s ease-out 0.3s both; }
+
+/* 图片加载动画 */
+.thumb {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* 热门标签浮动 */
+.tag-hot {
+  animation: float 3s ease-in-out infinite;
+  background: linear-gradient(135deg, rgba(255,77,79,0.9), rgba(255,107,53,0.9));
+  color: #fff;
+}
+
+/* 卡片点击效果 */
+.activity-item {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.activity-item:active {
+  transform: scale(0.96) translateY(4rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+}
+
+/* GO 按钮脉冲 */
+.btn-go {
+  animation: pulse 2s infinite;
+  transition: all 0.2s ease;
+}
+.btn-go:active {
+  animation: none;
+  transform: scale(0.9);
+}
+
+/* 增强加载器 */
+.spinner {
+  border-width: 6rpx;
+  border-top-color: #FF6B35;
+}
+
+/* 空状态入场 */
+.empty {
+  animation: fadeInUp 0.5s ease-out;
+}
 </style>
diff --git a/pages/cabinet/index.vue b/pages/cabinet/index.vue
index 9b682fb..abc09cb 100644
--- a/pages/cabinet/index.vue
+++ b/pages/cabinet/index.vue
@@ -1189,4 +1189,146 @@ async function onShip() {
   font-size: 22rpx;
   color: #9CA3AF;
 }
+
+/* ============================================
+   盒柜 UX/UI 增强
+   ============================================ */
+
+/* 入场动画 */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes bounceIn {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+/* Tab 切换动画 */
+.tabs {
+  animation: fadeInUp 0.3s ease-out;
+}
+.tab-item {
+  transition: all 0.25s ease;
+}
+.tab-item:active {
+  transform: scale(0.96);
+}
+
+/* 库存卡片交错入场 */
+.inventory-item:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.1s both; }
+.inventory-item:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.15s both; }
+.inventory-item:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.2s both; }
+.inventory-item:nth-child(4) { animation: fadeInUp 0.4s ease-out 0.25s both; }
+.inventory-item:nth-child(n+5) { animation: fadeInUp 0.4s ease-out 0.3s both; }
+
+/* 发货单卡片交错入场 */
+.shipment-card:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.1s both; }
+.shipment-card:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.15s both; }
+.shipment-card:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.2s both; }
+.shipment-card:nth-child(n+4) { animation: fadeInUp 0.4s ease-out 0.25s both; }
+
+/* 卡片点击效果 */
+.inventory-item {
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.inventory-item:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
+}
+
+/* 选中时的高亮效果 */
+.inventory-item:has(.checkbox.checked) {
+  box-shadow: 0 8rpx 32rpx rgba(255, 107, 53, 0.15);
+  border: 2rpx solid rgba(255, 159, 67, 0.3);
+}
+
+/* 复选框动画 */
+.checkbox {
+  transition: all 0.2s ease;
+}
+.checkbox.checked {
+  animation: bounceIn 0.3s ease-out;
+}
+
+/* 底部操作栏增强 */
+.bottom-bar {
+  animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+/* 操作按钮动画 */
+.action-btn {
+  transition: all 0.2s ease;
+}
+.action-btn:active {
+  transform: scale(0.95);
+}
+.btn-redeem {
+  animation: pulse 2s infinite;
+}
+.btn-redeem:active {
+  animation: none;
+}
+
+/* 步进器按钮效果 */
+.step-btn {
+  transition: all 0.15s ease;
+}
+.step-btn:active {
+  background: #FF9F43 !important;
+  color: #fff !important;
+  transform: scale(0.9);
+}
+
+/* 全选栏入场 */
+.action-bar {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+/* 发货单卡片点击效果 */
+.shipment-card {
+  transition: all 0.25s ease;
+}
+.shipment-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
+}
+
+/* 复制按钮效果 */
+.express-copy {
+  transition: all 0.2s ease;
+}
+.express-copy:active {
+  background: #2563EB;
+  color: #fff;
+  transform: scale(0.95);
+}
+
+/* 缩略图图片悬浮效果 */
+.thumb-img {
+  transition: all 0.2s ease;
+}
+.thumb-img:active {
+  transform: scale(1.05);
+}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 17c7fc9..0fb8652 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -314,6 +314,24 @@ export default {
         confirmText: '知道了'
       })
     }
+  },
+  // 分享给好友
+  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'
+    }
+  },
+  // 分享到朋友圈
+  onShareTimeline() {
+    const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
+    return {
+      title: '奇盒潮玩 - 开箱惊喜等你来',
+      query: `invite_code=${inviteCode}`,
+      imageUrl: '/static/logo.png'
+    }
   }
 }
 </script>
@@ -682,4 +700,182 @@ export default {
   color: #9CA3AF;
   font-size: 28rpx;
 }
+
+/* ============================================
+   UX/UI 增强 - 动画与交互
+   ============================================ */
+
+/* 入场动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8rpx); }
+}
+
+/* Banner 入场动画 */
+.banner-box {
+  animation: scaleIn 0.5s ease-out;
+}
+
+/* 通知栏滑入 */
+.notice-bar {
+  animation: fadeInUp 0.4s ease-out 0.1s both;
+}
+
+/* 玩法卡片交错入场 */
+.game-card-large:first-child {
+  animation: fadeInUp 0.4s ease-out 0.2s both;
+}
+.game-card-large:last-child {
+  animation: fadeInUp 0.4s ease-out 0.3s both;
+}
+.game-card-small:nth-child(1) {
+  animation: fadeInUp 0.4s ease-out 0.35s both;
+}
+.game-card-small:nth-child(2) {
+  animation: fadeInUp 0.4s ease-out 0.4s both;
+}
+.game-card-small:nth-child(3) {
+  animation: fadeInUp 0.4s ease-out 0.45s both;
+}
+
+/* 活动卡片交错入场 */
+.activity-item:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.2s both; }
+.activity-item:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.25s both; }
+.activity-item:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.3s both; }
+.activity-item:nth-child(4) { animation: fadeInUp 0.4s ease-out 0.35s both; }
+.activity-item:nth-child(n+5) { animation: fadeInUp 0.4s ease-out 0.4s both; }
+
+/* 玻璃态搜索栏 */
+.search-bar {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+.search-bar:active {
+  transform: scale(0.98);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+}
+
+/* 卡片点击效果 */
+.game-card-large,
+.game-card-small {
+  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  cursor: pointer;
+}
+.game-card-large:active {
+  transform: scale(0.97);
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+}
+.game-card-small:active {
+  transform: scale(0.95);
+  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.08);
+}
+
+/* 活动卡片悬浮效果 */
+.activity-item {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.activity-item:active {
+  transform: scale(0.97) translateY(4rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+}
+
+/* GO 按钮脉冲动画 */
+.activity-btn-go {
+  animation: pulse 2s infinite;
+  transition: all 0.2s ease;
+}
+.activity-btn-go:active {
+  animation: none;
+  transform: scale(0.9);
+}
+
+/* 图片加载动画 */
+.activity-thumb {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* 热门标签浮动效果 */
+.activity-tag-hot {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Banner 图片悬浮效果 */
+.banner-image {
+  transition: transform 0.4s ease;
+}
+.banner-box:active .banner-image {
+  transform: scale(1.02);
+}
+
+/* 通知栏点击效果 */
+.notice-bar {
+  transition: all 0.2s ease;
+}
+.notice-bar:active {
+  background: #F0F0F0;
+  transform: scale(0.99);
+}
+
+/* 品牌标志动画 */
+.brand-star {
+  animation: float 2s ease-in-out infinite;
+}
+
+/* Section 标题增强 */
+.section-header {
+  animation: fadeInUp 0.4s ease-out 0.15s both;
+}
+
+/* 增强阴影效果 */
+.banner-box {
+  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.08);
+}
+.activity-item {
+  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.06);
+}
+
+/* 热门标签增强 */
+.activity-tag-hot {
+  background: linear-gradient(135deg, rgba(255,77,79,0.9), rgba(255,107,53,0.9));
+  color: #fff;
+  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.2);
+}
 </style>
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index c5421f8..cd7e38b 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -92,8 +92,8 @@
           <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDExbDMgM0wyMiA0Ii8+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIi8+PC9zdmc+" mode="aspectFit"></image>
           <text class="menu-label">任务中心</text>
         </view>
-        <view class="menu-item" @click="toAddresses"> <!-- 此处暂用 invite_log 占位 -->
-           <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiA0aDJhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDZ4MiAyIDAgMCAxLTItMnYtMTQiIC8+PHJlY3QgeD0iOCIgeT0iMiIgd2lkdGg9IjgiIGhlaWdodD0iNCIgcng9IjEiIHJ5PSIyIj48L3JlY3Q+PC9zdmc+" mode="aspectFit"></image>
+        <view class="menu-item" @click="showInvitesPopup">
+           <image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNyAyMXYtMmE0IDQgMCAwIDAtNC00SDdhNCA0IDAgMCAwLTQgNHYyIj48L3BhdGg+PGNpcmNsZSBjeD0iMTAiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48cGF0aCBkPSJNMjMgMjF2LTJhNCA0IDAgMCAwLTMtMy44NyI+PC9wYXRoPjxwYXRoIGQ9Ik0xNiAzLjEzYTQgNCAwIDAgMSAwIDcuNzUiPjwvcGF0aD48L3N2Zz4=" mode="aspectFit"></image>
            <text class="menu-label">邀请记录</text>
         </view>
         <view class="menu-item" @click="toAddresses">
@@ -146,41 +146,67 @@
           <text class="close-btn" @tap="closeCouponsPopup">×</text>
         </view>
         
-        <view class="popup-tabs">
-          <view class="popup-tab" :class="{ active: couponsTab === 0 }" @tap="switchCouponsTab(0)">未使用</view>
-          <view class="popup-tab" :class="{ active: couponsTab === 1 }" @tap="switchCouponsTab(1)">已使用</view>
+        <view class="popup-tabs coupon-tabs-3">
+          <view class="popup-tab" :class="{ active: couponsTab === 1 }" @tap="switchCouponsTab(1)">未使用</view>
+          <view class="popup-tab" :class="{ active: couponsTab === 2 }" @tap="switchCouponsTab(2)">已使用</view>
+          <view class="popup-tab" :class="{ active: couponsTab === 3 }" @tap="switchCouponsTab(3)">已过期</view>
         </view>
         
         <scroll-view scroll-y class="coupon-scroll" @scrolltolower="loadMoreCoupons">
           <view v-if="couponsLoading && couponsList.length === 0" class="status-text">加载中...</view>
           <view v-else-if="!couponsList || couponsList.length === 0" class="empty-state">
             <text class="empty-icon">🎟️</text>
-            <text class="empty-text">暂无优惠券</text>
+            <text class="empty-text">{{ getCouponEmptyText() }}</text>
           </view>
           
-          <view v-for="(item, index) in couponsList" :key="index" class="coupon-ticket" :class="{ 'used': couponsTab === 1 }">
-            <view class="coupon-left-section">
-              <view class="coupon-value">
+          <view v-for="(item, index) in couponsList" :key="item.id || index" class="coupon-ticket-v2" :class="getCouponCardClass(item)">
+            <!-- 左侧金额区域 -->
+            <view class="coupon-left-v2">
+              <view class="coupon-remaining">
                 <text class="coupon-symbol">¥</text>
-                <text class="coupon-amount">{{ formatCouponValue(item.remaining || item.amount || 0) }}</text>
+                <text class="coupon-amount-num">{{ formatCouponValue(item.remaining ?? item.amount ?? 0) }}</text>
               </view>
-              <text class="coupon-condition">满{{ formatCouponValue(item.min_amount || 0) }}可用</text>
+              <text class="coupon-label">{{ couponsTab === 1 ? '可用' : (couponsTab === 2 ? '已用' : '过期') }}</text>
             </view>
-            <view class="coupon-divider">
-              <view class="divider-circle top"></view>
-              <view class="divider-line"></view>
-              <view class="divider-circle bottom"></view>
+            
+            <!-- 中间分割线 -->
+            <view class="coupon-divider-v2">
+              <view class="divider-notch top"></view>
+              <view class="divider-dash"></view>
+              <view class="divider-notch bottom"></view>
             </view>
-            <view class="coupon-right-section">
-              <text class="coupon-name">{{ item.name || '优惠券' }}</text>
-              <text class="coupon-desc">{{ item.rules || item.description || '全场通用' }}</text>
-              <text class="coupon-expire">有效期至：{{ formatDate(item.valid_end || item.end_time) }}</text>
-              <view class="coupon-action" v-if="couponsTab === 0">
-                <text class="use-btn">去使用</text>
+            
+            <!-- 右侧信息区域 -->
+            <view class="coupon-right-v2">
+              <view class="coupon-header-row">
+                <text class="coupon-name-v2">{{ item.name || '优惠券' }}</text>
+                <view class="coupon-original" v-if="item.amount && item.remaining !== undefined && item.remaining !== item.amount">
+                  <text>原值 ¥{{ formatCouponValue(item.amount) }}</text>
+                </view>
               </view>
-              <view class="coupon-status-badge" v-else>
-                <text>{{ couponsTab === 1 ? '已使用' : '已过期' }}</text>
+              
+              <text class="coupon-rules">{{ item.rules || '全场通用' }}</text>
+              
+              <!-- 使用进度条 (仅当有使用记录时显示) -->
+              <view class="coupon-progress-wrap" v-if="item.amount && item.remaining !== undefined && item.remaining < item.amount">
+                <view class="coupon-progress-bar">
+                  <view class="coupon-progress-fill" :style="{ width: getCouponUsedPercent(item) + '%' }"></view>
+                </view>
+                <text class="coupon-progress-text">已用 {{ formatCouponValue(item.amount - item.remaining) }} ({{ getCouponUsedPercent(item) }}%)</text>
               </view>
+              
+              <view class="coupon-footer-row">
+                <text class="coupon-expire-v2">{{ formatCouponExpiry(item) }}</text>
+                <view class="coupon-action-v2" v-if="couponsTab === 1">
+                  <text class="use-btn-v2">去使用</text>
+                </view>
+                <view class="coupon-status-v2" v-else>
+                  <text class="status-tag" :class="couponsTab === 2 ? 'used' : 'expired'">{{ couponsTab === 2 ? '已使用' : '已过期' }}</text>
+                </view>
+              </view>
+              
+              <!-- 使用时间 (已使用状态) -->
+              <text class="coupon-used-time" v-if="couponsTab === 2 && item.used_at">使用时间：{{ formatDateTime(item.used_at) }}</text>
             </view>
           </view>
           
@@ -240,21 +266,25 @@
           <text class="close-btn" @tap="closeTasksPopup">×</text>
         </view>
         
-        <!-- 任务统计头部 -->
-        <view class="task-stats-bar">
-          <view class="stats-item">
-            <text class="stats-num">{{ tasksList.filter(t => t.status === 2).length }}</text>
-            <text class="stats-label">已完成</text>
+        <!-- 总体进度指示器 -->
+        <view class="overall-progress">
+          <view class="progress-circle">
+            <text class="progress-percent">{{ getOverallProgress() }}%</text>
+            <text class="progress-label">总完成率</text>
           </view>
-          <view class="stats-divider"></view>
-          <view class="stats-item">
-            <text class="stats-num">{{ tasksList.filter(t => t.status === 1).length }}</text>
-            <text class="stats-label">进行中</text>
-          </view>
-          <view class="stats-divider"></view>
-          <view class="stats-item">
-            <text class="stats-num">{{ tasksList.length }}</text>
-            <text class="stats-label">全部任务</text>
+          <view class="progress-stats">
+            <view class="stat-row">
+              <view class="stat-dot done"></view>
+              <text class="stat-text">已完成 {{ tasksList.filter(t => t.status === 2).length }} 个</text>
+            </view>
+            <view class="stat-row">
+              <view class="stat-dot ongoing"></view>
+              <text class="stat-text">进行中 {{ tasksList.filter(t => t.status === 1).length }} 个</text>
+            </view>
+            <view class="stat-row">
+              <view class="stat-dot waiting"></view>
+              <text class="stat-text">未开始 {{ tasksList.filter(t => t.status !== 1 && t.status !== 2).length }} 个</text>
+            </view>
           </view>
         </view>
         
@@ -265,40 +295,42 @@
             <text class="empty-text">暂无任务</text>
           </view>
           
-          <view v-for="(task, idx) in tasksList" :key="task.id || idx" class="task-card" :class="{ 'completed': task.status === 2 }">
-            <view class="task-icon-wrap">
-              <text class="task-icon">{{ getTaskIcon(task.type || task.name) }}</text>
+          <view v-for="(task, idx) in tasksList" :key="task.id || idx" class="task-card-v2" :class="getTaskCardClass(task.status)">
+            <!-- 左侧状态指示器 -->
+            <view class="task-status-indicator" :class="getTaskStatusClass(task.status)">
+              <text class="status-icon">{{ getStatusIcon(task.status) }}</text>
             </view>
-            <view class="task-main">
-              <view class="task-header">
-                <text class="task-name">{{ task.name || '任务' }}</text>
-                <view class="task-status-tag" :class="getTaskStatusClass(task.status)">
-                  {{ formatStatus(task.status) }}
-                </view>
+            
+            <view class="task-content">
+              <view class="task-title-row">
+                <text class="task-title">{{ task.name || '任务' }}</text>
               </view>
-              <text class="task-desc">{{ task.description || '完成任务获取奖励' }}</text>
+              <text class="task-desc-v2">{{ task.description || '完成任务获取奖励' }}</text>
               
-              <!-- 任务进度条 -->
-              <view class="task-progress" v-if="task.progress !== undefined || task.current !== undefined">
-                <view class="progress-bar">
-                  <view class="progress-fill" :style="{ width: getTaskProgress(task) + '%' }"></view>
+              <!-- 进度显示 - 始终可见 -->
+              <view class="task-progress-v2">
+                <view class="progress-bar-v2">
+                  <view class="progress-fill-v2" :style="{ width: getTaskProgressV2(task) + '%' }"></view>
                 </view>
-                <text class="progress-text">{{ task.current || 0 }}/{{ task.target || 1 }}</text>
+                <text class="progress-num">{{ getTaskProgressV2(task) }}%</text>
               </view>
               
-              <!-- 奖励区域 -->
-              <view class="task-rewards" v-if="Array.isArray(task.rewards) && task.rewards.length">
-                <view class="reward-badge" v-for="(rw, ri) in task.rewards" :key="ri">
-                  <text class="reward-icon">{{ getRewardIcon(rw.reward_type) }}</text>
-                  <text class="reward-value">+{{ rw.quantity || 0 }}</text>
+              <!-- 奖励显示 -->
+              <view class="task-reward-row" v-if="Array.isArray(task.rewards) && task.rewards.length">
+                <text class="reward-label">奖励：</text>
+                <view class="reward-items">
+                  <text class="reward-item" v-for="(rw, ri) in task.rewards" :key="ri">
+                    {{ getRewardIcon(rw.reward_type) }} {{ rw.quantity || 0 }}
+                  </text>
                 </view>
               </view>
             </view>
             
-            <view class="task-action">
-              <text class="action-btn" v-if="task.status === 1" @tap="goToTask(task)">去完成</text>
-              <text class="action-btn done" v-else-if="task.status === 2">已完成</text>
-              <text class="action-btn waiting" v-else>未开始</text>
+            <!-- 右侧操作按钮 -->
+            <view class="task-btn-wrap">
+              <button class="task-btn" :class="getTaskBtnClass(task.status)" @tap="goToTask(task)">
+                {{ getTaskBtnText(task.status) }}
+              </button>
             </view>
           </view>
           
@@ -308,13 +340,105 @@
       </view>
     </view>
 
+    <!-- 邀请记录弹窗 (Redesigned) -->
+    <view class="popup-mask" v-if="invitesVisible" @tap="closeInvitesPopup">
+      <view class="popup-content invites-popup" @tap.stop>
+        <view class="invites-popup-header">
+          <text class="invites-title-text">✨ 我的邀请团 ✨</text>
+          <view class="invites-close" @tap="closeInvitesPopup">
+            <image class="invites-close-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTggNkw2IDE4TTYgNmwxMiAxMiIvPjwvc3ZnPg==" mode="aspectFit"></image>
+          </view>
+        </view>
+        
+        <!-- 头部资产卡片 -->
+        <view class="invite-prime-card">
+          <!-- 装饰圆环 -->
+          <view class="card-deco-circle c1"></view>
+          <view class="card-deco-circle c2"></view>
+          
+          <view class="prime-card-content">
+            <view class="my-code-section" @tap="copyInviteCode">
+              <text class="code-label">我的邀请码</text>
+              <view class="code-value-row">
+                <text class="code-text">{{ inviteCode || '加载中...' }}</text>
+                <view class="copy-icon-btn">
+                  <text class="copy-text">复制</text>
+                </view>
+              </view>
+            </view>
+            
+            <view class="card-divider-h"></view>
+            
+            <view class="stats-mini-row">
+              <view class="stat-mini-item">
+                <text class="mini-num">{{ invitesTotal }}</text>
+                <text class="mini-label">累计邀请 (人)</text>
+              </view>
+              <view class="stat-mini-sep"></view>
+              <view class="stat-mini-item">
+                <text class="mini-num">Lv.1</text>
+                <text class="mini-label">邀请等级</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 列表标题 -->
+        <view class="list-section-header">
+          <text class="list-title">好友列表</text>
+          <text class="list-subtitle">邀请好友，一起欧气满满</text>
+        </view>
+
+        <scroll-view scroll-y class="invites-scroll-refined" @scrolltolower="loadMoreInvites">
+          <view v-if="invitesLoading && invitesList.length === 0" class="status-loading-refined">
+            <view class="loading-spinner"></view>
+            <text>正在加载好友...</text>
+          </view>
+          
+          <view v-else-if="!invitesList || invitesList.length === 0" class="empty-state-refined">
+            <image class="empty-img-refined" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0REQURFNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTE2IDE2czEtMy00LTctNCA3LTQgNyIvPjxsaW5lIHgxPSI5IiB5MT0iOSIgeDI9IjkuMDEiIHkyPSI5Ii8+PGxpbmUgeDE9IjE1IiB5MT0iOSIgeDI9IjE1LjAxIiB5Mj0iOSIvPjwvc3ZnPg==" mode="aspectFit"></image>
+            <text class="empty-text-refined">暂无邀请记录</text>
+            <text class="empty-sub-refined">每邀请一位好友，双方都能获得奖励哦</text>
+          </view>
+          
+          <view v-for="(item, index) in invitesList" :key="item.id || index" class="friend-card">
+            <view class="friend-avatar-wrap">
+              <image class="friend-avatar" :src="item.avatar || '/static/logo.png'" mode="aspectFill"></image>
+            </view>
+            <view class="friend-info">
+              <view class="friend-name-row">
+                <text class="friend-name">{{ item.nickname || '神秘好友' }}</text>
+                <view class="friend-tag">新晋</view>
+              </view>
+              <text class="friend-meta">ID: {{ item.id }} · 邀请码: {{ item.invite_code || '-' }}</text>
+            </view>
+            <view class="friend-status">
+              <text class="status-dot success"></text>
+              <text class="status-val">已激活</text>
+            </view>
+          </view>
+          
+          <view v-if="invitesLoading && invitesList.length > 0" class="loading-more-text">加载更多...</view>
+          <view v-if="!invitesHasMore && invitesList.length > 0" class="no-more-text">- 到底啦 -</view>
+        </scroll-view>
+        
+        <!-- 底部悬浮按钮 -->
+        <view class="popup-footer-action">
+          <button class="btn-share-gradient" open-type="share">
+            <text>立即邀请好友</text>
+            <image class="btn-arrow-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxMmgyNDBNMTIgNWw3IDctNyA3Ii8+PC9zdmc+" mode="aspectFit"></image>
+          </button>
+        </view>
+      </view>
+    </view>
+
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { onShow, onLoad, onShareAppMessage } from '@dcloudio/uni-app'
-import { getUserStats, getPointsBalance, getUserPoints, getUserCoupons, redeemCoupon, getItemCards, getTasks } from '../../api/appUser'
+import { getUserStats, getPointsBalance, getUserPoints, getUserCoupons, redeemCoupon, getItemCards, getTasks, getUserInvites } from '../../api/appUser'
 
 const avatar = ref(uni.getStorageSync('avatar') || '')
 const nickname = ref(uni.getStorageSync('nickname') || '')
@@ -336,7 +460,7 @@ const pointsHasMore = ref(true)
 
 // 优惠券弹窗相关状态
 const couponsVisible = ref(false)
-const couponsTab = ref(0) // 0: 未使用, 1: 已使用, 2: 兑换
+const couponsTab = ref(1) // 1: 未使用, 2: 已使用, 3: 已过期
 const couponsList = ref([])
 const couponsLoading = ref(false)
 const couponsPage = ref(1)
@@ -356,6 +480,15 @@ const tasksPage = ref(1)
 const tasksPageSize = ref(20)
 const tasksHasMore = ref(true)
 
+// 邀请记录弹窗相关状态
+const invitesVisible = ref(false)
+const invitesList = ref([])
+const invitesLoading = ref(false)
+const invitesPage = ref(1)
+const invitesPageSize = ref(20)
+const invitesHasMore = ref(true)
+const invitesTotal = ref(0)
+
 async function refresh() {
   const token = uni.getStorageSync('token')
   // 允许未登录状态浏览基本页面结构，用户信息显示“未登录”
@@ -461,7 +594,7 @@ function loadMorePoints() { if (pointsHasMore.value && !pointsLoading.value) loa
 // 优惠券弹窗逻辑
 function showCouponsPopup() {
   couponsVisible.value = true
-  couponsTab.value = 0
+  couponsTab.value = 1 // 默认显示未使用 (status=1)
   redeemCode.value = ''
   couponsList.value = []
   couponsPage.value = 1
@@ -469,23 +602,21 @@ function showCouponsPopup() {
   loadCoupons()
 }
 function closeCouponsPopup() { couponsVisible.value = false }
-function switchCouponsTab(index) {
-  if (couponsTab.value === index) return
-  couponsTab.value = index
-  if (index !== 2) {
-    couponsList.value = []
-    couponsPage.value = 1
-    couponsHasMore.value = true
-    loadCoupons()
-  }
+function switchCouponsTab(status) {
+  if (couponsTab.value === status) return
+  couponsTab.value = status
+  couponsList.value = []
+  couponsPage.value = 1
+  couponsHasMore.value = true
+  loadCoupons()
 }
 async function loadCoupons() {
   if (couponsLoading.value) return
   couponsLoading.value = true
   const user_id = uni.getStorageSync('user_id')
   try {
-    const status = couponsTab.value === 0 ? 0 : 1
-    const res = await getUserCoupons(user_id, status, couponsPage.value, 20)
+    // status: 1=未使用, 2=已使用, 3=已过期
+    const res = await getUserCoupons(user_id, couponsTab.value, couponsPage.value, 20)
     let list = []
     let total = 0
     if (res && Array.isArray(res.list)) { list = res.list; total = res.total || 0 }
@@ -505,7 +636,40 @@ async function loadCoupons() {
     couponsLoading.value = false
   }
 }
-function loadMoreCoupons() { if (couponsHasMore.value && !couponsLoading.value && couponsTab.value !== 2) loadCoupons() }
+function loadMoreCoupons() { if (couponsHasMore.value && !couponsLoading.value) loadCoupons() }
+
+// 优惠券辅助函数
+function getCouponEmptyText() {
+  if (couponsTab.value === 1) return '暂无可用优惠券'
+  if (couponsTab.value === 2) return '暂无已使用优惠券'
+  return '暂无已过期优惠券'
+}
+
+function getCouponCardClass(item) {
+  if (couponsTab.value === 3) return 'expired'
+  if (couponsTab.value === 2) return 'used'
+  return ''
+}
+
+function getCouponUsedPercent(item) {
+  if (!item.amount || item.remaining === undefined) return 0
+  const used = item.amount - item.remaining
+  return Math.round((used / item.amount) * 100)
+}
+
+function formatCouponExpiry(item) {
+  const end = item.valid_end || item.end_time
+  if (!end) return ''
+  return `有效期至：${formatDate(end)}`
+}
+
+function formatDateTime(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return dateStr
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
 async function handleRedeem() {
   if (!redeemCode.value) { uni.showToast({ title: '请输入兑换码', icon: 'none' }); return }
   const user_id = uni.getStorageSync('user_id')
@@ -583,10 +747,85 @@ async function loadTasks() {
 }
 function loadMoreTasks() { if (tasksHasMore.value && !tasksLoading.value) loadTasks() }
 
+// 邀请记录弹窗逻辑
+function showInvitesPopup() {
+  const token = uni.getStorageSync('token')
+  if (!token) {
+    uni.showToast({ title: '请先登录', icon: 'none' })
+    return
+  }
+  invitesVisible.value = true
+  invitesList.value = []
+  invitesPage.value = 1
+  invitesHasMore.value = true
+  loadInvites()
+}
+
+function closeInvitesPopup() { invitesVisible.value = false }
+
+async function loadInvites() {
+  if (invitesLoading.value) return
+  invitesLoading.value = true
+  const user_id = uni.getStorageSync('user_id')
+  try {
+    const res = await getUserInvites(user_id, invitesPage.value, invitesPageSize.value)
+    let list = []
+    let total = 0
+    if (res && Array.isArray(res.list)) { 
+      list = res.list
+      total = res.total || 0 
+    } else if (res && Array.isArray(res.data)) { 
+      list = res.data
+      total = res.total || 0 
+    } else if (Array.isArray(res)) { 
+      list = res
+      total = res.length 
+    }
+    
+    invitesTotal.value = total
+    
+    if (invitesPage.value === 1) invitesList.value = list
+    else invitesList.value = [...invitesList.value, ...list]
+    
+    if (list.length < invitesPageSize.value || (invitesPage.value * invitesPageSize.value >= total && total > 0)) {
+      invitesHasMore.value = false
+    } else {
+      invitesPage.value += 1
+    }
+    
+    if (list.length === 0 && invitesPage.value === 1) invitesHasMore.value = false
+  } catch (e) {
+    console.error('加载邀请记录失败:', e)
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    invitesLoading.value = false
+  }
+}
+
+function loadMoreInvites() { 
+  if (invitesHasMore.value && !invitesLoading.value) loadInvites() 
+}
+
+function copyInviteCode() {
+  if (!inviteCode.value) {
+    uni.showToast({ title: '暂无邀请码', icon: 'none' })
+    return
+  }
+  uni.setClipboardData({
+    data: inviteCode.value,
+    success: () => {
+      uni.showToast({ title: '复制成功', icon: 'success' })
+    },
+    fail: () => {
+      uni.showToast({ title: '复制失败', icon: 'none' })
+    }
+  })
+}
+
 // 辅助函数
 function formatCouponValue(value) {
   const num = Number(value || 0)
-  return (num / 100).toFixed(0)
+  return num.toFixed(0)
 }
 
 function getCardIcon(typeOrName) {
@@ -638,18 +877,84 @@ function getRewardIcon(rewardType) {
 }
 
 function goToTask(task) {
+  const status = Number(task.status)
+  
+  // 已完成的任务不跳转
+  if (status === 2) {
+    uni.showToast({ title: '任务已完成', icon: 'success' })
+    return
+  }
+  
   closeTasksPopup()
-  // 根据任务类型跳转到对应页面
+  
   const name = String(task.name || '').toLowerCase()
-  if (name.includes('邀请')) {
+  const type = String(task.type || '').toLowerCase()
+  
+  // 根据任务类型跳转到对应页面
+  if (name.includes('邀请') || type.includes('invite')) {
     handleInvite()
-  } else if (name.includes('签到')) {
+  } else if (name.includes('签到') || type.includes('checkin')) {
     uni.showToast({ title: '签到功能开发中', icon: 'none' })
+  } else if (name.includes('抽奖') || name.includes('抽取') || type.includes('draw') || type.includes('lottery')) {
+    uni.switchTab({ url: '/pages/index/index' })
+  } else if (name.includes('充值') || type.includes('recharge')) {
+    uni.navigateTo({ url: '/pages/points/index' })
+  } else if (name.includes('商城') || name.includes('购买') || type.includes('shop') || type.includes('buy')) {
+    uni.switchTab({ url: '/pages/shop/index' })
+  } else if (name.includes('完善') || name.includes('资料') || type.includes('profile')) {
+    uni.showToast({ title: '请完善个人资料', icon: 'none' })
   } else {
+    // 默认跳转到首页
     uni.switchTab({ url: '/pages/index/index' })
   }
 }
 
+// 任务中心新增辅助函数
+function getOverallProgress() {
+  if (!tasksList.value || tasksList.value.length === 0) return 0
+  const completed = tasksList.value.filter(t => t.status === 2).length
+  return Math.round((completed / tasksList.value.length) * 100)
+}
+
+function getTaskProgressV2(task) {
+  const status = Number(task.status)
+  if (status === 2) return 100
+  if (task.progress !== undefined) return Math.min(100, Math.max(0, Math.round(task.progress)))
+  if (task.current !== undefined && task.target) {
+    return Math.min(100, Math.max(0, Math.round((task.current / task.target) * 100)))
+  }
+  if (status === 1) return 50 // 进行中默认50%
+  return 0
+}
+
+function getStatusIcon(status) {
+  const n = Number(status)
+  if (n === 2) return '✓'
+  if (n === 1) return '▶'
+  return '○'
+}
+
+function getTaskCardClass(status) {
+  const n = Number(status)
+  if (n === 2) return 'task-completed'
+  if (n === 1) return 'task-ongoing'
+  return 'task-waiting'
+}
+
+function getTaskBtnClass(status) {
+  const n = Number(status)
+  if (n === 2) return 'btn-done'
+  if (n === 1) return 'btn-go'
+  return 'btn-waiting'
+}
+
+function getTaskBtnText(status) {
+  const n = Number(status)
+  if (n === 2) return '已完成'
+  if (n === 1) return '去完成'
+  return '未开始'
+}
+
 function formatDate(dateStr) {
   if (!dateStr) return ''
   const date = new Date(dateStr)
@@ -1076,6 +1381,229 @@ onShareAppMessage(() => {
   border-radius: 12rpx;
 }
 
+/* ============================================
+   优惠券 V2 样式 (余额型优惠券)
+   ============================================ */
+.coupon-tabs-3 {
+  display: flex;
+  gap: 0;
+}
+.coupon-tabs-3 .popup-tab {
+  flex: 1;
+}
+
+.coupon-ticket-v2 {
+  display: flex;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+}
+
+.coupon-ticket-v2.used {
+  background: #F9FAFB;
+}
+.coupon-ticket-v2.used .coupon-left-v2 {
+  background: linear-gradient(135deg, #9CA3AF, #6B7280);
+}
+
+.coupon-ticket-v2.expired {
+  background: #F3F4F6;
+  opacity: 0.75;
+}
+.coupon-ticket-v2.expired .coupon-left-v2 {
+  background: linear-gradient(135deg, #D1D5DB, #9CA3AF);
+}
+
+/* 左侧金额区域 */
+.coupon-left-v2 {
+  width: 160rpx;
+  background: linear-gradient(135deg, #FF9F43, #FF6B35);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx 12rpx;
+  flex-shrink: 0;
+}
+
+.coupon-remaining {
+  display: flex;
+  align-items: baseline;
+}
+
+.coupon-left-v2 .coupon-symbol {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: 700;
+}
+
+.coupon-amount-num {
+  font-size: 48rpx;
+  font-weight: 800;
+  color: #fff;
+  line-height: 1;
+}
+
+.coupon-label {
+  font-size: 20rpx;
+  color: rgba(255,255,255,0.9);
+  margin-top: 8rpx;
+}
+
+/* 中间分割线 V2 */
+.coupon-divider-v2 {
+  width: 20rpx;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.divider-notch {
+  width: 20rpx;
+  height: 10rpx;
+  background: #F8F5F2;
+  position: absolute;
+}
+.divider-notch.top { top: -1rpx; border-radius: 0 0 10rpx 10rpx; }
+.divider-notch.bottom { bottom: -1rpx; border-radius: 10rpx 10rpx 0 0; }
+
+.divider-dash {
+  width: 2rpx;
+  flex: 1;
+  background: repeating-linear-gradient(to bottom, #E5E7EB 0, #E5E7EB 6rpx, transparent 6rpx, transparent 12rpx);
+  margin: 14rpx 0;
+}
+
+/* 右侧信息区域 */
+.coupon-right-v2 {
+  flex: 1;
+  padding: 16rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.coupon-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6rpx;
+}
+
+.coupon-name-v2 {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #1F2937;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.coupon-original {
+  background: #FEF3C7;
+  padding: 4rpx 10rpx;
+  border-radius: 8rpx;
+  margin-left: 12rpx;
+  flex-shrink: 0;
+}
+.coupon-original text {
+  font-size: 18rpx;
+  color: #D97706;
+  text-decoration: line-through;
+}
+
+.coupon-rules {
+  font-size: 22rpx;
+  color: #6B7280;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 使用进度条 */
+.coupon-progress-wrap {
+  margin-bottom: 8rpx;
+}
+
+.coupon-progress-bar {
+  height: 8rpx;
+  background: #E5E7EB;
+  border-radius: 4rpx;
+  overflow: hidden;
+  margin-bottom: 4rpx;
+}
+
+.coupon-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10B981, #34D399);
+  border-radius: 4rpx;
+  transition: width 0.3s ease;
+}
+
+.coupon-progress-text {
+  font-size: 18rpx;
+  color: #10B981;
+}
+
+/* 底部行 */
+.coupon-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.coupon-expire-v2 {
+  font-size: 20rpx;
+  color: #9CA3AF;
+  flex: 1;
+}
+
+.coupon-action-v2 {
+  flex-shrink: 0;
+}
+
+.use-btn-v2 {
+  display: inline-block;
+  background: linear-gradient(135deg, #FFD166, #FF9F43);
+  color: #1F2937;
+  font-size: 22rpx;
+  font-weight: 700;
+  padding: 8rpx 20rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 159, 67, 0.25);
+}
+
+.coupon-status-v2 {
+  flex-shrink: 0;
+}
+
+.status-tag {
+  font-size: 20rpx;
+  padding: 6rpx 14rpx;
+  border-radius: 10rpx;
+}
+.status-tag.used {
+  background: #DBEAFE;
+  color: #2563EB;
+}
+.status-tag.expired {
+  background: #F3F4F6;
+  color: #9CA3AF;
+}
+
+.coupon-used-time {
+  font-size: 18rpx;
+  color: #9CA3AF;
+  margin-top: 6rpx;
+}
+
 /* ============================================
    道具卡弹窗样式
    ============================================ */
@@ -1391,4 +1919,778 @@ onShareAppMessage(() => {
   color: #9CA3AF;
   box-shadow: none;
 }
+
+/* ============================================
+   任务中心 V2 样式
+   ============================================ */
+.task-center-popup { width: 700rpx; }
+.task-scroll { flex: 1; min-height: 350rpx; max-height: 50vh; }
+
+/* 总体进度指示器 */
+.overall-progress {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #FFF8F3, #FFEDD5);
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  gap: 24rpx;
+}
+
+.progress-circle {
+  width: 120rpx;
+  height: 120rpx;
+  background: linear-gradient(135deg, #FF9F43, #FF6B35);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
+}
+
+.progress-percent {
+  font-size: 32rpx;
+  font-weight: 800;
+  color: #fff;
+}
+
+.overall-progress .progress-label {
+  font-size: 18rpx;
+  color: rgba(255,255,255,0.9);
+}
+
+.progress-stats {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.stat-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.stat-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+}
+.stat-dot.done { background: #10B981; }
+.stat-dot.ongoing { background: #3B82F6; }
+.stat-dot.waiting { background: #9CA3AF; }
+
+.stat-text {
+  font-size: 24rpx;
+  color: #4B5563;
+}
+
+/* 任务卡片 V2 */
+.task-card-v2 {
+  display: flex;
+  align-items: stretch;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+  border-left: 6rpx solid #E5E7EB;
+}
+
+.task-card-v2.task-completed {
+  border-left-color: #10B981;
+  background: #F0FDF4;
+}
+.task-card-v2.task-ongoing {
+  border-left-color: #3B82F6;
+  background: #EFF6FF;
+}
+.task-card-v2.task-waiting {
+  border-left-color: #E5E7EB;
+}
+
+/* 状态指示器 */
+.task-status-indicator {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: 4rpx;
+}
+.task-status-indicator.status-done {
+  background: #10B981;
+}
+.task-status-indicator.status-ongoing {
+  background: #3B82F6;
+}
+.task-status-indicator.status-waiting {
+  background: #E5E7EB;
+}
+
+.status-icon {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: bold;
+}
+.status-waiting .status-icon {
+  color: #9CA3AF;
+}
+
+/* 任务内容 */
+.task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-title-row {
+  margin-bottom: 6rpx;
+}
+
+.task-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #1F2937;
+}
+
+.task-desc-v2 {
+  font-size: 22rpx;
+  color: #6B7280;
+  margin-bottom: 12rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 进度条 V2 */
+.task-progress-v2 {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 10rpx;
+}
+
+.progress-bar-v2 {
+  flex: 1;
+  height: 12rpx;
+  background: #E5E7EB;
+  border-radius: 6rpx;
+  overflow: hidden;
+}
+
+.progress-fill-v2 {
+  height: 100%;
+  background: linear-gradient(90deg, #FF9F43, #FF6B35);
+  border-radius: 6rpx;
+  transition: width 0.3s ease;
+}
+
+.task-completed .progress-fill-v2 {
+  background: linear-gradient(90deg, #34D399, #10B981);
+}
+
+.task-ongoing .progress-fill-v2 {
+  background: linear-gradient(90deg, #60A5FA, #3B82F6);
+}
+
+.progress-num {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #6B7280;
+  min-width: 60rpx;
+  text-align: right;
+}
+
+/* 奖励行 */
+.task-reward-row {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.task-reward-row .reward-label {
+  font-size: 22rpx;
+  color: #9CA3AF;
+}
+
+.reward-items {
+  display: flex;
+  gap: 12rpx;
+}
+
+.task-reward-row .reward-item {
+  font-size: 22rpx;
+  color: #FF6B35;
+  font-weight: 600;
+  background: #FFF0E5;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+}
+
+/* 按钮区域 */
+.task-btn-wrap {
+  display: flex;
+  align-items: center;
+  margin-left: 12rpx;
+}
+
+.task-btn {
+  font-size: 22rpx;
+  font-weight: 700;
+  padding: 0 24rpx;
+  height: 56rpx;
+  line-height: 56rpx;
+  border-radius: 28rpx;
+  border: none;
+  min-width: 120rpx;
+}
+
+.task-btn.btn-go {
+  background: linear-gradient(135deg, #FF9F43, #FF6B35);
+  color: #fff;
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
+}
+
+.task-btn.btn-done {
+  background: #D1FAE5;
+  color: #059669;
+}
+
+.task-btn.btn-waiting {
+  background: #F3F4F6;
+  color: #9CA3AF;
+}
+
+/* ============================================
+   用户中心 UX/UI 增强
+   ============================================ */
+
+/* 入场动画定义 */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes glowPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.4); }
+  50% { box-shadow: 0 0 20rpx 8rpx rgba(255, 159, 67, 0.2); }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(100rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 头像发光效果 */
+.avatar {
+  animation: glowPulse 3s ease-in-out infinite;
+  transition: all 0.3s ease;
+}
+.avatar:active {
+  transform: scale(0.95);
+}
+
+/* 用户信息入场动画 */
+.user-info {
+  animation: fadeInUp 0.4s ease-out;
+}
+
+/* 等级徽章动画 */
+.level-badge {
+  transition: all 0.3s ease;
+}
+.level-badge:active {
+  transform: scale(0.95);
+}
+
+/* 统计栏入场动画 */
+.stats-row {
+  animation: fadeInUp 0.4s ease-out 0.1s both;
+}
+
+
+
+/* 统计项点击效果 */
+.stat-item {
+  transition: all 0.2s ease;
+  padding: 16rpx 8rpx;
+  border-radius: 16rpx;
+  cursor: pointer;
+}
+.stat-item:active {
+  background: rgba(255, 159, 67, 0.1);
+  transform: scale(0.95);
+}
+.stat-num {
+  transition: all 0.3s ease;
+}
+.stat-item:active .stat-num {
+  color: #FF6B35;
+  transform: scale(1.1);
+}
+
+/* 邀请Banner入场动画 */
+.invite-banner {
+  animation: fadeInUp 0.4s ease-out 0.15s both;
+  transition: all 0.3s ease;
+}
+.invite-banner:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
+}
+
+/* 卡片区域入场动画 */
+.card-section {
+  animation: fadeInUp 0.4s ease-out 0.2s both;
+  transition: all 0.3s ease;
+}
+.card-section:active {
+  transform: scale(0.99);
+}
+
+/* 订单图标点击效果 */
+.grid-item {
+  transition: all 0.2s ease;
+  padding: 12rpx;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+.grid-item:active {
+  background: rgba(255, 159, 67, 0.08);
+  transform: scale(0.92);
+}
+.grid-icon-img {
+  transition: all 0.2s ease;
+}
+.grid-item:active .grid-icon-img {
+  transform: scale(1.15);
+}
+
+/* 菜单项点击效果 */
+.menu-item {
+  transition: all 0.2s ease;
+  padding: 16rpx 8rpx;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+.menu-item:active {
+  background: rgba(0, 0, 0, 0.04);
+  transform: scale(0.92);
+}
+.menu-icon-img {
+  transition: all 0.2s ease;
+}
+.menu-item:active .menu-icon-img {
+  transform: scale(1.15) rotate(-5deg);
+}
+
+/* 弹窗动画增强 */
+.popup-mask {
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.popup-content {
+  animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 关闭按钮效果 */
+.close-btn {
+  transition: all 0.2s ease;
+}
+.close-btn:active {
+  transform: scale(0.85) rotate(90deg);
+  color: #FF6B35;
+}
+
+/* 登录按钮动画 */
+.join-btn {
+  transition: all 0.2s ease;
+  animation: bounce 2s ease-in-out infinite;
+}
+.join-btn:active {
+  animation: none;
+}
+
+/* 邀请按钮增强 */
+.invite-action {
+  transition: all 0.2s ease;
+}
+.invite-action:active {
+  transform: scale(0.95);
+}
+
+/* ============================================
+   邀请记录弹窗样式 (Redesigned)
+   ============================================ */
+.invites-popup {
+  width: 680rpx;
+  background: #F8F9FB; /* 浅灰底色，更显卡片质感 */
+  padding: 0;
+  border-radius: 32rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 85vh;
+}
+
+/* 顶部标题栏 */
+.invites-popup-header {
+  height: 110rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: #fff;
+  border-bottom: 1rpx solid rgba(0,0,0,0.03);
+}
+
+.invites-title-text {
+  font-size: 34rpx;
+  font-weight: 800;
+  color: #1A1A1A;
+}
+
+.invites-close {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 12rpx;
+}
+
+.invites-close-icon {
+  width: 32rpx;
+  height: 32rpx;
+  opacity: 0.6;
+}
+
+/* 核心资产卡片 */
+.invite-prime-card {
+  margin: 32rpx 32rpx 0;
+  height: 280rpx;
+  background: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%); /* 黑金风格或品牌橙色 */
+  background: linear-gradient(135deg, #FF9F43 0%, #FF6B35 100%); /* 选用品牌活力橙 */
+  border-radius: 24rpx;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.25);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 装饰圆环 */
+.card-deco-circle {
+  position: absolute;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.1);
+}
+.card-deco-circle.c1 { width: 300rpx; height: 300rpx; top: -100rpx; right: -60rpx; }
+.card-deco-circle.c2 { width: 400rpx; height: 400rpx; bottom: -120rpx; left: -80rpx; opacity: 0.15; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); }
+
+.prime-card-content {
+  position: relative;
+  z-index: 2;
+  padding: 0 40rpx;
+}
+
+.my-code-section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24rpx;
+}
+
+.code-label {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.85);
+  margin-bottom: 8rpx;
+}
+
+.code-value-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.code-text {
+  font-size: 48rpx;
+  font-weight: 800;
+  color: #fff;
+  font-family: monospace; /* 等宽字体显得更像邀请码 */
+  letter-spacing: 2rpx;
+  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
+}
+
+.copy-icon-btn {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  border: 1rpx solid rgba(255,255,255,0.3);
+}
+
+.copy-text {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: 700;
+}
+
+.card-divider-h {
+  height: 1rpx;
+  background: rgba(255, 255, 255, 0.2);
+  margin-bottom: 24rpx;
+}
+
+.stats-mini-row {
+  display: flex;
+  align-items: center;
+}
+
+.stat-mini-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.mini-num {
+  font-size: 32rpx;
+  font-weight: 800;
+  color: #fff;
+}
+
+.mini-label {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 2rpx;
+}
+
+.stat-mini-sep {
+  width: 1rpx;
+  height: 40rpx;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 40rpx;
+}
+
+/* 列表区域 */
+.list-section-header {
+  padding: 40rpx 32rpx 20rpx;
+  display: flex;
+  align-items: baseline;
+}
+
+.list-title {
+  font-size: 30rpx;
+  font-weight: 800;
+  color: #333;
+  margin-right: 12rpx;
+}
+
+.list-subtitle {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.invites-scroll-refined {
+  flex: 1;
+  height: 0; /* Important for flex layout scrolling */
+  min-height: 400rpx;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+
+/* 列表卡片 */
+.friend-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
+  border: 1rpx solid rgba(0,0,0,0.02);
+  position: relative;
+  overflow: hidden;
+}
+
+.friend-avatar-wrap {
+  position: relative;
+  margin-right: 24rpx;
+}
+
+.friend-avatar {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  background: #f0f0f0;
+  border: 2rpx solid #fff;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+}
+
+.friend-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.friend-name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.friend-name {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #333;
+  margin-right: 12rpx;
+  max-width: 200rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.friend-tag {
+  font-size: 18rpx;
+  color: #FF6B35;
+  background: rgba(255, 107, 53, 0.1);
+  padding: 2rpx 8rpx;
+  border-radius: 6rpx;
+  font-weight: 700;
+}
+
+.friend-meta {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.friend-status {
+  display: flex;
+  align-items: center;
+  background: #F0FDF4;
+  padding: 8rpx 16rpx;
+  border-radius: 999rpx;
+}
+
+.status-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  margin-right: 8rpx;
+}
+.status-dot.success { background: #38ef7d; box-shadow: 0 0 6rpx rgba(56, 239, 125, 0.6); }
+
+.status-val {
+  font-size: 20rpx;
+  color: #11998e;
+  font-weight: 700;
+}
+
+/* 空状态优化 */
+.empty-state-refined {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+  opacity: 0.8;
+}
+
+.empty-img-refined {
+  width: 160rpx;
+  height: 160rpx;
+  margin-bottom: 24rpx;
+  opacity: 0.5; /* 只有SVG没有颜色时 */
+}
+
+.empty-text-refined {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+}
+
+.empty-sub-refined {
+  font-size: 22rpx;
+  color: #999;
+}
+
+/* 底部操作区 */
+.popup-footer-action {
+  padding: 24rpx 32rpx 32rpx;
+  background: #fff;
+  border-top: 1rpx solid rgba(0,0,0,0.03);
+  z-index: 10;
+}
+
+.btn-share-gradient {
+  background: linear-gradient(90deg, #FF6B35, #FF9F43);
+  color: #fff;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 700;
+  border-radius: 48rpx;
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
+  transition: all 0.2s;
+}
+
+.btn-share-gradient:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
+}
+
+.btn-arrow-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 12rpx;
+}
+
+/* Loading States */
+.status-loading-refined {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60rpx 0;
+  color: #999;
+  font-size: 24rpx;
+}
+.loading-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid #EAEAEA;
+  border-top-color: #FF6B35;
+  border-radius: 50%;
+  margin-bottom: 16rpx;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+.loading-more-text { text-align: center; padding: 24rpx; color: #999; font-size: 22rpx; }
+.no-more-text { text-align: center; padding: 24rpx; color: #ddd; font-size: 22rpx; margin-bottom: 24rpx; }
+
 </style>
diff --git a/pages/shop/index.vue b/pages/shop/index.vue
index 33be12d..1e75632 100644
--- a/pages/shop/index.vue
+++ b/pages/shop/index.vue
@@ -1,21 +1,5 @@
 <template>
   <view class="page">
-    <view v-if="showNotice" class="notice-mask" @touchmove.stop.prevent @tap.stop>
-      <view class="notice-dialog" @tap.stop>
-        <view class="notice-title">温馨提示</view>
-        <view class="notice-content">由于商品价格实时浮动，当前暂不支持自助兑换。如需兑换商品，请联系客服核对最新价格。</view>
-        <view class="notice-actions">
-          <view class="notice-check" @tap.stop="toggleHideForever">
-            <view class="check-box" :class="{ on: hideForever }">
-              <text v-if="hideForever" class="iconfont icon-check"></text>
-            </view>
-            <text class="check-text">不再提示</text>
-          </view>
-          <button class="notice-btn" hover-class="btn-hover" @tap.stop="onDismissNotice">我知道了</button>
-        </view>
-      </view>
-    </view>
-
     <!-- 顶部固定区域 -->
     <view class="header-section">
       <view class="search-box" style="margin-top: 20rpx;">
@@ -85,9 +69,6 @@ const loading = ref(false)
 const keyword = ref('')
 const minPrice = ref('')
 const maxPrice = ref('')
-const showNotice = ref(false)
-const hideForever = ref(false)
-const skipReloadOnce = ref(false)
 
 function apiGet(url, data = {}) {
   const token = uni.getStorageSync('token')
@@ -219,30 +200,32 @@ onShow(async () => {
     return
   }
   
-  // Notice logic
-  try {
-    const sess = String(uni.getStorageSync('app_session_id') || '')
-    const hiddenSess = String(uni.getStorageSync('shop_notice_hidden_session_id') || '')
-    const hiddenThisSession = !!(sess && hiddenSess && hiddenSess === sess)
-    showNotice.value = !hiddenThisSession
-    hideForever.value = hiddenThisSession
-  } catch (_) { showNotice.value = true }
-
   loading.value = true
   await loadProducts()
   loading.value = false
 })
 
-function toggleHideForever() { hideForever.value = !hideForever.value }
-function onDismissNotice() {
-  if (hideForever.value) {
-    try {
-      const sess = String(uni.getStorageSync('app_session_id') || '')
-      if (sess) uni.setStorageSync('shop_notice_hidden_session_id', sess)
-    } catch (_) {}
+// 分享功能
+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'
   }
-  showNotice.value = false
-}
+})
+
+onShareTimeline(() => {
+  const inviteCode = uni.getStorageSync('invite_code') || (uni.getStorageSync('user_info') || {}).invite_code || ''
+  return {
+    title: '奇盒潮玩商城 - 好物等你来兑',
+    query: `invite_code=${inviteCode}`,
+    imageUrl: '/static/logo.png'
+  }
+})
+
 </script>
 
 <style scoped>
@@ -487,75 +470,6 @@ function onDismissNotice() {
   font-size: 28rpx;
 }
 
-/* 弹窗样式 */
-.notice-mask {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.6);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.notice-dialog {
-  width: 560rpx;
-  background: #FFF;
-  border-radius: 24rpx;
-  padding: 40rpx 32rpx;
-  text-align: center;
-}
-.notice-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  margin-bottom: 24rpx;
-  color: #333;
-}
-.notice-content {
-  font-size: 28rpx;
-  color: #555;
-  line-height: 1.6;
-  margin-bottom: 40rpx;
-  text-align: left;
-}
-.notice-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
-}
-.notice-btn {
-  width: 100%;
-  height: 80rpx;
-  line-height: 80rpx;
-  background: linear-gradient(90deg, #FF9F43, #FF6B35);
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 30rpx;
-  font-weight: 600;
-}
-.notice-check {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12rpx;
-  opacity: 0.8;
-}
-.check-box {
-  width: 32rpx;
-  height: 32rpx;
-  border: 2rpx solid #CCC;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.check-box.on {
-  background: #FF6B35;
-  border-color: #FF6B35;
-}
-.icon-check {
-  font-size: 20rpx;
-  color: #FFF;
-}
 .check-text {
   font-size: 26rpx;
   color: #888;