EpicSoul/xxdf/chapter4/cover.vue

<template>
	<view>
    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
        <swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
            <view class="page-container home-page">
                <template v-if="loadedPages[outerIndex]">
                    <image v-show="shouldShowContent(outerIndex)" class="bg-image"
                        :src="`https://static.ticket.sz-trip.com/epicSoul/images/chapter4/detail${outerIndex+1}/cover-bg.png`" mode="" :lazy-load="true">
                    </image>

                    <view v-show="shouldShowContent(outerIndex)" class="content-layer">
                        <swiper class="image-swiper" circular :indicator-dots="false"
                            @change="(e) => handleImageSwiperChange(e, outerIndex)" :autoplay="false"
                            :current="innerSwiperIndices[outerIndex]" :key="`inner-swiper-${outerIndex}`">
                            <swiper-item v-for="index in 7" :key="index">
                                <view class="swiper-item-container">
                                    <view class="image-wrapper" :class="{'selected-image': selectedImages[outerIndex] === index-1 && userSelected[outerIndex],
                                            'image-wrapper-full': [0, 3, 5, 6].includes(outerIndex),
                                            'image-wrapper-compact': [1, 2, 4].includes(outerIndex)
                                        }" @click="selectImage(outerIndex, index-1)">
                                        <image
                                            :src="`https://static.ticket.sz-trip.com/epicSoul/images/chapter4/detail${outerIndex+1}/swiper-img${index}.png`"
                                            class="swiper-image" mode="aspectFit" :lazy-load="true" />
                                    </view>
                                </view>
                            </swiper-item>
                        </swiper>

                        <!-- 自定义指示器 -->
                        <view class="indicator-container">
                            <view v-for="index in 7" :key="index" class="indicator-dot"
                                :class="{ 'active': innerSwiperIndices[outerIndex] === index - 1 }"
                                @click="() => changeSlide(index - 1, outerIndex)"></view>
                        </view>
                    </view>

                    <view v-show="shouldShowContent(outerIndex)" class="content-layer2">
                        <!-- 点击确认找一找相似度 按钮 -->
                        <image @click="findSimilarity(outerIndex)" class="find-btn" src="https://static.ticket.sz-trip.com/epicSoul/find-btn.png"
                            :lazy-load="true" mode=""></image>
                        <view class="problem-description">
                            <view class="proportion-txt" :class="{
                                'proportion-txt-position': outerIndex === 0,
                                'proportion-txt-position2': outerIndex === 1,
                                'proportion-txt-position3': outerIndex === 2,
                                'proportion-txt-position4': outerIndex === 3,
                                'proportion-txt-position5': outerIndex === 4,
                                'proportion-txt-position6': outerIndex === 5,
                                'proportion-txt-position7': outerIndex === 6
                            }">
                                {{ percentages[outerIndex]}}
                            </view>
                            <image class="description-txt"
                                :class="{'description-txt6': outerIndex === 5,'description-txt7': outerIndex === 6}"
                                :src="`https://static.ticket.sz-trip.com/epicSoul/images/chapter4/detail${outerIndex+1}/cover-txt.png`" :lazy-load="true"
                                mode=""></image>
                        </view>
                    </view>

                    <view v-show="shouldShowContent(outerIndex)" class="arrow-content">
                        <image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icon-black.png" :lazy-load="true" mode=""></image>
                    </view>
                </template>
            </view>
        </swiper-item>

        <swiper-item>
            <view class="page-container home-page">
                <template v-if="loadedPages[7]">
                    <image v-show="shouldShowContent(7)" class="bg-image"
                        src="https://static.ticket.sz-trip.com/epicSoul/images/chapter4/harvestReport/cover-bg.png" :lazy-load="true" mode=""></image>
                    <view v-show="shouldShowContent(7)" class="harvestReport-layer">
                        <view class="grid-cover img-shadow">
                            <image class="grid-cover-bg" src="https://static.ticket.sz-trip.com/epicSoul/images/chapter4/harvestReport/cover-grid.png"
                                :lazy-load="true" mode=""></image>
                            <view class="report-text-overlay" v-if="canAccessFinalReport">
                                <view class="report-title">您的气味收获</view>
                                <view class="report-content">
                                    <view v-for="(item, index) in selectedResults" :key="index" class="result-item">
                                        {{ item }}
                                    </view>
                                </view>
                            </view>
                        </view>

                        <image @click="ShareMoments" class="chapter4-btn" src="https://static.ticket.sz-trip.com/epicSoul/images/chapter4/share-img.png"
                            :lazy-load="true" mode=""></image>
                    </view>
                    <image @click="goBack" class="back-icon" src="https://static.ticket.sz-trip.com/epicSoul/back.png" mode=""></image>
                </template>
            </view>
        </swiper-item>
    </swiper>
    <MusicControl />
    <ShareGuide v-model="showShareGuide" :text="['点击右上角...', '选择分享到朋友圈']" @close="onShareGuideClose" />
	</view>
