# 体态评估指导页面文档 ## 页面概述 体态评估指导页面(`pages/posture-guide/posture-guide.vue`)用于向用户展示手部照片拍摄的指导说明,帮助用户了解如何正确拍摄手部照片。 ## 页面功能 该页面通过轮播图的方式,向用户展示6张不同的手部姿势示意图: - 左手手掌 - 左手手背 - 左手握拳 - 右手手掌 - 右手手背 - 右手握拳 ## 功能特性 ### 1. 轮播图展示 - 使用 uni-app 的 `swiper` 组件展示多张指导图片 - 支持滑动切换图片 - 底部显示指示点(dots) - 自动跟踪当前图片索引 ### 2. 按钮控制 - **确认按钮**: 仅在查看完所有图片后启用 - **禁用状态**: 未看完所有说明时,按钮呈灰色禁用状态 - **文案切换**: - 未看完: "请查看完所有说明" - 已看完: "我知道了,开始采集" ### 3. 页面跳转 - 确认后跳转到手部照片采集页面(`/pages/interview/interview`) - 使用 `uni.navigateTo` 进行页面跳转 - 包含错误处理和降级方案 ## 代码结构 ### Template 部分 ```vue ``` ### Script 部分 #### 数据结构 ```javascript data() { return { currentIndex: 0, // 当前显示的图片索引 isLastSlide: false, // 是否是最后一张图片 guideImages: [ // 指导图片数组 { url: '图片URL', description: '图片描述' } ] } } ``` #### 方法说明 **handleSwiperChange(e)** - 监听轮播图切换事件 - 更新当前图片索引 - 判断是否是最后一张图片 **handleConfirm()** - 处理确认按钮点击事件 - 验证是否已看完所有图片 - 执行页面跳转或提示用户 ### Style 部分 主要样式类: - `.posture-guide`: 页面容器 - `.guide-title`: 标题样式 - `.guide-subtitle`: 副标题样式 - `.guide-swiper`: 轮播图容器 - `.guide-image`: 图片样式 - `.confirm-button`: 确认按钮样式 - `.button-disabled`: 禁用状态按钮样式 ## 使用场景 该页面在面试流程中处于以下位置: ``` 用户登录 → 身份验证 → 人脸照片拍摄 → **体态评估指导** → 手部照片采集 → 面试问题录制 ``` ## 数据流程 1. **页面加载**: 显示第一张指导图片 2. **用户滑动**: 切换图片,更新 `currentIndex` 3. **到达最后一张**: `isLastSlide` 置为 `true` 4. **点击确认**: 跳转到手部照片采集页面 ## 图片资源 图片通过 CDN 加载: ``` https://data.qicai321.com/minlong/ ``` 包含以下图片: 1. 85fbafbd-1b80-48cd-bcd6-fc4911e9ff54.jpg - 左手手掌 2. 17d141e0-8f99-4a54-a534-f6b954c600f8.png - 左手手背 3. 5c7d7d6f-5e14-4cd6-bb9f-11509473a8bb.png - 左手握拳 4. 148eea00-21b4-49e1-a3b6-712fff08a5a8.png - 右手手掌 5. c67c303e-91c0-4e79-8e82-84096435481f.png - 右手手背 6. 5a093f70-d397-4a36-9539-a8b4d11e0a13.png - 右手握拳 ## 用户体验优化 1. **渐进式揭示**: 要求用户查看完所有图片才能进入下一步 2. **视觉反馈**: - 禁用状态的按钮样式变化 - 按钮文案动态变化 3. **错误处理**: 包含跳转失败的处理逻辑 4. **指示点**: 清晰显示当前图片位置 ## 注意事项 ### 开发注意 - 轮播图使用 `aspectFit` 模式确保图片比例正确 - 指示点位置需要调整以适应图片高度 - 响应式布局适配不同屏幕尺寸 ### 测试要点 - 测试图片加载失败情况 - 测试快速滑动情况 - 测试不同设备的兼容性 - 测试按钮禁用/启用逻辑 ### 可能的改进 1. 添加图片加载失败的回退处理 2. 添加图片加载状态指示 3. 支持跳过功能(可选) 4. 添加动画过渡效果 ## 相关页面 - **前置页面**: `pages/face-photo/face-photo.vue` - 人脸照片拍摄 - **后置页面**: `pages/interview/interview.vue` - 手部照片采集 ## 版本历史 - **v1.0.0** (2024): 初始版本 - 基本轮播图功能 - 按钮禁用/启用逻辑 - 页面跳转功能