# 品种选择功能说明

## 功能概述

根据设计图要求，新建了一个专门的品种选择页面，替换了原有的弹窗式品种选择功能。

## 主要特性

### 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. 建议在真机上测试滚动和点击效果