linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 优化福利专区积分购物功能，增强用户体验 

- 重构积分专区布局，新增标签页切换功能，分离积分换购和积分优惠购内容
- 新增悬浮购物车图标，支持商品数量统计和动画效果，提升购物体验
- 优化积分商品按钮功能，将"立即换购"改为"添加到积分购物车"，支持购物车批量管理
- 新增商品添加成功提示功能，采用友好的toast通知方式，避免使用alert弹窗
- 完善积分专区交互逻辑，支持购物车数量实时更新和状态管理
- 优化页面加载提示，新增"下滑展示更多"引导文字，改善用户浏览体验
This commit is contained in:
linbin 2025-08-25 02:24:10 +08:00
parent 01c6d2adf7
commit 1264aa6d46
1 changed files with 236 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
用户端APP/福利专区.html
View File

@ -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>
</html>