EpicSoul/bmzm/chapter7/index.vue

<template>
    <view>
        <!-- 垂直滑动的 swiper 组件 -->
        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
            <!-- 循环渲染 swiper-item -->
            <swiper-item v-for="(imageUrl, index) in swiperImages" :key="index">
                <view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }">
                    <!-- 根据索引添加特定元素 -->
                    <template v-if="index === 2">
                        <image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4-text.png" mode="aspectFill" class="img4-text"></image>
                        <image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4-btn.png" mode="aspectFill" class="img4-btn" @click="showCustomModal"></image>
                    </template>
                    <template v-if="index === 3">
                        <view class="img5-text">{{ inputValue }}</view>
                        <image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img5-btn.png" mode="aspectFill" class="img5-btn"></image>
                    </template>
                    <template v-if="index === 1">
                        <!-- 添加动态类名 -->
                        <view class="answer-box" :class="{ 'fade-in': showAnswerBox }">
                            <view class="answer answer1">{{answerObj.answer1}}</view>
                            <view class="answer answer2">{{answerObj.answer2}}</view>
                            <view class="answer answer3">{{answerObj.answer3}}</view>
                        </view>
                    </template>
                </view>
            </swiper-item>
        </swiper>

        <!-- 自定义模态框 -->
        <uni-popup ref="chapterPopup" type="center">
            <view class="modal-mask">
                <view class="modal-container">
                    <view class="modal-title">心愿梦想</view>
                    <textarea 
                        v-model="inputValue" 
                        :maxlength="maxLength" 
                        placeholder="最多输入25个字" 
                        @input="handleInput"
                    ></textarea>
                    <view class="char-count">{{ inputValue.length }}/{{ maxLength }}</view>
                    <view class="modal-buttons">
                        <button @click="closeModal">取消</button>
                        <button @click="confirmInput">确认</button>
                    </view>
                </view>
            </view>
        </uni-popup>
		<MusicControl />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {
	    MusicControl
	},
    data() {
        return {
            currentIndex: 0,
            initialIndex: 1,
            popupIndex: 1,
            inputValue: '',
            // 最大输入长度
            maxLength: 25,
            // swiper 图片 URL 数组
            swiperImages: [
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img2.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img3.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4.gif',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img5.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img6.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png'
            ],
            answerObj: {},
            showAnswerBox: false
        };
    },
    onShow() {
        this.answerObj = uni.getStorageSync('answerObj');
    },
    methods: {
        // 处理 swiper 滑动事件
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
            if (this.currentIndex === 1) {
                // 延迟 1.5s 显示 answer-box
                setTimeout(() => {
                    this.showAnswerBox = true;
                }, 1000);
            } else {
                this.showAnswerBox = false;
            }
        },
        // 显示自定义模态框
        showCustomModal() {
            this.$refs.chapterPopup.open();
            this.inputValue = ''; // 清空输入框
        },
        // 处理输入事件
        handleInput(e) {
            this.inputValue = e.detail.value.slice(0, this.maxLength);
        },
        // 关闭模态框
        closeModal() {
            this.inputValue = ''; // 清空输入框
            this.$refs.chapterPopup.close();
        },
        // 确认输入
        confirmInput() {
            this.$refs.chapterPopup.close();
        }
    }
};
</script>

<style lang="scss" scoped>
.swiper {
    width: 100vw;
    height: 100vh;
}
.swiper-item {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    position: relative;
}
.img4-text {
    width: 466.38rpx;
    height: 1033.62rpx;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.img4-btn {
    width: 161.78rpx;
    height: 161.78rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 330rpx;
    margin: 0 auto;
}
.img5-text {
    position: absolute;
    top: 222rpx;
    font-size: 42.14rpx;
    font-weight: 500;
    color: #fff;
    padding: 0 57rpx;
}
.img5-btn {
    width: 413.45rpx;
    height: 79.89rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 166rpx;
    margin: 0 auto;
}

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-container {
    background-color: #fff;
    border-radius: 12rpx;
    width: 600rpx;
    padding: 40rpx;
}

.modal-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
}

textarea {
    width: 480rpx;
    height: 200rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
}

.char-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
}

.modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
}

.modal-buttons button {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
}

.modal-buttons button:first-child {
    background-color: #eee;
    color: #333;
}

.modal-buttons button:last-child {
    background-color: #007aff;
    color: #fff;
}

.answer {
    position: absolute;
    color: rgb(0, 228, 216);
    font-size: 32rpx;
}
.answer1 {
    top: 593rpx;
    left: 400rpx;
}
.answer2 {
    top: 777rpx;
    left: 252rpx;
}
.answer3 {
    top: 870rpx;
    left: 181rpx;
}
.answer-box {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.fade-in {
    opacity: 1;
}
</style>