guest/steel_prices_service

Fork 0

Files

ECRZ da4a055c1c modify：新增小程序

2026-01-06 18:00:43 +08:00

4.2 KiB

Raw Blame History

根目录 > pages > index

pages/index - 主页模块

最后更新：2026-01-06 15:26:54

变更记录 (Changelog)

2026-01-06

初始化模块文档
识别为用户信息展示模板页面，需改造为价格查询功能

模块职责

当前状态：微信小程序模板主页，展示用户头像与昵称信息。

目标职责（需实现）：

作为钢材价格查询的入口页面
提供搜索条件选择（地区、材质、规格、日期）
展示价格查询结果列表
跳转到价格趋势详情页面

入口与启动

页面路径

注册路径：pages/index/index（在 app.json 中注册）
物理路径：pages/index/index.js
访问方式：小程序启动时的首页

生命周期

Page({
  onLoad() { },      // 页面加载
  onReady() { },     // 页面初次渲染完成
  onShow() { }       // 页面显示
})

对外接口

页面跳转接口

跳转到日志页：bindViewTap() 方法

wx.navigateTo({
  url: '../logs/logs'
})

用户信息接口

获取用户头像：onChooseAvatar(e)
输入昵称：onInputChange(e)
获取用户资料：getUserProfile(e)（已废弃，推荐使用 chooseAvatar）

关键依赖与配置

依赖文件

文件	用途
`index.js`	页面逻辑
`index.wxml`	页面结构
`index.wxss`	页面样式
`index.json`	页面配置（当前为空）

外部依赖

微信小程序基础库 2.10.4+
无外部 npm 包依赖

配置文件

// index.json（当前为空对象）
{}

数据模型

当前数据结构

data: {
  motto: 'Hello World',
  userInfo: {
    avatarUrl: 'https://mmbiz.qpic.cn/...',
    nickName: ''
  },
  hasUserInfo: false,
  canIUseGetUserProfile: wx.canIUse('getUserProfile'),
  canIUseNicknameComp: wx.canIUse('input.type.nickname')
}

建议的数据结构（改造后）

data: {
  regions: ['昆明', '玉溪', '大理', '楚雄'],      // 地区列表
  materials: ['HPB300', 'HRB400', 'HRB500E'],    // 材质列表
  selectedRegion: '',                            // 选中的地区
  selectedMaterial: '',                          // 选中的材质
  selectedDate: '',                              // 选中的日期
  priceList: [],                                 // 查询结果
  loading: false,                                // 加载状态
  errorMessage: ''                               // 错误信息
}

测试与质量

测试覆盖

手动测试：可在微信开发者工具中测试用户头像/昵称功能
单元测试：暂无
快照测试：暂无

已知问题

当前页面为模板代码，未实现实际业务功能
缺少价格查询相关逻辑
缺少 API 调用封装

常见问题 (FAQ)

Q: 如何改造为价格查询页面？

A: 建议步骤：

删除用户信息相关代码
添加搜索表单（地区、材质、日期选择器）
实现查询按钮点击事件
调用 /api/prices/search 接口
展示查询结果列表

Q: 如何调用后端 API？

A: 使用 wx.request()，参考示例：

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
    })
  }
})

下一步建议

重构 UI：设计简洁的价格查询界面
封装 API：在 utils 中创建 api.js 封装请求方法
添加图表：集成 ECharts 或使用 Canvas 绘制价格趋势图
优化体验：添加加载动画、空状态提示、错误处理

模块状态：待开发 优先级：高 预估工作量：4-6 小时

4.2 KiB Raw Blame History Unescape Escape