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

会员专区完成

This commit is contained in:
linbin 2025-08-10 03:51:39 +08:00
parent 63329dd6b4
commit 300ffb8fb9
2 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
大妈集市.rp
View File

Binary file not shown.

123
用户端APP/1 首页/1.1 菜市场/1.1.3 会员专区/会员专区.html
View File

@ -164,6 +164,7 @@
gap: 15px; gap: 15px;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px dashed #eee; border-bottom: 1px dashed #eee;
position: relative;
} }
.product-list-item:last-child { .product-list-item:last-child {
border-bottom: none; border-bottom: none;
@ -213,6 +214,66 @@
align-self: flex-start; align-self: flex-start;
} }
/* 购物车控件样式 */
.add-to-cart {
position: absolute;
bottom: 5px;
right: 5px;
width: 24px;
height: 24px;
background-color: #4CAF50;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}
.cart-controls {
position: absolute;
bottom: 5px;
right: 5px;
display: none;
flex-direction: row;
align-items: center;
gap: 5px;
}
.cart-controls.show {
display: flex;
}
.cart-btn {
width: 24px;
height: 24px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}
.cart-count {
min-width: 24px;
height: 24px;
background-color: #f0f0f0;
color: #333;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 0 5px;
}
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
@ -337,6 +398,12 @@
<div class="product-list-points">300积分</div> <div class="product-list-points">300积分</div>
</div> </div>
<div class="product-offer-type">积分兑换</div> <div class="product-offer-type">积分兑换</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
<div class="product-list-item"> <div class="product-list-item">
<div class="product-icon">商品图标</div> <div class="product-icon">商品图标</div>
@ -345,6 +412,12 @@
<div class="product-list-price">¥35.00</div> <div class="product-list-price">¥35.00</div>
</div> </div>
<div class="product-offer-type">积分双倍</div> <div class="product-offer-type">积分双倍</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
<div class="product-list-item"> <div class="product-list-item">
<div class="product-icon">商品图标</div> <div class="product-icon">商品图标</div>
@ -353,6 +426,12 @@
<div class="product-list-price">¥12.50</div> <div class="product-list-price">¥12.50</div>
</div> </div>
<div class="product-offer-type">优惠券可用</div> <div class="product-offer-type">优惠券可用</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -393,6 +472,12 @@
<div class="product-list-price">¥12.50</div> <div class="product-list-price">¥12.50</div>
</div> </div>
<div class="product-offer-type">优惠券可用</div> <div class="product-offer-type">优惠券可用</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -428,6 +513,12 @@
<div class="product-list-price">¥58.00</div> <div class="product-list-price">¥58.00</div>
</div> </div>
<div class="product-offer-type">积分双倍</div> <div class="product-offer-type">积分双倍</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
<div class="product-list-item"> <div class="product-list-item">
<div class="product-icon">商品图标</div> <div class="product-icon">商品图标</div>
@ -436,6 +527,12 @@
<div class="product-list-price">¥28.00</div> <div class="product-list-price">¥28.00</div>
</div> </div>
<div class="product-offer-type">优惠券可用</div> <div class="product-offer-type">优惠券可用</div>
<div class="add-to-cart" onclick="addToCart(this)">+</div>
<div class="cart-controls">
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
<div class="cart-count">1</div>
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -513,6 +610,32 @@
} }
}); });
}); });
// 添加到购物车功能
function addToCart(element) {
const productItem = element.closest('.product-list-item');
const addToCartBtn = productItem.querySelector('.add-to-cart');
const cartControls = productItem.querySelector('.cart-controls');
// 隐藏添加按钮，显示数量控制器
addToCartBtn.style.display = 'none';
cartControls.classList.add('show');
}
// 修改商品数量
function changeQuantity(element, change) {
const productItem = element.closest('.product-list-item');
const cartCountElement = productItem.querySelector('.cart-count');
let count = parseInt(cartCountElement.innerText) || 1;
// 更新数量
count += change;
// 确保数量至少为1
if (count < 1) count = 1;
cartCountElement.innerText = count;
}
</script> </script>
</body> </body>
</html> </html>