You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
8.1 KiB
348 lines
8.1 KiB
<template>
|
|
<view style="width: 100vw;position: relative;">
|
|
<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 == 2">
|
|
<video :src="showImg('/uploads/20250905/c47451404cc87d89205b1003e3a0b589.mp4')"
|
|
style="width: 100vw;height: 30vh;" objectFit="cover" @play="handleVideoPlay"
|
|
@pause="handleVideoPause" @ended="handleVideoEnded"></video>
|
|
<image @click="gotoPath('/xqk/chapter2/index')" v-if="currentIndex == swiperImages.length-1"
|
|
:src="showImg('/uploads/20250905/692abbf32b38257ffb2153651f468a63.png')" class="imgJump"
|
|
mode=""></image>
|
|
</template>
|
|
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" />
|
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
|
|
<MusicControl />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AudioControl from '@/components/AudioControl.vue';
|
|
import MusicControl from '@/components/MusicControl.vue';
|
|
import NavMenu from '../components/NavMenu.vue';
|
|
export default {
|
|
components: {
|
|
MusicControl,
|
|
NavMenu,
|
|
AudioControl
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
navIndex: 1,
|
|
// 视频播放前的状态记录
|
|
beforeVideoState: {
|
|
audioWasPlaying: false,
|
|
bgMusicWasPlaying: false
|
|
},
|
|
swiperImages: [
|
|
this.showImg('/uploads/20250903/24303e4b7218eaf3d857c846417eb490.png'),
|
|
this.showImg('/uploads/20250903/17495ef65648c64c31920d312301e991.png'),
|
|
this.showImg('/uploads/20250903/92d6f1c6f8f7de040f3c31c8faf98927.png'),
|
|
],
|
|
animationConfig: {
|
|
delay: 0.5,
|
|
duration: 3,
|
|
keyframes: {
|
|
start: 1,
|
|
first: 0.8,
|
|
second: 1.2,
|
|
third: 0.9,
|
|
end: 1.1
|
|
}
|
|
},
|
|
popupIndex: 1,
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.currentIndex = option.currentIndex || 0
|
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
|
|
},
|
|
onHide() {
|
|
// 页面隐藏时不做任何音频处理（保持xqk分包内音频播放）
|
|
console.log('xqk chapter1: 页面隐藏，保持音频状态');
|
|
},
|
|
onUnload() {
|
|
// 页面销毁时检查是否需要暂停xqk音频
|
|
this.handleXqkAudioOnLeave();
|
|
},
|
|
methods: {
|
|
handleJumpToPage(idx) {
|
|
},
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
// 第二页气泡弹框
|
|
openPopup(i) {
|
|
this.popupIndex = i
|
|
this.$refs.chapterPopup.open();
|
|
},
|
|
// 视频开始播放
|
|
handleVideoPlay() {
|
|
console.log('视频开始播放');
|
|
|
|
// 记录当前状态
|
|
this.recordCurrentState();
|
|
|
|
// 暂停音频和背景音乐
|
|
this.pauseAllAudio();
|
|
},
|
|
|
|
// 视频暂停
|
|
handleVideoPause() {
|
|
console.log('视频暂停');
|
|
// 恢复之前的状态
|
|
this.restorePreviousState();
|
|
},
|
|
|
|
// 视频播放结束
|
|
handleVideoEnded() {
|
|
console.log('视频播放结束');
|
|
// 恢复之前的状态
|
|
this.restorePreviousState();
|
|
},
|
|
|
|
// 记录当前音频和背景音乐状态
|
|
recordCurrentState() {
|
|
try {
|
|
// 检查音频状态
|
|
if (uni.$globalAudio && uni.$globalAudio.isAudioPlaying()) {
|
|
this.beforeVideoState.audioWasPlaying = true;
|
|
console.log('记录：音频正在播放');
|
|
} else {
|
|
this.beforeVideoState.audioWasPlaying = false;
|
|
}
|
|
|
|
// 检查背景音乐状态
|
|
const app = getApp();
|
|
if (app && app.globalData && app.globalData.isMusicPlaying) {
|
|
this.beforeVideoState.bgMusicWasPlaying = true;
|
|
console.log('记录：背景音乐正在播放');
|
|
} else {
|
|
this.beforeVideoState.bgMusicWasPlaying = false;
|
|
}
|
|
} catch (error) {
|
|
console.error('记录状态失败:', error);
|
|
}
|
|
},
|
|
|
|
// 暂停所有音频
|
|
pauseAllAudio() {
|
|
try {
|
|
// 暂停音频
|
|
if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
|
|
uni.$globalAudio.pauseCurrentAudio();
|
|
console.log('暂停音频');
|
|
}
|
|
|
|
// 暂停背景音乐
|
|
if (this.beforeVideoState.bgMusicWasPlaying) {
|
|
const app = getApp();
|
|
if (app && app.globalData && app.globalData.bgMusic) {
|
|
app.globalData.bgMusic.pause();
|
|
console.log('暂停背景音乐');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('暂停音频失败:', error);
|
|
}
|
|
},
|
|
|
|
// 恢复之前的状态
|
|
restorePreviousState() {
|
|
try {
|
|
// 恢复音频
|
|
if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
|
|
uni.$globalAudio.playCurrentAudio();
|
|
console.log('恢复音频播放');
|
|
}
|
|
|
|
// 恢复背景音乐
|
|
if (this.beforeVideoState.bgMusicWasPlaying) {
|
|
const app = getApp();
|
|
if (app && app.globalData && app.globalData.bgMusic) {
|
|
app.globalData.bgMusic.play();
|
|
console.log('恢复背景音乐播放');
|
|
}
|
|
}
|
|
|
|
// 重置状态记录
|
|
this.beforeVideoState.audioWasPlaying = false;
|
|
this.beforeVideoState.bgMusicWasPlaying = false;
|
|
} catch (error) {
|
|
console.error('恢复状态失败:', error);
|
|
}
|
|
},
|
|
// 生成图片完整 URL
|
|
getImageUrl(path) {
|
|
if (typeof path === 'object') {
|
|
path = path.url;
|
|
}
|
|
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/${path}`;
|
|
},
|
|
// 处理xqk音频管理（页面离开时）
|
|
handleXqkAudioOnLeave() {
|
|
try {
|
|
// 获取当前路径
|
|
const currentPath = uni.$xqkAudio.getCurrentPath();
|
|
|
|
// 检查下一个页面的路径（通过页面栈获取）
|
|
const pages = getCurrentPages();
|
|
let shouldPause = true; // 默认暂停
|
|
|
|
// 如果页面栈还有其他页面，检查上一个页面是否在xqk分包内
|
|
if (pages.length > 1) {
|
|
const previousPage = pages[pages.length - 2];
|
|
if (previousPage && previousPage.route) {
|
|
// 如果返回到的页面仍在xqk分包内，不暂停音频
|
|
if (uni.$xqkAudio.isInXqkPackage(previousPage.route)) {
|
|
shouldPause = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (shouldPause) {
|
|
// 离开xqk分包，暂停音频
|
|
uni.$xqkAudio.pauseXqkAudio();
|
|
console.log('xqk chapter1: 离开xqk分包，已暂停音频');
|
|
} else {
|
|
console.log('xqk chapter1: 仍在xqk分包内，保持音频播放');
|
|
}
|
|
} catch (error) {
|
|
console.error('xqk chapter1: 音频管理失败:', error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.swiper {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.imgJump{
|
|
position: absolute;
|
|
bottom:53rpx;
|
|
right:0;
|
|
width: 273rpx;
|
|
height: 85rpx;
|
|
opacity:0.9;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.swiper-item {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-size: 100% 100%;
|
|
background-color: #000;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
|
|
.module1 {
|
|
position: absolute;
|
|
width: 52.1rpx;
|
|
top: 1020rpx;
|
|
left: 235rpx;
|
|
animation: breath1 3s ease-in-out infinite;
|
|
}
|
|
|
|
.module2 {
|
|
position: absolute;
|
|
width: 52.1rpx;
|
|
top: 760rpx;
|
|
left: 317rpx;
|
|
animation: breath2 4s ease-in-out infinite;
|
|
}
|
|
|
|
.module3 {
|
|
position: absolute;
|
|
width: 52.1rpx;
|
|
top: 700rpx;
|
|
left: 498rpx;
|
|
animation: breath3 5s ease-in-out infinite;
|
|
}
|
|
|
|
// 呼吸效果动画 - 不同频率
|
|
@keyframes breath1 {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes breath2 {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes breath3 {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
.img4-text {
|
|
width: 428.43rpx;
|
|
position: absolute;
|
|
top: 170rpx;
|
|
left: 100rpx;
|
|
}
|
|
|
|
.btn-img {
|
|
position: absolute;
|
|
width: 149.8rpx;
|
|
bottom: 290rpx;
|
|
left: 100rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-img {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.img2-1 {
|
|
width: 267.37rpx;
|
|
position: fixed;
|
|
top: 395rpx;
|
|
left: 70rpx;
|
|
}
|
|
|
|
.img2-2 {
|
|
width: 332.24rpx;
|
|
position: fixed;
|
|
top: 210rpx;
|
|
left: 360rpx;
|
|
}
|
|
|
|
.img2-3 {
|
|
width: 600.59rpx;
|
|
position: fixed;
|
|
bottom: 215rpx;
|
|
right: 40rpx;
|
|
}
|
|
</style>
|