338 lines
15 KiB
HTML
338 lines
15 KiB
HTML
|
<div class="page-content">
|
|||
|
|
<div class="detail-header">
|
|||
|
|
<h2>会员详情-张三</h2>
|
|||
|
|
<button class="btn btn-secondary close-btn" onclick="closeMemberDetailTab()">关闭</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会员基本信息 -->
|
|||
|
|
<div class="member-info-card">
|
|||
|
|
<div class="member-info-header">
|
|||
|
|
<h3>会员信息</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="member-info-content">
|
|||
|
|
<div class="member-basic">
|
|||
|
|
<div class="member-avatar-section">
|
|||
|
|
<div class="avatar large-avatar green-avatar">张</div>
|
|||
|
|
<div class="member-basic-info">
|
|||
|
|
<div class="member-name">张三</div>
|
|||
|
|
<div class="member-id">会员系统编号：二</div>
|
|||
|
|
<div class="member-phone">会员手机号：138****1234</div>
|
|||
|
|
<div class="member-birth">会员生日：1990-05-15</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="member-assets">
|
|||
|
|
<div class="asset-item">
|
|||
|
|
<div class="asset-icon growth-icon"></div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-label">会员成长值</div>
|
|||
|
|
<div class="asset-value">1250</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-item">
|
|||
|
|
<div class="asset-icon points-icon"></div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-label">会员积分</div>
|
|||
|
|
<div class="asset-value">890</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-item">
|
|||
|
|
<div class="asset-icon coupon-icon"></div>
|
|||
|
|
<div class="asset-info">
|
|||
|
|
<div class="asset-label">会员优惠券</div>
|
|||
|
|
<div class="asset-value">5</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 详情标签页 -->
|
|||
|
|
<div class="detail-tabs">
|
|||
|
|
<div class="tab-headers">
|
|||
|
|
<button class="tab-header active" onclick="switchDetailTab(event, 'growth')">会员成长值明细</button>
|
|||
|
|
<button class="tab-header" onclick="switchDetailTab(event, 'points')">会员积分明细</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会员成长值明细 -->
|
|||
|
|
<div id="growthTab" class="tab-content active">
|
|||
|
|
<div class="table-container">
|
|||
|
|
<table class="detail-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>变化时间</th>
|
|||
|
|
<th>成长值变动</th>
|
|||
|
|
<th>关联订单</th>
|
|||
|
|
<th>详情</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-24 17:20</td>
|
|||
|
|
<td class="positive">+35</td>
|
|||
|
|
<td>ORD9296</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-12 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-10 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-29 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-17 17:20</td>
|
|||
|
|
<td class="positive">+55</td>
|
|||
|
|
<td>ORD2063</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-02 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-20 17:20</td>
|
|||
|
|
<td class="positive">+81</td>
|
|||
|
|
<td>ORD5387</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-16 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-10 17:20</td>
|
|||
|
|
<td class="positive">+50</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-04 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-25 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-18 17:20</td>
|
|||
|
|
<td class="positive">+50</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-16 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-04 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-01 17:20</td>
|
|||
|
|
<td class="positive">+10</td>
|
|||
|
|
<td>ORD3911</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-03-24 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-03-10 17:20</td>
|
|||
|
|
<td class="positive">+95</td>
|
|||
|
|
<td>ORD8321</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-02-28 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-02-18 17:20</td>
|
|||
|
|
<td class="positive">+100</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-02-04 17:20</td>
|
|||
|
|
<td class="positive">+20</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-footer">
|
|||
|
|
<span>共 20 条记录</span>
|
|||
|
|
<div class="table-pagination">
|
|||
|
|
<span>上一页</span>
|
|||
|
|
<span>第 1 页，共 1 页</span>
|
|||
|
|
<span>下一页</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会员积分明细 -->
|
|||
|
|
<div id="pointsTab" class="tab-content">
|
|||
|
|
<div class="table-container">
|
|||
|
|
<table class="detail-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>变化时间</th>
|
|||
|
|
<th>积分变动</th>
|
|||
|
|
<th>关联订单</th>
|
|||
|
|
<th>详情</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-24 17:20</td>
|
|||
|
|
<td class="positive">+25</td>
|
|||
|
|
<td>ORD9296</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-20 15:30</td>
|
|||
|
|
<td class="negative">-50</td>
|
|||
|
|
<td>兑换商品</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-12 17:20</td>
|
|||
|
|
<td class="positive">+80</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-07-10 17:20</td>
|
|||
|
|
<td class="positive">+60</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-29 17:20</td>
|
|||
|
|
<td class="positive">+15</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-25 14:20</td>
|
|||
|
|
<td class="negative">-100</td>
|
|||
|
|
<td>兑换优惠券</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-17 17:20</td>
|
|||
|
|
<td class="positive">+45</td>
|
|||
|
|
<td>ORD2063</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-06-02 17:20</td>
|
|||
|
|
<td class="positive">+15</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-20 17:20</td>
|
|||
|
|
<td class="positive">+65</td>
|
|||
|
|
<td>ORD5387</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-16 17:20</td>
|
|||
|
|
<td class="positive">+80</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-12 10:30</td>
|
|||
|
|
<td class="negative">-30</td>
|
|||
|
|
<td>兑换商品</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-10 17:20</td>
|
|||
|
|
<td class="positive">+40</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-05-04 17:20</td>
|
|||
|
|
<td class="positive">+80</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-25 17:20</td>
|
|||
|
|
<td class="positive">+70</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-18 17:20</td>
|
|||
|
|
<td class="positive">+35</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-16 17:20</td>
|
|||
|
|
<td class="positive">+15</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-04 17:20</td>
|
|||
|
|
<td class="positive">+15</td>
|
|||
|
|
<td>无</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>2025-04-01 17:20</td>
|
|||
|
|
<td class="positive">+8</td>
|
|||
|
|
<td>ORD3911</td>
|
|||
|
|
<td><a href="#" class="detail-link">详情</a></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-footer">
|
|||
|
|
<span>共 18 条记录</span>
|
|||
|
|
<div class="table-pagination">
|
|||
|
|
<span>上一页</span>
|
|||
|
|
<span>第 1 页，共 1 页</span>
|
|||
|
|
<span>下一页</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|