518 lines
18 KiB
HTML
518 lines
18 KiB
HTML
|
<!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;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@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>
|
|||
|
|
<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>
|
|||
|
|
<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>
|
|||
|
|
</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>
|
|||
|
|
</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>
|
|||
|
|
<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>
|
|||
|
|
</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);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|