559 lines
18 KiB
HTML
559 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', Roboto, sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.container {
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
background: white;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Header Section */
|
||
.header {
|
||
padding: 20px 16px;
|
||
background: white;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.member-info {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.info-label {
|
||
color: #666;
|
||
margin-right: 8px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Stats Cards */
|
||
.stats-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
padding: 16px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
/* Tab Navigation */
|
||
.tab-nav {
|
||
display: flex;
|
||
background: white;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
padding: 16px 12px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #666;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
white-space: nowrap;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #1890ff;
|
||
border-bottom-color: #1890ff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Content Area */
|
||
.content {
|
||
padding: 0 16px 20px;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* Table Styles */
|
||
.table-container {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.table-header {
|
||
display: grid;
|
||
background: #f8f9fa;
|
||
padding: 12px 8px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.table-row {
|
||
display: grid;
|
||
padding: 12px 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
font-size: 13px;
|
||
align-items: center;
|
||
}
|
||
|
||
.table-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* Coupon Table */
|
||
.coupon-header {
|
||
grid-template-columns: 1fr 60px 60px 80px 60px;
|
||
}
|
||
|
||
.coupon-row {
|
||
grid-template-columns: 1fr 60px 60px 80px 60px;
|
||
}
|
||
|
||
/* Growth Table */
|
||
.growth-header {
|
||
grid-template-columns: 1fr 80px 1fr 60px;
|
||
}
|
||
|
||
.growth-row {
|
||
grid-template-columns: 1fr 80px 1fr 60px;
|
||
}
|
||
|
||
/* Points Table */
|
||
.points-header {
|
||
grid-template-columns: 1fr 60px 80px 1fr 60px;
|
||
}
|
||
|
||
.points-row {
|
||
grid-template-columns: 1fr 60px 80px 1fr 60px;
|
||
}
|
||
|
||
.status-available {
|
||
color: #52c41a;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status-expired {
|
||
color: #ff4d4f;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status-used {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.points-positive {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.points-negative {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.detail-link {
|
||
color: #1890ff;
|
||
text-decoration: none;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.pagination button {
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
background: white;
|
||
color: #666;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pagination button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.pagination .current-page {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Mobile Optimizations */
|
||
@media (max-width: 480px) {
|
||
.member-info {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stats-container {
|
||
padding: 12px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.table-container {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.table-header,
|
||
.table-row {
|
||
padding: 8px 4px;
|
||
}
|
||
|
||
/* Stack table cells vertically on very small screens */
|
||
.coupon-header,
|
||
.coupon-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 4px;
|
||
}
|
||
|
||
.growth-header,
|
||
.growth-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 4px;
|
||
}
|
||
|
||
.points-header,
|
||
.points-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 4px;
|
||
}
|
||
|
||
.table-row {
|
||
padding: 12px 8px;
|
||
border-left: 3px solid #1890ff;
|
||
margin-bottom: 8px;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
}
|
||
|
||
/* Loading State */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #999;
|
||
}
|
||
|
||
/* Empty State */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #999;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header Section -->
|
||
<div class="header">
|
||
<div class="member-info">
|
||
<div class="info-item">
|
||
<span class="info-label">会员姓名:</span>
|
||
<span class="info-value">张三</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">系统编号:</span>
|
||
<span class="info-value">3</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">手机号:</span>
|
||
<span class="info-value">138****1234</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">生日:</span>
|
||
<span class="info-value">1990-05-15</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-container">
|
||
<div class="stat-item">
|
||
<div class="stat-number">1250</div>
|
||
<div class="stat-label">会员成长值</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">890</div>
|
||
<div class="stat-label">会员积分</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">5</div>
|
||
<div class="stat-label">会员优惠券</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab Navigation -->
|
||
<div class="tab-nav">
|
||
<div class="tab-item" onclick="switchTab('growth')">会员成长值明细</div>
|
||
<div class="tab-item" onclick="switchTab('points')">会员积分明细</div>
|
||
<div class="tab-item active" onclick="switchTab('coupons')">会员优惠券</div>
|
||
</div>
|
||
|
||
<!-- Content Area -->
|
||
<div class="content">
|
||
<!-- Coupons Tab -->
|
||
<div id="coupons" class="tab-content active">
|
||
<div class="table-container">
|
||
<div class="table-header coupon-header">
|
||
<div>优惠券名称</div>
|
||
<div>类型</div>
|
||
<div>面额</div>
|
||
<div>使用条件</div>
|
||
<div>状态</div>
|
||
</div>
|
||
<div class="table-row coupon-row">
|
||
<div>
|
||
<div style="font-weight: 500;">新用户专享券</div>
|
||
<div style="font-size: 11px; color: #999; margin-top: 2px;">获得时间: 2024-01-01 10:00:00</div>
|
||
<div style="font-size: 11px; color: #999;">有效期: 2024-02-01</div>
|
||
</div>
|
||
<div>满减券</div>
|
||
<div>¥20</div>
|
||
<div>满100元可用</div>
|
||
<div class="status-available">可使用</div>
|
||
</div>
|
||
<div class="table-row coupon-row">
|
||
<div>
|
||
<div style="font-weight: 500;">生日特惠券</div>
|
||
<div style="font-size: 11px; color: #999; margin-top: 2px;">获得时间: 2024-01-05 12:30:15</div>
|
||
<div style="font-size: 11px; color: #999;">有效期: 2024-02-05</div>
|
||
</div>
|
||
<div>折扣券</div>
|
||
<div>9折</div>
|
||
<div>全品类可用</div>
|
||
<div class="status-available">可使用</div>
|
||
</div>
|
||
<div class="table-row coupon-row">
|
||
<div>
|
||
<div style="font-weight: 500;">积分兑换券</div>
|
||
<div style="font-size: 11px; color: #999; margin-top: 2px;">获得时间: 2024-01-10 16:20:30</div>
|
||
<div style="font-size: 11px; color: #999;">有效期: 2024-03-10</div>
|
||
</div>
|
||
<div>满减券</div>
|
||
<div>¥50</div>
|
||
<div>满300元可用</div>
|
||
<div class="status-available">可使用</div>
|
||
</div>
|
||
<div class="table-row coupon-row">
|
||
<div>
|
||
<div style="font-weight: 500;">限时抢购券</div>
|
||
<div style="font-size: 11px; color: #999; margin-top: 2px;">获得时间: 2023-12-20 14:15:20</div>
|
||
<div style="font-size: 11px; color: #999;">有效期: 2024-01-20</div>
|
||
</div>
|
||
<div>满减券</div>
|
||
<div>¥10</div>
|
||
<div>满50元可用</div>
|
||
<div class="status-expired">已过期</div>
|
||
</div>
|
||
<div class="table-row coupon-row">
|
||
<div>
|
||
<div style="font-weight: 500;">会员专属券</div>
|
||
<div style="font-size: 11px; color: #999; margin-top: 2px;">获得时间: 2023-12-15 09:45:10</div>
|
||
<div style="font-size: 11px; color: #999;">有效期: 2024-01-15</div>
|
||
</div>
|
||
<div>满减券</div>
|
||
<div>¥30</div>
|
||
<div>满200元可用</div>
|
||
<div class="status-used">已使用</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Growth Tab -->
|
||
<div id="growth" class="tab-content">
|
||
<div class="table-container">
|
||
<div class="table-header growth-header">
|
||
<div>变化时间</div>
|
||
<div>成长值变动</div>
|
||
<div>关联订单</div>
|
||
<div>详情</div>
|
||
</div>
|
||
<div class="table-row growth-row">
|
||
<div>2024-01-15 14:30:25</div>
|
||
<div class="points-positive">+50</div>
|
||
<div>ORDER202401501</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row growth-row">
|
||
<div>2024-01-10 09:15:10</div>
|
||
<div class="points-positive">+100</div>
|
||
<div>ORDER202401002</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row growth-row">
|
||
<div>2024-01-05 16:45:33</div>
|
||
<div class="points-positive">+30</div>
|
||
<div>ORDER202401503</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row growth-row">
|
||
<div>2024-01-02 11:20:15</div>
|
||
<div class="points-positive">+20</div>
|
||
<div>ORDER202401204</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row growth-row">
|
||
<div>2023-12-28 13:55:40</div>
|
||
<div class="points-positive">+75</div>
|
||
<div>ORDER202312805</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Points Tab -->
|
||
<div id="points" class="tab-content">
|
||
<div class="table-container">
|
||
<div class="table-header points-header">
|
||
<div>变化时间</div>
|
||
<div>积分变动</div>
|
||
<div>变动类型</div>
|
||
<div>关联订单</div>
|
||
<div>详情</div>
|
||
</div>
|
||
<div class="table-row points-row">
|
||
<div>2024-01-15 14:30:25</div>
|
||
<div class="points-positive">+100</div>
|
||
<div>购物获得</div>
|
||
<div>ORDER202401501</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row points-row">
|
||
<div>2024-01-12 10:20:15</div>
|
||
<div class="points-negative">-50</div>
|
||
<div>积分抵扣</div>
|
||
<div>ORDER202401202</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row points-row">
|
||
<div>2024-01-10 09:15:10</div>
|
||
<div class="points-positive">+200</div>
|
||
<div>购物获得</div>
|
||
<div>ORDER202401002</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row points-row">
|
||
<div>2024-01-08 15:45:30</div>
|
||
<div class="points-positive">+10</div>
|
||
<div>签到奖励</div>
|
||
<div>-</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
<div class="table-row points-row">
|
||
<div>2024-01-05 16:45:33</div>
|
||
<div class="points-positive">+60</div>
|
||
<div>购物获得</div>
|
||
<div>ORDER202401503</div>
|
||
<div><a href="#" class="detail-link">查看详情</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination">
|
||
<button disabled>上一页</button>
|
||
<span class="current-page">第1页，共1页</span>
|
||
<button disabled>下一页</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchTab(tabName) {
|
||
// Remove active class from all tabs and content
|
||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// Add active class to clicked tab and corresponding content
|
||
event.target.classList.add('active');
|
||
document.getElementById(tabName).classList.add('active');
|
||
}
|
||
|
||
// Add touch feedback for better mobile experience
|
||
document.querySelectorAll('.tab-item, .detail-link').forEach(element => {
|
||
element.addEventListener('touchstart', function() {
|
||
this.style.opacity = '0.7';
|
||
});
|
||
|
||
element.addEventListener('touchend', function() {
|
||
this.style.opacity = '1';
|
||
});
|
||
});
|
||
|
||
// Prevent zoom on double tap for better mobile experience
|
||
let lastTouchEnd = 0;
|
||
document.addEventListener('touchend', function (event) {
|
||
const now = (new Date()).getTime();
|
||
if (now - lastTouchEnd <= 300) {
|
||
event.preventDefault();
|
||
}
|
||
lastTouchEnd = now;
|
||
}, false);
|
||
</script>
|
||
</body>
|
||
</html> |