# 积分商城页面

## 页面结构

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

### 2. 商品详情页 (`productDetail/productDetail.vue`)
- **状态栏**: 与首页相同的状态栏
- **顶部导航栏**: 包含返回按钮、标题"商品详情"、分享按钮
- **商品信息**: 显示商品图片、标题、价格和描述
- **兑换按钮**: 提供商品兑换功能

## 功能特性

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

### 商品详情页
- ✅ 商品信息展示
- ✅ 兑换确认功能
- ✅ 返回导航

## 路由配置

页面已添加到 `pages.json` 中：

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

## 使用方法

### 访问积分商城首页
```javascript
uni.navigateTo({
  url: '/pages_goods/pointMall/pointMall'
})
```

### 访问商品详情页
```javascript
uni.navigateTo({
  url: '/pages_goods/productDetail/productDetail?id=1'
})
```

## 样式特点

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

## 待完善功能

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

## 注意事项

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