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. 77
      bmzm/home/home.vue
  2. 97
      components/BackButton.vue
  3. 19
      pig/home/home.vue
  4. 111
      xrcc/home/home.vue
  5. 234
      xxdf/home/home.vue

77
bmzm/home/home.vue
View File

@ -1,17 +1,28 @@
<template> <template>
<view> <view>
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> <BackButton />
<swiper
class="swiper"
:current="currentIndex"
:vertical="true"
@change="handleSwiperChange"
>
<swiper-item v-for="(image, index) in swiperImages" :key="index"> <swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<!-- 仅在第四张图片添加子模块 --> <!-- 仅在第四张图片添加子模块 -->
<template v-if="index === 3"> <template v-if="index === 3">
<image <image
:src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${i + 1}.png`" :src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${
i + 1
}.png`"
v-for="i in 4" v-for="i in 4"
:key="i" :key="i"
:class="'module'+(i+1)" :class="'module' + (i + 1)"
:style="{ animationDelay: `${i * animationConfig.delay}s` }" :style="{ animationDelay: `${i * animationConfig.delay}s` }"
@click="setStorage(i);gotoPath(`/bmzm/chapter1/index?index=${i + 1}`)" @click="
setStorage(i);
gotoPath(`/bmzm/chapter1/index?index=${i + 1}`);
"
></image> ></image>
</template> </template>
</view> </view>
@ -23,21 +34,23 @@
</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() { data() {
return { return {
currentIndex: 0, currentIndex: 0,
swiperImages: [ swiperImages: [
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif', "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/home2.png",
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png', "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png",
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png' "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png",
], ],
animationConfig: { animationConfig: {
delay: 0.5, delay: 0.5,
@ -47,15 +60,15 @@ export default {
first: 0.8, first: 0.8,
second: 1.2, second: 1.2,
third: 0.9, third: 0.9,
end: 1.1 end: 1.1,
} },
} },
}; };
}, },
onShow() { onShow() {
uni.removeStorageSync('answerObj'); uni.removeStorageSync("answerObj");
const app = getApp(); const app = getApp();
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3'); app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3");
app.initBackgroundMusic(); // 初始化背景音乐 app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐 uni.$bgMusic.play(); // 播放音乐
}, },
@ -65,43 +78,43 @@ export default {
}, },
// 存储答案，供后面使用 // 存储答案，供后面使用
setStorage(i) { setStorage(i) {
let text = '' let text = "";
switch (i){ switch (i) {
case 0: case 0:
text = '月光白' text = "月光白";
break; break;
case 1: case 1:
text = '黎明青' text = "黎明青";
break; break;
case 2: case 2:
text = '玄天黑' text = "玄天黑";
break; break;
case 3: case 3:
text = '胭脂红' text = "胭脂红";
break; break;
default: default:
break; break;
} }
this.appendToStorage('answerObj', { answer1: text }); this.appendToStorage("answerObj", { answer1: text });
} },
}, },
// 微信分享配置 // 微信分享配置
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
onShareAppMessage() { onShareAppMessage() {
return { return {
title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03', title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
mpId: 'wx8954209bb3ad489e', mpId: "wx8954209bb3ad489e",
path: '/bmzm/home/home', path: "/bmzm/home/home",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
}; };
}, },
onShareTimeline() { onShareTimeline() {
return { return {
title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03', title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
query: '', query: "",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
}; };
} },
// #endif // #endif
}; };
</script> </script>

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>

19
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"
>
<text >
点击购买
</text>
</view> </view>
<view class="nav-item" @click="gotoPath('/subPackages/user/gwc')"> <view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
<text>购物车</text> <text>购物车</text>
</view> </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,10 +464,10 @@ 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;

111
xrcc/home/home.vue
View File

