|
@ -1,24 +1,42 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view> |
|
|
<view> |
|
|
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" |
|
|
<swiper |
|
|
:duration="300" :style="{ height: `100vh` }"> |
|
|
class="main-swiper" |
|
|
|
|
|
:vertical="true" |
|
|
|
|
|
:current="currentIndex" |
|
|
|
|
|
@change="handleSwiperChange" |
|
|
|
|
|
:duration="300" |
|
|
|
|
|
:style="{ height: `100vh` }" |
|
|
|
|
|
> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<template v-if="loadedPages[0]"> |
|
|
<template v-if="loadedPages[0]"> |
|
|
<image v-show="shouldShowContent(0)" class="bg-image" :src=" |
|
|
<image |
|
|
|
|
|
v-show="shouldShowContent(0)" |
|
|
|
|
|
class="bg-image" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/1830fb1be82f44d6405d35cebd70b78a.gif' |
|
|
'/uploads/20250804/1830fb1be82f44d6405d35cebd70b78a.gif' |
|
|
) |
|
|
) |
|
|
" :lazy-load="true" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
: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" :class="{ |
|
|
<image |
|
|
|
|
|
class="layer-img" |
|
|
|
|
|
:class="{ |
|
|
'blur-to-clear': animationStates[0], |
|
|
'blur-to-clear': animationStates[0], |
|
|
hidden: !animationStates[0], |
|
|
hidden: !animationStates[0], |
|
|
}" :src=" |
|
|
}" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250806/a0663a49a6037da67fa5cd897311765e.png' |
|
|
'/uploads/20250806/a0663a49a6037da67fa5cd897311765e.png' |
|
|
) |
|
|
) |
|
|
" :lazy-load="true" mode="aspectFit"> |
|
|
" |
|
|
|
|
|
:lazy-load="true" |
|
|
|
|
|
mode="aspectFit" |
|
|
|
|
|
> |
|
|
</image> |
|
|
</image> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
@ -27,56 +45,98 @@ |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container" style="background-color: #efefef"> |
|
|
<view class="page-container" style="background-color: #efefef"> |
|
|
<template v-if="loadedPages[1]"> |
|
|
<template v-if="loadedPages[1]"> |
|
|
<image v-show="shouldShowContent(1)" class="bg-image" :src=" |
|
|
<image |
|
|
|
|
|
v-show="shouldShowContent(1)" |
|
|
|
|
|
class="bg-image" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250801/9bdda955f86ad07b745c3095431ca38e.png' |
|
|
'/uploads/20250801/9bdda955f86ad07b745c3095431ca38e.png' |
|
|
) |
|
|
) |
|
|
" :lazy-load="true" mode="aspectFit"></image> |
|
|
" |
|
|
|
|
|
:lazy-load="true" |
|
|
|
|
|
mode="aspectFit" |
|
|
|
|
|
></image> |
|
|
</template> |
|
|
</template> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<template v-if="loadedPages[2]"> |
|
|
<template v-if="loadedPages[2]"> |
|
|
<image @click="nextIndex" v-show="shouldShowContent(2)" class="bg-image" :src=" |
|
|
<image |
|
|
|
|
|
@click="nextIndex" |
|
|
|
|
|
v-show="shouldShowContent(2)" |
|
|
|
|
|
class="bg-image" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/5e9bdcff219f92fd6bc33444d670b807.png' |
|
|
'/uploads/20250804/5e9bdcff219f92fd6bc33444d670b807.png' |
|
|
) |
|
|
) |
|
|
" :lazy-load="true" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
:lazy-load="true" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</template> |
|
|
</template> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<template v-if="loadedPages[3]"> |
|
|
<template v-if="loadedPages[3]"> |
|
|
<view class="loadedPages-three"> |
|
|
<view class="loadedPages-three"> |
|
|
<view class="" style="width: 750rpx; height: 1400rpx; position: relative"> |
|
|
<view |
|
|
<image style="width: 100%; height: 100%" :src=" |
|
|
class="" |
|
|
|
|
|
style="width: 750rpx; height: 1400rpx; position: relative" |
|
|
|
|
|
> |
|
|
|
|
|
<image |
|
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250802/95daa339dce3ccd25acfc1e0fa031a01.png' |
|
|
'/uploads/20250802/95daa339dce3ccd25acfc1e0fa031a01.png' |
|
|
) |
|
|
) |
|
|
" mode="widthFix"></image> |
|
|
" |
|
|
<view class="loadedPages-three-content" |
|
|
mode="widthFix" |
|
|
style="position: absolute; top: 375rpx; left: 100rpx"> |
|
|
></image> |
|
|
<image style="width: 590rpx" :src=" |
|
|
<view |
|
|
|
|
|
class="loadedPages-three-content" |
|
|
|
|
|
style="position: absolute; top: 375rpx; left: 100rpx" |
|
|
|
|
|
> |
|
|
|
|
|
<image |
|
|
|
|
|
style="width: 590rpx" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/071658650e402f55ac2cbf87cf7ce0e5.png' |
|
|
'/uploads/20250804/071658650e402f55ac2cbf87cf7ce0e5.png' |
|
|
) |
|
|
) |
|
|
" mode="widthFix" @click="showPopupImage(1)"></image> |
|
|
" |
|
|
<image style="width: 590rpx; margin-top: 175rpx" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
@click="showPopupImage(1)" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
style="width: 590rpx; margin-top: 175rpx" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/418af80ee3c09def1768da53b5c8760a.png' |
|
|
'/uploads/20250804/418af80ee3c09def1768da53b5c8760a.png' |
|
|
) |
|
|
) |
|
|
" mode="widthFix" @click="showPopupImage(2)"></image> |
|
|
" |
|
|
<image style="width: 590rpx; margin-top: 160rpx" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
@click="showPopupImage(2)" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
style="width: 590rpx; margin-top: 160rpx" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/c82764802f8022eb14d40d222a29fcd3.png' |
|
|
'/uploads/20250804/c82764802f8022eb14d40d222a29fcd3.png' |
|
|
) |
|
|
) |
|
|
" mode="widthFix" @click="showPopupImage(3)"></image> |
|
|
" |
|
|
<image style="width: 590rpx; margin-top: 160rpx" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
@click="showPopupImage(3)" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
style="width: 590rpx; margin-top: 160rpx" |
|
|
|
|
|
:src=" |
|
|
showImg( |
|
|
showImg( |
|
|
'/uploads/20250804/da9b9a28af4dcaac683d9a5af53a7667.png' |
|
|
'/uploads/20250804/da9b9a28af4dcaac683d9a5af53a7667.png' |
|
|
) |
|
|
) |
|
|
" mode="widthFix" @click="showPopupImage(4)"></image> |
|
|
" |
|
|
|
|
|
mode="widthFix" |
|
|
|
|
|
@click="showPopupImage(4)" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
@ -84,77 +144,122 @@ |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<image style="width: 100%; height: 100%" :src=" |
|
|
<image |
|
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/2e287bc4a678a5b47565556d23c31f4f.png') |
|
|
showImg('/uploads/20250802/2e287bc4a678a5b47565556d23c31f4f.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
<image @click="goChapter" style=" |
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
@click="goChapter" |
|
|
|
|
|
style=" |
|
|
width: 137rpx; |
|
|
width: 137rpx; |
|
|
height: 108rpx; |
|
|
height: 108rpx; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 125rpx; |
|
|
bottom: 125rpx; |
|
|
left: 307rpx; |
|
|
left: 307rpx; |
|
|
" :src=" |
|
|
" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<image style="width: 100%; height: 100%" :src=" |
|
|
<image |
|
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250804/d2a7c31d03d3ade96ae6a9abefb78869.png') |
|
|
showImg('/uploads/20250804/d2a7c31d03d3ade96ae6a9abefb78869.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
<image @click="goChapter" style=" |
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
@click="goChapter" |
|
|
|
|
|
style=" |
|
|
width: 137rpx; |
|
|
width: 137rpx; |
|
|
height: 108rpx; |
|
|
height: 108rpx; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 125rpx; |
|
|
bottom: 125rpx; |
|
|
left: 307rpx; |
|
|
left: 307rpx; |
|
|
" :src=" |
|
|
" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<image style="width: 100%; height: 100%" :src=" |
|
|
<image |
|
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250808/48c6045b781a8c2a2b8f87a9c79ee4f1.png') |
|
|
showImg('/uploads/20250808/48c6045b781a8c2a2b8f87a9c79ee4f1.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
<image @click="goChapter" style=" |
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
@click="goChapter" |
|
|
|
|
|
style=" |
|
|
width: 137rpx; |
|
|
width: 137rpx; |
|
|
height: 108rpx; |
|
|
height: 108rpx; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 125rpx; |
|
|
bottom: 125rpx; |
|
|
left: 307rpx; |
|
|
left: 307rpx; |
|
|
" :src=" |
|
|
" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="page-container"> |
|
|
<view class="page-container"> |
|
|
<image style="width: 100%; height: 100%" :src=" |
|
|
<image |
|
|
|
|
|
style="width: 100%; height: 100%" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250808/9dffa7a9ed0ca7c0a7135e1a28da8011.png') |
|
|
showImg('/uploads/20250808/9dffa7a9ed0ca7c0a7135e1a28da8011.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
<image @click="goChapter" style=" |
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
@click="goChapter" |
|
|
|
|
|
style=" |
|
|
width: 137rpx; |
|
|
width: 137rpx; |
|
|
height: 108rpx; |
|
|
height: 108rpx; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 125rpx; |
|
|
bottom: 125rpx; |
|
|
left: 307rpx; |
|
|
left: 307rpx; |
|
|
" :src=" |
|
|
" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png') |
|
|
" mode="aspectFill"></image> |
|
|
" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
<view class="overlay" v-if="showMenu" @click="closeMenu"></view> |
|
|
<view class="overlay" v-if="showMenu" @click="closeMenu"></view> |
|
|
<view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu"> |
|
|
<view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu"> |
|
|
<image class="nav-icon" :class="{ rotated: iconRotated, 'bounce-back': iconBounceBack }" |
|
|
<image |
|
|
src="https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png" mode="aspectFill"></image> |
|
|
class="nav-icon" |
|
|
|
|
|
:class="{ rotated: iconRotated, 'bounce-back': iconBounceBack }" |
|
|
|
|
|
src="https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
></image> |
|
|
</view> |
|
|
</view> |
|
|
<view class="nav-menu" :class="{ show: showMenu }"> |
|
|
<view class="nav-menu" :class="{ show: showMenu }"> |
|
|
<view class="nav-item" :class="{ 'item-active': isItemActive(item) }" v-for="item in menuItems" |
|
|
<view |
|
|
:key="item.targetIndex" @click="() => jumpToPage(item.targetIndex)"> |
|
|
class="nav-item" |
|
|
|
|
|
:class="{ 'item-active': isItemActive(item) }" |
|
|
|
|
|
v-for="item in menuItems" |
|
|
|
|
|
:key="item.targetIndex" |
|
|
|
|
|
@click="() => jumpToPage(item.targetIndex)" |
|
|
|
|
|
> |
|
|
<view v-if="item.text.includes('#Chapter')" class="chapter-text"> |
|
|
<view v-if="item.text.includes('#Chapter')" class="chapter-text"> |
|
|
<text class="chapter-title">#Chapter</text> |
|
|
<text class="chapter-title">#Chapter</text> |
|
|
<text :class="{ active: isItemActive(item) }" class="chapter-number"> |
|
|
<text :class="{ active: isItemActive(item) }" class="chapter-number"> |
|
@ -164,7 +269,6 @@ |
|
|
<text v-else :class="{ active: isItemActive(item) }">{{ |
|
|
<text v-else :class="{ active: isItemActive(item) }">{{ |
|
|
item.text |
|
|
item.text |
|
|
}}</text> |
|
|
}}</text> |
|
|
<<<<<<< HEAD |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<view class="nav-item" @click="toBuy"> |
|
|
<view class="nav-item" @click="toBuy"> |
|
|
<text> 点击购买 </text> |
|
|
<text> 点击购买 </text> |
|
@ -176,38 +280,48 @@ |
|
|
<!-- <BuyPeaches /> --> |
|
|
<!-- <BuyPeaches /> --> |
|
|
<!-- <BackgroundMusic /> --> |
|
|
<!-- <BackgroundMusic /> --> |
|
|
<MusicControl /> |
|
|
<MusicControl /> |
|
|
======= |
|
|
<AudioControl |
|
|
</view> |
|
|
audioSrc="https://des.js-dyyj.com/data/2025/09/05/5d7caee5-ce7f-4e55-bf71-e574b486473c.MP3" |
|
|
<view class="nav-item" @click="toBuy"> |
|
|
/> |
|
|
<text> |
|
|
|
|
|
点击购买 |
|
|
|
|
|
</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="nav-item" @click="gotoPath('/subPackages/user/gwc')"> |
|
|
|
|
|
<text>购物车</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
>>>>>>> master |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- <BuyPeaches /> --> |
|
|
|
|
|
<!-- <BackgroundMusic /> --> |
|
|
|
|
|
<MusicControl /> |
|
|
|
|
|
<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/5d7caee5-ce7f-4e55-bf71-e574b486473c.MP3" /> |
|
|
|
|
|
<!-- 图片弹窗 --> |
|
|
<!-- 图片弹窗 --> |
|
|
<view class="image-popup-overlay" v-if="showImagePopup" @click="hidePopupImage"> |
|
|
<view |
|
|
|
|
|
class="image-popup-overlay" |
|
|
|
|
|
v-if="showImagePopup" |
|
|
|
|
|
@click="hidePopupImage" |
|
|
|
|
|
> |
|
|
<view class="image-popup-container" @click.stop> |
|
|
<view class="image-popup-container" @click.stop> |
|
|
<image class="popup-image" v-if="currentTagImg == 1" :src=" |
|
|
<image |
|
|
|
|
|
class="popup-image" |
|
|
|
|
|
v-if="currentTagImg == 1" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/a2245bbeba155410fd765439a18774f7.png') |
|
|
showImg('/uploads/20250802/a2245bbeba155410fd765439a18774f7.png') |
|
|
" mode="widthFix"></image> |
|
|
" |
|
|
<image class="popup-image" v-if="currentTagImg == 2" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
class="popup-image" |
|
|
|
|
|
v-if="currentTagImg == 2" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/6a740ec7fc10dd0f6ddcc65faca3b3c8.png') |
|
|
showImg('/uploads/20250802/6a740ec7fc10dd0f6ddcc65faca3b3c8.png') |
|
|
" mode="widthFix"></image> |
|
|
" |
|
|
<image class="popup-image" v-if="currentTagImg == 3" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
class="popup-image" |
|
|
|
|
|
v-if="currentTagImg == 3" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/4e89bbb52de311cfae7ef1b59ee2f2c8.png') |
|
|
showImg('/uploads/20250802/4e89bbb52de311cfae7ef1b59ee2f2c8.png') |
|
|
" mode="widthFix"></image> |
|
|
" |
|
|
<image v-if="currentTagImg == 4" class="popup-image" :src=" |
|
|
mode="widthFix" |
|
|
|
|
|
></image> |
|
|
|
|
|
<image |
|
|
|
|
|
v-if="currentTagImg == 4" |
|
|
|
|
|
class="popup-image" |
|
|
|
|
|
:src=" |
|
|
showImg('/uploads/20250802/76b84f3dd91bfebaec35aadc086410b8.png') |
|
|
showImg('/uploads/20250802/76b84f3dd91bfebaec35aadc086410b8.png') |
|
|
" mode="widthFix"></image> |
|
|
" |
|
|
|
|
|
mode="widthFix" |
|
|
|
|
|
></image> |
|
|
<view class="close-btn" @click="hidePopupImage">×</view> |
|
|
<view class="close-btn" @click="hidePopupImage">×</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
@ -215,24 +329,23 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
<<<<<<< HEAD |
|
|
import AudioControl from "@/components/AudioControl.vue"; |
|
|
import BuyPeaches from "@/components/BuyPeaches.vue"; |
|
|
import BuyPeaches from "@/components/BuyPeaches.vue"; |
|
|
import messagePop from "@/components/messagePop.vue"; |
|
|
import messagePop from "@/components/messagePop.vue"; |
|
|
// import BackgroundMusic from '@/components/BackgroundMusic.vue'; |
|
|
// import BackgroundMusic from '@/components/BackgroundMusic.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: { |
|
|
BuyPeaches, |
|
|
BuyPeaches, |
|
|
messagePop, |
|
|
messagePop, |
|
|
|
|
|
AudioControl, |
|
|
// BackgroundMusic, |
|
|
// BackgroundMusic, |
|
|
messageBoard, |
|
|
messageBoard, |
|
|
MusicControl, |
|
|
MusicControl, |
|
|
TitleHeader, |
|
|
TitleHeader, |
|
|
BackButton, |
|
|
|
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
@ -443,230 +556,6 @@ export default { |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
}; |
|
|
}; |
|
|
======= |
|
|
|
|
|
import AudioControl from '@/components/AudioControl.vue'; |
|
|
|
|
|
import BuyPeaches from "@/components/BuyPeaches.vue"; |
|
|
|
|
|
import messagePop from "@/components/messagePop.vue"; |
|
|
|
|
|
// import BackgroundMusic from '@/components/BackgroundMusic.vue'; |
|
|
|
|
|
import messageBoard from "@/components/messageBoard.vue"; |
|
|
|
|
|
import MusicControl from "@/components/MusicControl.vue"; |
|
|
|
|
|
import TitleHeader from "@/components/TitleHeader.vue"; |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
components: { |
|
|
|
|
|
BuyPeaches, |
|
|
|
|
|
messagePop, |
|
|
|
|
|
AudioControl, |
|
|
|
|
|
// BackgroundMusic, |
|
|
|
|
|
messageBoard, |
|
|
|
|
|
MusicControl, |
|
|
|
|
|
TitleHeader, |
|
|
|
|
|
}, |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
currentTagImg: 1, |
|
|
|
|
|
currentIndex: 0, |
|
|
|
|
|
loadedPages: { |
|
|
|
|
|
0: false, |
|
|
|
|
|
1: false, |
|
|
|
|
|
2: false, |
|
|
|
|
|
3: false, |
|
|
|
|
|
4: false, |
|
|
|
|
|
5: false, |
|
|
|
|
|
6: false, |
|
|
|
|
|
7: false, |
|
|
|
|
|
8: false, |
|
|
|
|
|
9: false, |
|
|
|
|
|
10: false, |
|
|
|
|
|
}, |
|
|
|
|
|
animationStates: { |
|
|
|
|
|
0: false, |
|
|
|
|
|
1: false, |
|
|
|
|
|
2: false, |
|
|
|
|
|
3: false, |
|
|
|
|
|
4: false, |
|
|
|
|
|
5: false, |
|
|
|
|
|
6: false, |
|
|
|
|
|
7: false, |
|
|
|
|
|
8: false, |
|
|
|
|
|
9: false, |
|
|
|
|
|
}, |
|
|
|
|
|
preloadBuffer: 1, |
|
|
|
|
|
isFirstSwipe: true, |
|
|
|
|
|
showMenu: false, |
|
|
|
|
|
iconRotated: false, |
|
|
|
|
|
iconBounceBack: false, |
|
|
|
|
|
showImagePopup: false, |
|
|
|
|
|
menuItems: [{ |
|
|
|
|
|
text: "序章", |
|
|
|
|
|
targetIndex: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "第一章猪的起源", |
|
|
|
|
|
targetIndex: 4, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "第二章驯为良伴", |
|
|
|
|
|
targetIndex: 5, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "第三章身份之谜", |
|
|
|
|
|
targetIndex: 6, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "第四章 东方之猪", |
|
|
|
|
|
targetIndex: 7, |
|
|
|
|
|
}, |
|
|
|
|
|
// { |
|
|
|
|
|
// text: "GuestBook", |
|
|
|
|
|
// targetIndex: 10, |
|
|
|
|
|
// }, |
|
|
|
|
|
], |
|
|
|
|
|
chapterPaths: { |
|
|
|
|
|
4: "/pig/chapter1/chapter1", |
|
|
|
|
|
5: "/pig/chapter2/chapter2", |
|
|
|
|
|
6: "/pig/chapter3/chapter3", |
|
|
|
|
|
7: "/pig/chapter4/chapter4", |
|
|
|
|
|
}, |
|
|
|
|
|
titleHeight: 0, |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
shouldShowContent() { |
|
|
|
|
|
return (index) => { |
|
|
|
|
|
return Math.abs(index - this.currentIndex) <= this.preloadBuffer; |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
currentIndex(newIndex) { |
|
|
|
|
|
for ( |
|
|
|
|
|
let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(10, newIndex + this |
|
|
|
|
|
.preloadBuffer); i++ |
|
|
|
|
|
) { |
|
|
|
|
|
this.loadedPages[i] = true; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
nextIndex() { |
|
|
|
|
|
console.log("---"); |
|
|
|
|
|
this.currentIndex = this.currentIndex + 1; |
|
|
|
|
|
}, |
|
|
|
|
|
handleSwiperChange(e) { |
|
|
|
|
|
const newIndex = e.detail.current; |
|
|
|
|
|
this.currentIndex = newIndex; |
|
|
|
|
|
this.animationStates[newIndex] = false; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.animationStates[newIndex] = true; |
|
|
|
|
|
}, 50); |
|
|
|
|
|
return; |
|
|
|
|
|
if (this.isFirstSwipe && newIndex > 0) { |
|
|
|
|
|
this.isFirstSwipe = false; |
|
|
|
|
|
uni.$emit("playBackgroundMusic"); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
goChapter() { |
|
|
|
|
|
const path = this.chapterPaths[this.currentIndex]; |
|
|
|
|
|
uni.navigateTo({ |
|
|
|
|
|
url: path, |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
showNavMenu() { |
|
|
|
|
|
this.iconRotated = true; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.showMenu = true; |
|
|
|
|
|
}, 300); |
|
|
|
|
|
}, |
|
|
|
|
|
toBuy() { |
|
|
|
|
|
uni.navigateTo({ |
|
|
|
|
|
url: '/subPackages/techan/detail?id=38' |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
closeMenu() { |
|
|
|
|
|
this.showMenu = false; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.iconBounceBack = true; |
|
|
|
|
|
this.iconRotated = false; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.iconBounceBack = false; |
|
|
|
|
|
}, 500); |
|
|
|
|
|
}, 300); |
|
|
|
|
|
}, |
|
|
|
|
|
jumpToPage(idx) { |
|
|
|
|
|
const targetIndex = idx; |
|
|
|
|
|
this.currentIndex = targetIndex; |
|
|
|
|
|
this.closeMenu(); |
|
|
|
|
|
this.animationStates[targetIndex] = false; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.animationStates[targetIndex] = true; |
|
|
|
|
|
}, 50); |
|
|
|
|
|
}, |
|
|
|
|
|
isItemActive(item) { |
|
|
|
|
|
return this.currentIndex === item.targetIndex; |
|
|
|
|
|
}, |
|
|
|
|
|
showPopupImage(index) { |
|
|
|
|
|
this.showImagePopup = true; |
|
|
|
|
|
this.currentTagImg = index; |
|
|
|
|
|
}, |
|
|
|
|
|
hidePopupImage() { |
|
|
|
|
|
this.showImagePopup = false; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
this.titleHeight = uni.getStorageSync("titleHeight"); |
|
|
|
|
|
const app = getApp(); |
|
|
|
|
|
app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/bgm.mp3"); |
|
|
|
|
|
app.initBackgroundMusic(); // 初始化背景音乐 |
|
|
|
|
|
uni.$bgMusic.play(); // 播放音乐 |
|
|
|
|
|
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) { |
|
|
|
|
|
this.loadedPages[i] = true; |
|
|
|
|
|
} |
|
|
|
|
|
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 10); i++) { |
|
|
|
|
|
this.loadedPages[i] = true; |
|
|
|
|
|
} |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.animationStates[this.currentIndex] = true; |
|
|
|
|
|
}, 50); |
|
|
|
|
|
}, |
|
|
|
|
|
onUnload() { |
|
|
|
|
|
uni.$bgMusic.pause(); // 停止音乐 |
|
|
|
|
|
}, |
|
|
|
|
|
onLoad(options) { |
|
|
|
|
|
if (options && options.targetIndex) { |
|
|
|
|
|
const targetIndex = parseInt(options.targetIndex); |
|
|
|
|
|
this.currentIndex = targetIndex; |
|
|
|
|
|
for ( |
|
|
|
|
|
let i = Math.max(0, targetIndex - this.preloadBuffer); i <= Math.min(10, targetIndex + this |
|
|
|
|
|
.preloadBuffer); i++ |
|
|
|
|
|
) { |
|
|
|
|
|
this.loadedPages[i] = true; |
|
|
|
|
|
} |
|
|
|
|
|
this.animationStates[targetIndex] = false; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.animationStates[targetIndex] = true; |
|
|
|
|
|
}, 50); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
|
|
onShareAppMessage() { |
|
|
|
|
|
return { |
|
|
|
|
|
title: "猪的美学进化史|「Epic Soul」阅读体 issue04", |
|
|
|
|
|
mpId: "wx8954209bb3ad489e", |
|
|
|
|
|
path: "/pig/home/home", |
|
|
|
|
|
imageUrl: "https://epic.js-dyyj.com/uploads/20250805/4a90a8f7de19b0c465ff30e1b8e0c35c.png", |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
onShareTimeline() { |
|
|
|
|
|
return { |
|
|
|
|
|
title: "猪的美学进化史|「Epic Soul」阅读体 issue04", |
|
|
|
|
|
path: "/pig/home/home", |
|
|
|
|
|
imageUrl: "https://epic.js-dyyj.com/uploads/20250805/4a90a8f7de19b0c465ff30e1b8e0c35c.png", |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
// #endif |
|
|
|
|
|
}; |
|
|
|
|
|
>>>>>>> master |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
@ -957,7 +846,6 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes bounce { |
|
|
@keyframes bounce { |
|
|
|
|
|
|
|
|
0%, |
|
|
0%, |
|
|
20%, |
|
|
20%, |
|
|
50%, |
|
|
50%, |
|
|