jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

阅读体新增返回

dev_des
1054425342@qq.com 2 months ago
parent
4bcf2dd472
commit
5de45a14db
5 changed files with 908 additions and 646 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 321
      bmzm/home/home.vue
  2. 97
      components/BackButton.vue
  3. 31
      pig/home/home.vue
  4. 295
      xrcc/home/home.vue
  5. 810
      xxdf/home/home.vue

321
bmzm/home/home.vue
View File

@ -1,177 +1,190 @@
<template>
<view>
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
<swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<!-- 仅在第四张图片添加子模块 -->
<template v-if="index === 3">
<image
:src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${i + 1}.png`"
v-for="i in 4"
:key="i"
:class="'module'+(i+1)"
:style="{ animationDelay: `${i * animationConfig.delay}s` }"
@click="setStorage(i);gotoPath(`/bmzm/chapter1/index?index=${i + 1}`)"
></image>
</template>
</view>
</swiper-item>
</swiper>
<MusicControl />
<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
</view>
<view>
<BackButton />
<swiper
class="swiper"
:current="currentIndex"
:vertical="true"
@change="handleSwiperChange"
>
<swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<!-- 仅在第四张图片添加子模块 -->
<template v-if="index === 3">
<image
:src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${
i + 1
}.png`"
v-for="i in 4"
:key="i"
:class="'module' + (i + 1)"
:style="{ animationDelay: `${i * animationConfig.delay}s` }"
@click="
setStorage(i);
gotoPath(`/bmzm/chapter1/index?index=${i + 1}`);
"
></image>
</template>
</view>
</swiper-item>
</swiper>
<MusicControl />
<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
</view>
</template>
<script>
import MusicControl from '@/components/MusicControl.vue';
import NavMenu from '../components/NavMenu.vue';
import MusicControl from "@/components/MusicControl.vue";
import NavMenu from "../components/NavMenu.vue";
import BackButton from "@/components/BackButton.vue";
export default {
components: {
MusicControl,
NavMenu
},
data() {
return {
currentIndex: 0,
swiperImages: [
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif',
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png',
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png',
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png'
],
animationConfig: {
delay: 0.5,
duration: 3,
keyframes: {
start: 1,
first: 0.8,
second: 1.2,
third: 0.9,
end: 1.1
}
}
};
},
onShow() {
uni.removeStorageSync('answerObj');
const app = getApp();
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3');
app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐
},
methods: {
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
components: {
MusicControl,
NavMenu,
BackButton,
},
data() {
return {
currentIndex: 0,
swiperImages: [
"https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif",
"https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png",
"https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png",
"https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png",
],
animationConfig: {
delay: 0.5,
duration: 3,
keyframes: {
start: 1,
first: 0.8,
second: 1.2,
third: 0.9,
end: 1.1,
},
// 存储答案，供后面使用
setStorage(i) {
let text = ''
switch (i){
case 0:
text = '月光白'
break;
case 1:
text = '黎明青'
break;
case 2:
text = '玄天黑'
break;
case 3:
text = '胭脂红'
break;
default:
break;
}
this.appendToStorage('answerObj', { answer1: text });
}
},
};
},
onShow() {
uni.removeStorageSync("answerObj");
const app = getApp();
app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3");
app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐
},
methods: {
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
// 存储答案，供后面使用
setStorage(i) {
let text = "";
switch (i) {
case 0:
text = "月光白";
break;
case 1:
text = "黎明青";
break;
case 2:
text = "玄天黑";
break;
case 3:
text = "胭脂红";
break;
default:
break;
}
this.appendToStorage("answerObj", { answer1: text });
},
// 微信分享配置
// #ifdef MP-WEIXIN
onShareAppMessage() {
return {
title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03',
mpId: 'wx8954209bb3ad489e',
path: '/bmzm/home/home',
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg'
};
},
onShareTimeline() {
return {
title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03',
query: '',
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg'
};
}
// #endif
},
// 微信分享配置
// #ifdef MP-WEIXIN
onShareAppMessage() {
return {
title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
mpId: "wx8954209bb3ad489e",
path: "/bmzm/home/home",
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
};
},
onShareTimeline() {
return {
title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
query: "",
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
};
},
// #endif
};
</script>
<style lang="scss" scoped>
.swiper {
width: 100vw;
height: 100vh;
width: 100vw;
height: 100vh;
}
.swiper-item {
width: 100vw;
height: 100vh;
background-size: 100% 100%;
position: relative;
width: 100vw;
height: 100vh;
background-size: 100% 100%;
position: relative;
.module1 {
position: absolute;
width: 345.97rpx;
height: 323.42rpx;
top: 154rpx;
left: 48rpx;
animation: randomSize 3s infinite alternate;
}
.module2 {
position: absolute;
width: 271.11rpx;
height: 293.67rpx;
top: 276rpx;
right: 36rpx;
animation: randomSize 3s infinite alternate;
}
.module3 {
position: absolute;
width: 245.2rpx;
height: 232.25rpx;
top: 746rpx;
left: 71rpx;
animation: randomSize 3s infinite alternate;
}
.module4 {
position: absolute;
width: 293.19rpx;
height: 270.15rpx;
top: 605rpx;
right: 115rpx;
animation: randomSize 3s infinite alternate;
}
.module1 {
position: absolute;
width: 345.97rpx;
height: 323.42rpx;
top: 154rpx;
left: 48rpx;
animation: randomSize 3s infinite alternate;
}
.module2 {
position: absolute;
width: 271.11rpx;
height: 293.67rpx;
top: 276rpx;
right: 36rpx;
animation: randomSize 3s infinite alternate;
}
.module3 {
position: absolute;
width: 245.2rpx;
height: 232.25rpx;
top: 746rpx;
left: 71rpx;
animation: randomSize 3s infinite alternate;
}
.module4 {
position: absolute;
width: 293.19rpx;
height: 270.15rpx;
top: 605rpx;
right: 115rpx;
animation: randomSize 3s infinite alternate;
}
}
.swiper-img {
width: 100vw;
height: 100vh;
width: 100vw;
height: 100vh;
}
@keyframes randomSize {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
</style>
</style>

97
components/BackButton.vue
View File

@ -0,0 +1,97 @@
<template>
<view
class="back-button-container"
:style="{ paddingTop: statusBarHeight + 'px' }"
>
<view @click="handleBack" class="back-btn">
<image class="back-icon" :src="iconSrc" mode="aspectFill"></image>
</view>
</view>
</template>
<script>
export default {
name: "BackButton",
props: {
// 自定义图标路径
iconSrc: {
type: String,
default: "https://static.ticket.sz-trip.com/epicSoul/taozi/back.png",
},
// 自定义返回逻辑
customBack: {
type: Function,
default: null,
},
},
data() {
return {
statusBarHeight: 0,
};
},
mounted() {
this.setStatusBarHeight();
},
methods: {
setStatusBarHeight() {
try {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 0;
} catch (e) {
// 开发工具或获取失败时使用默认值
this.statusBarHeight = 0;
}
},
handleBack() {
if (this.customBack) {
// 使用自定义返回逻辑
this.customBack();
} else {
// 默认返回逻辑
uni.navigateBack({
delta: 1,
fail: () => {
// 如果返回失败，跳转到首页
uni.switchTab({
url: "/pages/index/index",
});
},
});
}
},
},
};
</script>
<style lang="scss" scoped>
.back-button-container {
position: fixed;
top: 0;
left: 0;
z-index: 999;
padding-left: 20rpx;
padding-bottom: 20rpx;
}
.back-btn {
width: 80rpx;
height: 80rpx;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10rpx);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background-color: rgba(0, 0, 0, 0.5);
}
}
.back-icon {
width: 40rpx;
height: 40rpx;
}
</style>

