|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <view class="posture-guide">
|
|
|
+ <view class="guide-content">
|
|
|
+ <view class="guide-title">体态评估环节</view>
|
|
|
+ <view class="guide-subtitle">请仔细阅读下方说明,完整展示手臂</view>
|
|
|
+
|
|
|
+ <!-- 添加轮播图组件 -->
|
|
|
+ <swiper
|
|
|
+ class="guide-swiper"
|
|
|
+ :indicator-dots="true"
|
|
|
+ indicator-color="rgba(0, 0, 0, .3)"
|
|
|
+ indicator-active-color="#000000"
|
|
|
+ :autoplay="false"
|
|
|
+ @change="handleSwiperChange"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(item, index) in guideImages" :key="index">
|
|
|
+ <view class="swiper-item">
|
|
|
+ <image :src="item.url" mode="aspectFit" class="guide-image"></image>
|
|
|
+ <view class="image-description">{{item.description}}</view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <!-- <view class="guide-instructions">
|
|
|
+ <text>{{currentInstruction}}</text>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <!-- 按钮根据是否是最后一张图片来决定是否禁用 -->
|
|
|
+ <button
|
|
|
+ class="confirm-button"
|
|
|
+ :class="{'button-disabled': !isLastSlide}"
|
|
|
+ :disabled="!isLastSlide"
|
|
|
+ @click="handleConfirm"
|
|
|
+ >
|
|
|
+ {{isLastSlide ? '我知道了,开始采集' : '请查看完所有说明'}}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentIndex: 0,
|
|
|
+ isLastSlide: false,
|
|
|
+ guideImages: [
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/85fbafbd-1b80-48cd-bcd6-fc4911e9ff54.jpg',
|
|
|
+ description: '左手手掌'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/17d141e0-8f99-4a54-a534-f6b954c600f8.png',
|
|
|
+ description: '左手手背'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/5c7d7d6f-5e14-4cd6-bb9f-11509473a8bb.png',
|
|
|
+ description: '左手握拳'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/148eea00-21b4-49e1-a3b6-712fff08a5a8.png',
|
|
|
+ description: '右手手掌'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/c67c303e-91c0-4e79-8e82-84096435481f.png',
|
|
|
+ description: '右手手背'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://data.qicai321.com/minlong/5a093f70-d397-4a36-9539-a8b4d11e0a13.png',
|
|
|
+ description: '右手握拳'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ instructions: [
|
|
|
+ '第1步:请按图示展示左手手掌',
|
|
|
+ '第2步:请按图示展示左手手背',
|
|
|
+ '第3步:请按图示展示左手握拳',
|
|
|
+ '第4步:请按图示展示右手手掌',
|
|
|
+ '第5步:请按图示展示右手手背',
|
|
|
+ '第6步:请按图示展示右手握拳'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ currentInstruction() {
|
|
|
+ return this.instructions[this.currentIndex];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleSwiperChange(e) {
|
|
|
+ this.currentIndex = e.detail.current;
|
|
|
+ // 判断是否是最后一张图片
|
|
|
+ this.isLastSlide = this.currentIndex === this.guideImages.length - 1;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleConfirm() {
|
|
|
+ if (this.isLastSlide) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/interview/interview'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请查看完所有说明',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.posture-guide {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.guide-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.guide-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.guide-subtitle {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 轮播图样式 */
|
|
|
+.guide-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 800rpx;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 40rpx; /* 添加底部padding为指示点留出空间 */
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.guide-image {
|
|
|
+ width: 90%;
|
|
|
+ height: 600rpx;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+
|
|
|
+.image-description {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.guide-instructions {
|
|
|
+ padding: 20rpx;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.confirm-button {
|
|
|
+ width: 80%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background-color: #0039b3;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 禁用状态的按钮样式 */
|
|
|
+.button-disabled {
|
|
|
+ background-color: #cccccc;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+/* 修改指示点容器样式 */
|
|
|
+:deep(.uni-swiper-dots) {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 修改指示点样式 */
|
|
|
+:deep(.uni-swiper-dot) {
|
|
|
+ width: 16rpx !important;
|
|
|
+ height: 16rpx !important;
|
|
|
+ margin: 0 8rpx !important;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(0, 0, 0, 0.3) !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.uni-swiper-dot-active) {
|
|
|
+ background: #000000 !important;
|
|
|
+}
|
|
|
+</style>
|