123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- <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>
|