|
|
- # 性格选择功能说明
-
- ## 功能概述
-
- 新增了独立的性格选择页面，用户可以在该页面中：
- 1. 输入宠物的性格描述
- 2. 选择预设的性格标签
- 3. 保存后回显到宠物信息页面
-
- ## 文件结构
-
- ### 新增文件
- - `pages/personalCenter/personalitySelect.vue` - 性格选择页面
-
- ### 修改文件
- - `pages/personalCenter/components/petBaseInfo.vue` - 修改性格选择逻辑，跳转到新页面
- - `pages.json` - 添加新页面路由配置
-
- ## 功能特点
-
- ### 1. 性格描述输入
- - 提供文本输入框，用户可以自由描述宠物性格
- - 支持最多200字符输入
- - 灰色背景，符合设计规范
-
- ### 2. 快捷选择
- - 提供8个预设性格标签
- - 支持多选功能
- - 选中状态为橙色背景，白色文字
- - 2行4列网格布局
-
- ### 3. 数据回显
- - 从API获取性格选项列表
- - 支持解析已有的性格数据
- - 保存后自动更新父页面数据
-
- ### 4. 页面导航
- - 从宠物信息页面点击"性格"字段跳转
- - 保存后自动返回上一页
- - 显示保存成功提示
-
- ## 使用流程
-
- 1. 在宠物信息页面点击"性格"字段
- 2. 跳转到性格选择页面
- 3. 输入性格描述（可选）
- 4. 选择性格标签（可多选）
- 5. 点击"保存"按钮
- 6. 自动返回宠物信息页面，数据已更新
-
- ## 技术实现
-
- ### 数据传递
- - 使用URL参数传递现有性格数据
- - 使用页面栈更新父页面数据
-
- ### 样式设计
- - 响应式网格布局
- - 符合设计图的颜色方案
- - 流畅的交互动画
-
- ### API集成
- - 从`pet_personality`字典获取性格选项
- - 支持动态加载和解析
-
- ## 注意事项
-
- 1. 确保至少选择一项性格特征才能保存
- 2. 性格描述和快捷选择可以组合使用
- 3. 数据格式为：描述 + "，" + 快捷选择标签
- 4. 支持编辑现有性格数据
|