</template>

<script>
import ShareGuide from '@/components/ShareGuide.vue';

export default {
    components: {
        ShareGuide
    },
    data() {
        return {
            showShareGuide: false,
            currentIndex: 0,
            innerSwiperIndices: {
                0: 0,
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
            },
            selectedImages: {
                0: null,
                1: null,
                2: null,
                3: null,
                4: null,
                5: null,
                6: null
            },
            userSelected: {
                0: false,
                1: false,
                2: false,
                3: false,
                4: false,
                5: false,
                6: false
            },
            percentages: {
                0: '',
                1: '',
                2: '',
                3: '',
                4: '',
                5: '',
                6: ''
            },
            requestedData: {
                0: false,
                1: false,
                2: false,
                3: false,
                4: false,
                5: false,
                6: false
            },
            similarityCompleted: {
                0: false,
                1: false,
                2: false,
                3: false,
                4: false,
                5: false,
                6: false
            },
            loadedPages: {
                0: false,
                1: false,
                2: false,
                3: false,
                4: false,
                5: false,
                6: false,
                7: false
            },
            preloadBuffer: 1,
            moduleTips: [
                '请选择最有味道的歌曲',
                '请选择最有味道的人物',
                '请选择最有味道的食物',
                '请选择最有味道的句子',
                '请选择最有味道的风景',
                '请选择最有味道的动漫',
                '请选择最有味道的情感'
            ],
            flavorTexts: {
                // 歌曲文案
                0: [
                    "音符在舌尖跳跃，这首歌如同陈年佳酿",
                ],
                // 人物文案
                1: [
                    "如墨般浓郁的性格，似茶般清冽的灵魂",
                ],
                // 食物文案
                2: [
                    "舌尖上的东方，是一场穿越时空的对话",
                ],
                // 句子文案
                3: [
                    "文字如酒，越品越醇，越读越深",
                ],
                // 风景文案
                4: [
                    "山水间藏着天地的密语，云雾里是岁月的轻叹",
                ],
                // 动漫文案
                5: [
                    "二次元中的东方灵魂，是跨越文化的共鸣",
                ],
                // 情感文案
                6: [
                    "情感如茶，或浓或淡，皆有韵味",
                ]
            }
        };
    },
    computed: {
        canAccessFinalReport() {
            for (let i = 0; i < 7; i++) {
                if (!this.similarityCompleted[i]) {
                    return false;
                }
            }
            return true;
        },
        selectedResults() {
            const results = [];
            for (let i = 0; i < 7; i++) {
                if (this.userSelected[i]) {
                    const textOptions = this.flavorTexts[i];
                    const randomIndex = Math.floor(Math.random() * textOptions.length);
                    const text = textOptions[randomIndex];
                    results.push(`${text}`);
                }
            }
            return results;
        }
    },
    mounted() {
        this.currentIndex = 0;
        for (let i = 0; i <= Math.min(this.preloadBuffer, 7); i++) {
            this.loadedPages[i] = true;
        }
    },
    watch: {
        currentIndex(newIndex) {
            for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(7, newIndex + this.preloadBuffer); i++) {
                this.loadedPages[i] = true;
            }
        }
    },
    methods: {
        shouldShowContent(index) {
            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
        },
        selectImage(moduleIndex, imageIndex) {
            this.selectedImages[moduleIndex] = imageIndex;
            this.userSelected[moduleIndex] = true;
            this.innerSwiperIndices[moduleIndex] = imageIndex;
            console.log(`选中模块${moduleIndex + 1}的图片${imageIndex + 1}`);
        },
        findSimilarity(moduleIndex) {
            if (this.selectedImages[moduleIndex] === null || !this.userSelected[moduleIndex]) {
                this.selectedImages[moduleIndex] = this.innerSwiperIndices[moduleIndex];
                this.userSelected[moduleIndex] = true;
                uni.showToast({
                    title: '已选择当前图片',
                    icon: 'none'
                });
            }
            this.fetchSimilarityData(moduleIndex);
        },
        async fetchSimilarityData(moduleIndex) {
            uni.showLoading({
                title: '计算相似度中...'
            });
            try {
                const imageIndex = this.selectedImages[moduleIndex];
                const result = await this.fetchPercentage(moduleIndex + 1, imageIndex + 1);
                this.percentages[moduleIndex] = result.percentage;
                this.similarityCompleted[moduleIndex] = true;
                this.requestedData[moduleIndex] = true;
                uni.hideLoading();
                uni.showToast({
                    title: '计算完成',
                    icon: 'success'
                });
            } catch (error) {
                console.error('获取相似度失败:', error);
                uni.hideLoading();
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none'
                });
            }
        },
        async fetchPercentage(moduleId, imageId) {
            try {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        const percentage = Math.floor(Math.random() * 41) + 60 + '%';
                        resolve({
                            success: true,
                            percentage,
                            moduleId,
                            imageId
                        });
                    }, 800);
                });
            } catch (error) {
                console.error('API请求失败:', error);
                throw error;
            }
        },
        ShareMoments() {
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
            this.showShareGuide = true;
        },
        onShareGuideClose() {
            console.log('分享引导已关闭');
        },
        goBack() {
            if (this.goBack.isNavigating) return;
            this.goBack.isNavigating = true;
            const app = getApp();
            app.globalData.mainSliderIndex = 5;
            uni.redirectTo({
                url: '/xxdf/home/home',
                complete: () => {
                    setTimeout(() => {
                        this.goBack.isNavigating = false;
                    }, 500);
                }
            });
        },
        handleSwiperChange(e) {
            const newIndex = e.detail.current;
            if (newIndex === 7) {
                if (!this.canAccessFinalReport) {
                    let firstIncompleteIndex = 0;
                    for (let i = 0; i < 7; i++) {
                        if (!this.similarityCompleted[i]) {
                            firstIncompleteIndex = i;
                            break;
                        }
                    }
                    uni.showToast({
                        title: `${this.moduleTips[firstIncompleteIndex]}并点击确认按钮`,
                        icon: 'none',
                        duration: 2500
                    });
                    setTimeout(() => {
                        this.currentIndex = firstIncompleteIndex;
                    }, 1000);
                    return;
                }
            }
            this.currentIndex = newIndex;
        },
        handleImageSwiperChange(e, outerIndex) {
            this.innerSwiperIndices[outerIndex] = e.detail.current;
            if (!this.userSelected[outerIndex]) {
                this.selectedImages[outerIndex] = e.detail.current;
            }
        },
        changeSlide(index, outerIndex) {
            this.innerSwiperIndices[outerIndex] = index;
            this.selectedImages[outerIndex] = index;
            this.userSelected[outerIndex] = true;
        },
        getCurrentInnerIndex(outerIndex) {
            return this.innerSwiperIndices[outerIndex || this.currentIndex];
        },
        getFlavorDescription(percentage) {
            const value = parseInt(percentage);
            return;
        }
    },
    onShareAppMessage() {
        return {
            title: '细嗅东方｜「Epic Soul」阅读体 issue02',
            mpId: 'wx8954209bb3ad489e',
            path: '/xxdf/chapter4/cover',
            imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
        };
    },
    onShareTimeline() {
        return {
            title: '细嗅东方｜「Epic Soul」阅读体 issue02',
            query: '',
            imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
        };
    }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.main-swiper {
    width: 100%;
    height: 100vh;
}

