综述: 重构用户端页面，新增福利中心和优化首页布局
- 新增用户福利中心页面，包含积分专区、秒杀专区和预定专区，提供多样化的优惠活动 - 重构菜市场首页，简化卡片轮播功能，优化商品展示布局和交互体验 - 优化电商首页布局，引入卡片式设计和轮播功能，提升用户体验 - 删除旧版页面文件，清理剪贴板图片，优化文件组织结构
This commit is contained in:
parent
c0d2410ea6
commit
268885be3e
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
|
|
@ -1,641 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>会员专区</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 店铺会员卡区域 */
|
||||
.store-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.store-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.store-card {
|
||||
border: 1px dashed #ccc;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.store-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.store-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-info h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.coupon-count {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
padding: 3px 8px;
|
||||
border: 1px dashed #ccc;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coupon-count:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.coupon-details {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.coupon-details.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px dashed #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.coupon-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.coupon-expiry {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.coupon-content {
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.member-level {
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 会员优惠商品列表样式 */
|
||||
.product-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
position: relative;
|
||||
}
|
||||
.product-list-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.product-list-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.product-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.product-list-info {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.product-list-info h5 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-list-price {
|
||||
font-size: 13px;
|
||||
color: #e53935;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-list-points {
|
||||
font-size: 13px;
|
||||
color: #1e88e5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.product-offer-type {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #fb8c00;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
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) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.store-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px dashed #ccc;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-button:hover,
|
||||
.close-button:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#modal-coupon-list .coupon-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px dashed #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
#modal-coupon-list .coupon-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="header">
|
||||
<h1>我的会员</h1>
|
||||
</div>
|
||||
|
||||
<!-- 店铺会员卡区域 -->
|
||||
<div class="store-section">
|
||||
<div class="store-cards">
|
||||
<!-- 店铺1 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>新鲜水果店</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">金牌会员 lv4</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：5张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">生日优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-09 至 2024-08-16</div>
|
||||
<div class="coupon-content">当日当天9折优惠</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">满200-20</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">新用户优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-07-20 至 2024-09-20</div>
|
||||
<div class="coupon-content">首次购买8.5折</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>进口香蕉 500g</h5>
|
||||
<div class="product-list-points">300积分</div>
|
||||
</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 class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>新鲜草莓 1kg</h5>
|
||||
<div class="product-list-price">¥35.00</div>
|
||||
</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 class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>有机西兰花 500g</h5>
|
||||
<div class="product-list-price">¥12.50</div>
|
||||
</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>
|
||||
|
||||
<!-- 店铺2 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>优质蔬菜铺</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">银牌会员 lv3</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：3张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">满100-10</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">蔬菜专享券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-05 至 2024-08-25</div>
|
||||
<div class="coupon-content">绿叶蔬菜9折</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">周末特惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-12-31</div>
|
||||
<div class="coupon-content">周末购物满50-5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>有机西兰花 500g</h5>
|
||||
<div class="product-list-price">¥12.50</div>
|
||||
</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>
|
||||
|
||||
<!-- 店铺3 -->
|
||||
<div class="store-card">
|
||||
<div class="store-title">
|
||||
<div class="store-logo">摊位图片占位符</div>
|
||||
<h3>精品肉类专营</h3>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<div class="member-level">铜牌会员 lv2</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">优惠券：2张</div>
|
||||
<div class="coupon-details">
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">肉类专享券</div>
|
||||
<div class="coupon-expiry">有效期：2024-08-01 至 2024-08-31</div>
|
||||
<div class="coupon-content">精品肉类8.8折</div>
|
||||
</div>
|
||||
<div class="coupon-item">
|
||||
<div class="coupon-name">满减优惠券</div>
|
||||
<div class="coupon-expiry">有效期：2024-07-15 至 2024-09-15</div>
|
||||
<div class="coupon-content">满150-15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-count" onclick="toggleCoupons(this)">会员优惠商品</div>
|
||||
<div class="coupon-details">
|
||||
<div class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>澳洲进口牛排 200g</h5>
|
||||
<div class="product-list-price">¥58.00</div>
|
||||
</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 class="product-list-item">
|
||||
<div class="product-icon">商品图标</div>
|
||||
<div class="product-list-info">
|
||||
<h5>本地五花肉 500g</h5>
|
||||
<div class="product-list-price">¥28.00</div>
|
||||
</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>
|
||||
</div>
|
||||
<!-- 优惠券弹窗 -->
|
||||
<div id="coupon-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>可用优惠券</h2>
|
||||
<div id="modal-coupon-list">
|
||||
<!-- 优惠券将在这里动态插入 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function toggleCoupons(element) {
|
||||
const couponDetails = element.nextElementSibling;
|
||||
if (couponDetails && couponDetails.classList.contains('coupon-details')) {
|
||||
couponDetails.classList.toggle('show');
|
||||
}
|
||||
}
|
||||
|
||||
// --- 新增代码 ---
|
||||
|
||||
const modal = document.getElementById('coupon-modal');
|
||||
const modalCouponList = document.getElementById('modal-coupon-list');
|
||||
const closeButton = document.querySelector('#coupon-modal .close-button');
|
||||
|
||||
function showProductCoupons(productElement) {
|
||||
const storeCard = productElement.closest('.store-card');
|
||||
if (!storeCard) return;
|
||||
|
||||
const couponSection = storeCard.querySelector('.coupon-details');
|
||||
if (!couponSection) return;
|
||||
|
||||
const coupons = couponSection.querySelectorAll('.coupon-item');
|
||||
|
||||
modalCouponList.innerHTML = '';
|
||||
|
||||
if (coupons.length === 0) {
|
||||
modalCouponList.innerHTML = '<p>暂无可用优惠券。</p>';
|
||||
} else {
|
||||
coupons.forEach(coupon => {
|
||||
modalCouponList.appendChild(coupon.cloneNode(true));
|
||||
});
|
||||
}
|
||||
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
if(closeButton) {
|
||||
closeButton.onclick = function() {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const productItems = document.querySelectorAll('.product-list-item');
|
||||
productItems.forEach(item => {
|
||||
const offerType = item.querySelector('.product-offer-type');
|
||||
if (offerType && offerType.innerText.trim() === '优惠券可用') {
|
||||
item.style.cursor = 'pointer';
|
||||
item.addEventListener('click', function() {
|
||||
showProductCoupons(this);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 添加到购物车功能
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue