hly
/
pet-front-order
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 Commits
1 Branch
34 MiB
 
 
 
Tree: 15edbb0f76
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '15edbb0f76'
${ noResults }
pet-front-order/docs/品种选择功能说明.md

2.9 KiB
Raw Blame History

品种选择功能说明

功能概述

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

主要特性

1. 页面布局

  • 系统导航栏：橙色背景，显示"选择品种"标题
  • 搜索栏：支持实时搜索品种名称
  • 品种列表：按字母分组显示，支持滚动
  • 字母索引：右侧固定位置，支持快速跳转到指定字母

2. 功能实现

品种数据获取

  • 根据宠物类型（猫/狗）获取对应的品种数据
  • 支持从API动态获取品种列表

搜索功能

  • 实时搜索，支持中文和英文搜索
  • 搜索结果实时更新显示

字母分组

  • 自动按品种名称首字母分组
  • 支持中文字符的拼音首字母映射
  • 按字母顺序排列显示
  • 每个字母组内的品种按中文拼音排序

快速导航

  • 右侧字母索引支持点击跳转
  • 滚动动画效果
  • 当前字母高亮显示
  • 滚动时自动更新激活的字母索引

3. 页面路由

新增页面路径：/pages/personalCenter/breedSelect

页面配置：

{
    "path": "pages/personalCenter/breedSelect",
    "style": {
        "navigationBarTitleText": "选择品种",
        "navigationBarBackgroundColor": "#FF6B35",
        "enablePullDownRefresh": false,
        "navigationBarTextStyle": "white"
    }
}

4. 使用方式

在需要选择品种的地方，调用以下代码跳转到品种选择页面：

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