From 1264aa6d4698b6a02b4d7d5a8bb8e4af7d9c299b Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Mon, 25 Aug 2025 02:24:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A6=8F=E5=88=A9=E4=B8=93=E5=8C=BA=E7=A7=AF=E5=88=86=E8=B4=AD?=
 =?UTF-8?q?=E7=89=A9=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构积分专区布局，新增标签页切换功能，分离积分换购和积分优惠购内容
- 新增悬浮购物车图标，支持商品数量统计和动画效果，提升购物体验
- 优化积分商品按钮功能，将"立即换购"改为"添加到积分购物车"，支持购物车批量管理
- 新增商品添加成功提示功能，采用友好的toast通知方式，避免使用alert弹窗
- 完善积分专区交互逻辑，支持购物车数量实时更新和状态管理
- 优化页面加载提示，新增"下滑展示更多"引导文字，改善用户浏览体验
---
 用户端APP/福利专区.html | 263 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 236 insertions(+), 27 deletions(-)

diff --git a/用户端APP/福利专区.html b/用户端APP/福利专区.html
index 08e3dcf..5d63878 100644
--- a/用户端APP/福利专区.html
+++ b/用户端APP/福利专区.html
@@ -129,6 +129,56 @@
             display: block;
         }
 
+        /* 积分专区tabs */
+        .points-tabs {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            background: white;
+            border-radius: 15px;
+            padding: 5px;
+        }
+
+        .points-tab {
+            flex: 1;
+            text-align: center;
+            padding: 12px 0;
+            border-radius: 10px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .points-tab.active {
+            background: #ff6b35;
+            color: white;
+        }
+
+        .points-tab:not(.active) {
+            color: #666;
+        }
+
+        /* 积分内容区域 */
+        .points-content {
+            display: none;
+        }
+
+        .points-content.active {
+            display: block;
+        }
+
+        /* 下拉提示 */
+        .load-more-tip {
+            text-align: center;
+            color: #999;
+            font-size: 12px;
+            margin-top: 20px;
+            padding: 10px;
+            opacity: 0.7;
+        }
+
         /* 积分专区样式 */
         .points-section {
             background: white;
@@ -566,6 +616,68 @@
             justify-content: center;
             font-size: 18px;
         }
+
+        /* 悬浮购物车图标 */
+        .floating-cart {
+            position: fixed;
+            bottom: 90px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background: #ff6b35;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            color: white;
+            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
+            cursor: pointer;
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+        .floating-cart:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
+        }
+
+        .floating-cart.bounce {
+            animation: bounce 0.6s ease;
+        }
+
+        .cart-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background: #ff4444;
+            color: white;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .cart-badge.hidden {
+            display: none;
+        }
+
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0);
+            }
+            40% {
+                transform: translateY(-10px);
+            }
+            60% {
+                transform: translateY(-5px);
+            }
+        }
     </style>
 </head>
 <body>
@@ -598,12 +710,14 @@
 
         <!-- 积分专区 -->
         <div id="points" class="section-content active">
-            <!-- 积分换购 -->
-            <div class="points-section">
-                <div class="points-header">
-                    <div class="points-title">积分换购</div>
-                    <div class="points-more">查看更多 ></div>
-                </div>
+            <!-- 积分专区tabs -->
+            <div class="points-tabs">
+                <div class="points-tab active" onclick="switchPointsTab('exchange')">积分换购</div>
+                <div class="points-tab" onclick="switchPointsTab('discount')">积分优惠购</div>
+            </div>
+
+            <!-- 积分换购内容 -->
+            <div id="exchange" class="points-content active">
                 <div class="points-grid">
                     <div class="points-item">
                         <div class="points-item-image">🥛</div>
@@ -611,7 +725,7 @@
                         <div class="points-item-points">500积分</div>
                         <div class="points-item-original">原价 ¥8</div>
                         <div class="points-item-store">华清市场/华清超市</div>
-                        <button class="exchange-btn">立即换购</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🍎</div>
@@ -619,7 +733,7 @@
                         <div class="points-item-points">800积分</div>
                         <div class="points-item-original">原价 ¥12</div>
                         <div class="points-item-store">新鲜市场/新鲜果园</div>
-                        <button class="exchange-btn">立即换购</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🥖</div>
@@ -627,7 +741,7 @@
                         <div class="points-item-points">600积分</div>
                         <div class="points-item-original">原价 ¥10</div>
                         <div class="points-item-store">烘焙市场/烘焙坊</div>
-                        <button class="exchange-btn">立即换购</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🍵</div>
@@ -635,17 +749,14 @@
                         <div class="points-item-points">1200积分</div>
                         <div class="points-item-original">原价 ¥25</div>
                         <div class="points-item-store">茶叶市场/茶叶专营店</div>
-                        <button class="exchange-btn">立即换购</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                 </div>
+                <div class="load-more-tip">下滑展示更多</div>
             </div>
 
