[根目录](../../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 小时