112 lines
5.1 KiB
HTML
112 lines
5.1 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>会员查看 - H5</title>
|
||
<link rel="stylesheet" href="../css/mobile.css">
|
||
</head>
|
||
<body>
|
||
<div class="page-container">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<button class="back-btn" onclick="goBack()">←</button>
|
||
<div class="page-title">会员查看</div>
|
||
</div>
|
||
|
||
<!-- 页面内容 -->
|
||
<div class="page-content">
|
||
<!-- 筛选条件 -->
|
||
<div class="form-group">
|
||
<label class="form-label">会员等级</label>
|
||
<select id="level-filter" class="form-select">
|
||
<option value="">全部等级</option>
|
||
<option value="LV1">LV1</option>
|
||
<option value="LV2">LV2</option>
|
||
<option value="LV3">LV3</option>
|
||
<option value="LV4">LV4</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">搜索会员</label>
|
||
<input type="text" id="member-search" class="form-input" placeholder="输入会员姓名或手机号">
|
||
</div>
|
||
|
||
<button class="btn btn-primary" onclick="filterMembers()">查询</button>
|
||
|
||
<!-- 批量操作区域 -->
|
||
<div class="batch-actions" style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px;">
|
||
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
|
||
<label style="display: flex; align-items: center; gap: 5px;">
|
||
<input type="checkbox" id="select-all" onchange="toggleSelectAll()">
|
||
<span>全选</span>
|
||
</label>
|
||
<span id="selected-count" style="color: #666; font-size: 14px;">已选择 0 位会员</span>
|
||
<button class="btn btn-primary" id="batch-edit-btn" onclick="openBatchEditModal()" disabled>
|
||
批量编辑等级
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员列表表格 -->
|
||
<table class="simple-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 50px;">选择</th>
|
||
<th onclick="sortTable('name')">会员姓名 ↕</th>
|
||
<th onclick="sortTable('phone')">手机号 ↕</th>
|
||
<th onclick="sortTable('level')">等级 ↕</th>
|
||
<th onclick="sortTable('points')">积分 ↕</th>
|
||
<th onclick="sortTable('joinDate')">加入时间 ↕</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="member-table-body">
|
||
<!-- 数据将通过JavaScript动态填充 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量编辑等级弹窗 -->
|
||
<div id="batch-edit-modal" class="modal" style="display: none;">
|
||
<div class="modal-overlay" onclick="closeBatchEditModal()"></div>
|
||
<div class="modal-content" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h3>批量编辑会员等级</h3>
|
||
<button class="modal-close" onclick="closeBatchEditModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">选择新等级</label>
|
||
<select id="new-level" class="form-select">
|
||
<option value="">请选择等级</option>
|
||
<option value="LV1">LV1</option>
|
||
<option value="LV2">LV2</option>
|
||
<option value="LV3">LV3</option>
|
||
<option value="LV4">LV4</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">备注</label>
|
||
<textarea id="batch-edit-remark" class="form-input" rows="3" placeholder="请输入批量编辑的备注信息（可选）"></textarea>
|
||
</div>
|
||
<div class="selected-members-preview" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px;">
|
||
<p style="margin: 0 0 10px 0; font-weight: bold;">将要编辑的会员：</p>
|
||
<div id="selected-members-list" style="max-height: 150px; overflow-y: auto; font-size: 14px; color: #666;">
|
||
<!-- 动态填充选中的会员列表 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeBatchEditModal()">取消</button>
|
||
<button class="btn btn-primary" onclick="confirmBatchEdit()">确认编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../js/mobile-common.js"></script>
|
||
<script src="../js/pages/member-list.js"></script>
|
||
</body>
|
||
</html> |