-            <!-- 积分优惠购 -->
-            <div class="points-section">
-                <div class="points-header">
-                    <div class="points-title">积分优惠购</div>
-                    <div class="points-more">查看更多 ></div>
-                </div>
+            <!-- 积分优惠购内容 -->
+            <div id="discount" class="points-content">
                 <div class="points-grid">
                     <div class="points-item">
                         <div class="points-item-image">🥩</div>
@@ -653,7 +764,7 @@
                         <div class="points-item-points">300积分+¥45</div>
                         <div class="points-item-original">原价 ¥68</div>
                         <div class="points-item-store">华清市场/华清肉店</div>
-                        <button class="exchange-btn">立即购买</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🍯</div>
@@ -661,7 +772,7 @@
                         <div class="points-item-points">200积分+¥35</div>
                         <div class="points-item-original">原价 ¥48</div>
                         <div class="points-item-store">农家市场/农家特产</div>
-                        <button class="exchange-btn">立即购买</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🧀</div>
@@ -669,7 +780,7 @@
                         <div class="points-item-points">500积分+¥25</div>
                         <div class="points-item-original">原价 ¥45</div>
                         <div class="points-item-store">进口市场/进口食品店</div>
-                        <button class="exchange-btn">立即购买</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                     <div class="points-item">
                         <div class="points-item-image">🍫</div>
@@ -677,9 +788,10 @@
                         <div class="points-item-points">400积分+¥18</div>
                         <div class="points-item-original">原价 ¥32</div>
                         <div class="points-item-store">甜品市场/甜品屋</div>
-                        <button class="exchange-btn">立即购买</button>
+                        <button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
                     </div>
                 </div>
+                <div class="load-more-tip">下滑展示更多</div>
             </div>
         </div>
 
@@ -937,6 +1049,12 @@
         </div>
     </div>
 
+    <!-- 悬浮购物车图标 -->
+    <div class="floating-cart" id="floatingCart" onclick="goToPointsCart()">
+        <div class="cart-badge hidden" id="cartBadge">0</div>
+        🛒
+    </div>
+
     <script>
         // 页面切换功能
         function switchTab(tabName) {
@@ -959,6 +1077,27 @@
             event.target.classList.add('active');
         }
 
+        // 积分专区tab切换功能
+        function switchPointsTab(tabName) {
+            // 隐藏所有积分内容
+            const contents = document.querySelectorAll('.points-content');
+            contents.forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // 移除所有积分标签的激活状态
+            const tabs = document.querySelectorAll('.points-tab');
+            tabs.forEach(tab => {
+                tab.classList.remove('active');
+            });
+            
+            // 显示选中的积分内容
+            document.getElementById(tabName).classList.add('active');
+            
+            // 激活选中的积分标签
+            event.target.classList.add('active');
+        }
+
         // 页面跳转功能
         function goToPage(page) {
             switch(page) {
@@ -982,12 +1121,82 @@
             window.location.href = '电商首页.html';
         });
 
-        // 积分换购/购买按钮
-        document.querySelectorAll('.exchange-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                alert('跳转到商品详情页');
-            });
-        });
+        // 积分购物车功能
+        let pointsCartCount = 0;
+
+        function addToPointsCart(button) {
+            // 获取商品名称
+            const itemElement = button.closest('.points-item');
+            const itemName = itemElement.querySelector('.points-item-name').textContent;
+            
+            // 增加购物车数量
+            pointsCartCount++;
+            
+            // 更新购物车徽章
+            updateCartBadge();
+            
+            // 触发购物车动效
+            const cartIcon = document.getElementById('floatingCart');
+            cartIcon.classList.add('bounce');
+            
+            // 移除动效类
+            setTimeout(() => {
+                cartIcon.classList.remove('bounce');
+            }, 600);
+            
+            // 显示添加成功提示
+            showAddToCartSuccess(itemName);
+        }
+
+        function updateCartBadge() {
+            const badge = document.getElementById('cartBadge');
+            badge.textContent = pointsCartCount;
+            
+            if (pointsCartCount > 0) {
+                badge.classList.remove('hidden');
+            } else {
+                badge.classList.add('hidden');
+            }
+        }
+
+        function showAddToCartSuccess(itemName) {
+            // 创建临时提示元素
+            const toast = document.createElement('div');
+            toast.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                padding: 12px 24px;
+                border-radius: 25px;
+                font-size: 14px;
+                z-index: 2000;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            `;
+            toast.textContent = `${itemName} 已添加到积分购物车`;
+            
+            document.body.appendChild(toast);
+            
+            // 显示提示
+            setTimeout(() => {
+                toast.style.opacity = '1';
+            }, 100);
+            
+            // 3秒后移除提示
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                setTimeout(() => {
+                    document.body.removeChild(toast);
+                }, 300);
+            }, 3000);
+        }
+
+        function goToPointsCart() {
+            alert('跳转到积分购物车页面');
+        }
 
         // 秒杀按钮
         document.querySelectorAll('.seckill-btn').forEach(btn => {
@@ -1004,4 +1213,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>