.page-container {
    height: 100vh;
}

.home-page {
    position: relative;
    overflow: hidden;
}

.swiper-item-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    box-sizing: border-box;
}

.image-swiper {
    width: 100%;
    height: 500rpx;
    margin-bottom: 20rpx;
}

.image-wrapper {
    position: relative;
    box-sizing: border-box;
    transition: all 0.3s;
    height: 100%;
}

.image-wrapper-full {
    width: 80%;
}

.image-wrapper-compact {
    width: 100%;
}

.selected-image {
    border: 4rpx solid #f0ad4e;
    box-shadow: 0 0 10rpx rgba(240, 173, 78, 0.6);
    background-color: rgba(240, 173, 78, 0.1);
}

.swiper-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 内容层样式 */
.content-layer {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 20%;
    box-sizing: border-box;
    /* 添加此行 */
    padding: 0;
    /* 确保没有内边距 */
}

.content-layer2 {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    flex-direction: column;
}

.find-btn {
    width: 300rpx;
    height: 50rpx;
    margin-top: 10rpx;
}

.problem-description {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 150rpx;
}

.proportion-txt {
    font-size: 48rpx;
    color: #0f944f;
}

.proportion-txt-position {
    position: absolute;
    bottom: 0;
    left: 0;
}

.proportion-txt-position2 {
    position: absolute;
    right: 120rpx;
    top: 0;
    line-height: 1;
}