@ -1,26 +1,55 @@
<template> <template>
<view style="width: 100vw;"> <view style="width: 100vw">
<BackButton />
<!-- <SinglePlayGif <!-- <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
class="swiper"
:current="currentIndex"
:vertical="true"
@change="handleSwiperChange"
>
<swiper-item v-for="(image, index) in swiperImages" :key="index"> <swiper-item v-for="(image, index) in swiperImages" :key="index">
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
<template v-if="index == 0"> <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> <image
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png"
mode="widthFix"
class="img1-text"
></image>
</template> </template>
<template v-if="index == 1"> <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> <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>
<template v-if="index == 2"> <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> <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>
<template v-if="index == 3"> <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
<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> 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> </template>
</view> </view>
</swiper-item> </swiper-item>
@ -33,14 +62,16 @@
</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";
export default {
components: { components: {
MusicControl, MusicControl,
SinglePlayGif, SinglePlayGif,
NavMenu NavMenu,
BackButton,
}, },
data() { data() {
return { return {
@ -50,34 +81,36 @@
currentIndex: 0, currentIndex: 0,
navIndex: 0, navIndex: 0,
swiperImages: [ swiperImages: [
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif', "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/img2.gif",
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif', "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif",
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif' "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif",
] ],
} };
}, },
onLoad(option) { onLoad(option) {
this.currentIndex = option.currentIndex || 0 this.currentIndex = option.currentIndex || 0;
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
}, },
onShow() { onShow() {
const app = getApp(); const app = getApp();
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3'); app.updateMusicSrc(
"https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3"
);
app.initBackgroundMusic(); // 初始化背景音乐 app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐 uni.$bgMusic.play(); // 播放音乐
}, },
methods: { methods: {
handleJumpToPage(idx) { handleJumpToPage(idx) {
this.navIndex = idx this.navIndex = idx;
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1;
}, },
handleSwiperChange(e) { handleSwiperChange(e) {
this.currentIndex = e.detail.current; this.currentIndex = e.detail.current;
if (this.currentIndex == this.swiperImages.length - 1) { if (this.currentIndex == this.swiperImages.length - 1) {
this.navIndex = 1; this.navIndex = 1;
}else { } else {
this.navIndex = 0 this.navIndex = 0;
} }
}, },
}, },
@ -85,30 +118,30 @@
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
onShareAppMessage() { onShareAppMessage() {
return { return {
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
mpId: 'wx8954209bb3ad489e', mpId: "wx8954209bb3ad489e",
path: '/xrcc/home/home', path: "/xrcc/home/home",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
}; };
}, },
onShareTimeline() { onShareTimeline() {
return { return {
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
query: '', query: "",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
}; };
} },
// #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% auto; background-size: 100% auto;
@ -139,10 +172,10 @@
bottom: 290rpx; bottom: 290rpx;
left: 84rpx; left: 84rpx;
} }
} }
.swiper-img { .swiper-img {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
</style> </style>

234
xxdf/home/home.vue
View File

@ -1,17 +1,40 @@
<!-- 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
class="main-swiper"
:vertical="true"
:current="currentIndex"
@change="handleSwiperChange"
:duration="300"
>
<!-- 首页内容 --> <!-- 首页内容 -->
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 --> <!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
<template v-if="loadedPages[0]"> <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> <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"> <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> <image
class="layer-img"
src="https://static.ticket.sz-trip.com/epicSoul/home1.png"
:lazy-load="true"
mode="widthFix"
></image>
<view class="arrow-content"> <view class="arrow-content">
<image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image> <image
class="arrow-down"
src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
:lazy-load="true"
mode=""
></image>
</view> </view>
</view> </view>
</template> </template>
@ -22,18 +45,25 @@
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<template v-if="loadedPages[1]"> <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> <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 v-show="shouldShowContent(1)" class="content-layer">
<view class="layer-text"> <view class="layer-text">
<view class=""> <view class=""> 在此我们邀请你 </view>
在此我们邀请你 <view class=""> 以指尖触发一场直抵情绪与美学的共生实验 </view>
</view>
<view class="">
以指尖触发一场直抵情绪与美学的共生实验
</view>
</view> </view>
<view class="arrow-content"> <view class="arrow-content">
<image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image> <image
class="arrow-down"
src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
:lazy-load="true"
mode=""
></image>
</view> </view>
</view> </view>
</template> </template>
@ -44,12 +74,29 @@
<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[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> <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"> <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
class="layer-img2"
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png"
:lazy-load="true"
mode="widthFix"
>
</image> </image>
<view class="arrow-content"> <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> <image
@click="navigateToChapter1"
class="btn"
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png"
:lazy-load="true"
mode=""
></image>
</view> </view>
</view> </view>
</template> </template>
@ -60,11 +107,28 @@
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<template v-if="loadedPages[3]"> <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> <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"> <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> <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"> <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> <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>
@ -75,11 +139,28 @@
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<template v-if="loadedPages[4]"> <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> <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"> <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> <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"> <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> <image
@click="navigateToChapter3"
class="btn"
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png"
:lazy-load="true"
mode=""
></image>
</view> </view>
</view> </view>
</template> </template>
@ -90,12 +171,30 @@
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<template v-if="loadedPages[5]"> <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> <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"> <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> --> <!-- <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"> <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
<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> @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>
</view> </view>
</template> </template>
@ -106,9 +205,21 @@
<swiper-item> <swiper-item>
<view class="page-container home-page"> <view class="page-container home-page">
<template v-if="loadedPages[6]"> <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
<image v-show="shouldShowContent(6)" class="qrCode-image" src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png" v-show="shouldShowContent(6)"
:lazy-load="true" mode="widthFix" :show-menu-by-longpress="true"></image> 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> </template>
</view> </view>
</swiper-item> </swiper-item>
@ -120,14 +231,16 @@
</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() { data() {
return { return {
@ -140,9 +253,9 @@ export default {
3: false, 3: false,
4: false, 4: false,
5: false, 5: false,
6: false 6: false,
}, },
preloadBuffer: 1 preloadBuffer: 1,
}; };
}, },
methods: { methods: {
@ -150,7 +263,7 @@ export default {
this.showShareGuide = true; this.showShareGuide = true;
}, },
onShareGuideClose() { onShareGuideClose() {
console.log('分享引导已关闭'); console.log("分享引导已关闭");
}, },
shouldShowContent(index) { shouldShowContent(index) {
return Math.abs(index - this.currentIndex) <= this.preloadBuffer; return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
@ -160,35 +273,41 @@ export default {
}, },
navigateToChapter1() { navigateToChapter1() {
uni.navigateTo({ uni.navigateTo({
url: '/xxdf/chapter1/cover1' url: "/xxdf/chapter1/cover1",
}); });
}, },
navigateToChapter2() { navigateToChapter2() {
uni.navigateTo({ uni.navigateTo({
url: '/xxdf/chapter2/cover' url: "/xxdf/chapter2/cover",
}); });
}, },
navigateToChapter3() { navigateToChapter3() {
uni.navigateTo({ uni.navigateTo({
url: '/xxdf/chapter3/cover' url: "/xxdf/chapter3/cover",
}); });
}, },
navigateToChapter4() { navigateToChapter4() {
uni.navigateTo({ uni.navigateTo({
url: '/xxdf/chapter4/cover' url: "/xxdf/chapter4/cover",
}); });
} },
}, },
watch: { watch: {
currentIndex(newIndex) { currentIndex(newIndex) {
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(6, newIndex + this.preloadBuffer); i++) { for (
let i = Math.max(0, newIndex - this.preloadBuffer);
i <= Math.min(6, newIndex + this.preloadBuffer);
i++
) {
this.loadedPages[i] = true; this.loadedPages[i] = true;
} }
} },
}, },
mounted() { mounted() {
const app = getApp(); const app = getApp();
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/comfort.mp3'); app.updateMusicSrc(
"https://static.ticket.sz-trip.com/epicSoul/comfort.mp3"
);
app.initBackgroundMusic(); // 初始化背景音乐 app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐 uni.$bgMusic.play(); // 播放音乐
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) { for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
@ -201,7 +320,11 @@ export default {
onShow() { onShow() {
try { try {
const app = getApp(); const app = getApp();
if (app.globalData && app.globalData.mainSliderIndex!== undefined && app.globalData.mainSliderIndex!== 0) { if (
app.globalData &&
app.globalData.mainSliderIndex !== undefined &&
app.globalData.mainSliderIndex !== 0
) {
const newIndex = app.globalData.mainSliderIndex; const newIndex = app.globalData.mainSliderIndex;
setTimeout(() => { setTimeout(() => {
this.currentIndex = newIndex; this.currentIndex = newIndex;
@ -209,26 +332,26 @@ export default {
}, 100); }, 100);
} }
} catch (error) { } catch (error) {
console.error('获取globalData失败:', error); console.error("获取globalData失败:", error);
} }
}, },
// 微信分享配置 // 微信分享配置
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
onShareAppMessage() { onShareAppMessage() {
return { return {
title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02', title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
mpId: 'wx8954209bb3ad489e', mpId: "wx8954209bb3ad489e",
path: '/xxdf/home/home', path: "/xxdf/home/home",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
}; };
}, },
onShareTimeline() { onShareTimeline() {
return { return {
title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02', title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
query: '', query: "",
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg' imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
}; };
} },
// #endif // #endif
}; };
</script> </script>
@ -321,14 +444,13 @@ export default {
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%);
} }
@ -380,8 +502,8 @@ export default {
} }
.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;

Write Preview
Loading…
Cancel
Save