posture-guide.md 4.5 KB

体态评估指导页面文档

页面概述

体态评估指导页面(pages/posture-guide/posture-guide.vue)用于向用户展示手部照片拍摄的指导说明,帮助用户了解如何正确拍摄手部照片。

页面功能

该页面通过轮播图的方式,向用户展示6张不同的手部姿势示意图:

  • 左手手掌
  • 左手手背
  • 左手握拳
  • 右手手掌
  • 右手手背
  • 右手握拳

功能特性

1. 轮播图展示

  • 使用 uni-app 的 swiper 组件展示多张指导图片
  • 支持滑动切换图片
  • 底部显示指示点(dots)
  • 自动跟踪当前图片索引

2. 按钮控制

  • 确认按钮: 仅在查看完所有图片后启用
  • 禁用状态: 未看完所有说明时,按钮呈灰色禁用状态
  • 文案切换:
    • 未看完: "请查看完所有说明"
    • 已看完: "我知道了,开始采集"

3. 页面跳转

  • 确认后跳转到手部照片采集页面(/pages/interview/interview
  • 使用 uni.navigateTo 进行页面跳转
  • 包含错误处理和降级方案

代码结构

Template 部分

<template>
  <view class="posture-guide">
    <view class="guide-content">
      <!-- 标题和副标题 -->
      <view class="guide-title">体态评估环节</view>
      <view class="guide-subtitle">请仔细阅读下方说明,完整展示手臂,向右滑动查看更多</view>
      
      <!-- 轮播图 -->
      <swiper>
        <!-- 多张指导图片 -->
      </swiper>
      
      <!-- 确认按钮 -->
      <button @click="handleConfirm">我知道了,开始采集</button>
    </view>
  </view>
</template>

Script 部分

数据结构

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-fc4911e9ff.jpg - 左手手掌
  2. 17d141e0-8f99-4a54-a534-f6b954c600.png - 左手手背
  3. 5c7d7d6f-5e14-4cd6-bb9f-11509473a8.png - 左手握拳
  4. 148eea00-21b4-49e1-a3b6-712fff08a5.png - 右手手掌
  5. c67c303e-91c0-4e79-8e82-8409643548.png - 右手手背
  6. 5a093f70-d397-4a36-9539-a8b4d11e0a.png - 右手握拳

用户体验优化

  1. 渐进式揭示: 要求用户查看完所有图片才能进入下一步
  2. 视觉反馈:
    • 禁用状态的按钮样式变化
    • 按钮文案动态变化
  3. 错误处理: 包含跳转失败的处理逻辑
  4. 指示点: 清晰显示当前图片位置

注意事项

开发注意

  • 轮播图使用 aspectFit 模式确保图片比例正确
  • 指示点位置需要调整以适应图片高度
  • 响应式布局适配不同屏幕尺寸

测试要点

  • 测试图片加载失败情况
  • 测试快速滑动情况
  • 测试不同设备的兼容性
  • 测试按钮禁用/启用逻辑

可能的改进

  1. 添加图片加载失败的回退处理
  2. 添加图片加载状态指示
  3. 支持跳过功能(可选)
  4. 添加动画过渡效果

相关页面

  • 前置页面: pages/face-photo/face-photo.vue - 人脸照片拍摄
  • 后置页面: pages/interview/interview.vue - 手部照片采集

版本历史

  • v1.0.0 (2024): 初始版本
    • 基本轮播图功能
    • 按钮禁用/启用逻辑
    • 页面跳转功能