feat: 集成知识库页面产品列表 API 接口
### 主要改动 1. **集成产品列表 API**(listAPI) - 从接口获取产品数据和分类列表 - 使用 `data.categories` 作为标签栏数据(动态生成) - 产品卡片数据严格按照接口文档映射 - 移除所有硬编码的模拟数据 2. **实现分类筛选功能** - 点击标签时传递 `cid` 参数到接口 - 每次切换分类时重置分页状态(page=0, products=[]) - 支持查看"全部"或特定分类的产品 3. **实现滚动加载功能** - 使用 `scroll-view` 的 `@scrolltolower` 事件 - 滚动到底部时自动加载下一页 - 加载更多时追加数据(不替换) - 根据总数判断是否还有更多数据 4. **数据映射(严格遵循接口文档)** - `item.id` → 产品 ID - `item.product_name` → 产品名称 - `item.cover_image` → 产品封面图 - `item.recommend` → 推价位(hot/normal) - `item.tags` → 动态标签(含 bg_color、text_color) - `categories` → 分类列表(用于标签栏) - `total` → 产品总数 ### 状态管理 - `loading`: 加载状态(显示加载提示) - `hasMore`: 是否还有更多数据 - `page`: 当前页码(从 0 开始) - `limit`: 每页数量(10) - `categories`: 分类列表(从接口获取) - `products`: 当前产品列表 - `total`: 产品总数 ### 移除的硬编码 - 移除硬编码的 `tabsData`(人寿保险、医疗保险、意外保险) - 移除模拟产品数据生成函数 - 移除 `descColorPalette` 和 `getDescColor` 函数 - 移除 `currentTabName` 和 `filteredProducts` 计算属性 ### 用户体验优化 - 首次加载显示"加载中..."提示 - 滚动到底部时显示"加载中..." - 没有更多数据时显示"没有更多了" - 无数据时显示"暂无相关产品" ### 影响文件 - src/pages/knowledge-base/index.vue(完整重构) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
0 additions
and
0 deletions
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment