You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
14 KiB
578 lines
14 KiB
<!-- pages/home/home.vue -->
|
|
<template>
|
|
<view>
|
|
<BackButton />
|
|
<swiper
|
|
class="main-swiper"
|
|
:vertical="true"
|
|
:current="currentIndex"
|
|
@change="handleSwiperChange"
|
|
:duration="300"
|
|
>
|
|
<!-- 首页内容 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
|
|
<template v-if="loadedPages[0]">
|
|
<image
|
|
v-show="shouldShowContent(0)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/index.gif"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(0)" class="content-layer">
|
|
<image
|
|
class="layer-img"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/home1.png"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
<view class="arrow-content">
|
|
<image
|
|
class="arrow-down"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 序章 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[1]">
|
|
<image
|
|
v-show="shouldShowContent(1)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/prologue-bg.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(1)" class="content-layer">
|
|
<view class="layer-text">
|
|
<view class=""> 在此我们邀请你 </view>
|
|
<view class=""> 以指尖触发一场直抵情绪与美学的共生实验 </view>
|
|
</view>
|
|
<view class="arrow-content">
|
|
<image
|
|
class="arrow-down"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第一章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[2]">
|
|
<image
|
|
v-show="shouldShowContent(2)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/covers.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(2)" class="content-layer">
|
|
<image
|
|
class="layer-img2"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
>
|
|
</image>
|
|
<view class="arrow-content">
|
|
<image
|
|
@click="navigateToChapter1"
|
|
class="btn"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第二章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[3]">
|
|
<image
|
|
v-show="shouldShowContent(3)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(3)" class="content-layer">
|
|
<image
|
|
class="chapter2-bg-txt"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/bg-txt.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
<view class="arrow-content chapter2-btn">
|
|
<image
|
|
@click="navigateToChapter2"
|
|
class="btn"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/button.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第三章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[4]">
|
|
<image
|
|
v-show="shouldShowContent(4)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/cover.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(4)" class="content-layer">
|
|
<image
|
|
class="chapter3-bg-txt"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/bg-txt.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
<view class="arrow-content chapter3-btn">
|
|
<image
|
|
@click="navigateToChapter3"
|
|
class="btn"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第四章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[5]">
|
|
<image
|
|
v-show="shouldShowContent(5)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/covers.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view v-show="shouldShowContent(5)" class="content-layer">
|
|
<!-- <image class="chapter4-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/bg-txt.png" :lazy-load="true" mode="widthFix"></image> -->
|
|
<view class="chapter4-btn-content">
|
|
<image
|
|
@click="ShareMoments"
|
|
class="chapter4-btn"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
<image
|
|
@click="navigateToChapter4"
|
|
class="chapter4-btn chapter4-btn2"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn2.png"
|
|
:lazy-load="true"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 页脚1 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[6]">
|
|
<image
|
|
v-show="shouldShowContent(6)"
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<image
|
|
v-show="shouldShowContent(6)"
|
|
class="qrCode-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
:show-menu-by-longpress="true"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<MusicControl />
|
|
<ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
|
|
<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ShareGuide from "@/components/ShareGuide.vue";
|
|
import MusicControl from "@/components/MusicControl.vue";
|
|
import NavMenu from "../components/NavMenu.vue";
|
|
import BackButton from "@/components/BackButton.vue";
|
|
export default {
|
|
components: {
|
|
ShareGuide,
|
|
MusicControl,
|
|
NavMenu,
|
|
BackButton,
|
|
},
|
|
data() {
|
|
return {
|
|
showShareGuide: false,
|
|
currentIndex: 0,
|
|
loadedPages: {
|
|
0: false,
|
|
1: false,
|
|
2: false,
|
|
3: false,
|
|
4: false,
|
|
5: false,
|
|
6: false,
|
|
},
|
|
preloadBuffer: 1,
|
|
};
|
|
},
|
|
methods: {
|
|
ShareMoments() {
|
|
this.showShareGuide = true;
|
|
},
|
|
onShareGuideClose() {
|
|
console.log("分享引导已关闭");
|
|
},
|
|
shouldShowContent(index) {
|
|
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
|
|
},
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
navigateToChapter1() {
|
|
uni.navigateTo({
|
|
url: "/xxdf/chapter1/cover1",
|
|
});
|
|
},
|
|
navigateToChapter2() {
|
|
uni.navigateTo({
|
|
url: "/xxdf/chapter2/cover",
|
|
});
|
|
},
|
|
navigateToChapter3() {
|
|
uni.navigateTo({
|
|
url: "/xxdf/chapter3/cover",
|
|
});
|
|
},
|
|
navigateToChapter4() {
|
|
uni.navigateTo({
|
|
url: "/xxdf/chapter4/cover",
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
currentIndex(newIndex) {
|
|
for (
|
|
let i = Math.max(0, newIndex - this.preloadBuffer);
|
|
i <= Math.min(6, newIndex + this.preloadBuffer);
|
|
i++
|
|
) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
const app = getApp();
|
|
app.updateMusicSrc(
|
|
"https://static.ticket.sz-trip.com/epicSoul/comfort.mp3"
|
|
);
|
|
app.initBackgroundMusic(); // 初始化背景音乐
|
|
uni.$bgMusic.play(); // 播放音乐
|
|
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
},
|
|
onUnload() {
|
|
uni.$bgMusic.pause(); // 停止音乐
|
|
},
|
|
onShow() {
|
|
try {
|
|
const app = getApp();
|
|
if (
|
|
app.globalData &&
|
|
app.globalData.mainSliderIndex !== undefined &&
|
|
app.globalData.mainSliderIndex !== 0
|
|
) {
|
|
const newIndex = app.globalData.mainSliderIndex;
|
|
setTimeout(() => {
|
|
this.currentIndex = newIndex;
|
|
app.globalData.mainSliderIndex = 0; // 重置
|
|
}, 100);
|
|
}
|
|
} catch (error) {
|
|
console.error("获取globalData失败:", error);
|
|
}
|
|
},
|
|
// 微信分享配置
|
|
// #ifdef MP-WEIXIN
|
|
onShareAppMessage() {
|
|
return {
|
|
title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
|
|
mpId: "wx8954209bb3ad489e",
|
|
path: "/xxdf/home/home",
|
|
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
|
|
query: "",
|
|
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
|
|
};
|
|
},
|
|
// #endif
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
}
|
|
|
|
.home-page {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.qrCode-image {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 192rpx;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
width: 30vw;
|
|
}
|
|
|
|
/* 内容层样式 */
|
|
.content-layer {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.layer-img {
|
|
width: 100%;
|
|
/* height: 80%; */
|
|
}
|
|
|
|
.layer-img2 {
|
|
width: 90%;
|
|
/* height: 88%; */
|
|
margin-top: 18%;
|
|
}
|
|
|
|
.chapter2-bg-txt {
|
|
width: 85%;
|
|
height: 70%;
|
|
margin-top: 24%;
|
|
}
|
|
|
|
.chapter3-bg-txt {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin-top: 16%;
|
|
}
|
|
|
|
.chapter4-bg-txt {
|
|
width: 75%;
|
|
/* height: 25%; */
|
|
margin-top: 18%;
|
|
}
|
|
|
|
.layer-text {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 65%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.layer-text view:last-child {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.prologue-page {
|
|
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
|
|
}
|
|
|
|
.chapter-cover {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 32rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 32rpx;
|
|
color: #666;
|
|
margin-bottom: 80rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.chapter-num {
|
|
font-size: 36rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.chapter-title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 60rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
font-size: 32rpx;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
margin-bottom: 60rpx;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.btn-container {
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.enter-btn {
|
|
background-color: #007aff;
|
|
color: #ffffff;
|
|
padding: 20rpx 60rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.arrow-content {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 85%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chapter2-btn {
|
|
top: 75% !important;
|
|
}
|
|
|
|
.chapter3-btn {
|
|
top: 48% !important;
|
|
}
|
|
|
|
.chapter4-btn-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.chapter4-btn {
|
|
width: 280rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.chapter4-btn2 {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 280rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
</style>
|
|
|