AI和Mine页面的样式改成新样式了。
This commit is contained in:
+46
-81
@@ -1,95 +1,60 @@
|
||||
# 值班助手小程序 - 使用说明
|
||||
# 暖橙陪诊小程序
|
||||
|
||||
## 项目介绍
|
||||
值班助手是一个基于微信小程序的值班管理应用，使用 TDesign 组件库构建。
|
||||
陪诊服务的微信小程序，基于微信原生框架 + TDesign 组件库。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- 微信小程序原生框架
|
||||
- TDesign 微信小程序组件库
|
||||
- `tdesign-miniprogram` ^1.9.2（依赖 `package.json`，构建产物在 `miniprogram_npm/`）
|
||||
- 基础库 3.15.2（`project.config.json`），最低 ≥ 2.12.0
|
||||
|
||||
## 安装步骤
|
||||
## 运行
|
||||
|
||||
### 1. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
1. `npm install`
|
||||
2. 微信开发者工具导入本项目目录 `ui/wxapp_escort`
|
||||
3. 工具栏 `工具 → 构建 npm`
|
||||
4. 编译预览
|
||||
|
||||
### 2. 在微信开发者工具中配置
|
||||
1. 打开微信开发者工具
|
||||
2. 导入项目（选择本项目目录）
|
||||
3. 在工具栏点击 `工具` -> `构建 npm`
|
||||
4. 构建成功后，勾选 `将 JS 编译成 ES5`
|
||||
|
||||
### 3. 添加底部导航图标
|
||||
需要在 `images` 目录下添加以下图标文件（PNG格式）：
|
||||
- `home.png` - 首页图标（未选中）
|
||||
- `home-active.png` - 首页图标（选中）
|
||||
- `mine.png` - 我的图标（未选中）
|
||||
- `mine-active.png` - 我的图标（选中）
|
||||
|
||||
### 4. 添加默认头像
|
||||
在 `images` 目录下添加 `default-avatar.png` 作为默认头像图片
|
||||
|
||||
## 项目结构
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
attendant-wechat/
|
||||
├── app.js # 小程序主入口
|
||||
├── app.json # 小程序全局配置
|
||||
├── app.wxss # 小程序全局样式
|
||||
├── sitemap.json # 站点地图配置
|
||||
├── package.json # 项目依赖配置
|
||||
├── project.config.json # 项目配置文件
|
||||
├── pages/ # 页面目录
|
||||
│ ├── index/ # 首页
|
||||
│ │ ├── index.wxml # 页面结构
|
||||
│ │ ├── index.wxss # 页面样式
|
||||
│ │ ├── index.js # 页面逻辑
|
||||
│ │ └── index.json # 页面配置
|
||||
│ └── mine/ # 我的页面
|
||||
│ ├── mine.wxml # 页面结构
|
||||
│ ├── mine.wxss # 页面样式
|
||||
│ ├── mine.js # 页面逻辑
|
||||
│ └── mine.json # 页面配置
|
||||
└── images/ # 图片资源目录
|
||||
├── home.png # 首页图标
|
||||
├── home-active.png # 首页图标（选中）
|
||||
├── mine.png # 我的图标
|
||||
├── mine-active.png # 我的图标（选中）
|
||||
└── default-avatar.png # 默认头像
|
||||
app.js / app.json / app.wxss 全局入口、页面与 tabBar 配置、色板令牌
|
||||
custom-tab-bar/ 自定义底部导航（fixed 在底部，各 tab 页需自备底部占位）
|
||||
pages/ 页面（清单见下）
|
||||
utils/
|
||||
request.js HTTP 封装（基址、appId、token 头）
|
||||
api.js 接口定义
|
||||
chatmsg.js AI 客服 WebSocket
|
||||
doc/
|
||||
DESIGN.md 配色规范（全站唯一色板来源）
|
||||
PROJECT_GUIDE.md 本文件
|
||||
```
|
||||
|
||||
## 页面说明
|
||||
## 页面
|
||||
|
||||
### 首页 (pages/index)
|
||||
- 欢迎卡片：显示应用名称和欢迎语
|
||||
- 快捷功能：今日值班、值班表、值班记录
|
||||
- 统计信息：显示值班相关统计数据
|
||||
| 路径 | 说明 |
|
||||
|---|---|
|
||||
| `pages/home/index` | 首页 |
|
||||
| `pages/ai/aichat` | AI 客服 |
|
||||
| `pages/escort/itemlist` | 陪诊服务列表 |
|
||||
| `pages/escort/itemdetail` | 服务详情 / 下单 |
|
||||
| `pages/escort/attendantlist` | 陪诊师列表 |
|
||||
| `pages/escort/recordlist` | 订单记录 |
|
||||
| `pages/escort/recorddetail` | 订单详情 |
|
||||
| `pages/escort/agreement` | 用户协议 |
|
||||
| `pages/escort/guide` | 服务指南 |
|
||||
| `pages/health/profilelist` | 健康档案列表 |
|
||||
| `pages/health/profileedit` | 档案编辑 |
|
||||
| `pages/mine/mine` | 我的 |
|
||||
| `pages/mine/about` | 关于 |
|
||||
| `pages/mine/contact` | 联系我们 |
|
||||
| `pages/hospital/contact` | 医院联系 |
|
||||
| `pages/hospital/ranking` | 医院排行 |
|
||||
| `pages/home/webview` | 网页容器 |
|
||||
|
||||
### 我的 (pages/mine)
|
||||
- 用户信息卡片：显示用户头像和昵称
|
||||
- 功能菜单：个人信息、我的值班、值班统计、设置、帮助与反馈、关于
|
||||
- 退出登录：退出当前账号
|
||||
## 约定
|
||||
|
||||
## 使用的 TDesign 组件
|
||||
- `t-button`: 按钮组件
|
||||
- `t-cell`: 单元格组件
|
||||
- `t-cell-group`: 单元格组组件
|
||||
- `t-icon`: 图标组件
|
||||
- `t-avatar`: 头像组件
|
||||
- `t-card`: 卡片组件
|
||||
- `t-divider`: 分割线组件
|
||||
- `t-badge`: 徽标组件
|
||||
|
||||
## 注意事项
|
||||
1. 确保微信开发者工具的基础库版本 >= 2.12.0
|
||||
2. 安装依赖后必须执行"构建 npm"操作
|
||||
3. 建议在真机上测试，部分功能可能与模拟器有差异
|
||||
4. 图标文件尺寸建议：未选中状态 81x81px，选中状态 81x81px
|
||||
|
||||
## 下一步开发建议
|
||||
1. 实现用户登录功能
|
||||
2. 对接后端 API，获取真实的值班数据
|
||||
3. 添加数据缓存机制，提升用户体验
|
||||
4. 实现消息通知功能
|
||||
5. 添加数据导出功能
|
||||
- **配色**：见 `doc/DESIGN.md`。色板令牌集中在 `app.wxss` 的 `page{}`，改配色只改这一处。
|
||||
- **接口**：统一走 `utils/request.js`，基址 `https://api.huashengtec.com`（本地调试可改用文件内注释的 `127.0.0.1:9004`）；请求自动携带 `appId=wxapp-escort` 与登录 token。
|
||||
- **登录**：`app.js` 的 `onShow` 调 `wx.login` 换 token，存于 `globalData.user`。
|
||||
- **全局数据**：服务列表 / 协议 / 医院信息 / 排行在 `onLaunch` 预取，挂到 `globalData` 供各页取用。
|
||||
Reference in New Issue
Block a user