增加会员手机号检索
This commit is contained in:
parent
d7aafd537b
commit
b886ad9298
110
CLAUDE.md
110
CLAUDE.md
|
|
@ -1,110 +0,0 @@
|
||||||
# 大数集市商户端 Demo 项目
|
|
||||||
|
|
||||||
## 项目概述
|
|
||||||
这是一个中文商户后台管理系统的原型demo项目,用于快速说明项目意图。项目采用纯HTML/CSS/JavaScript技术栈,分为web端和H5端两套界面,内部业务逻辑相近但页面呈现方式不同。
|
|
||||||
|
|
||||||
## 项目结构
|
|
||||||
```
|
|
||||||
chinese-merchant-dashboard/
|
|
||||||
├── web/merchant/ # Web端 (桌面端)
|
|
||||||
│ ├── index.html # 主页面
|
|
||||||
│ ├── css/styles.css # Web端样式
|
|
||||||
│ ├── js/ # Web端JavaScript
|
|
||||||
│ │ ├── main.js # 主要逻辑
|
|
||||||
│ │ ├── common.js # 公共函数
|
|
||||||
│ │ ├── sidebar.js # 侧边栏逻辑
|
|
||||||
│ │ ├── member-tabs.js # 会员标签页管理
|
|
||||||
│ │ └── pages/ # 各页面逻辑
|
|
||||||
│ ├── pages/ # Web端页面
|
|
||||||
│ └── demo/ # 演示版本
|
|
||||||
├── H5/merchant/ # H5端 (移动端)
|
|
||||||
│ ├── index.html # H5主页面
|
|
||||||
│ ├── css/mobile.css # H5样式
|
|
||||||
│ ├── js/ # H5 JavaScript
|
|
||||||
│ │ ├── mobile-common.js # H5公共函数
|
|
||||||
│ │ └── pages/ # H5页面逻辑
|
|
||||||
│ └── pages/ # H5页面
|
|
||||||
```
|
|
||||||
|
|
||||||
## 核心功能模块
|
|
||||||
|
|
||||||
### 会员管理系统
|
|
||||||
- **等级设置**: 会员等级的创建、编辑和管理
|
|
||||||
- **会员查看**: 会员信息的查看和筛选
|
|
||||||
- **批量编辑**: 支持多步骤的批量会员信息编辑流程
|
|
||||||
|
|
||||||
### 积分系统
|
|
||||||
- **积分任务**: 积分获取任务的配置和管理
|
|
||||||
- **积分商品**: 积分兑换商品的管理
|
|
||||||
- **积分订单**: 积分相关订单的处理
|
|
||||||
|
|
||||||
### 营销工具
|
|
||||||
- **优惠券营销**: 优惠券的创建、发放和管理
|
|
||||||
- **预售营销**: 预售活动的配置和管理
|
|
||||||
|
|
||||||
### 数据中心
|
|
||||||
- **业务数据**: 各类业务数据的统计和展示
|
|
||||||
- **运营分析**: 运营指标的分析和报表
|
|
||||||
|
|
||||||
## 技术特点
|
|
||||||
|
|
||||||
### Web端特性
|
|
||||||
- 基于Tailwind CSS的响应式布局
|
|
||||||
- 左侧折叠式菜单导航
|
|
||||||
- Tab页面管理系统
|
|
||||||
- 实时搜索功能
|
|
||||||
- 开关切换和表单交互
|
|
||||||
|
|
||||||
### H5端特性
|
|
||||||
- 移动端优化的触摸交互
|
|
||||||
- 简化的导航结构
|
|
||||||
- 分步骤的操作流程
|
|
||||||
- 移动端适配的表单设计
|
|
||||||
|
|
||||||
### 共同特性
|
|
||||||
- 纯前端静态页面,无后端依赖
|
|
||||||
- 模拟数据展示完整业务流程
|
|
||||||
- 统一的绿色主题设计
|
|
||||||
- 中文本地化界面
|
|
||||||
|
|
||||||
## 开发指南
|
|
||||||
|
|
||||||
### 本地运行
|
|
||||||
```bash
|
|
||||||
# 推荐使用本地服务器
|
|
||||||
python -m http.server 8000
|
|
||||||
# 或
|
|
||||||
npx serve .
|
|
||||||
```
|
|
||||||
|
|
||||||
### 文件编辑原则
|
|
||||||
1. **优先编辑现有文件**,避免创建新文件
|
|
||||||
2. **保持Web端和H5端功能同步**
|
|
||||||
3. **遵循现有的命名规范和代码风格**
|
|
||||||
4. **所有文本保持中文**
|
|
||||||
|
|
||||||
### 样式系统
|
|
||||||
- Web端: 基于Tailwind CSS类名
|
|
||||||
- H5端: 自定义CSS,针对移动端优化
|
|
||||||
- 主题色: 绿色系 (#059669, #10b981)
|
|
||||||
|
|
||||||
### JavaScript架构
|
|
||||||
- 使用原生JavaScript ES6+
|
|
||||||
- 模块化的页面逻辑组织
|
|
||||||
- 事件驱动的交互模式
|
|
||||||
- 状态管理通过全局变量
|
|
||||||
|
|
||||||
## 测试和构建
|
|
||||||
- 这是静态演示项目,无需构建步骤
|
|
||||||
- 在浏览器中直接测试所有功能
|
|
||||||
- 支持Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
1. 所有数据都是模拟数据,仅用于界面演示
|
|
||||||
2. 不包含真实的后端API调用
|
|
||||||
3. 表单提交和数据操作仅有视觉反馈
|
|
||||||
4. 项目用于原型展示,不适合生产环境直接使用
|
|
||||||
|
|
||||||
## 快捷键
|
|
||||||
- `ESC`: 返回首页 (Web端)
|
|
||||||
- `Ctrl+F`: 聚焦搜索框 (Web端)
|
|
||||||
|
|
@ -350,7 +350,7 @@ function showGrowthDetail(changeTime, changeValue, relatedOrder) {
|
||||||
<div class="detail-value">${getRandomStore()}</div>
|
<div class="detail-value">${getRandomStore()}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<div class="detail-label">成长值受化:</div>
|
<div class="detail-label">成长值变化:</div>
|
||||||
<div class="detail-value positive">${changeValue}</div>
|
<div class="detail-value positive">${changeValue}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
@ -483,11 +483,11 @@ function showPointsDetail(changeTime, changeValue, relatedOrder) {
|
||||||
<div class="detail-value">${changeTime}</div>
|
<div class="detail-value">${changeTime}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<div class="detail-label">订单归属据点:</div>
|
<div class="detail-label">订单归属摊位:</div>
|
||||||
<div class="detail-value">${getRandomStore()}</div>
|
<div class="detail-value">${getRandomStore()}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-section">
|
<div class="detail-section">
|
||||||
<div class="detail-label">积分受化:</div>
|
<div class="detail-label">积分变化:</div>
|
||||||
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -43,18 +43,20 @@ function toggleSelectAll() {
|
||||||
function searchMembers() {
|
function searchMembers() {
|
||||||
const storeFilter = document.getElementById('storeFilter').value;
|
const storeFilter = document.getElementById('storeFilter').value;
|
||||||
const nicknameFilter = document.getElementById('nicknameFilter').value;
|
const nicknameFilter = document.getElementById('nicknameFilter').value;
|
||||||
|
const phoneFilter = document.getElementById('phoneFilter').value;
|
||||||
const levelFilter = document.getElementById('levelFilter').value;
|
const levelFilter = document.getElementById('levelFilter').value;
|
||||||
const registrationDate = document.getElementById('registrationDate').value;
|
const registrationDate = document.getElementById('registrationDate').value;
|
||||||
|
|
||||||
console.log('筛选条件:', {
|
console.log('筛选条件:', {
|
||||||
store: storeFilter,
|
store: storeFilter,
|
||||||
nickname: nicknameFilter,
|
nickname: nicknameFilter,
|
||||||
|
phone: phoneFilter,
|
||||||
level: levelFilter,
|
level: levelFilter,
|
||||||
date: registrationDate
|
date: registrationDate
|
||||||
});
|
});
|
||||||
|
|
||||||
// 这里实现筛选逻辑
|
// 这里实现筛选逻辑
|
||||||
filterMemberTable(storeFilter, nicknameFilter, levelFilter, registrationDate);
|
filterMemberTable(storeFilter, nicknameFilter, phoneFilter, levelFilter, registrationDate);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 筛选表格数据
|
// 筛选表格数据
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,10 @@
|
||||||
<label>用户昵称</label>
|
<label>用户昵称</label>
|
||||||
<input type="text" id="nicknameFilter" placeholder="请输入用户昵称">
|
<input type="text" id="nicknameFilter" placeholder="请输入用户昵称">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="filter-item">
|
||||||
|
<label>手机号</label>
|
||||||
|
<input type="text" id="phoneFilter" placeholder="请输入手机号">
|
||||||
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<label>会员等级</label>
|
<label>会员等级</label>
|
||||||
<select id="levelFilter">
|
<select id="levelFilter">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue