# 蓝德云售后服务系统手机端

## 项目简介

这是一个微信小程序高保真原型图项目，模拟售后服务管理系统的手机端界面。项目采用HTML+CSS+JavaScript技术栈，可以在PC端预览，具有真实的手机边框和状态栏效果。

## 项目特性

- 📱 **真实手机外观**：包含手机边框、状态栏、电池图标等真实手机元素
- 🎨 **现代化UI设计**：采用渐变背景、毛玻璃效果等现代设计元素
- 🔐 **登录功能**：支持账号密码登录，包含普通用户和管理员身份切换
- 📱 **响应式设计**：适配不同屏幕尺寸
- ⚡ **交互体验**：包含按钮悬停效果、输入框焦点效果等

## 文件结构

```
0718售后服务管理系统-手机端/
├── login.html          # 登录界面
├── 工作台.html         # 工作台页面
├── 消息通知.html       # 消息通知页面
├── 工单任务-待接单.html # 工单详情页面
├── 工单任务-进行中.html # 工单进行中页面
├── css/
│   ├── login.css      # 登录界面样式
│   ├── workbench.css  # 工作台页面样式
│   ├── notifications.css # 消息通知页面样式
│   └── work-order-detail.css # 工单详情页面样式
├── js/
│   ├── login.js       # 登录界面功能
│   ├── workbench.js   # 工作台页面功能
│   ├── notifications.js # 消息通知页面功能
│   └── work-order-detail.js # 工单详情页面功能
└── README.md          # 项目说明文档
```

## 功能说明

### 登录界面 (login.html)

- **手机边框**：模拟iPhone外观，包含圆角边框和阴影效果
- **状态栏**：显示时间、信号强度、电池电量等状态信息
- **身份切换**：支持普通用户和管理员两种身份切换
- **登录验证**：输入账号密码进行登录验证

### 工作台界面 (工作台.html)

- **用户信息展示**：显示登录用户的姓名、工号、联系方式
- **工单任务管理**：通过待确认、进行中、已完成tab切换查看
- **工单详细信息**：包含工单名称、项目名称、工单编号、联络人、联系电话、计划时间、工单要求、备注、组长、现场人员、创建时间等
- **消息通知**：右上角消息通知图标，显示未读消息数量
- **底部Tabbar**：工作台、我的两个主要功能入口
- **交互功能**：确认接单、查看详情、状态切换等操作

### 消息通知界面 (消息通知.html)

- **消息列表**：展示新工单通知、工单转移申请通知等
- **通知类型**：新工单通知、工单转移申请、转移接受/拒绝通知
- **通知状态**：未读/已读状态，未读消息有红色标记
- **通知详情**：包含通知时间、项目信息、状态等
- **交互功能**：一键已读、返回上一页

### 工单详情界面 (工单任务-待接单.html)

- **工单基本信息**：工单名称、编号、项目、联络人、时间等详细信息
- **工序清单**：三级工序结构，支持展开/收起，显示必须完成/必须拍照要求
- **设备清单**：设备型号、出厂编号、生产日期、所在区域、当前状态等
- **人员信息**：姓名、角色、联系方式、状态，支持一键拨打电话
- **交互功能**：确认接单、工序展开、电话拨打、返回上一页

### 工单进行中界面 (工单任务-进行中.html)

- **工单基本信息**：工单名称、编号、项目、联络人、时间等详细信息，状态为"进行中"
- **工序清单**：三级工序结构，支持展开/收起，显示必须完成/必须拍照要求
- **设备清单**：设备型号、出厂编号、生产日期、所在区域、当前状态等
- **人员信息**：姓名、角色、联系方式、状态，支持一键拨打电话
- **打卡记录**：展示打卡类型（工单确认、签到、离场）、打卡人、角色、打卡时间、备注信息
- **交互功能**：完成工单、工序展开、电话拨打、返回上一页

## 使用方法

1. 直接在浏览器中打开 `login.html` 文件
2. 在PC端可以看到完整的手机界面效果
3. 输入演示账号进行登录测试

## 技术特点

- **纯前端实现**：无需服务器，可直接在浏览器中运行
- **CSS3特效**：使用渐变、阴影、毛玻璃等现代CSS特性
- **JavaScript交互**：实现登录验证、身份切换等功能
- **移动端适配**：针对手机屏幕优化的布局和交互

## 后续开发计划

- [x] 登录界面
- [x] 工作台界面
- [x] 消息通知功能
- [ ] 个人中心页面
- [ ] 工单详情页面
- [ ] 客户信息管理
- [ ] 服务记录查看

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发环境

- HTML5
- CSS3
- JavaScript ES6+
- 无需额外依赖