31
pig/home/home.vue
View File

@ -1,5 +1,6 @@
<template>
<view>
<BackButton />
<swiper
class="main-swiper"
:vertical="true"
@ -270,18 +271,12 @@
item.text
}}</text>
</view>
<view
class="nav-item"
@click="toBuy"
>
<text >
点击购买
</text>
</view>
<view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
<text>购物车</text>
</view>
<view class="nav-item" @click="toBuy">
<text> 点击购买 </text>
</view>
<view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
<text>购物车</text>
</view>
</view>
<!-- <BuyPeaches /> -->
<!-- <BackgroundMusic /> -->
@ -339,6 +334,7 @@ import messagePop from "@/components/messagePop.vue";
import messageBoard from "@/components/messageBoard.vue";
import MusicControl from "@/components/MusicControl.vue";
import TitleHeader from "@/components/TitleHeader.vue";
import BackButton from "@/components/BackButton.vue";
export default {
components: {
@ -348,6 +344,7 @@ export default {
messageBoard,
MusicControl,
TitleHeader,
BackButton,
},
data() {
return {
@ -467,11 +464,11 @@ export default {
this.showMenu = true;
}, 300);
},
toBuy(){
uni.navigateTo({
url:'/subPackages/techan/detail?id=38'
})
},
toBuy() {
uni.navigateTo({
url: "/subPackages/techan/detail?id=38",
});
},
closeMenu() {
this.showMenu = false;
setTimeout(() => {

295
xrcc/home/home.vue
View File

@ -1,148 +1,181 @@
<template>
<view style="width: 100vw;">
<!-- <SinglePlayGif
<view style="width: 100vw">
<BackButton />
<!-- <SinglePlayGif
gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif"
staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png"
duration="5000"
/> -->
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
<swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<template v-if="index == 0">
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png" mode="widthFix" class="img1-text"></image>
</template>
<template v-if="index == 1">
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png" mode="widthFix" class="img1-text" style="width: 115.85rpx;"></image>
</template>
<template v-if="index == 2">
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png" mode="widthFix" class="img1-text" style="width: 577.23rpx;"></image>
</template>
<template v-if="index == 3">
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png" mode="widthFix" class="img4-text"></image>
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" class="btn-img" @click="gotoPath('/xrcc/chapter1/index')"></image>
</template>
</view>
</swiper-item>
</swiper>
<swiper
class="swiper"
:current="currentIndex"
:vertical="true"
@change="handleSwiperChange"
>
<swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<template v-if="index == 0">
<image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png"
mode="widthFix"
class="img1-text"
></image>
</template>
<template v-if="index == 1">
<image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png"
mode="widthFix"
class="img1-text"
style="width: 115.85rpx"
></image>
</template>
<template v-if="index == 2">
<image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png"
mode="widthFix"
class="img1-text"
style="width: 577.23rpx"
></image>
</template>
<template v-if="index == 3">
<image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png"
mode="widthFix"
class="img4-text"
></image>
<image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png"
mode="widthFix"
class="btn-img"
@click="gotoPath('/xrcc/chapter1/index')"
></image>
</template>
</view>
</swiper-item>
</swiper>
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
<MusicControl />
</view>
<MusicControl />
</view>
</template>
<script>
import MusicControl from '@/components/MusicControl.vue';
import SinglePlayGif from '../components/SinglePlayGif.vue';
import NavMenu from '../components/NavMenu.vue';
export default {
components: {
MusicControl,
SinglePlayGif,
NavMenu
},
data() {
return {
isPlaying: false,
playTimer: null,
duration: 5000,
currentIndex: 0,
navIndex: 0,
swiperImages: [
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif',
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif',
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif',
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif'
]
}
},
onLoad(option) {
this.currentIndex = option.currentIndex || 0
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
},
onShow() {
const app = getApp();
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3');
app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐
},
methods: {
handleJumpToPage(idx) {
this.navIndex = idx
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
if (this.currentIndex == this.swiperImages.length - 1) {
this.navIndex = 1;
}else {
this.navIndex = 0
}
},
},
// 微信分享配置
// #ifdef MP-WEIXIN
onShareAppMessage() {
return {
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
mpId: 'wx8954209bb3ad489e',
path: '/xrcc/home/home',
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
};
},
onShareTimeline() {
return {
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
query: '',
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
};
}
// #endif
}
import MusicControl from "@/components/MusicControl.vue";
import SinglePlayGif from "../components/SinglePlayGif.vue";
import NavMenu from "../components/NavMenu.vue";
import BackButton from "@/components/BackButton.vue";
export default {
components: {
MusicControl,
SinglePlayGif,
NavMenu,
BackButton,
},
data() {
return {
isPlaying: false,
playTimer: null,
duration: 5000,
currentIndex: 0,
navIndex: 0,
swiperImages: [
"https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif",
"https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif",
"https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif",
"https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif",
],
};
},
onLoad(option) {
this.currentIndex = option.currentIndex || 0;
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
},
onShow() {
const app = getApp();
app.updateMusicSrc(
"https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3"
);
app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐
},
methods: {
handleJumpToPage(idx) {
this.navIndex = idx;
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1;
},
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
if (this.currentIndex == this.swiperImages.length - 1) {
this.navIndex = 1;
} else {
this.navIndex = 0;
}
},
},
// 微信分享配置
// #ifdef MP-WEIXIN
onShareAppMessage() {
return {
title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
mpId: "wx8954209bb3ad489e",
path: "/xrcc/home/home",
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
};
},
onShareTimeline() {
return {
title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
query: "",
imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
};
},
// #endif
};
</script>
<style lang="scss" scoped>
.swiper {
width: 100vw;
height: 100vh;
}
.swiper {
width: 100vw;
height: 100vh;
}
.swiper-item {
width: 100vw;
height: 100vh;
background-size: 100% auto;
background-position: center center;
background-color: #000;
background-repeat: no-repeat;
position: relative;
.swiper-item {
width: 100vw;
height: 100vh;
background-size: 100% auto;
background-position: center center;
background-color: #000;
background-repeat: no-repeat;
position: relative;
.img1-text {
position: absolute;
width: 632.16rpx;
top: 170rpx;
left: 0;
right: 0;
margin: 0 auto;
}
.img4-text {
position: absolute;
width: 476.36rpx;
top: 170rpx;
left: 84rpx;
}
.btn-img {
position: absolute;
width: 149.8rpx;
bottom: 290rpx;
left: 84rpx;
}
}
.img1-text {
position: absolute;
width: 632.16rpx;
top: 170rpx;
left: 0;
right: 0;
margin: 0 auto;
}
.swiper-img {
width: 100vw;
height: 100vh;
}
</style>
.img4-text {
position: absolute;
width: 476.36rpx;
top: 170rpx;
left: 84rpx;
}
.btn-img {
position: absolute;
width: 149.8rpx;
bottom: 290rpx;
left: 84rpx;
}
}
.swiper-img {
width: 100vw;
height: 100vh;
}
</style>

810
xxdf/home/home.vue
View File

@ -1,456 +1,578 @@
<!-- pages/home/home.vue -->
<template>
<view>
<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>
<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 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
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;
},
data() {
return {
showShareGuide: false,
currentIndex: 0,
loadedPages: {
0: false,
1: false,
2: false,
3: false,
4: false,
5: false,
6: false
},
preloadBuffer: 1
};
onShareGuideClose() {
console.log("分享引导已关闭");
},
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'
});
}
shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
},
watch: {
currentIndex(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(6, newIndex + this.preloadBuffer); i++) {
this.loadedPages[i] = true;
}
}
handleSwiperChange(e) {
this.currentIndex = e.detail.current;
},
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;
}
navigateToChapter1() {
uni.navigateTo({
url: "/xxdf/chapter1/cover1",
});
},
onUnload() {
uni.$bgMusic.pause(); // 停止音乐
navigateToChapter2() {
uni.navigateTo({
url: "/xxdf/chapter2/cover",
});
},
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);
}
navigateToChapter3() {
uni.navigateTo({
url: "/xxdf/chapter3/cover",
});
},
// 微信分享配置
// #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'
};
navigateToChapter4() {
uni.navigateTo({
url: "/xxdf/chapter4/cover",
});
},
onShareTimeline() {
return {
title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02',
query: '',
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
};
},
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);
}
// #endif
},
// 微信分享配置
// #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;
width: 100%;
height: 100vh;
}
.page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.home-page {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
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;
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;
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.layer-img {
width: 100%;
/* height: 80%; */
width: 100%;
/* height: 80%; */
}
.layer-img2 {
width: 90%;
/* height: 88%; */
margin-top: 18%;
width: 90%;
/* height: 88%; */
margin-top: 18%;
}
.chapter2-bg-txt {
width: 85%;
height: 70%;
margin-top: 24%;
width: 85%;
height: 70%;
margin-top: 24%;
}
.chapter3-bg-txt {
width: 88%;
height: 88%;
margin-top: 16%;
width: 88%;
height: 88%;
margin-top: 16%;
}
.chapter4-bg-txt {
width: 75%;
/* height: 25%; */
margin-top: 18%;
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;
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;
margin-top: 20rpx;
}
.prologue-page {
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.chapter-cover {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 32rpx;
text-align: center;
font-size: 48rpx;
font-weight: bold;
margin-bottom: 32rpx;
text-align: center;
}
.subtitle {
font-size: 32rpx;
color: #666;
margin-bottom: 80rpx;
text-align: center;
font-size: 32rpx;
color: #666;
margin-bottom: 80rpx;
text-align: center;
}
.chapter-num {
font-size: 36rpx;
color: #666;
margin-bottom: 16rpx;
font-size: 36rpx;
color: #666;
margin-bottom: 16rpx;
}
.chapter-title {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 60rpx;
text-align: center;
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%;
font-size: 32rpx;
line-height: 1.6;
text-align: center;
margin-bottom: 60rpx;
max-width: 80%;
}
.btn-container {
margin-bottom: 60rpx;
margin-bottom: 60rpx;
}
.enter-btn {
background-color: #007AFF;
color: #FFFFFF;
padding: 20rpx 60rpx;
border-radius: 100rpx;
font-size: 32rpx;
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;
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;
top: 75% !important;
}
.chapter3-btn {
top: 48% !important;
top: 48% !important;
}
.chapter4-btn-content {
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, 0);
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, 0);
}
.chapter4-btn {
width: 280rpx;
height: 60rpx;
width: 280rpx;
height: 60rpx;
}
.chapter4-btn2 {
margin-top: 20rpx;
margin-top: 20rpx;
}
.btn {
width: 280rpx;
height: 60rpx;
width: 280rpx;
height: 60rpx;
}
.arrow-down {
width: 200rpx;
height: 40rpx;
animation: bounce 1.5s infinite;
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);
}
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20rpx);
}
60% {
transform: translateY(-10rpx);
}
}
</style>
</style>

Write Preview
Loading…
Cancel
Save