shanjuandong/pages/index/index.vue

<template>
    <view class="bg">
        <!-- 第一页 -->
        <view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0">
            <image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
            <image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
        </view>

        <!-- 加载页 -->
        <view class="content content_2" v-show="currentPage === 1">
            <image class="title_2" src="/static/1/2title.png"></image>
            <view class="progress-container">
                <view class="progress" :style="{'width': progressPercentage + '%'}">
                    <image class="dongxiao" src="/static/1/loading.png"></image>
                </view>
            </view>
            <view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
        </view>

        <!-- 第二页 -->
        <view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
            <image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
            <swiper class="swiper-box" :vertical="true">
                <swiper-item>
                    <image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
                </swiper-item>
            </swiper>
        </view>

        <!-- 第三页 -->
        <view class="content" v-show="currentPage === 3">
            <image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
            <view class="btn-box">
                <image src="/static/1/btn1.png" mode="" class="btn1"></image>
                <image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image>
                <image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            progressPercentage: 0,
            currentPage: 0,
            startTouchY: 0,
            isFlipFade: false,
            progressTimer: null
        };
    },
    onLoad() {
        // 页面加载时的逻辑
    },
    methods: {
        // 跳转到指定页面
        navigateToPage(url) {
            uni.navigateTo({
                url
            });
        },
        // 处理第一页按钮点击事件
        handleFirstPageClick() {
            this.isFlipFade = true;
            setTimeout(() => {
                this.handlePageClick();
            }, 1500);
        },
        // 处理页面点击事件
        handlePageClick() {
            this.currentPage++;
            this.updatePageContent();
        },
        // 根据当前页面更新内容
        updatePageContent() {
            switch (this.currentPage) {
                case 1:
                    this.startProgress();
                    break;
                case 2:
                    // 这里可以添加第二页的特殊逻辑
                    break;
                case 3:
                    // 这里可以添加第三页的特殊逻辑
                    break;
                default:
                    break;
            }
        },
        // 开始加载进度条
        startProgress() {
            this.progressTimer = setInterval(() => {
                this.progressPercentage++;
                if (this.progressPercentage >= 100) {
                    this.progressPercentage = 100;
                    clearInterval(this.progressTimer);
                    this.currentPage = 2;
                }
            }, 10);
        },
        // 处理触摸开始事件
        handleTouchStart(e) {
            this.startTouchY = e.changedTouches[0].clientY;
        },
        // 处理触摸结束事件
        handleTouchEnd(e) {
            const endY = e.changedTouches[0].clientY;
            const distanceY = this.startTouchY - endY;
            if (distanceY > 50 && this.currentPage === 2) {
                console.log('上滑操作触发');
                setTimeout(() => {
                    this.handlePageClick();
                }, 100);
            }
        }
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        if (this.progressTimer) {
            clearInterval(this.progressTimer);
        }
    }
};
</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    min-height: 100vh;
    font-size: 0;
    background: black;
}

.content {
    width: 100%;
    min-height: 100vh;
    position: relative;

    .bg-image {
        width: 100%;
        min-height: 100vh;
        height: auto;
    }

    .btn_1 {
        width: 569rpx;
        height: 74rpx;
        position: absolute;
        bottom: 68rpx;
        left: 95rpx;
    }

    &.content_2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .title_2 {
            width: 65rpx;
            height: 76rpx;
        }

        .progress-container {
            width: 387rpx;
            height: 24rpx;
            border-radius: 20rpx;
            border: 2px solid #8F76EE;
            margin: 26rpx 0;

            .progress {
                height: 100%;
                background: rgba(143, 118, 238, 0.3);
                border-radius: 20rpx;
                width: 0;
                overflow: hidden;
                position: relative;
            }
        }
    }
}

.btn-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;

    image {
        position: absolute;
    }

    .btn1 {
        width: 298rpx;
        height: 62rpx;
        top: 810rpx;
        left: 229rpx;
    }

    .btn2 {
        width: 243rpx;
        height: 74rpx;
        bottom: 223rpx;
        left: 78rpx;
    }
}

.dongxiao {
    position: absolute;
    right: 0;
    height: 100%;
    width: 158rpx;
}

.swiper-box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.content-first {
    animation: flipFade 2s forwards;
    opacity: 1;
    transform: rotateY(0deg);
}

/* 定义动画 */
@keyframes flipFade {
    0% {
        opacity: 1;
        transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        transform: rotateY(180deg);
    }
}
</style>