100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
# 积分商城页面
|
||
|
||
## 页面结构
|
||
|
||
### 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"`
|
||
- 商品图片路径需要根据实际情况调整
|
||
- 可以根据需要添加更多的商品数据和功能
|