uniapp-app/pages_goods

积分商城页面

页面结构

1. 积分商城首页 (pointMall/pointMall.vue)

• 状态栏: 显示时间、网络状态、电池等信息
• 顶部导航栏: 包含返回按钮、标题"积分商城"、搜索按钮
• 轮播图横幅: 显示活动信息，包含渐变背景和文字覆盖
• 筛选排序栏: 提供筛选和排序功能
• 商品网格: 两列布局显示商品列表
• 底部导航栏: 包含"我的兑换"和"购买积分"两个选项

2. 商品详情页 (productDetail/productDetail.vue)

• 状态栏: 与首页相同的状态栏
• 顶部导航栏: 包含返回按钮、标题"商品详情"、分享按钮
• 商品信息: 显示商品图片、标题、价格和描述
• 兑换按钮: 提供商品兑换功能

功能特性

积分商城首页

• ✅ 100%还原设计稿的UI布局
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 轮播图自动播放
• ✅ 商品网格布局
• ✅ 点击商品跳转到详情页
• ✅ 筛选和排序功能（待实现具体逻辑）
• ✅ 底部导航栏交互

商品详情页

• ✅ 商品信息展示
• ✅ 兑换确认功能
• ✅ 返回导航

路由配置

页面已添加到 pages.json 中：

{
  "root": "pages_goods",
  "pages": [
    {
      "path": "pointMall/pointMall",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "积分商城"
      }
    },
    {
      "path": "productDetail/productDetail",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "商品详情"
      }
    }
  ]
}

使用方法

访问积分商城首页

uni.navigateTo({
  url: '/pages_goods/pointMall/pointMall'
})

访问商品详情页

uni.navigateTo({
  url: '/pages_goods/productDetail/productDetail?id=1'
})

样式特点

• 使用自定义状态栏和导航栏
• 渐变色背景的轮播图
• 卡片式商品布局
• 固定底部导航栏
• 响应式网格布局
• 统一的颜色主题（红色 #e74c3c，青色 #20b2aa）

待完善功能

1. 筛选和排序的具体实现
2. 商品数据的动态加载
3. 搜索功能的具体实现
4. 我的兑换页面
5. 购买积分页面
6. 商品图片的实际加载

注意事项

• 页面使用了自定义导航栏，确保在 pages.json 中设置了 "navigationStyle": "custom"
• 商品图片路径需要根据实际情况调整
• 可以根据需要添加更多的商品数据和功能