This commit is contained in:
commit
9a07a81e97
|
|
@ -0,0 +1,27 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
# 大数集市商户端 - DEMO项目文档
|
||||||
|
|
||||||
|
## 🚨 重要实现约束（大模型必读）
|
||||||
|
|
||||||
|
### DEMO项目核心原则
|
||||||
|
1. **这是一个纯展示性DEMO项目** - 只需要实现UI展示和基础交互效果，无需真实数据处理
|
||||||
|
2. **占位功能实现原则** - 所有功能只需要实现交互效果和UI反馈，不需要实现真实的数据联动和业务逻辑
|
||||||
|
3. **视觉完整性优先** - 重点在于元素摆放位置准确、交互反馈完整，不强调样式美观性
|
||||||
|
4. **前端纯静态实现** - 使用原生JavaScript实现，无后端交互，无真实数据存储
|
||||||
|
|
||||||
|
### 功能实现约束
|
||||||
|
- **筛选功能**: 只需要实现UI交互（下拉框、选择、按钮点击），筛选结果可以是模拟的视觉反馈
|
||||||
|
- **表单提交**: 只需要显示成功提示，无需真实提交数据
|
||||||
|
- **数据展示**: 使用硬编码的模拟数据，无需动态数据加载
|
||||||
|
- **状态管理**: 只需要维护页面内的UI状态，无需持久化存储
|
||||||
|
|
||||||
|
### 技术实现要求
|
||||||
|
- 使用原生HTML/CSS/JavaScript，无外部框架依赖
|
||||||
|
- 实现Tab系统的完整交互体验
|
||||||
|
- 保持代码清晰简洁，便于理解和演示
|
||||||
|
- 确保所有UI元素位置准确，符合设计要求
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 项目概述
|
||||||
|
**这是一个DEMO项目，主要用于展示页面元素布局和交互功能，不强调样式美观性，重点在于元素摆放位置的准确性和功能完整性。**
|
||||||
|
|
||||||
|
这是一个中文商户后台管理系统的演示项目，采用了现代化的前端设计和Tab标签页架构。项目采用左中布局，左侧固定侧边栏，中央区域使用Tab系统展示会员管理功能。
|
||||||
|
|
||||||
|
## 项目架构说明
|
||||||
|
|
||||||
|
### 文件结构 (2025-07-30 最新更新)
|
||||||
|
```
|
||||||
|
chinese-merchant-dashboard/
|
||||||
|
├── index.html # 主页面（导航入口）
|
||||||
|
├── css/
|
||||||
|
│ └── styles.css # 全局样式文件（包含Tab样式）
|
||||||
|
├── js/
|
||||||
|
│ ├── main.js # 主页面逻辑（简化版）
|
||||||
|
│ ├── common.js # 通用工具函数和组件
|
||||||
|
│ ├── sidebar.js # 侧边栏通用逻辑
|
||||||
|
│ ├── member-tabs.js # 会员管理Tab系统核心逻辑
|
||||||
|
│ └── pages/ # 页面专用JS文件目录
|
||||||
|
│ ├── level-settings.js # 等级设置Tab页面逻辑
|
||||||
|
│ ├── data-center.js # 数据中心页面逻辑
|
||||||
|
│ └── coupon-marketing.js # 优惠券营销页面逻辑
|
||||||
|
└── pages/
|
||||||
|
├── data-center.html # 数据中心页面
|
||||||
|
├── coupon-marketing.html # 优惠券营销工具管理页面
|
||||||
|
└── member/ # 会员管理模块
|
||||||
|
├── level-settings.html # 等级设置页面（Tab容器）
|
||||||
|
├── level-detail.html # 等级详情页面（已弃用）
|
||||||
|
└── level-edit.html # 等级编辑页面（已弃用）
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设计原则
|
||||||
|
1. **功能展示优先**: 重点展示功能完整性而非视觉效果
|
||||||
|
2. **元素位置准确**: 严格按照需求放置UI元素
|
||||||
|
3. **Tab系统架构**: 会员管理采用Tab标签页，提升用户体验
|
||||||
|
4. **演示友好**: 便于展示不同功能模块的交互效果
|
||||||
|
|
||||||
|
## 实现约束追加说明
|
||||||
|
|
||||||
|
### 项目实验性约束
|
||||||
|
- **演示优先原则**: 所有功能仅作为交互和UI展示的占位实现
|
||||||
|
- **极简主义设计**: 代码和功能追求最小必要实现
|
||||||
|
- **可视化交互重点**: 重点关注用户交互流程和界面响应
|
||||||
|
- **模拟数据填充**: 所有数据均为硬编码模拟数据，无真实业务逻辑
|
||||||
|
|
||||||
|
### 代码与功能约束
|
||||||
|
- 所有JS交互仅模拟实际效果，不涉及真实数据处理
|
||||||
|
- 表单提交、筛选功能均为本地模拟交互
|
||||||
|
- 开关、弹窗等组件仅展示交互流程
|
||||||
|
- 代码保持高可读性和最小依赖原则
|
||||||
|
|
||||||
|
### 功能模拟策略
|
||||||
|
- UI交互全部通过JavaScript模拟实现
|
||||||
|
- 数据展示使用静态、可预测的模拟数据
|
||||||
|
- 表单验证仅展示交互流程，不进行实质性数据校验
|
||||||
|
- 状态管理仅维持页面内临时状态
|
||||||
|
|
||||||
|
### 技术限制
|
||||||
|
- 严格使用原生Web技术栈
|
||||||
|
- 禁止引入任何外部框架和类库
|
||||||
|
- 代码实现追求极简和直观
|
||||||
|
- 所有功能通过原生JavaScript实现用户交互
|
||||||
|
|
||||||
|
---
|
||||||
|
*文档更新时间: 2025-07-30*
|
||||||
|
*项目状态: 完成DEMO项目实现约束补充说明*
|
||||||
|
*最新特性: 详细阐述项目的实验性约束和功能模拟策略*
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
# 大数集市商户端 Demo
|
||||||
|
|
||||||
|
这是一个纯HTML版本的中文商户后台管理系统演示项目，基于原始的Next.js项目转换而来。
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
demo/
|
||||||
|
├── index.html # 主页面文件
|
||||||
|
├── css/
|
||||||
|
│ └── styles.css # 样式文件
|
||||||
|
├── js/
|
||||||
|
│ └── main.js # JavaScript交互逻辑
|
||||||
|
├── images/ # 静态资源文件
|
||||||
|
│ ├── placeholder.svg
|
||||||
|
│ ├── placeholder.png
|
||||||
|
│ └── ...
|
||||||
|
└── README.md # 说明文档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
### ✅ 已实现功能
|
||||||
|
|
||||||
|
1. **完整的页面布局**
|
||||||
|
- 绿色主题的顶部导航栏
|
||||||
|
- 左侧折叠式菜单
|
||||||
|
- 右侧主内容区域
|
||||||
|
|
||||||
|
2. **交互功能**
|
||||||
|
- 菜单展开/收起动画
|
||||||
|
- 页面内容切换（如等级设置页面）
|
||||||
|
- 开关按钮的切换效果
|
||||||
|
- 搜索菜单功能
|
||||||
|
|
||||||
|
3. **响应式设计**
|
||||||
|
- 支持桌面端和移动端布局
|
||||||
|
- 自适应屏幕大小
|
||||||
|
|
||||||
|
4. **用户体验**
|
||||||
|
- 平滑的动画过渡效果
|
||||||
|
- 键盘快捷键支持（ESC回首页，Ctrl+F搜索）
|
||||||
|
- 通知提示系统
|
||||||
|
|
||||||
|
### 🎯 主要页面
|
||||||
|
|
||||||
|
- **首页**: 默认欢迎页面
|
||||||
|
- **等级设置**: 会员等级管理表格，包含开关切换功能
|
||||||
|
|
||||||
|
### 🔧 菜单项
|
||||||
|
|
||||||
|
- 首页
|
||||||
|
- 运营管理（可展开）
|
||||||
|
- 数据中心
|
||||||
|
- 优惠券营销工具管理
|
||||||
|
- 预售营销工具管理
|
||||||
|
- 会员管理（可展开，包含等级设置等子菜单）
|
||||||
|
- 钱包管理（可展开）
|
||||||
|
- 运费管理（可展开）
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
1. **直接打开**
|
||||||
|
```bash
|
||||||
|
# 在浏览器中打开
|
||||||
|
open index.html
|
||||||
|
# 或者
|
||||||
|
double-click index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **本地服务器运行**（推荐）
|
||||||
|
```bash
|
||||||
|
# 使用Python
|
||||||
|
python -m http.server 8000
|
||||||
|
# 或使用Node.js
|
||||||
|
npx serve .
|
||||||
|
# 然后访问 http://localhost:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术实现
|
||||||
|
|
||||||
|
- **HTML5**: 语义化标签结构
|
||||||
|
- **CSS3**: 基于Tailwind CSS的样式系统，包含自定义动画
|
||||||
|
- **JavaScript ES6+**: 原生JS实现所有交互功能
|
||||||
|
- **响应式设计**: 适配不同设备屏幕
|
||||||
|
|
||||||
|
## 浏览器兼容性
|
||||||
|
|
||||||
|
- Chrome 60+
|
||||||
|
- Firefox 55+
|
||||||
|
- Safari 12+
|
||||||
|
- Edge 79+
|
||||||
|
|
||||||
|
## 快捷键
|
||||||
|
|
||||||
|
- `ESC`: 返回首页
|
||||||
|
- `Ctrl+F`: 聚焦搜索框
|
||||||
|
|
||||||
|
## 定制说明
|
||||||
|
|
||||||
|
如需修改样式或功能，可以编辑以下文件：
|
||||||
|
- `css/styles.css`: 修改样式
|
||||||
|
- `js/main.js`: 修改交互逻辑
|
||||||
|
- `index.html`: 修改页面结构
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. 这是一个静态演示版本，所有数据都是模拟数据
|
||||||
|
2. 开关切换、按钮点击等操作只有视觉反馈，不会实际提交数据
|
||||||
|
3. 为了演示效果，保留了完整的交互逻辑和动画效果
|
||||||
|
|
||||||
|
## 原项目信息
|
||||||
|
|
||||||
|
- 原技术栈: Next.js + React + Tailwind CSS + shadcn/ui
|
||||||
|
- 转换时间: 2025年
|
||||||
|
- 转换方式: 手动转换为纯HTML/CSS/JS
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,116 @@
|
||||||
|
# 大数集市商户端 Demo
|
||||||
|
|
||||||
|
这是一个纯HTML版本的中文商户后台管理系统演示项目，基于原始的Next.js项目转换而来。
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
demo/
|
||||||
|
├── index.html # 主页面文件
|
||||||
|
├── css/
|
||||||
|
│ └── styles.css # 样式文件
|
||||||
|
├── js/
|
||||||
|
│ └── main.js # JavaScript交互逻辑
|
||||||
|
├── images/ # 静态资源文件
|
||||||
|
│ ├── placeholder.svg
|
||||||
|
│ ├── placeholder.png
|
||||||
|
│ └── ...
|
||||||
|
└── README.md # 说明文档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
### ✅ 已实现功能
|
||||||
|
|
||||||
|
1. **完整的页面布局**
|
||||||
|
- 绿色主题的顶部导航栏
|
||||||
|
- 左侧折叠式菜单
|
||||||
|
- 右侧主内容区域
|
||||||
|
|
||||||
|
2. **交互功能**
|
||||||
|
- 菜单展开/收起动画
|
||||||
|
- 页面内容切换（如等级设置页面）
|
||||||
|
- 开关按钮的切换效果
|
||||||
|
- 搜索菜单功能
|
||||||
|
|
||||||
|
3. **响应式设计**
|
||||||
|
- 支持桌面端和移动端布局
|
||||||
|
- 自适应屏幕大小
|
||||||
|
|
||||||
|
4. **用户体验**
|
||||||
|
- 平滑的动画过渡效果
|
||||||
|
- 键盘快捷键支持（ESC回首页，Ctrl+F搜索）
|
||||||
|
- 通知提示系统
|
||||||
|
|
||||||
|
### 🎯 主要页面
|
||||||
|
|
||||||
|
- **首页**: 默认欢迎页面
|
||||||
|
- **等级设置**: 会员等级管理表格，包含开关切换功能
|
||||||
|
|
||||||
|
### 🔧 菜单项
|
||||||
|
|
||||||
|
- 首页
|
||||||
|
- 运营管理（可展开）
|
||||||
|
- 数据中心
|
||||||
|
- 优惠券营销工具管理
|
||||||
|
- 预售营销工具管理
|
||||||
|
- 会员管理（可展开，包含等级设置等子菜单）
|
||||||
|
- 钱包管理（可展开）
|
||||||
|
- 运费管理（可展开）
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
1. **直接打开**
|
||||||
|
```bash
|
||||||
|
# 在浏览器中打开
|
||||||
|
open index.html
|
||||||
|
# 或者
|
||||||
|
double-click index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **本地服务器运行**（推荐）
|
||||||
|
```bash
|
||||||
|
# 使用Python
|
||||||
|
python -m http.server 8000
|
||||||
|
# 或使用Node.js
|
||||||
|
npx serve .
|
||||||
|
# 然后访问 http://localhost:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术实现
|
||||||
|
|
||||||
|
- **HTML5**: 语义化标签结构
|
||||||
|
- **CSS3**: 基于Tailwind CSS的样式系统，包含自定义动画
|
||||||
|
- **JavaScript ES6+**: 原生JS实现所有交互功能
|
||||||
|
- **响应式设计**: 适配不同设备屏幕
|
||||||
|
|
||||||
|
## 浏览器兼容性
|
||||||
|
|
||||||
|
- Chrome 60+
|
||||||
|
- Firefox 55+
|
||||||
|
- Safari 12+
|
||||||
|
- Edge 79+
|
||||||
|
|
||||||
|
## 快捷键
|
||||||
|
|
||||||
|
- `ESC`: 返回首页
|
||||||
|
- `Ctrl+F`: 聚焦搜索框
|
||||||
|
|
||||||
|
## 定制说明
|
||||||
|
|
||||||
|
如需修改样式或功能，可以编辑以下文件：
|
||||||
|
- `css/styles.css`: 修改样式
|
||||||
|
- `js/main.js`: 修改交互逻辑
|
||||||
|
- `index.html`: 修改页面结构
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. 这是一个静态演示版本，所有数据都是模拟数据
|
||||||
|
2. 开关切换、按钮点击等操作只有视觉反馈，不会实际提交数据
|
||||||
|
3. 为了演示效果，保留了完整的交互逻辑和动画效果
|
||||||
|
|
||||||
|
## 原项目信息
|
||||||
|
|
||||||
|
- 原技术栈: Next.js + React + Tailwind CSS + shadcn/ui
|
||||||
|
- 转换时间: 2025年
|
||||||
|
- 转换方式: 手动转换为纯HTML/CSS/JS
|
||||||
|
|
@ -0,0 +1,638 @@
|
||||||
|
/* Reset and Base Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #111827;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility Classes */
|
||||||
|
.min-h-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-50 {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-green-700 {
|
||||||
|
background-color: #15803d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-green-600 {
|
||||||
|
background-color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-100 {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-200 {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-300 {
|
||||||
|
background-color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-white {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-500 {
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-600 {
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-700 {
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-900 {
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-blue-500 {
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-green-600 {
|
||||||
|
color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-green-900 {
|
||||||
|
color: #14532d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-4 {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-3 {
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-2 {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-2\.5 {
|
||||||
|
padding-top: 0.625rem;
|
||||||
|
padding-bottom: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-4 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-6 {
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-3 {
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-6 {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-2 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-3 {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-6 {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-2 {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-3 {
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-4 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-lg {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-sm {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-xs {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-medium {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-4 {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-4 {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-3 {
|
||||||
|
height: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-3 {
|
||||||
|
width: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-8 {
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-8 {
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-16 {
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-16 {
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-96 {
|
||||||
|
height: 24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-full {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-48 {
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-11 {
|
||||||
|
width: 2.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-6 {
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-5 {
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-5 {
|
||||||
|
width: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-md {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-lg {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-full {
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-r {
|
||||||
|
border-right-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-b {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-l-2 {
|
||||||
|
border-left-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-gray-200 {
|
||||||
|
border-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-gray-100 {
|
||||||
|
border-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-gray-300 {
|
||||||
|
border-color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-green-500 {
|
||||||
|
border-color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-sm {
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-none {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-y-1 > * + * {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1 1 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition-transform {
|
||||||
|
transition-property: transform;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition-colors {
|
||||||
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate-180 {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-4 {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-2 {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracking-wider {
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.whitespace-nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-auto {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divide-y > * + * {
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divide-gray-200 > * + * {
|
||||||
|
border-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer:checked ~ .peer-checked\:bg-green-600 {
|
||||||
|
background-color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-checked\:after\:translate-x-full {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-checked\:after\:border-white::after {
|
||||||
|
border-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:content-\[\'\'\]::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:absolute::after {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:top-\[2px\]::after {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:left-\[2px\]::after {
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:bg-white::after {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:border-gray-300::after {
|
||||||
|
border-color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:border::after {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:rounded-full::after {
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:h-5::after {
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:w-5::after {
|
||||||
|
width: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after\:transition-all::after {
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-focus\:outline-none:focus ~ .peer-focus\:outline-none {
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-focus\:ring-4:focus ~ .peer-focus\:ring-4 {
|
||||||
|
box-shadow: 0 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-focus\:ring-green-300:focus ~ .peer-focus\:ring-green-300 {
|
||||||
|
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[calc\(100vh-60px\)\] {
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-flex {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-\[2px\] {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-\[2px\] {
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover Effects */
|
||||||
|
.hover\:bg-gray-50:hover {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:bg-gray-100:hover {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:bg-green-600:hover {
|
||||||
|
background-color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:text-green-900:hover {
|
||||||
|
color: #14532d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus Effects */
|
||||||
|
.focus\:border-green-500:focus {
|
||||||
|
border-color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus\:outline-none:focus {
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Toggle Switch Styles */
|
||||||
|
.toggle-switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 44px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
left: 2px;
|
||||||
|
top: 2px;
|
||||||
|
background-color: white;
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .toggle-slider {
|
||||||
|
background-color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .toggle-slider {
|
||||||
|
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .toggle-slider:before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table Styles */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #6b7280;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody td {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:hover {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Styles */
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input Styles */
|
||||||
|
input[type="text"] {
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
width: 100%;
|
||||||
|
transition: border-color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.w-48 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[calc\(100vh-60px\)\] {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,305 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端</title>
|
||||||
|
<link rel="stylesheet" href="./css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-blue-500 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer" onclick="showLevelSettings()">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<!-- Default Content -->
|
||||||
|
<div id="default-content" class="bg-white rounded-lg shadow-sm border border-gray-200 h-96">
|
||||||
|
<div class="flex items-center justify-center h-full text-gray-500">
|
||||||
|
<div class="text-center">
|
||||||
|
<svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-lg">欢迎使用大数集市商户端</p>
|
||||||
|
<p class="text-sm mt-2">请从左侧菜单选择功能</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Level Settings Content -->
|
||||||
|
<div id="level-settings-content" class="bg-white rounded-lg shadow-sm border border-gray-200 hidden">
|
||||||
|
<div class="p-6 border-b border-gray-200">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">等级设置</h2>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
店铺名称
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
是否启用会员
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
会员等级
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,259 @@
|
||||||
|
// 全局状态管理
|
||||||
|
let currentExpandedMenus = [];
|
||||||
|
let currentSelectedMenuItem = '';
|
||||||
|
|
||||||
|
// DOM 加载完成后初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('大数集市商户端初始化完成');
|
||||||
|
|
||||||
|
// 初始化菜单状态
|
||||||
|
initializeMenus();
|
||||||
|
|
||||||
|
// 初始化开关状态
|
||||||
|
initializeSwitches();
|
||||||
|
|
||||||
|
// 添加搜索功能
|
||||||
|
initializeSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 菜单展开/收起功能
|
||||||
|
function toggleMenu(menuId) {
|
||||||
|
const arrow = document.getElementById(menuId + '-arrow');
|
||||||
|
const submenu = document.getElementById(menuId + '-submenu');
|
||||||
|
|
||||||
|
if (currentExpandedMenus.includes(menuId)) {
|
||||||
|
// 收起菜单
|
||||||
|
currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.remove('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.add('hidden');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 展开菜单
|
||||||
|
currentExpandedMenus.push(menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.add('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.remove('hidden');
|
||||||
|
submenu.classList.add('fade-in');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('菜单状态更新:', menuId, currentExpandedMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示等级设置页面
|
||||||
|
function showLevelSettings() {
|
||||||
|
// 隐藏默认内容
|
||||||
|
const defaultContent = document.getElementById('default-content');
|
||||||
|
const levelSettingsContent = document.getElementById('level-settings-content');
|
||||||
|
|
||||||
|
if (defaultContent) {
|
||||||
|
defaultContent.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (levelSettingsContent) {
|
||||||
|
levelSettingsContent.classList.remove('hidden');
|
||||||
|
levelSettingsContent.classList.add('fade-in');
|
||||||
|
}
|
||||||
|
|
||||||
|
currentSelectedMenuItem = 'level-settings';
|
||||||
|
console.log('切换到等级设置页面');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示默认页面
|
||||||
|
function showDefaultContent() {
|
||||||
|
const defaultContent = document.getElementById('default-content');
|
||||||
|
const levelSettingsContent = document.getElementById('level-settings-content');
|
||||||
|
|
||||||
|
if (levelSettingsContent) {
|
||||||
|
levelSettingsContent.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (defaultContent) {
|
||||||
|
defaultContent.classList.remove('hidden');
|
||||||
|
defaultContent.classList.add('fade-in');
|
||||||
|
}
|
||||||
|
|
||||||
|
currentSelectedMenuItem = '';
|
||||||
|
console.log('切换到默认页面');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开关切换功能
|
||||||
|
function toggleSwitch(switchElement) {
|
||||||
|
const isChecked = switchElement.checked;
|
||||||
|
console.log('开关状态:', isChecked);
|
||||||
|
|
||||||
|
// 添加视觉反馈
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
if (isChecked) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
} else {
|
||||||
|
slider.style.backgroundColor = '#e5e7eb';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化菜单状态
|
||||||
|
function initializeMenus() {
|
||||||
|
// 会员管理菜单默认展开
|
||||||
|
toggleMenu('member');
|
||||||
|
|
||||||
|
// 添加首页点击事件
|
||||||
|
const homeMenuItem = document.querySelector('[onclick*="首页"]');
|
||||||
|
if (homeMenuItem) {
|
||||||
|
homeMenuItem.addEventListener('click', showDefaultContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('菜单初始化完成');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化开关状态
|
||||||
|
function initializeSwitches() {
|
||||||
|
const switches = document.querySelectorAll('input[type="checkbox"]');
|
||||||
|
switches.forEach(switchElement => {
|
||||||
|
// 为已选中的开关设置正确的样式
|
||||||
|
if (switchElement.checked) {
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('开关初始化完成，共', switches.length, '个开关');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索功能
|
||||||
|
function initializeSearch() {
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', function(e) {
|
||||||
|
const searchTerm = e.target.value.toLowerCase();
|
||||||
|
filterMenuItems(searchTerm);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤菜单项
|
||||||
|
function filterMenuItems(searchTerm) {
|
||||||
|
const menuItems = document.querySelectorAll('nav div');
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
const text = item.textContent.toLowerCase();
|
||||||
|
if (text.includes(searchTerm) || searchTerm === '') {
|
||||||
|
item.style.display = '';
|
||||||
|
} else {
|
||||||
|
item.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('搜索筛选:', searchTerm);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加一些实用的辅助函数
|
||||||
|
function showNotification(message, type = 'info') {
|
||||||
|
console.log('通知:', message, '类型:', type);
|
||||||
|
|
||||||
|
// 创建通知元素
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.className = `notification ${type}`;
|
||||||
|
notification.textContent = message;
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 根据类型设置颜色
|
||||||
|
switch(type) {
|
||||||
|
case 'success':
|
||||||
|
notification.style.backgroundColor = '#16a34a';
|
||||||
|
break;
|
||||||
|
case 'error':
|
||||||
|
notification.style.backgroundColor = '#dc2626';
|
||||||
|
break;
|
||||||
|
case 'warning':
|
||||||
|
notification.style.backgroundColor = '#d97706';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
notification.style.backgroundColor = '#3b82f6';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
// 3秒后自动消失
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(notification);
|
||||||
|
}, 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 等级明细设置功能
|
||||||
|
function showLevelDetail(shopName) {
|
||||||
|
showNotification(`正在设置 ${shopName} 的等级明细`, 'info');
|
||||||
|
console.log('设置等级明细:', shopName);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加表格行的点击事件
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const levelDetailButtons = document.querySelectorAll('button');
|
||||||
|
levelDetailButtons.forEach(button => {
|
||||||
|
if (button.textContent.includes('设置等级明细')) {
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
const row = this.closest('tr');
|
||||||
|
const shopName = row.querySelector('td').textContent;
|
||||||
|
showLevelDetail(shopName);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 键盘快捷键支持
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// ESC键回到首页
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
showDefaultContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ctrl+F 聚焦搜索框
|
||||||
|
if (e.ctrlKey && e.key === 'f') {
|
||||||
|
e.preventDefault();
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 窗口大小变化时的响应式处理
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
const sidebar = document.querySelector('aside');
|
||||||
|
if (window.innerWidth < 768 && sidebar) {
|
||||||
|
console.log('切换到移动端布局');
|
||||||
|
// 可以在这里添加移动端特定的逻辑
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导出一些全局函数供HTML调用
|
||||||
|
window.toggleMenu = toggleMenu;
|
||||||
|
window.showLevelSettings = showLevelSettings;
|
||||||
|
window.showDefaultContent = showDefaultContent;
|
||||||
|
window.toggleSwitch = toggleSwitch;
|
||||||
|
window.showLevelDetail = showLevelDetail;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,201 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端</title>
|
||||||
|
<link rel="stylesheet" href="./css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-blue-500 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="window.location.href='pages/data-center.html'">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="window.location.href='pages/coupon-marketing.html'">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer" onclick="window.location.href='pages/member/level-settings.html'">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<!-- Default Content -->
|
||||||
|
<div id="default-content" class="bg-white rounded-lg shadow-sm border border-gray-200 h-96">
|
||||||
|
<div class="flex items-center justify-center h-full text-gray-500">
|
||||||
|
<div class="text-center">
|
||||||
|
<svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-lg">欢迎使用大数集市商户端</p>
|
||||||
|
<p class="text-sm mt-2">请从左侧菜单选择功能</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
// 通用工具函数和组件
|
||||||
|
|
||||||
|
// 显示通知
|
||||||
|
function showNotification(message, type = 'info') {
|
||||||
|
console.log('通知:', message, '类型:', type);
|
||||||
|
|
||||||
|
// 创建通知元素
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.className = `notification ${type}`;
|
||||||
|
notification.textContent = message;
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 根据类型设置颜色
|
||||||
|
switch(type) {
|
||||||
|
case 'success':
|
||||||
|
notification.style.backgroundColor = '#16a34a';
|
||||||
|
break;
|
||||||
|
case 'error':
|
||||||
|
notification.style.backgroundColor = '#dc2626';
|
||||||
|
break;
|
||||||
|
case 'warning':
|
||||||
|
notification.style.backgroundColor = '#d97706';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
notification.style.backgroundColor = '#3b82f6';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
// 3秒后自动消失
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
if (notification.parentNode) {
|
||||||
|
document.body.removeChild(notification);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开关切换功能
|
||||||
|
function toggleSwitch(switchElement) {
|
||||||
|
const isChecked = switchElement.checked;
|
||||||
|
console.log('开关状态:', isChecked);
|
||||||
|
|
||||||
|
// 添加视觉反馈
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
if (isChecked) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
} else {
|
||||||
|
slider.style.backgroundColor = '#e5e7eb';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化开关状态
|
||||||
|
function initializeSwitches() {
|
||||||
|
const switches = document.querySelectorAll('input[type="checkbox"]');
|
||||||
|
switches.forEach(switchElement => {
|
||||||
|
// 为已选中的开关设置正确的样式
|
||||||
|
if (switchElement.checked) {
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('开关初始化完成，共', switches.length, '个开关');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 键盘快捷键支持
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// ESC键回到首页
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
window.location.href = '../index.html';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DOM 加载完成后初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('页面初始化完成');
|
||||||
|
initializeSwitches();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导出全局函数
|
||||||
|
window.showNotification = showNotification;
|
||||||
|
window.toggleSwitch = toggleSwitch;
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
// 主页面的JavaScript逻辑 - 简化版
|
||||||
|
|
||||||
|
// 全局状态管理
|
||||||
|
let currentExpandedMenus = [];
|
||||||
|
|
||||||
|
// DOM 加载完成后初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('大数集市商户端主页面初始化完成');
|
||||||
|
|
||||||
|
// 初始化菜单状态
|
||||||
|
initializeMenus();
|
||||||
|
|
||||||
|
// 初始化开关状态
|
||||||
|
initializeSwitches();
|
||||||
|
|
||||||
|
// 添加搜索功能
|
||||||
|
initializeSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 菜单展开/收起功能
|
||||||
|
function toggleMenu(menuId) {
|
||||||
|
const arrow = document.getElementById(menuId + '-arrow');
|
||||||
|
const submenu = document.getElementById(menuId + '-submenu');
|
||||||
|
|
||||||
|
if (currentExpandedMenus.includes(menuId)) {
|
||||||
|
// 收起菜单
|
||||||
|
currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.remove('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.add('hidden');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 展开菜单
|
||||||
|
currentExpandedMenus.push(menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.add('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.remove('hidden');
|
||||||
|
submenu.classList.add('fade-in');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('菜单状态更新:', menuId, currentExpandedMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开关切换功能
|
||||||
|
function toggleSwitch(switchElement) {
|
||||||
|
const isChecked = switchElement.checked;
|
||||||
|
console.log('开关状态:', isChecked);
|
||||||
|
|
||||||
|
// 添加视觉反馈
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
if (isChecked) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
} else {
|
||||||
|
slider.style.backgroundColor = '#e5e7eb';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化菜单状态
|
||||||
|
function initializeMenus() {
|
||||||
|
// 会员管理菜单默认展开
|
||||||
|
toggleMenu('member');
|
||||||
|
|
||||||
|
console.log('菜单初始化完成');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化开关状态
|
||||||
|
function initializeSwitches() {
|
||||||
|
const switches = document.querySelectorAll('input[type="checkbox"]');
|
||||||
|
switches.forEach(switchElement => {
|
||||||
|
// 为已选中的开关设置正确的样式
|
||||||
|
if (switchElement.checked) {
|
||||||
|
const slider = switchElement.nextElementSibling;
|
||||||
|
if (slider) {
|
||||||
|
slider.style.backgroundColor = '#16a34a';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('开关初始化完成，共', switches.length, '个开关');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索功能
|
||||||
|
function initializeSearch() {
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', function(e) {
|
||||||
|
const searchTerm = e.target.value.toLowerCase();
|
||||||
|
filterMenuItems(searchTerm);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤菜单项
|
||||||
|
function filterMenuItems(searchTerm) {
|
||||||
|
const menuItems = document.querySelectorAll('nav div');
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
const text = item.textContent.toLowerCase();
|
||||||
|
if (text.includes(searchTerm) || searchTerm === '') {
|
||||||
|
item.style.display = '';
|
||||||
|
} else {
|
||||||
|
item.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('搜索筛选:', searchTerm);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示通知
|
||||||
|
function showNotification(message, type = 'info') {
|
||||||
|
console.log('通知:', message, '类型:', type);
|
||||||
|
|
||||||
|
// 创建通知元素
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.className = `notification ${type}`;
|
||||||
|
notification.textContent = message;
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 根据类型设置颜色
|
||||||
|
switch(type) {
|
||||||
|
case 'success':
|
||||||
|
notification.style.backgroundColor = '#16a34a';
|
||||||
|
break;
|
||||||
|
case 'error':
|
||||||
|
notification.style.backgroundColor = '#dc2626';
|
||||||
|
break;
|
||||||
|
case 'warning':
|
||||||
|
notification.style.backgroundColor = '#d97706';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
notification.style.backgroundColor = '#3b82f6';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
// 3秒后自动消失
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
if (notification.parentNode) {
|
||||||
|
document.body.removeChild(notification);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 键盘快捷键支持
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// Ctrl+F 聚焦搜索框
|
||||||
|
if (e.ctrlKey && e.key === 'f') {
|
||||||
|
e.preventDefault();
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 窗口大小变化时的响应式处理
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
const sidebar = document.querySelector('aside');
|
||||||
|
if (window.innerWidth < 768 && sidebar) {
|
||||||
|
console.log('切换到移动端布局');
|
||||||
|
// 可以在这里添加移动端特定的逻辑
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导出全局函数
|
||||||
|
window.toggleMenu = toggleMenu;
|
||||||
|
window.toggleSwitch = toggleSwitch;
|
||||||
|
window.showNotification = showNotification;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
||||||
|
// 优惠券营销工具管理页面的JavaScript逻辑
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('优惠券营销工具管理页面初始化完成');
|
||||||
|
// 这里可以添加优惠券管理相关的功能
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
// 数据中心页面的JavaScript逻辑
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('数据中心页面初始化完成');
|
||||||
|
// 这里可以添加数据中心相关的功能
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
// 等级明细页面的JavaScript逻辑
|
||||||
|
|
||||||
|
let currentShopName = '';
|
||||||
|
|
||||||
|
// 获取URL参数
|
||||||
|
function getUrlParameter(name) {
|
||||||
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
|
const results = regex.exec(location.search);
|
||||||
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
currentShopName = getUrlParameter('shop');
|
||||||
|
if (currentShopName) {
|
||||||
|
document.getElementById('page-title').textContent = `${currentShopName} - 等级设置明细`;
|
||||||
|
loadLevelData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载等级数据
|
||||||
|
function loadLevelData() {
|
||||||
|
// 模拟等级数据
|
||||||
|
const mockLevels = [
|
||||||
|
{ name: 'LV1', growth: 100, members: 1250, benefits: '9.5折优惠' },
|
||||||
|
{ name: 'LV2', growth: 500, members: 850, benefits: '9折优惠, 积分双倍' },
|
||||||
|
{ name: 'LV3', growth: 1200, members: 450, benefits: '8.5折优惠, 积分双倍, 生日优惠券' },
|
||||||
|
{ name: 'LV4', growth: 2500, members: 180, benefits: '8折优惠, 积分三倍, 生日优惠券, 专属客服' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const tableBody = document.getElementById('level-table-body');
|
||||||
|
tableBody.innerHTML = mockLevels.map(level => `
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 text-sm text-gray-900">${level.name}</td>
|
||||||
|
<td class="px-4 py-3 text-sm text-gray-900">${level.growth}</td>
|
||||||
|
<td class="px-4 py-3 text-sm text-gray-900">${level.members}</td>
|
||||||
|
<td class="px-4 py-3 text-sm text-gray-900">${level.benefits}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开等级编辑页面
|
||||||
|
function openLevelEdit() {
|
||||||
|
const encodedShopName = encodeURIComponent(currentShopName);
|
||||||
|
window.location.href = `level-edit.html?shop=${encodedShopName}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交等级明细
|
||||||
|
function submitLevelDetail() {
|
||||||
|
showNotification(`${currentShopName} 等级明细已提交`, 'success');
|
||||||
|
console.log('提交等级明细:', currentShopName);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出函数
|
||||||
|
window.openLevelEdit = openLevelEdit;
|
||||||
|
window.submitLevelDetail = submitLevelDetail;
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
// 等级编辑页面的JavaScript逻辑
|
||||||
|
|
||||||
|
let currentShopName = '';
|
||||||
|
let currentLevels = [];
|
||||||
|
|
||||||
|
// 获取URL参数
|
||||||
|
function getUrlParameter(name) {
|
||||||
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
|
const results = regex.exec(location.search);
|
||||||
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
currentShopName = getUrlParameter('shop');
|
||||||
|
if (currentShopName) {
|
||||||
|
document.getElementById('page-title').textContent = `${currentShopName} - 等级编辑`;
|
||||||
|
loadLevelEditData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载等级编辑数据
|
||||||
|
function loadLevelEditData() {
|
||||||
|
// 模拟等级编辑数据
|
||||||
|
currentLevels = [
|
||||||
|
{
|
||||||
|
level: 'LV1',
|
||||||
|
name: '铜牌会员',
|
||||||
|
growthMin: 0,
|
||||||
|
growthMax: 100,
|
||||||
|
memberDiscount: true,
|
||||||
|
discountRate: 5,
|
||||||
|
pointExchange: false,
|
||||||
|
birthdayCoupon: false,
|
||||||
|
birthdayDoublePoints: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
level: 'LV2',
|
||||||
|
name: '银牌会员',
|
||||||
|
growthMin: 101,
|
||||||
|
growthMax: 500,
|
||||||
|
memberDiscount: true,
|
||||||
|
discountRate: 10,
|
||||||
|
pointExchange: true,
|
||||||
|
birthdayCoupon: true,
|
||||||
|
birthdayDoublePoints: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
level: 'LV3',
|
||||||
|
name: '金牌会员',
|
||||||
|
growthMin: 501,
|
||||||
|
growthMax: 1200,
|
||||||
|
memberDiscount: true,
|
||||||
|
discountRate: 15,
|
||||||
|
pointExchange: true,
|
||||||
|
birthdayCoupon: true,
|
||||||
|
birthdayDoublePoints: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
level: 'LV4',
|
||||||
|
name: '钻石会员',
|
||||||
|
growthMin: 1201,
|
||||||
|
growthMax: 9999,
|
||||||
|
memberDiscount: true,
|
||||||
|
discountRate: 20,
|
||||||
|
pointExchange: true,
|
||||||
|
birthdayCoupon: true,
|
||||||
|
birthdayDoublePoints: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
renderLevelEditTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染等级编辑表格
|
||||||
|
function renderLevelEditTable() {
|
||||||
|
const tableBody = document.getElementById('level-edit-table-body');
|
||||||
|
tableBody.innerHTML = currentLevels.map((level, index) => `
|
||||||
|
<tr>
|
||||||
|
<td class="px-3 py-3 text-sm text-gray-900">${level.level}</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="text" value="${level.name}" class="w-full text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="levelName_${index}">
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<input type="number" value="${level.growthMin}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="growthMin_${index}">
|
||||||
|
<span class="text-gray-500">-</span>
|
||||||
|
<input type="number" value="${level.growthMax}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="growthMax_${index}">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="checkbox" ${level.memberDiscount ? 'checked' : ''} id="memberDiscount_${index}" onchange="toggleDiscountRate(${index})">
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="number" value="${level.discountRate}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none ${!level.memberDiscount ? 'bg-gray-100' : ''}" id="discountRate_${index}" ${!level.memberDiscount ? 'disabled' : ''}>
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="checkbox" ${level.pointExchange ? 'checked' : ''} id="pointExchange_${index}">
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="checkbox" ${level.birthdayCoupon ? 'checked' : ''} id="birthdayCoupon_${index}" onchange="toggleCouponButton(${index})">
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<button class="px-3 py-1 text-xs text-green-600 border border-green-600 rounded hover:bg-green-50 transition-colors ${!level.birthdayCoupon ? 'hidden' : ''}" id="addCouponBtn_${index}" onclick="addBirthdayCoupon(${index})">
|
||||||
|
添加优惠券
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<input type="checkbox" ${level.birthdayDoublePoints ? 'checked' : ''} id="birthdayDoublePoints_${index}">
|
||||||
|
</td>
|
||||||
|
<td class="px-3 py-3">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
${index === currentLevels.length - 1 ? `
|
||||||
|
<button class="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700" onclick="addNewLevel()">
|
||||||
|
添加
|
||||||
|
</button>
|
||||||
|
` : ''}
|
||||||
|
<button class="px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700" onclick="deleteLevel(${index})">
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换折扣率输入框状态
|
||||||
|
function toggleDiscountRate(index) {
|
||||||
|
const checkbox = document.getElementById(`memberDiscount_${index}`);
|
||||||
|
const discountInput = document.getElementById(`discountRate_${index}`);
|
||||||
|
|
||||||
|
if (checkbox && discountInput) {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
discountInput.disabled = false;
|
||||||
|
discountInput.classList.remove('bg-gray-100');
|
||||||
|
} else {
|
||||||
|
discountInput.disabled = true;
|
||||||
|
discountInput.classList.add('bg-gray-100');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换优惠券按钮显示
|
||||||
|
function toggleCouponButton(index) {
|
||||||
|
const checkbox = document.getElementById(`birthdayCoupon_${index}`);
|
||||||
|
const addButton = document.getElementById(`addCouponBtn_${index}`);
|
||||||
|
|
||||||
|
if (checkbox && addButton) {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
addButton.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
addButton.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加生日优惠券
|
||||||
|
function addBirthdayCoupon(index) {
|
||||||
|
// 显示弹窗
|
||||||
|
const modal = document.getElementById('coupon-modal');
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
resetCouponForm();
|
||||||
|
console.log('显示添加生日优惠券弹窗，等级索引:', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭优惠券弹窗
|
||||||
|
function closeCouponModal(event) {
|
||||||
|
// 如果点击的是弹窗背景，则关闭弹窗
|
||||||
|
if (event && event.target !== event.currentTarget) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modal = document.getElementById('coupon-modal');
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
console.log('关闭优惠券弹窗');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置优惠券表单
|
||||||
|
function resetCouponForm() {
|
||||||
|
const form = document.getElementById('coupon-form');
|
||||||
|
if (form) {
|
||||||
|
// 重置为默认值
|
||||||
|
document.getElementById('coupon-name').value = '生日优惠券';
|
||||||
|
document.getElementById('coupon-threshold').value = '10';
|
||||||
|
document.getElementById('coupon-discount').value = '1';
|
||||||
|
document.getElementById('coupon-validity').value = '1';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调整门槛金额
|
||||||
|
function adjustThreshold(delta) {
|
||||||
|
const input = document.getElementById('coupon-threshold');
|
||||||
|
if (input) {
|
||||||
|
const currentValue = parseInt(input.value) || 0;
|
||||||
|
const newValue = Math.max(0, currentValue + delta);
|
||||||
|
input.value = newValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调整减免金额
|
||||||
|
function adjustDiscount(delta) {
|
||||||
|
const input = document.getElementById('coupon-discount');
|
||||||
|
if (input) {
|
||||||
|
const currentValue = parseInt(input.value) || 0;
|
||||||
|
const newValue = Math.max(0, currentValue + delta);
|
||||||
|
input.value = newValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交优惠券
|
||||||
|
function submitCoupon() {
|
||||||
|
const form = document.getElementById('coupon-form');
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
// 获取表单数据
|
||||||
|
const couponData = {
|
||||||
|
name: document.getElementById('coupon-name').value,
|
||||||
|
threshold: document.getElementById('coupon-threshold').value,
|
||||||
|
discount: document.getElementById('coupon-discount').value,
|
||||||
|
validity: document.getElementById('coupon-validity').value
|
||||||
|
};
|
||||||
|
|
||||||
|
// 验证表单
|
||||||
|
if (!couponData.name.trim()) {
|
||||||
|
showNotification('请输入优惠券名称', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!couponData.threshold || couponData.threshold < 0) {
|
||||||
|
showNotification('请输入有效的门槛金额', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!couponData.discount || couponData.discount < 0) {
|
||||||
|
showNotification('请输入有效的减免金额', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parseInt(couponData.discount) >= parseInt(couponData.threshold)) {
|
||||||
|
showNotification('减免金额不能大于或等于门槛金额', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交成功
|
||||||
|
console.log('提交优惠券数据:', couponData);
|
||||||
|
showNotification(`成功添加优惠券：${couponData.name}`, 'success');
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
closeCouponModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除等级行
|
||||||
|
function deleteLevel(index) {
|
||||||
|
if (currentLevels.length <= 1) {
|
||||||
|
showNotification('至少需要保留一个等级', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentLevels.splice(index, 1);
|
||||||
|
|
||||||
|
// 重新编号等级
|
||||||
|
currentLevels.forEach((level, i) => {
|
||||||
|
level.level = `LV${i + 1}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
renderLevelEditTable();
|
||||||
|
showNotification(`删除等级 ${index + 1}`, 'success');
|
||||||
|
console.log('删除等级:', index);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加新等级
|
||||||
|
function addNewLevel() {
|
||||||
|
const newLevelNum = currentLevels.length + 1;
|
||||||
|
const lastLevel = currentLevels[currentLevels.length - 1];
|
||||||
|
|
||||||
|
const newLevel = {
|
||||||
|
level: `LV${newLevelNum}`,
|
||||||
|
name: `${getLevelName(newLevelNum)}会员`,
|
||||||
|
growthMin: lastLevel.growthMax + 1,
|
||||||
|
growthMax: lastLevel.growthMax + 1000,
|
||||||
|
memberDiscount: true,
|
||||||
|
discountRate: Math.min(lastLevel.discountRate + 5, 50),
|
||||||
|
pointExchange: true,
|
||||||
|
birthdayCoupon: true,
|
||||||
|
birthdayDoublePoints: true
|
||||||
|
};
|
||||||
|
|
||||||
|
currentLevels.push(newLevel);
|
||||||
|
renderLevelEditTable();
|
||||||
|
showNotification(`添加新等级 LV${newLevelNum}`, 'success');
|
||||||
|
console.log('添加新等级:', newLevel);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取等级名称
|
||||||
|
function getLevelName(levelNum) {
|
||||||
|
const names = ['铜牌', '银牌', '金牌', '钻石', '黑钻', '至尊', '王者', '传奇'];
|
||||||
|
return names[levelNum - 1] || `LV${levelNum}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交等级编辑
|
||||||
|
function submitLevelEdit() {
|
||||||
|
showNotification(`${currentShopName} 等级编辑已提交`, 'success');
|
||||||
|
console.log('提交等级编辑:', currentShopName);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出函数
|
||||||
|
window.toggleDiscountRate = toggleDiscountRate;
|
||||||
|
window.toggleCouponButton = toggleCouponButton;
|
||||||
|
window.addBirthdayCoupon = addBirthdayCoupon;
|
||||||
|
window.closeCouponModal = closeCouponModal;
|
||||||
|
window.resetCouponForm = resetCouponForm;
|
||||||
|
window.adjustThreshold = adjustThreshold;
|
||||||
|
window.adjustDiscount = adjustDiscount;
|
||||||
|
window.addCouponThreshold = addCouponThreshold;
|
||||||
|
window.submitCoupon = submitCoupon;
|
||||||
|
window.deleteLevel = deleteLevel;
|
||||||
|
window.addNewLevel = addNewLevel;
|
||||||
|
window.submitLevelEdit = submitLevelEdit;
|
||||||
|
|
@ -0,0 +1,308 @@
|
||||||
|
// 等级设置页面的Tab系统JavaScript逻辑
|
||||||
|
|
||||||
|
// 初始化页面
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initializeSidebar();
|
||||||
|
initializeSidebarSearch();
|
||||||
|
// 默认打开等级设置Tab
|
||||||
|
openLevelSettingsTab();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开等级设置Tab（从member-tabs.js调用）
|
||||||
|
function openLevelSettingsTab() {
|
||||||
|
if (typeof memberTabManager !== 'undefined') {
|
||||||
|
memberTabManager.showDefaultContent();
|
||||||
|
// 创建等级设置tab
|
||||||
|
const content = generateLevelSettingsContent();
|
||||||
|
memberTabManager.createTab('level-settings', '等级设置', content, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成等级设置表格内容
|
||||||
|
function generateLevelSettingsContent() {
|
||||||
|
return `
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">等级设置</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 摊位名称筛选器 -->
|
||||||
|
<div class="mb-6 flex items-center gap-4">
|
||||||
|
<div class="flex-1 max-w-md">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">摊位名称</label>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="stall-dropdown-btn" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white text-left flex items-center justify-between" onclick="toggleStallDropdown()">
|
||||||
|
<span id="dropdown-text">请选择摊位名称...</span>
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div id="stall-dropdown-list" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden">
|
||||||
|
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<input type="checkbox" value="时尚服装店" class="mr-2" onchange="updateSelectedStalls()">
|
||||||
|
时尚服装店
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<input type="checkbox" value="数码电子城" class="mr-2" onchange="updateSelectedStalls()">
|
||||||
|
数码电子城
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<input type="checkbox" value="美食餐厅" class="mr-2" onchange="updateSelectedStalls()">
|
||||||
|
美食餐厅
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<input type="checkbox" value="家居生活馆" class="mr-2" onchange="updateSelectedStalls()">
|
||||||
|
家居生活馆
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<input type="checkbox" value="运动健身店" class="mr-2" onchange="updateSelectedStalls()">
|
||||||
|
运动健身店
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="selected-stalls" class="mt-2 flex flex-wrap gap-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-7 flex gap-3">
|
||||||
|
<button id="query-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="filterStallTable()">
|
||||||
|
查询
|
||||||
|
</button>
|
||||||
|
<button id="batch-edit-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="openBatchLevelEditTab()">
|
||||||
|
批量会员等级编辑
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
摊位名称
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
是否启用会员
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
会员等级
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('时尚服装店')">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('数码电子城')">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('美食餐厅')">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('家居生活馆')">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('运动健身店')">
|
||||||
|
设置等级明细
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 摊位筛选相关功能
|
||||||
|
let selectedStalls = [];
|
||||||
|
let dropdownOpen = false;
|
||||||
|
|
||||||
|
function toggleStallDropdown() {
|
||||||
|
const dropdown = document.getElementById('stall-dropdown-list');
|
||||||
|
const button = document.getElementById('stall-dropdown-btn');
|
||||||
|
|
||||||
|
if (dropdown && button) {
|
||||||
|
dropdownOpen = !dropdownOpen;
|
||||||
|
if (dropdownOpen) {
|
||||||
|
dropdown.classList.remove('hidden');
|
||||||
|
// 添加点击外部关闭功能
|
||||||
|
setTimeout(() => {
|
||||||
|
document.addEventListener('click', closeDropdownOnClickOutside);
|
||||||
|
}, 0);
|
||||||
|
} else {
|
||||||
|
dropdown.classList.add('hidden');
|
||||||
|
document.removeEventListener('click', closeDropdownOnClickOutside);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDropdownOnClickOutside(event) {
|
||||||
|
const dropdown = document.getElementById('stall-dropdown-list');
|
||||||
|
const button = document.getElementById('stall-dropdown-btn');
|
||||||
|
|
||||||
|
if (dropdown && button && !dropdown.contains(event.target) && !button.contains(event.target)) {
|
||||||
|
dropdown.classList.add('hidden');
|
||||||
|
dropdownOpen = false;
|
||||||
|
document.removeEventListener('click', closeDropdownOnClickOutside);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelectedStalls() {
|
||||||
|
const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
|
||||||
|
selectedStalls = [];
|
||||||
|
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
selectedStalls.push(checkbox.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
updateDropdownText();
|
||||||
|
updateSelectedStallsDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateDropdownText() {
|
||||||
|
const dropdownText = document.getElementById('dropdown-text');
|
||||||
|
if (dropdownText) {
|
||||||
|
if (selectedStalls.length === 0) {
|
||||||
|
dropdownText.textContent = '请选择摊位名称...';
|
||||||
|
} else if (selectedStalls.length === 1) {
|
||||||
|
dropdownText.textContent = selectedStalls[0];
|
||||||
|
} else {
|
||||||
|
dropdownText.textContent = `已选择 ${selectedStalls.length} 个摊位`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelectedStallsDisplay() {
|
||||||
|
const selectedDiv = document.getElementById('selected-stalls');
|
||||||
|
if (!selectedDiv) return;
|
||||||
|
|
||||||
|
selectedDiv.innerHTML = '';
|
||||||
|
|
||||||
|
selectedStalls.forEach(stall => {
|
||||||
|
const tag = document.createElement('span');
|
||||||
|
tag.className = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800';
|
||||||
|
tag.innerHTML = `
|
||||||
|
${stall}
|
||||||
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-green-200" onclick="removeSelectedStall('${stall}')">
|
||||||
|
<svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
selectedDiv.appendChild(tag);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeSelectedStall(stallName) {
|
||||||
|
selectedStalls = selectedStalls.filter(stall => stall !== stallName);
|
||||||
|
|
||||||
|
// 更新checkbox状态
|
||||||
|
const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
if (checkbox.value === stallName) {
|
||||||
|
checkbox.checked = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
updateDropdownText();
|
||||||
|
updateSelectedStallsDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterStallTable() {
|
||||||
|
const tableRows = document.querySelectorAll('#tab-content-area tbody tr');
|
||||||
|
|
||||||
|
if (selectedStalls.length === 0) {
|
||||||
|
// 如果没有选择任何摊位，显示所有行
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
row.style.display = '';
|
||||||
|
});
|
||||||
|
showNotification('已显示所有摊位', 'info');
|
||||||
|
} else {
|
||||||
|
// 根据选择的摊位筛选表格行
|
||||||
|
let visibleCount = 0;
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const stallNameCell = row.querySelector('td:first-child');
|
||||||
|
if (stallNameCell) {
|
||||||
|
const stallName = stallNameCell.textContent.trim();
|
||||||
|
if (selectedStalls.includes(stallName)) {
|
||||||
|
row.style.display = '';
|
||||||
|
visibleCount++;
|
||||||
|
} else {
|
||||||
|
row.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
showNotification(`已筛选显示 ${visibleCount} 个摊位`, 'success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出函数
|
||||||
|
window.openLevelSettingsTab = openLevelSettingsTab;
|
||||||
|
window.generateLevelSettingsContent = generateLevelSettingsContent;
|
||||||
|
window.openBatchLevelEditTab = openBatchLevelEditTab;
|
||||||
|
window.toggleStallDropdown = toggleStallDropdown;
|
||||||
|
window.updateSelectedStalls = updateSelectedStalls;
|
||||||
|
window.removeSelectedStall = removeSelectedStall;
|
||||||
|
window.filterStallTable = filterStallTable;
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
// 通用侧边栏组件的JavaScript逻辑
|
||||||
|
|
||||||
|
// 全局状态管理
|
||||||
|
let currentExpandedMenus = [];
|
||||||
|
|
||||||
|
// 获取当前页面路径信息
|
||||||
|
function getCurrentPageInfo() {
|
||||||
|
const path = window.location.pathname;
|
||||||
|
const filename = path.split('/').pop();
|
||||||
|
|
||||||
|
// 根据文件名判断当前页面
|
||||||
|
if (filename === 'index.html' || path.endsWith('/')) {
|
||||||
|
return { section: 'home', page: 'home' };
|
||||||
|
} else if (filename === 'data-center.html') {
|
||||||
|
return { section: 'data-center', page: 'data-center' };
|
||||||
|
} else if (filename === 'coupon-marketing.html') {
|
||||||
|
return { section: 'coupon-marketing', page: 'coupon-marketing' };
|
||||||
|
} else if (path.includes('/member/')) {
|
||||||
|
if (filename === 'level-settings.html') {
|
||||||
|
return { section: 'member', page: 'level-settings' };
|
||||||
|
} else if (filename === 'level-detail.html') {
|
||||||
|
return { section: 'member', page: 'level-detail' };
|
||||||
|
} else if (filename === 'level-edit.html') {
|
||||||
|
return { section: 'member', page: 'level-edit' };
|
||||||
|
}
|
||||||
|
return { section: 'member', page: 'unknown' };
|
||||||
|
}
|
||||||
|
|
||||||
|
return { section: 'unknown', page: 'unknown' };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 菜单展开/收起功能
|
||||||
|
function toggleMenu(menuId) {
|
||||||
|
const arrow = document.getElementById(menuId + '-arrow');
|
||||||
|
const submenu = document.getElementById(menuId + '-submenu');
|
||||||
|
|
||||||
|
if (currentExpandedMenus.includes(menuId)) {
|
||||||
|
// 收起菜单
|
||||||
|
currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.remove('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.add('hidden');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 展开菜单
|
||||||
|
currentExpandedMenus.push(menuId);
|
||||||
|
|
||||||
|
if (arrow) {
|
||||||
|
arrow.classList.add('rotate-180');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (submenu) {
|
||||||
|
submenu.classList.remove('hidden');
|
||||||
|
submenu.classList.add('fade-in');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('菜单状态更新:', menuId, currentExpandedMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化菜单状态
|
||||||
|
function initializeSidebar() {
|
||||||
|
const currentPage = getCurrentPageInfo();
|
||||||
|
|
||||||
|
// 根据当前页面设置菜单状态
|
||||||
|
if (currentPage.section === 'member') {
|
||||||
|
// 会员管理菜单默认展开
|
||||||
|
if (!currentExpandedMenus.includes('member')) {
|
||||||
|
toggleMenu('member');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置当前页面高亮
|
||||||
|
highlightCurrentMenu(currentPage);
|
||||||
|
} else if (currentPage.section === 'home') {
|
||||||
|
// 主页高亮
|
||||||
|
highlightCurrentMenu(currentPage);
|
||||||
|
// 会员管理菜单默认展开
|
||||||
|
if (!currentExpandedMenus.includes('member')) {
|
||||||
|
toggleMenu('member');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 其他页面高亮对应菜单
|
||||||
|
highlightCurrentMenu(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('侧边栏初始化完成，当前页面:', currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 高亮当前菜单项
|
||||||
|
function highlightCurrentMenu(pageInfo) {
|
||||||
|
// 清除所有高亮状态
|
||||||
|
document.querySelectorAll('.menu-item').forEach(item => {
|
||||||
|
item.classList.remove('text-blue-500');
|
||||||
|
item.classList.add('text-gray-700');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据页面信息高亮对应菜单
|
||||||
|
let targetElement = null;
|
||||||
|
|
||||||
|
if (pageInfo.section === 'home') {
|
||||||
|
targetElement = document.querySelector('[data-menu="home"]');
|
||||||
|
} else if (pageInfo.section === 'data-center') {
|
||||||
|
targetElement = document.querySelector('[data-menu="data-center"]');
|
||||||
|
} else if (pageInfo.section === 'coupon-marketing') {
|
||||||
|
targetElement = document.querySelector('[data-menu="coupon-marketing"]');
|
||||||
|
} else if (pageInfo.section === 'member') {
|
||||||
|
if (pageInfo.page === 'level-settings' || pageInfo.page === 'level-detail' || pageInfo.page === 'level-edit') {
|
||||||
|
targetElement = document.querySelector('[data-menu="level-settings"]');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.classList.remove('text-gray-700', 'text-gray-600');
|
||||||
|
targetElement.classList.add('text-blue-500');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索功能
|
||||||
|
function initializeSidebarSearch() {
|
||||||
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', function(e) {
|
||||||
|
const searchTerm = e.target.value.toLowerCase();
|
||||||
|
filterMenuItems(searchTerm);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤菜单项
|
||||||
|
function filterMenuItems(searchTerm) {
|
||||||
|
const menuItems = document.querySelectorAll('nav div');
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
const text = item.textContent.toLowerCase();
|
||||||
|
if (text.includes(searchTerm) || searchTerm === '') {
|
||||||
|
item.style.display = '';
|
||||||
|
} else {
|
||||||
|
item.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('搜索筛选:', searchTerm);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面跳转函数
|
||||||
|
function navigateToPage(url) {
|
||||||
|
window.location.href = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取相对路径
|
||||||
|
function getRelativePath(targetPath) {
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'));
|
||||||
|
|
||||||
|
// 判断当前是否在子目录中
|
||||||
|
if (currentDir.includes('/pages')) {
|
||||||
|
if (currentDir.includes('/member')) {
|
||||||
|
// 在 member 子目录中
|
||||||
|
return targetPath.startsWith('../../') ? targetPath : '../../' + targetPath;
|
||||||
|
} else {
|
||||||
|
// 在 pages 目录中
|
||||||
|
return targetPath.startsWith('../') ? targetPath : '../' + targetPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在根目录中
|
||||||
|
return targetPath;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出函数
|
||||||
|
window.toggleMenu = toggleMenu;
|
||||||
|
window.initializeSidebar = initializeSidebar;
|
||||||
|
window.initializeSidebarSearch = initializeSidebarSearch;
|
||||||
|
window.navigateToPage = navigateToPage;
|
||||||
|
window.getRelativePath = getRelativePath;
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端 - 优惠券营销工具管理</title>
|
||||||
|
<link rel="stylesheet" href="../css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button onclick="window.location.href='../index.html'" class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="home" onclick="navigateToPage(getRelativePath('index.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="data-center" onclick="navigateToPage(getRelativePath('pages/data-center.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="coupon-marketing" onclick="navigateToPage(getRelativePath('pages/coupon-marketing.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer menu-item" data-menu="level-settings" onclick="navigateToPage(getRelativePath('pages/member/level-settings.html'))">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 h-96">
|
||||||
|
<div class="flex items-center justify-center h-full text-gray-500">
|
||||||
|
<div class="text-center">
|
||||||
|
<svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-lg">优惠券营销工具管理</p>
|
||||||
|
<p class="text-sm mt-2">优惠券管理功能开发中...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../js/common.js"></script>
|
||||||
|
<script src="../js/sidebar.js"></script>
|
||||||
|
<script src="../js/pages/coupon-marketing.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initializeSidebar();
|
||||||
|
initializeSidebarSearch();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端 - 数据中心</title>
|
||||||
|
<link rel="stylesheet" href="../css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button onclick="window.location.href='../index.html'" class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="home" onclick="navigateToPage(getRelativePath('index.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="data-center" onclick="navigateToPage(getRelativePath('pages/data-center.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="coupon-marketing" onclick="navigateToPage(getRelativePath('pages/coupon-marketing.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer menu-item" data-menu="level-settings" onclick="navigateToPage(getRelativePath('pages/member/level-settings.html'))">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 h-96">
|
||||||
|
<div class="flex items-center justify-center h-full text-gray-500">
|
||||||
|
<div class="text-center">
|
||||||
|
<svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-lg">数据中心</p>
|
||||||
|
<p class="text-sm mt-2">数据分析功能开发中...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../js/common.js"></script>
|
||||||
|
<script src="../js/sidebar.js"></script>
|
||||||
|
<script src="../js/pages/data-center.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initializeSidebar();
|
||||||
|
initializeSidebarSearch();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端 - 等级明细</title>
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button onclick="history.back()" class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="home" onclick="navigateToPage(getRelativePath('index.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="data-center" onclick="navigateToPage(getRelativePath('pages/data-center.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="coupon-marketing" onclick="navigateToPage(getRelativePath('pages/coupon-marketing.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer menu-item" data-menu="level-settings" onclick="navigateToPage('level-settings.html')">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||||
|
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900" id="page-title">等级设置明细</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="openLevelEdit()">
|
||||||
|
等级编辑
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitLevelDetail()">
|
||||||
|
提交
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full border border-gray-200 rounded-lg">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">等级名称</th>
|
||||||
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">所需成长值</th>
|
||||||
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">会员人数</th>
|
||||||
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">会员权益</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200" id="level-table-body">
|
||||||
|
<!-- 数据将通过JavaScript动态加载 -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../js/common.js"></script>
|
||||||
|
<script src="../../js/sidebar.js"></script>
|
||||||
|
<script src="../../js/pages/level-detail.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initializeSidebar();
|
||||||
|
initializeSidebarSearch();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,336 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端 - 等级编辑</title>
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button onclick="history.back()" class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="home" onclick="navigateToPage(getRelativePath('index.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="data-center" onclick="navigateToPage(getRelativePath('pages/data-center.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="coupon-marketing" onclick="navigateToPage(getRelativePath('pages/coupon-marketing.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer menu-item" data-menu="level-settings" onclick="navigateToPage('level-settings.html')">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费箢理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||||
|
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900" id="page-title">等级编辑</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors" onclick="history.back()">
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitLevelEdit()">
|
||||||
|
提交
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full border border-gray-200 rounded-lg">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级名称</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">成长值范围</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启会员折扣</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">折扣率(%)</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启积分兑换</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日优惠券</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">生日优惠券操作</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日双倍积分</th>
|
||||||
|
<th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200" id="level-edit-table-body">
|
||||||
|
<!-- 数据将通过JavaScript动态加载 -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加优惠券弹窗 -->
|
||||||
|
<div id="coupon-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center" onclick="closeCouponModal(event)">
|
||||||
|
<div class="bg-white rounded-lg w-96 max-w-md mx-4 modal-content" onclick="event.stopPropagation()">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">添加优惠券</h3>
|
||||||
|
<button onclick="closeCouponModal()" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="coupon-form" class="p-4 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券名称
|
||||||
|
</label>
|
||||||
|
<input type="text" id="coupon-name" value="生日优惠券"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
placeholder="请输入优惠券名称" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券门槛金额
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="number" id="coupon-threshold" value="10" min="0"
|
||||||
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<div class="flex flex-col ml-2">
|
||||||
|
<button type="button" onclick="adjustThreshold(1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-t">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="adjustThreshold(-1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-b border-t-0">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券减免金额
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="number" id="coupon-discount" value="1" min="0"
|
||||||
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<div class="flex flex-col ml-2">
|
||||||
|
<button type="button" onclick="adjustDiscount(1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-t">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="adjustDiscount(-1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-b border-t-0">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券有效时间
|
||||||
|
</label>
|
||||||
|
<select id="coupon-validity"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="7">7天</option>
|
||||||
|
<option value="30">30天</option>
|
||||||
|
<option value="90">90天</option>
|
||||||
|
<option value="365">1年</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3 p-4 border-t border-gray-200">
|
||||||
|
<button onclick="closeCouponModal()"
|
||||||
|
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button onclick="submitCoupon()"
|
||||||
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||||
|
确认添加
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../js/common.js"></script>
|
||||||
|
<script src="../../js/sidebar.js"></script>
|
||||||
|
<script src="../../js/pages/level-edit.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
initializeSidebar();
|
||||||
|
initializeSidebarSearch();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,310 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>大数集市商户端 - 等级设置</title>
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-green-700 text-white px-4 py-3 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button onclick="window.location.href='../../index.html'" class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-lg font-medium">大数集市商户端</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="text-white hover:bg-green-600 p-2 rounded-md transition-colors">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-8 w-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs">
|
||||||
|
用户
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-48 bg-white border-r border-gray-200 min-h-[calc(100vh-60px)]">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-3 border-b border-gray-100">
|
||||||
|
<input type="text" placeholder="快速搜索菜单" class="w-full text-sm border border-gray-200 rounded-md px-3 py-2 focus:border-green-500 focus:outline-none">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="py-2">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<!-- Home -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="home" onclick="navigateToPage(getRelativePath('index.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9,22 9,12 15,12 15,22" />
|
||||||
|
</svg>
|
||||||
|
<span>首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Operations Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('operations')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8V16H3v5zm10-8h8V3h-8v10zm0 8h8V16h-8v5z" />
|
||||||
|
</svg>
|
||||||
|
<span>运营管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="operations-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Data Center -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="data-center" onclick="navigateToPage(getRelativePath('pages/data-center.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||||
|
<path d="m3 5 9 9 9-9" />
|
||||||
|
<path d="m3 12 9 9 9-9" />
|
||||||
|
<path d="m3 5v14c0 3 4 6 9 6s9-3 9-6V5" />
|
||||||
|
</svg>
|
||||||
|
<span>数据中心</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coupon Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer menu-item" data-menu="coupon-marketing" onclick="navigateToPage(getRelativePath('pages/coupon-marketing.html'))">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||||
|
</svg>
|
||||||
|
<span>优惠券营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pre-sale Marketing Tool Management -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20V10M6 16l6-6 6 6" />
|
||||||
|
</svg>
|
||||||
|
<span>预售营销工具管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('member')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
|
||||||
|
</svg>
|
||||||
|
<span>会员管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="member-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-l-2 border-green-500 ml-4 hidden" id="member-submenu">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer menu-item" data-menu="level-settings" onclick="openLevelSettingsTab()">
|
||||||
|
<span>等级设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer" onclick="openMemberListTab()">
|
||||||
|
<span>会员查看</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分商品</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2 text-sm text-gray-600 hover:bg-gray-100 cursor-pointer">
|
||||||
|
<span>积分订单</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wallet Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('wallet')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v7" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-6" />
|
||||||
|
</svg>
|
||||||
|
<span>钱包管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="wallet-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Management -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" onclick="toggleMenu('shipping')">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 18V6a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v11a1 1 0 0 0 1 1h2" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18H9" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
|
||||||
|
<circle cx="17" cy="18" r="2" />
|
||||||
|
<circle cx="7" cy="18" r="2" />
|
||||||
|
</svg>
|
||||||
|
<span>运费管理</span>
|
||||||
|
</div>
|
||||||
|
<svg class="h-3 w-3 transition-transform" id="shipping-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<!-- Tab Container -->
|
||||||
|
<div id="tab-container" class="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||||
|
<!-- Tab Navigation -->
|
||||||
|
<div class="border-b border-gray-200">
|
||||||
|
<div class="flex items-center space-x-0" id="tab-nav">
|
||||||
|
<!-- Tabs will be dynamically added here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab Content -->
|
||||||
|
<div id="tab-content-area">
|
||||||
|
<!-- Tab contents will be dynamically added here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加优惠券弹窗 -->
|
||||||
|
<div id="coupon-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center" onclick="closeCouponModal(event)">
|
||||||
|
<div class="bg-white rounded-lg w-96 max-w-md mx-4 modal-content" onclick="event.stopPropagation()">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900">添加优惠券</h3>
|
||||||
|
<button onclick="closeCouponModal()" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="coupon-form" class="p-4 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券名称
|
||||||
|
</label>
|
||||||
|
<input type="text" id="coupon-name" value="生日优惠券"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
placeholder="请输入优惠券名称" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券门槛金额
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="number" id="coupon-threshold" value="10" min="0"
|
||||||
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<div class="flex flex-col ml-2">
|
||||||
|
<button type="button" onclick="adjustThreshold(1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-t">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="adjustThreshold(-1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-b border-t-0">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券减免金额
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="number" id="coupon-discount" value="1" min="0"
|
||||||
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<div class="flex flex-col ml-2">
|
||||||
|
<button type="button" onclick="adjustDiscount(1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-t">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="adjustDiscount(-1)" class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-b border-t-0">
|
||||||
|
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
<span class="text-red-500">*</span> 优惠券有效时间
|
||||||
|
</label>
|
||||||
|
<select id="coupon-validity"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
||||||
|
required>
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="7">7天</option>
|
||||||
|
<option value="30">30天</option>
|
||||||
|
<option value="90">90天</option>
|
||||||
|
<option value="365">1年</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3 p-4 border-t border-gray-200">
|
||||||
|
<button onclick="closeCouponModal()"
|
||||||
|
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button onclick="submitCoupon()"
|
||||||
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||||
|
确认添加
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../js/common.js"></script>
|
||||||
|
<script src="../../js/sidebar.js"></script>
|
||||||
|
<script src="../../js/member-tabs.js"></script>
|
||||||
|
<script src="../../js/pages/level-settings.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue