|
|
- # 品种选择功能说明
-
- ## 功能概述
-
- 根据设计图要求，新建了一个专门的品种选择页面，替换了原有的弹窗式品种选择功能。
-
- ## 主要特性
-
- ### 1. 页面布局
- - **系统导航栏**：橙色背景，显示"选择品种"标题
- - **搜索栏**：支持实时搜索品种名称
- - **品种列表**：按字母分组显示，支持滚动
- - **字母索引**：右侧固定位置，支持快速跳转到指定字母
-
- ### 2. 功能实现
-
- #### 品种数据获取
- - 根据宠物类型（猫/狗）获取对应的品种数据
- - 支持从API动态获取品种列表
-
- #### 搜索功能
- - 实时搜索，支持中文和英文搜索
- - 搜索结果实时更新显示
-
- #### 字母分组
- - 自动按品种名称首字母分组
- - 支持中文字符的拼音首字母映射
- - 按字母顺序排列显示
- - 每个字母组内的品种按中文拼音排序
-
- #### 快速导航
- - 右侧字母索引支持点击跳转
- - 滚动动画效果
- - 当前字母高亮显示
- - 滚动时自动更新激活的字母索引
-
- ### 3. 页面路由
-
- **新增页面路径**：`/pages/personalCenter/breedSelect`
-
- **页面配置**：
- ```json
- {
- "path": "pages/personalCenter/breedSelect",
- "style": {
- "navigationBarTitleText": "选择品种",
- "navigationBarBackgroundColor": "#FF6B35",
- "enablePullDownRefresh": false,
- "navigationBarTextStyle": "white"
- }
- }
- ```
-
- ### 4. 使用方式
-
- 在需要选择品种的地方，调用以下代码跳转到品种选择页面：
-
- ```javascript
- uni.navigateTo({
- url: `/pages/personalCenter/breedSelect?petType=${petType}&selectedBreed=${encodeURIComponent(selectedBreed || '')}`
- });
- ```
-
- ### 5. 数据传递
-
- - **输入参数**：
- - `petType`：宠物类型（'cat' 或 'dog'）
- - `selectedBreed`：当前已选择的品种（可选）
-
- - **输出结果**：
- - 选择品种后自动返回上一页
- - 自动更新上一页的品种数据
-
- ### 6. 样式特点
-
- - 使用系统导航栏，符合设计图要求
- - 简洁的白色背景设计
- - 流畅的动画效果
- - 响应式布局
- - 字母索引激活状态有橙色背景高亮
-
- ## 技术实现
-
- ### 核心组件
- - `breedSelect.vue`：品种选择页面主组件
- - 修改了 `petBaseInfo.vue`：移除原有弹窗，改为页面跳转
-
- ### 主要方法
- - `getPetBreeds()`：获取品种数据
- - `groupBreedsByLetter()`：按字母分组
- - `onSearchChange()`：搜索处理
- - `selectBreed()`：选择品种
- - `scrollToLetter()`：字母跳转
- - `onScroll()`：滚动事件处理
- - `updateCurrentLetter()`：更新当前激活字母
-
- ### 数据映射
- - 中文字符到拼音首字母的映射表
- - 支持常见的中文品种名称
-
- ## 兼容性
-
- - 完全兼容原有的品种选择逻辑
- - 保持数据格式不变
- - 支持现有API接口
-
- ## 注意事项
-
- 1. 确保API接口 `getDictList` 正常工作
- 2. 品种数据需要包含 `dictLabel` 字段
- 3. 页面需要正确配置在 `pages.json` 中
- 4. 建议在真机上测试滚动和点击效果
|
