189 lines
4.2 KiB
Markdown
189 lines
4.2 KiB
Markdown
[根目录](../../CLAUDE.md) > [pages](../) > **index**
|
||
|
||
---
|
||
|
||
# pages/index - 主页模块
|
||
|
||
> 最后更新：2026-01-06 15:26:54
|
||
|
||
---
|
||
|
||
## 变更记录 (Changelog)
|
||
|
||
### 2026-01-06
|
||
- 初始化模块文档
|
||
- 识别为用户信息展示模板页面，需改造为价格查询功能
|
||
|
||
---
|
||
|
||
## 模块职责
|
||
|
||
当前状态：**微信小程序模板主页**，展示用户头像与昵称信息。
|
||
|
||
**目标职责**（需实现）：
|
||
- 作为钢材价格查询的入口页面
|
||
- 提供搜索条件选择（地区、材质、规格、日期）
|
||
- 展示价格查询结果列表
|
||
- 跳转到价格趋势详情页面
|
||
|
||
---
|
||
|
||
## 入口与启动
|
||
|
||
### 页面路径
|
||
- **注册路径**：`pages/index/index`（在 `app.json` 中注册）
|
||
- **物理路径**：`pages/index/index.js`
|
||
- **访问方式**：小程序启动时的首页
|
||
|
||
### 生命周期
|
||
```javascript
|
||
Page({
|
||
onLoad() { }, // 页面加载
|
||
onReady() { }, // 页面初次渲染完成
|
||
onShow() { } // 页面显示
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
## 对外接口
|
||
|
||
### 页面跳转接口
|
||
- **跳转到日志页**：`bindViewTap()` 方法
|
||
```javascript
|
||
wx.navigateTo({
|
||
url: '../logs/logs'
|
||
})
|
||
```
|
||
|
||
### 用户信息接口
|
||
- **获取用户头像**：`onChooseAvatar(e)`
|
||
- **输入昵称**：`onInputChange(e)`
|
||
- **获取用户资料**：`getUserProfile(e)`（已废弃，推荐使用 `chooseAvatar`）
|
||
|
||
---
|
||
|
||
## 关键依赖与配置
|
||
|
||
### 依赖文件
|
||
| 文件 | 用途 |
|
||
|------|------|
|
||
| `index.js` | 页面逻辑 |
|
||
| `index.wxml` | 页面结构 |
|
||
| `index.wxss` | 页面样式 |
|
||
| `index.json` | 页面配置（当前为空） |
|
||
|
||
### 外部依赖
|
||
- 微信小程序基础库 2.10.4+
|
||
- 无外部 npm 包依赖
|
||
|
||
### 配置文件
|
||
```json
|
||
// index.json（当前为空对象）
|
||
{}
|
||
```
|
||
|
||
---
|
||
|
||
## 数据模型
|
||
|
||
### 当前数据结构
|
||
```javascript
|
||
data: {
|
||
motto: 'Hello World',
|
||
userInfo: {
|
||
avatarUrl: 'https://mmbiz.qpic.cn/...',
|
||
nickName: ''
|
||
},
|
||
hasUserInfo: false,
|
||
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
|
||
canIUseNicknameComp: wx.canIUse('input.type.nickname')
|
||
}
|
||
```
|
||
|
||
### 建议的数据结构（改造后）
|
||
```javascript
|
||
data: {
|
||
regions: ['昆明', '玉溪', '大理', '楚雄'], // 地区列表
|
||
materials: ['HPB300', 'HRB400', 'HRB500E'], // 材质列表
|
||
selectedRegion: '', // 选中的地区
|
||
selectedMaterial: '', // 选中的材质
|
||
selectedDate: '', // 选中的日期
|
||
priceList: [], // 查询结果
|
||
loading: false, // 加载状态
|
||
errorMessage: '' // 错误信息
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 测试与质量
|
||
|
||
### 测试覆盖
|
||
- **手动测试**：可在微信开发者工具中测试用户头像/昵称功能
|
||
- **单元测试**：暂无
|
||
- **快照测试**：暂无
|
||
|
||
### 已知问题
|
||
1. 当前页面为模板代码，未实现实际业务功能
|
||
2. 缺少价格查询相关逻辑
|
||
3. 缺少 API 调用封装
|
||
|
||
---
|
||
|
||
## 常见问题 (FAQ)
|
||
|
||
### Q: 如何改造为价格查询页面？
|
||
A: 建议步骤：
|
||
1. 删除用户信息相关代码
|
||
2. 添加搜索表单（地区、材质、日期选择器）
|
||
3. 实现查询按钮点击事件
|
||
4. 调用 `/api/prices/search` 接口
|
||
5. 展示查询结果列表
|
||
|
||
### Q: 如何调用后端 API？
|
||
A: 使用 `wx.request()`，参考示例：
|
||
```javascript
|
||
wx.request({
|
||
url: 'http://localhost:3000/api/prices/search',
|
||
data: {
|
||
region: this.data.selectedRegion,
|
||
material: this.data.selectedMaterial,
|
||
date: this.data.selectedDate
|
||
},
|
||
success: (res) => {
|
||
this.setData({
|
||
priceList: res.data.data
|
||
})
|
||
}
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
## 相关文件清单
|
||
|
||
```
|
||
pages/index/
|
||
├── index.js # 页面逻辑（50 行）
|
||
├── index.wxml # 页面结构（28 行）
|
||
├── index.wxss # 页面样式
|
||
├── index.json # 页面配置
|
||
└── CLAUDE.md # 本文档
|
||
```
|
||
|
||
---
|
||
|
||
## 下一步建议
|
||
|
||
1. **重构 UI**：设计简洁的价格查询界面
|
||
2. **封装 API**：在 `utils` 中创建 `api.js` 封装请求方法
|
||
3. **添加图表**：集成 ECharts 或使用 Canvas 绘制价格趋势图
|
||
4. **优化体验**：添加加载动画、空状态提示、错误处理
|
||
|
||
---
|
||
|
||
**模块状态**：待开发
|
||
**优先级**：高
|
||
**预估工作量**：4-6 小时
|