体态评估指导页面(pages/posture-guide/posture-guide.vue)用于向用户展示手部照片拍摄的指导说明,帮助用户了解如何正确拍摄手部照片。
该页面通过轮播图的方式,向用户展示6张不同的手部姿势示意图:
swiper 组件展示多张指导图片/pages/interview/interview)uni.navigateTo 进行页面跳转<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>
data() {
return {
currentIndex: 0, // 当前显示的图片索引
isLastSlide: false, // 是否是最后一张图片
guideImages: [ // 指导图片数组
{
url: '图片URL',
description: '图片描述'
}
]
}
}
handleSwiperChange(e)
handleConfirm()
主要样式类:
.posture-guide: 页面容器.guide-title: 标题样式.guide-subtitle: 副标题样式.guide-swiper: 轮播图容器.guide-image: 图片样式.confirm-button: 确认按钮样式.button-disabled: 禁用状态按钮样式该页面在面试流程中处于以下位置:
用户登录
→ 身份验证
→ 人脸照片拍摄
→ **体态评估指导**
→ 手部照片采集
→ 面试问题录制
currentIndexisLastSlide 置为 true图片通过 CDN 加载:
https://data.qicai321.com/minlong/
包含以下图片:
85fbafbd-1b80-48cd-bcd6-fc4911e9ff.jpg - 左手手掌17d141e0-8f99-4a54-a534-f6b954c600.png - 左手手背5c7d7d6f-5e14-4cd6-bb9f-11509473a8.png - 左手握拳148eea00-21b4-49e1-a3b6-712fff08a5.png - 右手手掌c67c303e-91c0-4e79-8e82-8409643548.png - 右手手背5a093f70-d397-4a36-9539-a8b4d11e0a.png - 右手握拳aspectFit 模式确保图片比例正确pages/face-photo/face-photo.vue - 人脸照片拍摄pages/interview/interview.vue - 手部照片采集