zhangminghao
2 months ago
18 changed files with 2552 additions and 1 deletions
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
class="swipe-to-next" |
||||
|
@touchstart="handleTouchStart" |
||||
|
@touchend="handleTouchEnd" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
<!-- 提示文字 --> |
||||
|
<view v-if="showTip && shouldShowTip" class="bottom-tip"> |
||||
|
<text>{{ tipText }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SwipeToNext', |
||||
|
props: { |
||||
|
// 是否在最后一页 |
||||
|
isLastSlide: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 跳转的目标路径 |
||||
|
targetPath: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
// 是否显示提示文字 |
||||
|
showTip: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 提示文字内容 |
||||
|
tipText: { |
||||
|
type: String, |
||||
|
default: '上滑动进入下一章节' |
||||
|
}, |
||||
|
// 滑动阈值（px） |
||||
|
swipeThreshold: { |
||||
|
type: Number, |
||||
|
default: 100 |
||||
|
}, |
||||
|
// 延迟时间（ms） |
||||
|
delayTime: { |
||||
|
type: Number, |
||||
|
default: 500 |
||||
|
}, |
||||
|
// 是否启用延迟机制 |
||||
|
enableDelay: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 是否总是启用跳转（忽略isLastSlide状态） |
||||
|
alwaysEnable: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
touchStartY: 0, // 触摸开始Y坐标 |
||||
|
touchEndY: 0, // 触摸结束Y坐标 |
||||
|
canJump: false, // 是否允许跳转 |
||||
|
delayTimer: null // 延迟定时器 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 是否应该显示提示 |
||||
|
shouldShowTip() { |
||||
|
return this.alwaysEnable || this.isLastSlide; |
||||
|
}, |
||||
|
// 是否应该允许触摸检测 |
||||
|
shouldEnableTouch() { |
||||
|
return this.alwaysEnable || this.isLastSlide; |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
isLastSlide(newVal) { |
||||
|
this.handleSlideChange(newVal); |
||||
|
}, |
||||
|
alwaysEnable: { |
||||
|
handler(newVal) { |
||||
|
if (newVal) { |
||||
|
// 如果启用总是跳转，立即处理 |
||||
|
this.handleSlideChange(true); |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 清理定时器 |
||||
|
if (this.delayTimer) { |
||||
|
clearTimeout(this.delayTimer); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理滑动状态变化 |
||||
|
handleSlideChange(isActive) { |
||||
|
console.log('ppsls'); |
||||
|
if (isActive || this.alwaysEnable) { |
||||
|
// 到达最后一页或总是启用 |
||||
|
this.canJump = false; |
||||
|
if (this.enableDelay && !this.alwaysEnable) { |
||||
|
// 启用延迟机制（仅当不是总是启用时） |
||||
|
this.delayTimer = setTimeout(() => { |
||||
|
if (this.shouldEnableTouch) { |
||||
|
this.canJump = true; |
||||
|
} |
||||
|
}, this.delayTime); |
||||
|
} else { |
||||
|
// 不启用延迟或总是启用，立即允许跳转 |
||||
|
this.canJump = true; |
||||
|
} |
||||
|
} else { |
||||
|
// 离开最后一页且不是总是启用 |
||||
|
this.canJump = false; |
||||
|
if (this.delayTimer) { |
||||
|
clearTimeout(this.delayTimer); |
||||
|
this.delayTimer = null; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 触摸开始 |
||||
|
handleTouchStart(e) { |
||||
|
console.log('。。。。。。。。。。///////////'); |
||||
|
// 检查是否应该允许触摸 |
||||
|
if (this.shouldEnableTouch && (this.canJump || !this.enableDelay || this.alwaysEnable)) { |
||||
|
this.touchStartY = e.touches[0].clientY; |
||||
|
} |
||||
|
}, |
||||
|
// 触摸结束 |
||||
|
handleTouchEnd(e) { |
||||
|
// 检查是否满足跳转条件 |
||||
|
if (!this.shouldEnableTouch || !this.touchStartY) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 如果启用延迟机制但还不能跳转，且不是总是启用模式，则返回 |
||||
|
if (this.enableDelay && !this.canJump && !this.alwaysEnable) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.touchEndY = e.changedTouches[0].clientY; |
||||
|
const deltaY = this.touchStartY - this.touchEndY; |
||||
|
|
||||
|
// 向上滑动且滑动距离大于阈值才跳转 |
||||
|
if (deltaY > this.swipeThreshold) { |
||||
|
console.log('向上滑动触发跳转，目标路径:', this.targetPath); |
||||
|
this.$emit('swipe-to-next', this.targetPath); |
||||
|
uni.navigateTo({ |
||||
|
url:this.targetPath |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 重置触摸位置 |
||||
|
this.touchStartY = 0; |
||||
|
this.touchEndY = 0; |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swipe-to-next { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.bottom-tip { |
||||
|
position: absolute; |
||||
|
bottom: 50rpx; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
padding: 10rpx 20rpx; |
||||
|
border-radius: 50rpx; |
||||
|
z-index: 999; |
||||
|
|
||||
|
text { |
||||
|
color: #fff; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,293 @@ |
|||||
|
# SwipeToNext 组件使用文档 |
||||
|
|
||||
|
## 组件介绍 |
||||
|
|
||||
|
`SwipeToNext` 是一个通用的触底跳转组件，封装了手势检测、延迟防抖、提示文字等功能，可以在任何需要滑动跳转的页面中使用。 |
||||
|
|
||||
|
## 组件特性 |
||||
|
|
||||
|
- ✅ 手势滑动检测 |
||||
|
- ✅ 防误触发机制（延迟允许跳转） |
||||
|
- ✅ 可配置的滑动阈值 |
||||
|
- ✅ 自定义提示文字 |
||||
|
- ✅ 支持事件监听 |
||||
|
- ✅ 完全可配置的参数 |
||||
|
|
||||
|
## 使用方法 |
||||
|
|
||||
|
### 1. 引入组件 |
||||
|
|
||||
|
```vue |
||||
|
<script> |
||||
|
import SwipeToNext from '@/components/SwipeToNext.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
SwipeToNext |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### 2. 基础使用 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="isLastSlide" |
||||
|
:target-path="'/next/page'" |
||||
|
@swipe-to-next="handleSwipeToNext" |
||||
|
> |
||||
|
<!-- 你的页面内容 --> |
||||
|
<view class="content"> |
||||
|
<!-- 轮播图或其他内容 --> |
||||
|
</view> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
isLastSlide: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理swiper切换或其他逻辑 |
||||
|
handlePageChange() { |
||||
|
// 根据你的逻辑设置 isLastSlide |
||||
|
this.isLastSlide = true; // 当到达最后一页时 |
||||
|
}, |
||||
|
handleSwipeToNext(targetPath) { |
||||
|
console.log('即将跳转到:', targetPath); |
||||
|
// 可以在这里添加额外的逻辑，如数据统计 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### 3. 完整配置使用 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="isLastSlide" |
||||
|
:target-path="'/next/page'" |
||||
|
:show-tip="true" |
||||
|
tip-text="向上滑动查看更多内容" |
||||
|
:swipe-threshold="100" |
||||
|
:delay-time="800" |
||||
|
:enable-delay="true" |
||||
|
@swipe-to-next="handleSwipeToNext" |
||||
|
> |
||||
|
<!-- 你的页面内容 --> |
||||
|
<view class="content"> |
||||
|
<!-- 内容区域 --> |
||||
|
</view> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
``` |
||||
|
|
||||
|
## Props 参数 |
||||
|
|
||||
|
| 参数名 | 类型 | 默认值 | 必填 | 说明 | |
||||
|
|--------|------|--------|------|------| |
||||
|
| `isLastSlide` | Boolean | `false` | ✅ | 是否在最后一页/最后一个状态 | |
||||
|
| `targetPath` | String | - | ✅ | 跳转的目标路径 | |
||||
|
| `showTip` | Boolean | `true` | ❌ | 是否显示提示文字 | |
||||
|
| `tipText` | String | `'继续向上滑动进入下一章节'` | ❌ | 提示文字内容 | |
||||
|
| `swipeThreshold` | Number | `80` | ❌ | 滑动阈值（像素） | |
||||
|
| `delayTime` | Number | `500` | ❌ | 延迟允许跳转的时间（毫秒） | |
||||
|
| `enableDelay` | Boolean | `true` | ❌ | 是否启用延迟机制 | |
||||
|
| `alwaysEnable` | Boolean | `false` | ❌ | 是否总是启用跳转（忽略isLastSlide状态） | |
||||
|
|
||||
|
## Events 事件 |
||||
|
|
||||
|
| 事件名 | 参数 | 说明 | |
||||
|
|--------|------|------| |
||||
|
| `swipe-to-next` | `targetPath` | 触发跳转时的回调事件 | |
||||
|
|
||||
|
## 使用场景示例 |
||||
|
|
||||
|
### 场景1：图片轮播页面 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="currentIndex === images.length - 1" |
||||
|
:target-path="'/gallery/next'" |
||||
|
> |
||||
|
<swiper @change="handleSwiperChange"> |
||||
|
<swiper-item v-for="(img, index) in images" :key="index"> |
||||
|
<image :src="img" mode="aspectFit" /> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
images: ['img1.jpg', 'img2.jpg', 'img3.jpg'] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### 场景2：文章阅读页面 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="isReadComplete" |
||||
|
:target-path="'/article/next'" |
||||
|
tip-text="继续滑动阅读下一篇文章" |
||||
|
:swipe-threshold="60" |
||||
|
> |
||||
|
<scroll-view @scrolltolower="handleScrollToBottom"> |
||||
|
<view class="article-content"> |
||||
|
<!-- 文章内容 --> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
isReadComplete: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleScrollToBottom() { |
||||
|
// 滚动到底部时认为阅读完成 |
||||
|
this.isReadComplete = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
### 场景4：单张图片或总是启用触底跳转 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:always-enable="true" |
||||
|
:target-path="'/next/chapter'" |
||||
|
tip-text="向上滑动查看下一内容" |
||||
|
:enable-delay="false" |
||||
|
> |
||||
|
<view class="single-image"> |
||||
|
<image :src="imageUrl" mode="aspectFit" /> |
||||
|
</view> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
imageUrl: 'single-image.jpg' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="currentStep === totalSteps - 1" |
||||
|
:target-path="'/guide/complete'" |
||||
|
tip-text="向上滑动完成引导" |
||||
|
> |
||||
|
<view class="guide-step"> |
||||
|
<view class="step-content"> |
||||
|
步骤 {{ currentStep + 1 }} / {{ totalSteps }} |
||||
|
</view> |
||||
|
<button @click="nextStep">下一步</button> |
||||
|
</view> |
||||
|
</SwipeToNext> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
currentStep: 0, |
||||
|
totalSteps: 5 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
nextStep() { |
||||
|
if (this.currentStep < this.totalSteps - 1) { |
||||
|
this.currentStep++; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
``` |
||||
|
|
||||
|
## 特殊情况处理 |
||||
|
|
||||
|
### 单张图片问题 |
||||
|
|
||||
|
当只有一张图片时，传统的 `isLastSlide` 逻辑不适用。这时可以使用 `alwaysEnable` 参数： |
||||
|
|
||||
|
```vue |
||||
|
<!-- 单张图片的解决方案 --> |
||||
|
<SwipeToNext |
||||
|
:always-enable="true" |
||||
|
:target-path="'/next/page'" |
||||
|
:enable-delay="false" |
||||
|
> |
||||
|
<image src="single-image.jpg" /> |
||||
|
</SwipeToNext> |
||||
|
``` |
||||
|
|
||||
|
### 参数优先级 |
||||
|
|
||||
|
当 `alwaysEnable="true"` 时： |
||||
|
- 忽略 `isLastSlide` 的值 |
||||
|
- 总是显示提示文字 |
||||
|
- 总是允许触底跳转 |
||||
|
- 建议设置 `enableDelay="false"` 以获得更好的响应速度 |
||||
|
|
||||
|
|
||||
|
|
||||
|
1. **确保正确设置 `isLastSlide`**：这是控制是否允许跳转的关键属性 |
||||
|
2. **路径格式**：`targetPath` 需要是有效的 uni-app 路由路径 |
||||
|
3. **性能考虑**：如果不需要延迟机制，可以设置 `enableDelay: false` 来提高响应速度 |
||||
|
4. **样式覆盖**：组件内的提示文字样式可以通过全局样式覆盖 |
||||
|
5. **事件监听**：建议监听 `swipe-to-next` 事件进行数据统计或其他操作 |
||||
|
|
||||
|
## 自定义样式 |
||||
|
|
||||
|
如果需要自定义提示文字的样式，可以在页面中添加： |
||||
|
|
||||
|
```scss |
||||
|
// 覆盖组件样式 |
||||
|
.swipe-to-next .bottom-tip { |
||||
|
bottom: 200rpx !important; // 调整位置 |
||||
|
background: rgba(255, 255, 255, 0.9) !important; // 改变背景色 |
||||
|
|
||||
|
text { |
||||
|
color: #333 !important; // 改变文字颜色 |
||||
|
font-size: 32rpx !important; // 改变字体大小 |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
这个组件极大地简化了触底跳转功能的实现，让你可以专注于业务逻辑而不用重复编写相同的手势检测代码。 |
||||
@ -0,0 +1,25 @@ |
|||||
|
{ |
||||
|
"setting": { |
||||
|
"es6": true, |
||||
|
"postcss": true, |
||||
|
"minified": true, |
||||
|
"uglifyFileName": false, |
||||
|
"enhance": true, |
||||
|
"packNpmRelationList": [], |
||||
|
"babelSetting": { |
||||
|
"ignore": [], |
||||
|
"disablePlugins": [], |
||||
|
"outputPath": "" |
||||
|
}, |
||||
|
"useCompilerPlugins": false, |
||||
|
"minifyWXML": true |
||||
|
}, |
||||
|
"compileType": "miniprogram", |
||||
|
"simulatorPluginLibVersion": {}, |
||||
|
"packOptions": { |
||||
|
"ignore": [], |
||||
|
"include": [] |
||||
|
}, |
||||
|
"appid": "wx8954209bb3ad489e", |
||||
|
"editorSetting": {} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
{ |
||||
|
"libVersion": "3.10.0", |
||||
|
"projectname": "EpicSoul", |
||||
|
"setting": { |
||||
|
"urlCheck": true, |
||||
|
"coverView": true, |
||||
|
"lazyloadPlaceholderEnable": false, |
||||
|
"skylineRenderEnable": false, |
||||
|
"preloadBackgroundData": false, |
||||
|
"autoAudits": false, |
||||
|
"showShadowRootInWxmlPanel": true, |
||||
|
"compileHotReLoad": true |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,218 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<SwipeToNext :is-last-slide="isLastSlide" :target-path="'/xqk/chapter2/index'"> |
||||
|
<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 === 1"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2-dian.png" |
||||
|
v-for="i in 3" :key="i" mode="widthFix" :class="['module'+(i+1)]" |
||||
|
@click="openPopup(i+1)"></image> |
||||
|
</template> --> |
||||
|
|
||||
|
<template v-if="index == 2"> |
||||
|
<video :src="showImg('/uploads/20250903/7af32cc4f824b724560f78c597c85864.mp4')" |
||||
|
style="width: 100vw;height: 30vh;" objectFit="cover"></video> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</SwipeToNext> |
||||
|
<!-- 第二页气泡弹框 --> |
||||
|
<!-- <uni-popup ref="chapterPopup"> |
||||
|
<view style="width: 100vw;height: 100vh;" @click="$refs.chapterPopup.close()"> |
||||
|
<image :src="getImageUrl(`img2-${popupIndex}.png`)" mode="widthFix" :class="[`img2-${popupIndex}`]"> |
||||
|
</image> |
||||
|
</view> |
||||
|
</uni-popup> --> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
import SwipeToNext from '@/components/SwipeToNext.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu, |
||||
|
SwipeToNext |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 1, |
||||
|
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, |
||||
|
isLastSlide:false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 2; |
||||
|
this.isLastSlide = true; |
||||
|
} else { |
||||
|
this.navIndex = 1 |
||||
|
this.isLastSlide = false; |
||||
|
} |
||||
|
}, |
||||
|
// 第二页气泡弹框 |
||||
|
openPopup(i) { |
||||
|
this.popupIndex = i |
||||
|
this.$refs.chapterPopup.open(); |
||||
|
}, |
||||
|
// 生成图片完整 URL |
||||
|
getImageUrl(path) { |
||||
|
if (typeof path === 'object') { |
||||
|
path = path.url; |
||||
|
} |
||||
|
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/${path}`; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<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 == 1" > |
||||
|
<image @click="hanldGifPage" :src="showImg('/uploads/20250903/dcfd8b8a708f4f2d43edf35a906f75ba.png')" mode="widthFix" class="img1-text"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 2, |
||||
|
swiperImages: [ |
||||
|
this.showImg('/uploads/20250903/3bd4fe43f2a6a8806799f06a548f9477.png'), |
||||
|
this.showImg('/uploads/20250903/8fe8d66210edd96a9f322a661b4d9ba4.png'), |
||||
|
|
||||
|
], |
||||
|
// 控制图片显示的变量 |
||||
|
showImg7_1: false, |
||||
|
showImg7_2: false, |
||||
|
showImg7_3: false, |
||||
|
// 存储定时器 |
||||
|
timers: [], |
||||
|
popupIndex: 1 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
}, |
||||
|
onUnload() { |
||||
|
// 清除定时器 |
||||
|
this.timers.forEach(timer => clearTimeout(timer)) |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
hanldGifPage(){ |
||||
|
uni.navigateTo({ |
||||
|
url:'/xqk/chapter5/index' |
||||
|
}) |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
// 清除之前的定时器 |
||||
|
this.timers.forEach(timer => clearTimeout(timer)) |
||||
|
this.timers = [] |
||||
|
|
||||
|
this.currentIndex = e.detail.current; |
||||
|
|
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 3; |
||||
|
}else { |
||||
|
this.navIndex = 2 |
||||
|
} |
||||
|
|
||||
|
if (this.currentIndex === 6) { |
||||
|
// 重置显示状态（确保每次进入都重新动画） |
||||
|
this.showImg7_1 = false |
||||
|
this.showImg7_2 = false |
||||
|
this.showImg7_3 = false |
||||
|
|
||||
|
// 延迟0.5秒显示第一张图 |
||||
|
const timer1 = setTimeout(() => { |
||||
|
this.showImg7_1 = true |
||||
|
}, 500) |
||||
|
|
||||
|
// 延迟1秒显示第二张图 |
||||
|
const timer2 = setTimeout(() => { |
||||
|
this.showImg7_2 = true |
||||
|
}, 1000) |
||||
|
|
||||
|
// 延迟2秒显示第三张图 |
||||
|
const timer3 = setTimeout(() => { |
||||
|
this.showImg7_3 = true |
||||
|
}, 2000) |
||||
|
|
||||
|
this.timers.push(timer1, timer2, timer3) |
||||
|
} else { |
||||
|
// 非目标索引时隐藏所有图片 |
||||
|
this.showImg7_1 = false |
||||
|
this.showImg7_2 = false |
||||
|
this.showImg7_3 = false |
||||
|
} |
||||
|
}, |
||||
|
// 第八页气泡弹框 |
||||
|
openPopup(i) { |
||||
|
this.popupIndex = i |
||||
|
this.$refs.chapterPopup.open(); |
||||
|
}, |
||||
|
getImageUrl(path) { |
||||
|
if (typeof path === 'object') { |
||||
|
path = path.url; |
||||
|
} |
||||
|
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/${path}`; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
.img1-text{ |
||||
|
width: 484rpx; |
||||
|
position: absolute; |
||||
|
bottom: 100rpx; |
||||
|
left: 250rpx; |
||||
|
} |
||||
|
.img10-text { |
||||
|
width: 484rpx; |
||||
|
position: absolute; |
||||
|
top: 170rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.module-img { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
width: 564.25rpx; |
||||
|
} |
||||
|
.module1 { |
||||
|
top: 630rpx; |
||||
|
} |
||||
|
.module2 { |
||||
|
top: 780rpx; |
||||
|
} |
||||
|
.module3 { |
||||
|
top: 930rpx; |
||||
|
} |
||||
|
.module4 { |
||||
|
top: 1080rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 渐入动画样式 */ |
||||
|
.fade-in-image { |
||||
|
/* 初始状态：透明 */ |
||||
|
opacity: 0; |
||||
|
/* 添加过渡动画：1秒内透明度从0到1 */ |
||||
|
animation: fadeIn 1s ease-out forwards; |
||||
|
/* 根据需要调整图片的定位 */ |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
/* 渐入动画关键帧 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); /* 可选：添加轻微上移动画 */ |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fade-in-image:nth-child(1) { |
||||
|
width: 22.97rpx; |
||||
|
top: 825rpx; |
||||
|
right: 191rpx; |
||||
|
} |
||||
|
|
||||
|
.fade-in-image:nth-child(2) { |
||||
|
width: 34.95rpx; |
||||
|
top: 790rpx; |
||||
|
right: 170rpx; |
||||
|
} |
||||
|
|
||||
|
.fade-in-image:nth-child(3) { |
||||
|
width: 144.81rpx; |
||||
|
top: 680rpx; |
||||
|
right: 71rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,244 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw; position: relative;"> |
||||
|
<!-- 滑动拦截遮罩（仅在第5页且未输入内容时显示） --> |
||||
|
<view |
||||
|
v-if="currentIndex === 5 && !inputValue.trim()" |
||||
|
class="swipe-blocker" |
||||
|
@click="$refs.customPopup.open()" |
||||
|
></view> |
||||
|
|
||||
|
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
||||
|
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
||||
|
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
||||
|
<!-- 第5页内容 --> |
||||
|
<template v-if="index === 5"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-text.png" |
||||
|
mode="widthFix" class="img6-text"></image> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btn.png" |
||||
|
mode="widthFix" class="img6-btn" @click="$refs.customPopup.open()"></image> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 第6页内容 --> |
||||
|
<template v-if="index === 6"> |
||||
|
<view class="img7-box"> |
||||
|
<view class="img7-textBg"> |
||||
|
<view>你的</view> |
||||
|
<view style="margin: 10rpx 0;">{{inputValue}}</view> |
||||
|
<view>已备好</view> |
||||
|
</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-text.png" |
||||
|
mode="widthFix" class="img7-text"></image> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="index === 7"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8-text.png" mode="widthFix" class="img8-text"></image> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
||||
|
class="btn-img" @click="gotoPath('/xrcc/chapter4/index')"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<!-- 输入弹框 --> |
||||
|
<uni-popup ref="customPopup" type="center"> |
||||
|
<view class="popup-content"> |
||||
|
<textarea v-model="inputValue" class="input-area" placeholder="填写你的“物件” (可以是一本书、一首歌、一段回忆、一个困惑...)" |
||||
|
maxlength="20"></textarea> |
||||
|
|
||||
|
<view class="word-count"> |
||||
|
{{ inputValue.length }}/20 |
||||
|
</view> |
||||
|
|
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btns.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 脚本部分保持不变 |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 3, |
||||
|
swiperImages: [ |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img1.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img2s.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img3s.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img4s.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img5s.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8.gif', |
||||
|
], |
||||
|
inputValue: '', |
||||
|
swipeDirection: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleTouchStart(e) { |
||||
|
this.startY = e.touches[0].clientY; |
||||
|
}, |
||||
|
handleTouchMove(e) { |
||||
|
const moveY = e.touches[0].clientY; |
||||
|
this.swipeDirection = moveY < this.startY ? 'down' : 'up'; |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
const newIndex = e.detail.current; |
||||
|
|
||||
|
if (this.currentIndex === 5 && newIndex === 6 && !this.inputValue.trim()) { |
||||
|
this.currentIndex = 5; |
||||
|
uni.showToast({ |
||||
|
title: '请先填写内容才能继续', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.currentIndex = newIndex; |
||||
|
if (this.currentIndex === this.swiperImages.length - 1) { |
||||
|
this.navIndex = 4; |
||||
|
} else { |
||||
|
this.navIndex = 3; |
||||
|
} |
||||
|
}, |
||||
|
submit() { |
||||
|
if (!this.inputValue.trim()) return; |
||||
|
this.$refs.customPopup.close() |
||||
|
this.currentIndex = 6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
/* 原有样式保持不变 */ |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.img6-text { |
||||
|
width: 442.41rpx; |
||||
|
position: absolute; |
||||
|
top: 170rpx; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.img6-btn { |
||||
|
position: absolute; |
||||
|
width: 520.31rpx; |
||||
|
bottom: 210rpx; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
/* 其他样式保持不变 */ |
||||
|
.img7-box { |
||||
|
position: relative; |
||||
|
top: 170rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.img7-textBg { |
||||
|
background-image: url('https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-textBg.png'); |
||||
|
background-size: 100% 100%; |
||||
|
padding: 30rpx 50rpx; |
||||
|
font-size: 50rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
width: 520.31rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.img7-text { |
||||
|
display: block; |
||||
|
margin: 60rpx auto 0; |
||||
|
width: 447.4rpx; |
||||
|
} |
||||
|
|
||||
|
.img8-text { |
||||
|
width: 379.49rpx; |
||||
|
position: absolute; |
||||
|
top: 170rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swipe-blocker { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
width: 85vw; |
||||
|
background-color: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 40rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.input-area { |
||||
|
width: 100%; |
||||
|
min-height: 180rpx; |
||||
|
padding: 20rpx; |
||||
|
border: 2rpx solid #eee; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
resize: none; |
||||
|
box-sizing: border-box; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.word-count { |
||||
|
text-align: right; |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 35rpx; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
||||
|
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
||||
|
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
||||
|
<template v-if="index === 3"> |
||||
|
<view class="module-box"> |
||||
|
<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4-${i+1}.png`" |
||||
|
v-for="i in 5" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]" |
||||
|
@click="openPopup(i+1)"></image> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="index === 5"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5-text.png" mode="widthFix" class="img5-text"></image> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
||||
|
class="btn-img" @click="gotoPath('/xrcc/chapter5/index')"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<uni-popup ref="chapterPopup"> |
||||
|
<image :src="getImageUrl(`img4-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;"> |
||||
|
</image> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
|
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 4, |
||||
|
swiperImages: [ |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img1.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img2.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img3.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5s.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img6.gif', |
||||
|
], |
||||
|
popupIndex: 1 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 5; |
||||
|
}else { |
||||
|
this.navIndex = 4 |
||||
|
} |
||||
|
}, |
||||
|
openPopup(i) { |
||||
|
this.popupIndex = i |
||||
|
this.$refs.chapterPopup.open(); |
||||
|
}, |
||||
|
getImageUrl(path) { |
||||
|
if (typeof path === 'object') { |
||||
|
path = path.url; |
||||
|
} |
||||
|
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/${path}`; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.img5-text { |
||||
|
width: 576.23rpx; |
||||
|
position: absolute; |
||||
|
top: 170rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.module-box { |
||||
|
position: absolute; |
||||
|
top: 460rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
image { |
||||
|
width: 650rpx; |
||||
|
margin-bottom: 80rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="isLastSlide" |
||||
|
:always-enable="swiperImages.length === 1" |
||||
|
:target-path="'/xqk/chapter3/index'" |
||||
|
:enable-delay="swiperImages.length > 1" |
||||
|
> |
||||
|
<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})` }"> |
||||
|
|
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</SwipeToNext> |
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
import SwipeToNext from '@/components/SwipeToNext.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu, |
||||
|
SwipeToNext |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 5, |
||||
|
swiperImages: [ |
||||
|
this.showImg('/uploads/20250903/dd5b260002da55d4c3d56b338451bc11.gif'), |
||||
|
], |
||||
|
animateShow: false, |
||||
|
isLastSlide: false // 是否在最后一页 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
// 对于单张图片或初始在最后一页的情况 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 1; |
||||
|
this.isLastSlide = true; |
||||
|
} |
||||
|
// 如果只有一张图片，也认为是最后一页 |
||||
|
if (this.swiperImages.length === 1) { |
||||
|
this.isLastSlide = true; |
||||
|
} |
||||
|
}, |
||||
|
// onLoad(option) { |
||||
|
// this.currentIndex = option.currentIndex || 0 |
||||
|
// if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
// }, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
if(this.currentIndex == 1) { |
||||
|
this.animateShow = true |
||||
|
}else { |
||||
|
this.animateShow = false |
||||
|
} |
||||
|
|
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
// 判断是否切换到最后一页 |
||||
|
this.isLastSlide = true; |
||||
|
this.navIndex = 6; |
||||
|
} else { |
||||
|
// 判断是否切换到最后一页 |
||||
|
this.isLastSlide = false; |
||||
|
this.navIndex = 5 |
||||
|
} |
||||
|
}, |
||||
|
// 去首页 |
||||
|
goHome() { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/index' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.img2s { |
||||
|
position: absolute; |
||||
|
top: 380rpx; |
||||
|
right: 25rpx; |
||||
|
width: 358rpx; |
||||
|
transform: translateX(100%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.img2-btn { |
||||
|
width: 558rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
bottom: 70rpx; |
||||
|
} |
||||
|
|
||||
|
.img3-btn { |
||||
|
width: 558rpx; |
||||
|
line-height: 72rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 20rpx; |
||||
|
border: 2rpx solid; |
||||
|
font-size: 30rpx; |
||||
|
color: #fff; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
bottom: 180rpx; |
||||
|
} |
||||
|
|
||||
|
.flex-column { |
||||
|
position: absolute; |
||||
|
bottom: 280rpx; |
||||
|
width: 100%; |
||||
|
align-items: center; |
||||
|
|
||||
|
.img5-text { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.img5-btn { |
||||
|
width: 230rpx; |
||||
|
margin-top: 99rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img6-text { |
||||
|
width: 408.46rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
bottom: 365rpx |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 从右往左进入的动画 */ |
||||
|
.animate-enter-from-right { |
||||
|
animation: enterFromRight 2s ease-out forwards; |
||||
|
} |
||||
|
|
||||
|
@keyframes enterFromRight { |
||||
|
0% { |
||||
|
/* 起始位置：右侧外部 */ |
||||
|
transform: translateX(100%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
/* 结束位置：正常位置 */ |
||||
|
transform: translateX(0); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
||||
|
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
||||
|
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
||||
|
<template v-if="index === 0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-1.png" mode="widthFix" |
||||
|
class="img7-1" @click="$refs.customPopup.open()"></image> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-2.png" mode="widthFix" |
||||
|
class="img7-2" style="top: 620rpx;" @click="$refs.customPopups.open()"></image> |
||||
|
|
||||
|
<view class="bgm-box flex-between"> |
||||
|
<view :class="{'bgm-active': index == bgmIndex}" v-for="(item,index) in bgmList" :key="index" @click="bgmIndex = index">{{item}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-btn.png" mode="widthFix" |
||||
|
class="img7-btn" @click="confirm"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<!-- 输入弹框 --> |
||||
|
<uni-popup ref="customPopup" type="center"> |
||||
|
<view class="popup-content"> |
||||
|
<textarea v-model="inputValue" class="input-area" placeholder="我的星槎" |
||||
|
maxlength="20"></textarea> |
||||
|
|
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 输入弹框 --> |
||||
|
<uni-popup ref="customPopups" type="center"> |
||||
|
<view class="popup-content"> |
||||
|
<textarea v-model="inputValues" class="input-area" placeholder="我的目的地" |
||||
|
maxlength="20"></textarea> |
||||
|
|
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
|
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 5, |
||||
|
swiperImages: [ |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7.png', |
||||
|
], |
||||
|
inputValue: '', |
||||
|
inputValues: '', |
||||
|
bgmList: [ |
||||
|
'古典', |
||||
|
'民谣', |
||||
|
'电子', |
||||
|
'自然白噪音' |
||||
|
], |
||||
|
bgmIndex: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
}, |
||||
|
submit() { |
||||
|
this.$refs.customPopup.close() |
||||
|
this.$refs.customPopups.close() |
||||
|
}, |
||||
|
getImageUrl(path) { |
||||
|
if (typeof path === 'object') { |
||||
|
path = path.url; |
||||
|
} |
||||
|
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/${path}`; |
||||
|
}, |
||||
|
confirm() { |
||||
|
if (!this.inputValue.trim() || !this.inputValues.trim() || this.bgmIndex == null) { |
||||
|
uni.showToast({ |
||||
|
title: '请先填写或选择您的日志信息', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}else { |
||||
|
let data = { |
||||
|
text1: this.inputValue.trim(), |
||||
|
text2: this.inputValues.trim(), |
||||
|
imgSrc: this.getImageUrl(`img${this.bgmIndex + 1}s.png`), |
||||
|
imgTitle: this.bgmList[this.bgmIndex] |
||||
|
} |
||||
|
this.gotoPath('/xrcc/chapter7/index?data=' + JSON.stringify(data)) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 84rpx; |
||||
|
} |
||||
|
|
||||
|
.img7-1, .img7-2 { |
||||
|
width: 437.67rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
top: 365rpx; |
||||
|
} |
||||
|
|
||||
|
.bgm-box { |
||||
|
width: 437.67rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 650rpx; |
||||
|
margin: 0 auto; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
view { |
||||
|
width: 207.89rpx; |
||||
|
line-height: 42.77rpx; |
||||
|
border-radius: 2rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 20rpx; |
||||
|
border: 1rpx solid #fff; |
||||
|
} |
||||
|
view:nth-child(n+3) { |
||||
|
margin-top: 17rpx; |
||||
|
} |
||||
|
|
||||
|
.bgm-active { |
||||
|
border-color: #00C48C; |
||||
|
color: #00C48C; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img7-btn { |
||||
|
width: 439.66rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 244rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
width: 85vw; |
||||
|
background-color: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 40rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.input-area { |
||||
|
width: 100%; |
||||
|
min-height: 180rpx; |
||||
|
padding: 20rpx; |
||||
|
border: 2rpx solid #747c8e; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
resize: none; |
||||
|
box-sizing: border-box; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.word-count { |
||||
|
text-align: right; |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 35rpx; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,143 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
||||
|
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
||||
|
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
||||
|
<template v-if="index === 0"> |
||||
|
<view class="box"> |
||||
|
<!-- <view class="title">我的星槎</view> --> |
||||
|
<view class="subtitle subtitle1">{{info.text1}}</view> |
||||
|
<!-- <view class="title">我的目的地</view> --> |
||||
|
<view class="subtitle subtitle2">{{info.text2}}</view> |
||||
|
<!-- <view class="title">我的航行BGM</view> --> |
||||
|
<view class="subtitle subtitle3">{{info.imgTitle}}</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="index === 1"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5-text.png" mode="widthFix" class="img5-text.png"></image> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 二维码 --> |
||||
|
<template v-if="index === 2"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/qrcode.png" mode="widthFix" class="qrcode" :show-menu-by-longpress="true"></image> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
|
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 5, |
||||
|
swiperImages: [ |
||||
|
'', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5.png', |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png' |
||||
|
], |
||||
|
info: {} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
if(option) { |
||||
|
let data = JSON.parse(option.data) |
||||
|
this.info = data |
||||
|
console.log(data) |
||||
|
this.swiperImages[0] = data.imgSrc |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% 100%; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.box { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
top: 300rpx; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
color: rgba(220, 221, 221, 1); |
||||
|
|
||||
|
.title { |
||||
|
font-size: 25rpx; |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.subtitle { |
||||
|
position: absolute; |
||||
|
font-size: 40rpx; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.subtitle1 { |
||||
|
top: 150rpx; |
||||
|
} |
||||
|
.subtitle2 { |
||||
|
top: 280rpx; |
||||
|
} |
||||
|
.subtitle3 { |
||||
|
top: 410rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img5-text.png { |
||||
|
width: 312.58rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
bottom: 492rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.qrcode { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
width: 25vw; |
||||
|
bottom: 28vh; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<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})` }"> |
||||
|
|
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
|
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
NavMenu |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
navIndex: 3, |
||||
|
swiperImages: [ |
||||
|
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif', |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
this.currentIndex = e.detail.current; |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-size: 100% auto; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 84rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,248 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="overlay" v-if="showMenu" @click="onCloseMenu"></view> |
||||
|
<view class="fixed-nav" :class="{'hidden': showMenu}" @click="onShowMenu"> |
||||
|
<image class="nav-icon" :class="{'rotated': iconRotated, 'bounce-back': iconBounceBack}" :src="navIconSrc" |
||||
|
mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view class="nav-menu" :class="{'show': showMenu}"> |
||||
|
<view class="nav-item" :class="{'item-active': isItemActive(item)}" v-for="item in menuItems" |
||||
|
:key="item.targetIndex" @click="() => onJumpToPage(item)"> |
||||
|
<view v-if="item.text.includes('#Chapter')" class="chapter-text"> |
||||
|
<text class="chapter-title">#Chapter</text> |
||||
|
<text :class="{'active': isItemActive(item)}" class="chapter-number"> |
||||
|
{{ item.text.replace('#Chapter', '') }} |
||||
|
</text> |
||||
|
</view> |
||||
|
<text v-else :class="{'active': isItemActive(item)}">{{ item.text }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
// 当前激活的索引 |
||||
|
navIndex: { |
||||
|
type: Number, |
||||
|
required: true |
||||
|
}, |
||||
|
// 导航图标地址 |
||||
|
navIconSrc: { |
||||
|
type: String, |
||||
|
default: 'https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showMenu: false, |
||||
|
iconRotated: false, |
||||
|
iconBounceBack: false, |
||||
|
menuItems: [{ |
||||
|
text: 'INTRO序曲', |
||||
|
targetIndex: 0, |
||||
|
path: "/xqk/home/home" |
||||
|
}, |
||||
|
{ |
||||
|
text: '01 青壳初生', |
||||
|
targetIndex: 1, |
||||
|
path: "/xqk/chapter1/index" |
||||
|
}, |
||||
|
{ |
||||
|
text: '02 负海志 向湖生', |
||||
|
targetIndex: 2, |
||||
|
path: "/xqk/chapter2/index" |
||||
|
}, |
||||
|
{ |
||||
|
text: '03 名曰江湖', |
||||
|
targetIndex: 3, |
||||
|
path: "/xqk/chapter3/index" |
||||
|
}, |
||||
|
{ |
||||
|
text: '04 风味人间', |
||||
|
targetIndex: 4, |
||||
|
path: "/xqk/chapter4/index" |
||||
|
}, |
||||
|
{ |
||||
|
text: '05 共济', |
||||
|
targetIndex: 5, |
||||
|
path: "/xqk/chapter6/index" |
||||
|
}, |
||||
|
{ |
||||
|
text: '有感商品', |
||||
|
targetIndex: 6, |
||||
|
path: "/subPackages/techan/detail?id=39" |
||||
|
}, |
||||
|
{ |
||||
|
text: '购物车', |
||||
|
targetIndex: 7, |
||||
|
path: "/subPackages/user/gwc" |
||||
|
} |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
navIndex(newVal) { |
||||
|
console.log(newVal) |
||||
|
if(newVal) this.navIndex = newVal |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onShowMenu() { |
||||
|
this.iconRotated = true; |
||||
|
setTimeout(() => { |
||||
|
this.showMenu = true; |
||||
|
this.$emit('menu-show'); |
||||
|
}, 300); |
||||
|
}, |
||||
|
onCloseMenu() { |
||||
|
this.showMenu = false; |
||||
|
setTimeout(() => { |
||||
|
this.iconBounceBack = true; |
||||
|
this.iconRotated = false; |
||||
|
setTimeout(() => { |
||||
|
this.iconBounceBack = false; |
||||
|
}, 500); |
||||
|
}, 300); |
||||
|
this.$emit('menu-hide'); |
||||
|
}, |
||||
|
onJumpToPage(item) { |
||||
|
console.log(this.navIndex) |
||||
|
if(item.path && item.targetIndex != this.navIndex) this.gotoPath(item.path) |
||||
|
this.onCloseMenu(); |
||||
|
}, |
||||
|
isItemActive(item) { |
||||
|
return this.navIndex === item.targetIndex; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.fixed-nav { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
background-color: rgb(0 0 0 / 0.7); |
||||
|
border-radius: 10rpx 0 0 10rpx; |
||||
|
position: fixed; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 9; |
||||
|
transition: transform 0.3s ease, opacity 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.fixed-nav.hidden { |
||||
|
transform: translateX(100%); |
||||
|
opacity: 0; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.nav-icon { |
||||
|
width: 35rpx; |
||||
|
height: 35rpx; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nav-icon.rotated { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.nav-icon.bounce-back { |
||||
|
animation: bounceRotation 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
@keyframes bounceRotation { |
||||
|
0% { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
transform: rotate(-20deg); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
transform: rotate(10deg); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav-menu { |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
right: 0; |
||||
|
transform: translate(100%, -50%); |
||||
|
z-index: 999; |
||||
|
background-color: rgba(255, 255, 255, 0.95); |
||||
|
border-radius: 16rpx 0 0 16rpx; |
||||
|
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1); |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nav-menu.show { |
||||
|
transform: translate(0, -50%); |
||||
|
} |
||||
|
|
||||
|
.nav-item { |
||||
|
padding: 20rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
text { |
||||
|
color: #333; |
||||
|
opacity: 0.7; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-active { |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.nav-item .active { |
||||
|
color: #333; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.chapter-text { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
|
||||
|
.chapter-title { |
||||
|
color: #fff; |
||||
|
opacity: 0.7; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.chapter-number { |
||||
|
color: #fff; |
||||
|
opacity: 0.7; |
||||
|
font-size: 28rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.item-active .chapter-title, |
||||
|
.item-active .chapter-number.active { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<view class="gif-container"> |
||||
|
<view class="dynamic-container"> |
||||
|
<image |
||||
|
:src="gifSrc" |
||||
|
mode="widthFix" |
||||
|
class="gif-image" |
||||
|
:style="{ display: isPlaying ? 'block' : 'none' }" |
||||
|
@load="startGifPlay" |
||||
|
></image> |
||||
|
<image |
||||
|
:src="staticCover" |
||||
|
mode="widthFix" |
||||
|
class="gif-image" |
||||
|
:style="{ display: isPlaying ? 'none' : 'block' }" |
||||
|
></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
// GIF图片路径 |
||||
|
gifSrc: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
// 静态封面图 |
||||
|
staticCover: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// GIF播放时长(毫秒) |
||||
|
duration: { |
||||
|
type: Number, |
||||
|
default: 2000 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isPlaying: false, |
||||
|
playTimer: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 开始播放GIF |
||||
|
startGifPlay() { |
||||
|
this.isPlaying = true; |
||||
|
|
||||
|
// 清除之前的定时器 |
||||
|
if (this.playTimer) { |
||||
|
clearTimeout(this.playTimer); |
||||
|
} |
||||
|
|
||||
|
// 播放完成后显示静态封面 |
||||
|
this.playTimer = setTimeout(() => { |
||||
|
this.isPlaying = false; |
||||
|
}, this.duration); |
||||
|
} |
||||
|
}, |
||||
|
onUnload() { |
||||
|
// 页面卸载时清除定时器 |
||||
|
if (this.playTimer) { |
||||
|
clearTimeout(this.playTimer); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.gif-container { |
||||
|
width: 100vw; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.gif-image { |
||||
|
width: 100vw; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.dynamic-container { |
||||
|
position: relative; |
||||
|
width: 100vw; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.dynamic-container image { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,171 @@ |
|||||
|
<template> |
||||
|
<view style="width: 100vw;"> |
||||
|
<!-- <SinglePlayGif |
||||
|
gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif" |
||||
|
staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png" |
||||
|
duration="5000" |
||||
|
/> --> |
||||
|
<!-- 触底方法跳转页面组件 --> |
||||
|
<SwipeToNext |
||||
|
:is-last-slide="isLastSlide" |
||||
|
:always-enable="swiperImages.length === 1" |
||||
|
:target-path="'/xqk/chapter1/index'" |
||||
|
:enable-delay="swiperImages.length > 1" |
||||
|
@swipe-to-next="handleSwipeToNext" |
||||
|
> |
||||
|
<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})` }"> |
||||
|
|
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</SwipeToNext> |
||||
|
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
||||
|
|
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import SinglePlayGif from '../components/SinglePlayGif.vue'; |
||||
|
import NavMenu from '../components/NavMenu.vue'; |
||||
|
import SwipeToNext from '@/components/SwipeToNext.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
MusicControl, |
||||
|
SinglePlayGif, |
||||
|
NavMenu, |
||||
|
SwipeToNext |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isPlaying: false, |
||||
|
playTimer: null, |
||||
|
duration: 5000, |
||||
|
currentIndex: 0, |
||||
|
navIndex: 0, |
||||
|
swiperImages: [ |
||||
|
this.showImg('/uploads/20250903/b4f601dee7b4ad1b42c878fd54693c92.png'), |
||||
|
// this.showImg('/uploads/20250903/24303e4b7218eaf3d857c846417eb490.png'), |
||||
|
// this.showImg('/uploads/20250903/17495ef65648c64c31920d312301e991.png'), |
||||
|
// this.showImg('/uploads/20250903/92d6f1c6f8f7de040f3c31c8faf98927.png'), |
||||
|
], |
||||
|
isLastSlide: false // 是否在最后一页 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.currentIndex = option.currentIndex || 0 |
||||
|
// 对于单张图片或初始在最后一页的情况 |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 1; |
||||
|
this.isLastSlide = true; |
||||
|
} |
||||
|
// 如果只有一张图片，也认为是最后一页 |
||||
|
if (this.swiperImages.length === 1) { |
||||
|
this.isLastSlide = true; |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
const app = getApp(); |
||||
|
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3'); |
||||
|
app.initBackgroundMusic(); // 初始化背景音乐 |
||||
|
uni.$bgMusic.play(); // 播放音乐 |
||||
|
}, |
||||
|
methods: { |
||||
|
handleJumpToPage(idx) { |
||||
|
this.navIndex = idx |
||||
|
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
||||
|
}, |
||||
|
handleSwiperChange(e) { |
||||
|
console.log(e); |
||||
|
this.currentIndex = e.detail.current; |
||||
|
if (this.currentIndex == this.swiperImages.length - 1) { |
||||
|
this.navIndex = 1; |
||||
|
// 判断是否切换到最后一页 |
||||
|
this.isLastSlide = true; |
||||
|
} else { |
||||
|
this.navIndex = 0; |
||||
|
this.isLastSlide = false; |
||||
|
} |
||||
|
}, |
||||
|
// 处理滑动跳转事件 |
||||
|
handleSwipeToNext(targetPath) { |
||||
|
console.log('收到滑动跳转事件，目标路径:', targetPath); |
||||
|
// 可以在这里添加额外的逻辑，比如数据统计等 |
||||
|
}, |
||||
|
// <!--微信分享配置-- > |
||||
|
// #ifdef MP-WEIXIN |
||||
|
onShareAppMessage() { |
||||
|
return { |
||||
|
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', |
||||
|
mpId: 'wx8954209bb3ad489e', |
||||
|
path: '/xrcc/home/home', |
||||
|
imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg') |
||||
|
}; |
||||
|
}, |
||||
|
onShareTimeline() { |
||||
|
return { |
||||
|
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', |
||||
|
query: '', |
||||
|
imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg') |
||||
|
}; |
||||
|
} |
||||
|
// #endif |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.swiper { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.swiper-item { |
||||
|
/* 新增安全区域适配 */ |
||||
|
padding-top: env(safe-area-inset-top); |
||||
|
/* 顶部安全距离 */ |
||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||
|
/* 底部安全距离 */ |
||||
|
box-sizing: border-box; |
||||
|
/* 修改背景尺寸为覆盖模式 */ |
||||
|
background-size: cover; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
// background-size: 100% auto; |
||||
|
background-position: center center; |
||||
|
background-color: #000; |
||||
|
background-repeat: no-repeat; |
||||
|
position: relative; |
||||
|
|
||||
|
.img1-text { |
||||
|
position: absolute; |
||||
|
width: 632.16rpx; |
||||
|
top: 170rpx; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.img4-text { |
||||
|
position: absolute; |
||||
|
width: 476.36rpx; |
||||
|
top: 170rpx; |
||||
|
left: 84rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-img { |
||||
|
position: absolute; |
||||
|
width: 149.8rpx; |
||||
|
bottom: 290rpx; |
||||
|
left: 84rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-img { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue