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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 319
      bmzm/home/home.vue
  2. 97
      components/BackButton.vue
  3. 31
      pig/home/home.vue
  4. 289
      xrcc/home/home.vue
  5. 808
      xxdf/home/home.vue

319
bmzm/home/home.vue
View File

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

289
xrcc/home/home.vue
View File

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

808
xxdf/home/home.vue
View File

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