.proportion-txt-position3 {
    position: absolute;
    right: 20rpx;
    top: 0;
    line-height: 1;
}

.proportion-txt-position4 {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
}

.proportion-txt-position5 {
    position: absolute;
    right: 120rpx;
    top: 0;
    line-height: 1;
}

.description-txt {
    width: 400rpx;
    height: 120rpx;
}

.description-txt6 {
    width: 460rpx !important;
    height: 50rpx !important;
}

.description-txt7 {
    width: 460rpx !important;
    height: 120rpx !important;
}

.proportion-txt-position6 {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
    font-size: 38rpx !important;
}

.proportion-txt-position7 {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
}

.image-swiper {
    width: 100%;
    height: 500rpx;
}

.swiper-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.back-icon {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 40rpx;
    top: 40rpx;
    z-index: 10;
}

.indicator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50rpx;
}

.indicator-dot {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 8rpx;
    transition: all 0.3s;
}

.indicator-dot.active {
    background-color: #ffffff;
    transform: scale(1.2);
}

.harvestReport-layer {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 42%;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.grid-cover {
    width: 85%;
    height: 60%;
}

.grid-cover-bg {
    width: 100%;
    height: 100%;
}

.chapter4-btn {
    width: 280rpx;
    height: 60rpx;
    margin-top: 60rpx;
}

.img-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow 0.3s ease;
}

.arrow-content {
    width: 100%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.arrow-down {
    width: 200rpx;
    height: 40rpx;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20rpx);
    }

    60% {
        transform: translateY(-10rpx);
    }
}

.report-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40rpx;
    box-sizing: border-box;
    z-index: 8;
    text-align: center;
}

.report-title {
    font-size: 48rpx;
    color: #f0ad4e;
    font-weight: bold;
    margin-bottom: 40rpx;
    text-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
    animation: fade-in 1.5s ease-out;
}

.report-content {
    width: 100%;
}

.result-item {
    font-size: 28rpx;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 20rpx;
    text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: slide-in 0.5s ease-out forwards;
}

.result-item:nth-child(1) {
    animation-delay: 0.2s;
}

.result-item:nth-child(2) {
    animation-delay: 0.4s;
}

.result-item:nth-child(3) {
    animation-delay: 0.6s;
}

.result-item:nth-child(4) {
    animation-delay: 0.8s;
}

.result-item:nth-child(5) {
    animation-delay: 1.0s;
}

.result-item:nth-child(6) {
    animation-delay: 1.2s;
}

.result-item:nth-child(7) {
    animation-delay: 1.4s;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-20rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-30rpx);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.grid-cover {
    position: relative;
    height: 60%;
    z-index: 7;
}
</style>