chenkainan
4 months ago
12 changed files with 2906 additions and 123 deletions
@ -0,0 +1,118 @@ |
|||
// utils/request.js
|
|||
|
|||
/** |
|||
* 封装请求函数 |
|||
* @param {Object} options - 请求选项 |
|||
* @param {string} options.url - 请求URL |
|||
* @param {string} options.method - 请求方法: GET, POST, PUT, DELETE |
|||
* @param {Object} options.data - 请求参数 |
|||
* @param {Object} options.header - 请求头 |
|||
* @returns {Promise} - 返回Promise对象 |
|||
*/ |
|||
export const request = (options = {}) => { |
|||
return new Promise((resolve, reject) => { |
|||
// 默认配置
|
|||
const defaultOptions = { |
|||
url: '', |
|||
method: 'GET', |
|||
data: {}, |
|||
header: { |
|||
'content-type': 'application/json' |
|||
}, |
|||
timeout: 10000 // 10秒超时
|
|||
}; |
|||
|
|||
// 合并配置
|
|||
const mergedOptions = {...defaultOptions, ...options}; |
|||
|
|||
// 处理URL
|
|||
if (!mergedOptions.url) { |
|||
reject(new Error('URL不能为空')); |
|||
return; |
|||
} |
|||
|
|||
// 调用uni.request
|
|||
uni.request({ |
|||
url: mergedOptions.url, |
|||
method: mergedOptions.method, |
|||
data: mergedOptions.data, |
|||
header: mergedOptions.header, |
|||
timeout: mergedOptions.timeout, |
|||
success: (res) => { |
|||
// 请求成功
|
|||
if (res.statusCode >= 200 && res.statusCode < 300) { |
|||
resolve(res.data); |
|||
} else { |
|||
// 服务器返回错误
|
|||
reject({ |
|||
statusCode: res.statusCode, |
|||
errMsg: `请求失败，状态码: ${res.statusCode}`, |
|||
data: res.data |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
// 请求失败
|
|||
reject(err); |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* GET请求快捷方法 |
|||
* @param {string} url - 请求URL |
|||
* @param {Object} data - 请求参数 |
|||
* @param {Object} options - 其他选项 |
|||
*/ |
|||
export const get = (url, data = {}, options = {}) => { |
|||
return request({ |
|||
url, |
|||
method: 'GET', |
|||
data, |
|||
...options |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* POST请求快捷方法 |
|||
* @param {string} url - 请求URL |
|||
* @param {Object} data - 请求参数 |
|||
* @param {Object} options - 其他选项 |
|||
*/ |
|||
export const post = (url, data = {}, options = {}) => { |
|||
return request({ |
|||
url, |
|||
method: 'POST', |
|||
data, |
|||
...options |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 上传文件快捷方法 |
|||
* @param {string} url - 上传URL |
|||
* @param {string} filePath - 文件路径 |
|||
* @param {string} name - 文件对应的key |
|||
* @param {Object} formData - 附加的表单数据 |
|||
*/ |
|||
export const uploadFile = (url, filePath, name = 'file', formData = {}) => { |
|||
return new Promise((resolve, reject) => { |
|||
uni.uploadFile({ |
|||
url, |
|||
filePath, |
|||
name, |
|||
formData, |
|||
success: (res) => { |
|||
try { |
|||
// 尝试解析JSON
|
|||
const data = JSON.parse(res.data); |
|||
resolve(data); |
|||
} catch (e) { |
|||
resolve(res.data); |
|||
} |
|||
}, |
|||
fail: reject |
|||
}); |
|||
}); |
|||
}; |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<view class="chapter-cover"> |
|||
<image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image> |
|||
<view class="five-senses-content" @click="goFeel"> |
|||
<view class="box1"></view> |
|||
<view class="senses-txt"> |
|||
触觉 |
|||
</view> |
|||
</view> |
|||
<view class="five-senses-content vision" @click="goVision"> |
|||
<view class="box1"></view> |
|||
<view class="senses-txt"> |
|||
视觉 |
|||
</view> |
|||
</view> |
|||
<view class="five-senses-content hearing" @click="goHearing"> |
|||
<view class="box1"></view> |
|||
<view class="senses-txt"> |
|||
听觉 |
|||
</view> |
|||
</view> |
|||
<view class="five-senses-content olfactory" @click="goOlfactory"> |
|||
<view class="box1"></view> |
|||
<view class="senses-txt"> |
|||
嗅觉 |
|||
</view> |
|||
</view> |
|||
<view class="five-senses-content gustation" @click="goGustation"> |
|||
<view class="box1"></view> |
|||
<view class="senses-txt"> |
|||
味觉 |
|||
</view> |
|||
</view> |
|||
<image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image> |
|||
</view> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
const goback = ()=>{ |
|||
uni.navigateBack({ |
|||
delta:1 |
|||
}) |
|||
} |
|||
const goFeel = ()=>{ |
|||
uni.navigateTo({ |
|||
url:'/pages/chapter1/detail1' |
|||
}) |
|||
} |
|||
const goVision = ()=>{ |
|||
uni.navigateTo({ |
|||
url:'/pages/chapter1/detail2' |
|||
}) |
|||
} |
|||
const goHearing = ()=>{ |
|||
uni.navigateTo({ |
|||
url:'/pages/chapter1/detail3' |
|||
}) |
|||
} |
|||
const goOlfactory = ()=>{ |
|||
uni.navigateTo({ |
|||
url:'/pages/chapter1/detail4' |
|||
}) |
|||
} |
|||
const goGustation = ()=>{ |
|||
uni.navigateTo({ |
|||
url:'/pages/chapter1/detail5' |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.chapter-cover { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: relative; |
|||
} |
|||
|
|||
.cover-img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
.five-senses-content{ |
|||
position: absolute; |
|||
top: 32%; |
|||
right: 28%; |
|||
z-index: 2; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
.vision{ |
|||
top: 54% !important; |
|||
right: 47% !important; |
|||
} |
|||
.hearing{ |
|||
top: 62% !important; |
|||
right: 8% !important; |
|||
} |
|||
.olfactory{ |
|||
top: 64% !important; |
|||
right: 76% !important; |
|||
} |
|||
.gustation{ |
|||
top: 73% !important; |
|||
right: 86% !important; |
|||
} |
|||
.box1{ |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
opacity: 0.4; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.senses-txt{ |
|||
font-size: 24rpx; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
margin-top: 20rpx; |
|||
} |
|||
.btn{ |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 11%; |
|||
transform: translate(-50%,-50%); |
|||
z-index: 2; |
|||
width: 280rpx; |
|||
height: 60rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/feel.png" mode="" |
|||
:lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(0)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/feel2.png" |
|||
mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]"> |
|||
<image class="feel2-img" src="/static/images/chapter1/feel2-img.png" mode="" :lazy-load="true"> |
|||
</image> |
|||
</view> |
|||
<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" |
|||
mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const isVisible = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了 |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
// 显示当前页和前后各preloadBuffer页 |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 更新动画状态 |
|||
isVisible.value = newIndex === 1; |
|||
}, { |
|||
immediate: true |
|||
}); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化时标记第一页和相邻页为已加载 |
|||
loadedPages[0] = true; |
|||
// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载 |
|||
if (preloadBuffer >= 1) { |
|||
loadedPages[1] = true; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.animate-content { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 18%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
filter: blur(5px); |
|||
transition: opacity 0.6s ease-out 0.2s, |
|||
transform 0.6s ease-out 0.2s, |
|||
filter 0.6s ease-out 0.2s; |
|||
} |
|||
|
|||
.animate-visible { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
filter: blur(0px); |
|||
} |
|||
|
|||
|
|||
.feel2-img { |
|||
width: 89%; |
|||
height: 248rpx; |
|||
} |
|||
|
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 5%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 180rpx; |
|||
height: 56rpx; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/vision.png" |
|||
mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(0)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/vision2.png" |
|||
mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]"> |
|||
<image class="feel2-img" src="/static/images/chapter1/vision2-img.png" mode="" |
|||
:lazy-load="true"></image> |
|||
</view> |
|||
<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" |
|||
mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const isVisible = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了 |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
// 显示当前页和前后各preloadBuffer页 |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 更新动画状态 |
|||
isVisible.value = newIndex === 1; |
|||
}, { |
|||
immediate: true |
|||
}); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化时标记第一页和相邻页为已加载 |
|||
loadedPages[0] = true; |
|||
// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载 |
|||
if (preloadBuffer >= 1) { |
|||
loadedPages[1] = true; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.animate-content { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 16%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
filter: blur(5px); |
|||
transition: opacity 0.6s ease-out 0.2s, |
|||
transform 0.6s ease-out 0.2s, |
|||
filter 0.6s ease-out 0.2s; |
|||
} |
|||
|
|||
.animate-visible { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
filter: blur(0px); |
|||
} |
|||
|
|||
|
|||
.feel2-img { |
|||
width: 89%; |
|||
height: 248rpx; |
|||
} |
|||
|
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 5%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 180rpx; |
|||
height: 56rpx; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/hearing.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(0)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/hearing2.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]"> |
|||
<image class="feel2-img" src="/static/images/chapter1/hearing2-img.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const isVisible = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
// 显示当前页和前后各preloadBuffer页 |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 更新动画状态 |
|||
isVisible.value = newIndex === 1; |
|||
}, { immediate: true }); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化时标记第一页和相邻页为已加载 |
|||
loadedPages[0] = true; |
|||
|
|||
// 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载 |
|||
if(preloadBuffer >= 1) { |
|||
loadedPages[1] = true; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.animate-content { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 16%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
filter: blur(5px); |
|||
transition: opacity 0.6s ease-out 0.2s, |
|||
transform 0.6s ease-out 0.2s, |
|||
filter 0.6s ease-out 0.2s; |
|||
} |
|||
|
|||
.animate-visible { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
filter: blur(0px); |
|||
} |
|||
|
|||
|
|||
.feel2-img { |
|||
width: 89%; |
|||
height: 228rpx; |
|||
} |
|||
|
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 5%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 180rpx; |
|||
height: 56rpx; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/olfactory.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(0)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/olfactory2.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]"> |
|||
<image class="feel2-img" src="/static/images/chapter1/olfactory2-img.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[2]"> |
|||
<image v-show="shouldShowContent(2)" class="bg-image" src="/static/images/chapter1/olfactory4.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(2)" :class="['animate-content2', {'animate-visible': isVisible2}]"> |
|||
<image class="feel4-img" src="/static/images/chapter1/olfactory4-img.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[3]"> |
|||
<image v-show="shouldShowContent(3)" class="bg-image" src="/static/images/chapter1/olfactory3.png" mode="" :lazy-load="true"></image> |
|||
<image v-show="shouldShowContent(3)" class="feel3-img" src="/static/images/chapter1/olfactory3-img.png" mode="" :lazy-load="true"></image> |
|||
<image v-show="shouldShowContent(3)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const isVisible = ref(false); |
|||
const isVisible2 = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
// 显示当前页和前后各preloadBuffer页 |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 更新动画状态 |
|||
isVisible.value = newIndex === 1; |
|||
isVisible2.value = newIndex === 2; |
|||
}, { immediate: true }); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
const app = getApp(); |
|||
app.globalData.mainSliderIndex = 3; |
|||
uni.navigateTo({ |
|||
url: '/pages/home/home' |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化时标记第一页和相邻页为已加载 |
|||
loadedPages[0] = true; |
|||
|
|||
// 预加载第二页 |
|||
if(preloadBuffer >= 1) { |
|||
loadedPages[1] = true; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.animate-content2 { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 25%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
filter: blur(5px); |
|||
transition: opacity 0.6s ease-out 0.2s, |
|||
transform 0.6s ease-out 0.2s, |
|||
filter 0.6s ease-out 0.2s; |
|||
} |
|||
|
|||
.animate-content { |
|||
position: absolute; |
|||
left: 6%; |
|||
top: 32%; |
|||
width: 100%; |
|||
display: flex; |
|||
z-index: 2; |
|||
/* 初始状态 */ |
|||
opacity: 0; |
|||
transform: translateX(-50px) scale(0.95); |
|||
filter: blur(2px); |
|||
/* 过渡效果 */ |
|||
transition: opacity 0.7s ease-out 0.3s, |
|||
transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, |
|||
filter 0.6s ease-out 0.3s; |
|||
} |
|||
|
|||
.animate-visible { |
|||
opacity: 1; |
|||
transform: translateX(0) scale(1); |
|||
filter: blur(0); |
|||
} |
|||
|
|||
|
|||
.feel2-img { |
|||
width: 300rpx; |
|||
} |
|||
|
|||
.feel3-img { |
|||
width: 100%; |
|||
height: 650rpx; |
|||
z-index: 2; |
|||
position: relative |
|||
} |
|||
.feel4-img{ |
|||
width: 100%; |
|||
height: 400rpx; |
|||
} |
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 5%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 270rpx; |
|||
height: 60rpx; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/gustation.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(0)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/gustation2.png" mode="" :lazy-load="true"></image> |
|||
<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]"> |
|||
<image class="feel2-img" src="/static/images/chapter1/gustation2-img.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const isVisible = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
// 显示当前页和前后各preloadBuffer页 |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 更新动画状态 |
|||
isVisible.value = newIndex === 1; |
|||
}, { immediate: true }); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化时标记第一页和相邻页为已加载 |
|||
loadedPages[0] = true; |
|||
|
|||
// 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载 |
|||
if(preloadBuffer >= 1) { |
|||
loadedPages[1] = true; |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.animate-content { |
|||
position: absolute; |
|||
right: 6%; |
|||
top: 24%; |
|||
display: flex; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
filter: blur(5px); |
|||
transition: opacity 0.6s ease-out 0.2s, |
|||
transform 0.6s ease-out 0.2s, |
|||
filter 0.6s ease-out 0.2s; |
|||
} |
|||
|
|||
.animate-visible { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
filter: blur(0px); |
|||
} |
|||
|
|||
|
|||
.feel2-img { |
|||
width: 310rpx; |
|||
height: 410rpx; |
|||
} |
|||
|
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 5%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 180rpx; |
|||
height: 56rpx; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,201 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<!-- 主swiper的第一个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[0]"> |
|||
<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter2/cover2.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 主swiper的第二个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[1]"> |
|||
<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter2/cover3.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 主swiper的第三个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[2]"> |
|||
<image v-show="shouldShowContent(2)" class="bg-image" src="/static/images/chapter2/cover4.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 主swiper的第四个item（包含嵌套swiper） --> |
|||
<swiper-item> |
|||
<!-- 当主swiper的第四个item被加载时才加载嵌套swiper --> |
|||
<template v-if="loadedPages[3]"> |
|||
<swiper v-show="shouldShowContent(3)" class="nested-swiper" :vertical="true" :duration="300" @change="handleVerticalChange" :current="verticalIndex"> |
|||
<!-- 嵌套swiper的第一个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedNestedPages[0]"> |
|||
<image v-show="shouldShowNestedContent(0)" class="bg-image" src="/static/images/chapter2/cover5.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 嵌套swiper的第二个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedNestedPages[1]"> |
|||
<image v-show="shouldShowNestedContent(1)" class="bg-image" src="/static/images/chapter2/cover6.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 嵌套swiper的第三个item --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedNestedPages[2]"> |
|||
<image v-show="shouldShowNestedContent(2)" class="bg-image" src="/static/images/chapter2/cover7.png" mode="" :lazy-load="true"></image> |
|||
<image v-show="shouldShowNestedContent(2)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</template> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
const currentIndex = ref(0); |
|||
const verticalIndex = ref(0); |
|||
|
|||
// 记录主swiper哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false |
|||
}); |
|||
|
|||
// 记录嵌套swiper哪些页面已经加载过 |
|||
const loadedNestedPages = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false |
|||
}); |
|||
|
|||
// 预加载缓冲区大小 |
|||
const preloadBuffer = 1; |
|||
const nestedPreloadBuffer = 1; |
|||
|
|||
// 决定是否应该显示主swiper特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 决定是否应该显示嵌套swiper特定页面的内容 |
|||
const shouldShowNestedContent = (index) => { |
|||
return Math.abs(index - verticalIndex.value) <= nestedPreloadBuffer; |
|||
}; |
|||
|
|||
// 监听主swiper currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 当切换到第4个item时，初始化嵌套swiper的加载状态 |
|||
if (newIndex === 3) { |
|||
loadedNestedPages[0] = true; |
|||
if (nestedPreloadBuffer >= 1) { |
|||
loadedNestedPages[1] = true; |
|||
} |
|||
} |
|||
}, { immediate: true }); |
|||
|
|||
// 监听嵌套swiper verticalIndex变化，更新已加载页面状态 |
|||
watch(verticalIndex, (newIndex) => { |
|||
// 只有当主swiper在第4个item时才更新嵌套swiper状态 |
|||
if (currentIndex.value === 3) { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - nestedPreloadBuffer); i <= Math.min(2, newIndex + nestedPreloadBuffer); i++) { |
|||
loadedNestedPages[i] = true; |
|||
} |
|||
} |
|||
}, { immediate: true }); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const handleVerticalChange = (e) => { |
|||
verticalIndex.value = e.detail.current; |
|||
}; |
|||
|
|||
const goback = () => { |
|||
const app = getApp(); |
|||
app.globalData.mainSliderIndex = 4; |
|||
uni.navigateTo({ |
|||
url: '/pages/home/home' |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化主swiper，标记第一页和相邻页为已加载 |
|||
currentIndex.value = 0; |
|||
for (let i = 0; i <= Math.min(preloadBuffer, 3); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
|
|||
// 初始化嵌套swiper的第一页为已加载（以防万一） |
|||
verticalIndex.value = 0; |
|||
loadedNestedPages[0] = true; |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.nested-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 12%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 250rpx; |
|||
height: 60rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,276 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex"> |
|||
<swiper class="nested-swiper" :duration="300" @change="(e) => handleVerticalChange(e, outerIndex)" |
|||
:current="nestedIndices[outerIndex]"> |
|||
<!-- 嵌套swiper的第一个item（封面页） --> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}.png`" mode="" |
|||
:lazy-load="true"></image> |
|||
<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" |
|||
:src="`/static/images/chapter3/cover${outerIndex+2}-txt.png`" mode="" :lazy-load="true"> |
|||
</image> |
|||
<image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image> |
|||
</view> |
|||
</swiper-item> |
|||
<!-- 嵌套swiper的第二个item--> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<view class="gif-container"> |
|||
<image v-if="shouldLoadContent(outerIndex)" class="gif-style" |
|||
:src="`/static/3-${outerIndex+1}-2.gif`" mode="aspectFill" :lazy-load="true"> |
|||
</image> |
|||
</view> |
|||
|
|||
<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}-1.png`" mode="" |
|||
:lazy-load="true"></image> |
|||
<view class="qrcode-content"> |
|||
<image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image> |
|||
<view class="code-txt"> |
|||
扫码下单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image> |
|||
<image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode="" |
|||
:lazy-load="true"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
onMounted, |
|||
onUnmounted, |
|||
watch, |
|||
computed |
|||
} from 'vue'; |
|||
|
|||
const currentIndex = ref(0); |
|||
|
|||
// 嵌套swiper索引 |
|||
const nestedIndices = reactive({ |
|||
0: 0, |
|||
1: 0, |
|||
2: 0, |
|||
3: 0, |
|||
4: 0, |
|||
5: 0, |
|||
6: 0 |
|||
}); |
|||
|
|||
// 当前活跃的页面，用于内容加载判断 |
|||
const activePages = reactive({ |
|||
mainIndex: 0, |
|||
nestedIndices: { |
|||
0: 0, |
|||
1: 0, |
|||
2: 0, |
|||
3: 0, |
|||
4: 0, |
|||
5: 0, |
|||
6: 0 |
|||
} |
|||
}); |
|||
|
|||
// 预加载缓冲区大小 |
|||
const preloadBuffer = 2; |
|||
|
|||
const shouldLoadContent = (outerIndex) => { |
|||
// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载 |
|||
return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer && |
|||
(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1); |
|||
}; |
|||
|
|||
// 主swiper切换事件处理 |
|||
const handleSwiperChange = (e) => { |
|||
currentIndex.value = e.detail.current; |
|||
activePages.mainIndex = e.detail.current; |
|||
}; |
|||
|
|||
// 嵌套swiper切换事件处理 |
|||
const handleVerticalChange = (e, outerIndex) => { |
|||
nestedIndices[outerIndex] = e.detail.current; |
|||
activePages.nestedIndices[outerIndex] = e.detail.current; |
|||
}; |
|||
|
|||
const goRandomImage = () => { |
|||
const imageArray = [{ |
|||
id: 1, |
|||
image: '/static/images/chapter3/random/image1.png', |
|||
name: '雏菊', |
|||
desc: '宋 丛菊图页' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
image: '/static/images/chapter3/random/image2.png', |
|||
name: '杜鹃', |
|||
desc: '清 恽寿平 花卉十开 杜鹃' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
image: '/static/images/chapter3/random/image3.png', |
|||
name: '金桂', |
|||
desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
image: '/static/images/chapter3/random/image4.png', |
|||
name: '绿梅', |
|||
desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏' |
|||
}, |
|||
{ |
|||
id: 5, |
|||
image: '/static/images/chapter3/random/image5.png', |
|||
name: '墨兰', |
|||
desc: '宋 秋兰绽蕊图' |
|||
}, |
|||
{ |
|||
id: 6, |
|||
image: '/static/images/chapter3/random/image6.png', |
|||
name: '茉莉', |
|||
desc: '宋 茉莉花图页' |
|||
}, |
|||
{ |
|||
id: 7, |
|||
image: '/static/images/chapter3/random/image7.png', |
|||
name: '青莲', |
|||
desc: '宋 出水芙蓉图页' |
|||
}, |
|||
]; |
|||
|
|||
const app = getApp(); |
|||
app.globalData.randomImages = imageArray; |
|||
uni.setStorageSync('randomImages', JSON.stringify(imageArray)); |
|||
uni.navigateTo({ |
|||
url: '/pages/chapter3/randomImage' |
|||
}); |
|||
}; |
|||
|
|||
const goback = () => { |
|||
const app = getApp(); |
|||
app.globalData.mainSliderIndex = 4; |
|||
uni.redirectTo({ |
|||
url: '/pages/home/home' |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 初始化状态 |
|||
currentIndex.value = 0; |
|||
activePages.mainIndex = 0; |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.nested-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.cover-txt { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 22%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 74%; |
|||
height: 122rpx; |
|||
} |
|||
|
|||
.cover-txt2 { |
|||
width: 60% !important; |
|||
height: 134rpx !important; |
|||
} |
|||
|
|||
.cover-txt9 { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
transform: translate(-50%, -20%); |
|||
z-index: 2; |
|||
width: 360rpx; |
|||
height: 280rpx; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 16%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 2; |
|||
width: 244rpx; |
|||
height: 60rpx; |
|||
} |
|||
|
|||
.qrcode-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
transform: translate(-50%, -25%); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.qrCode { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
} |
|||
|
|||
.code-txt { |
|||
color: #333; |
|||
font-size: 24rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.gif-container { |
|||
background: #333333; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 400rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.gif-style { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="random-image-container"> |
|||
<RandomImage :images="randomImages" ref="randomImageRef" /> |
|||
<image @click="goBack" class="back-icon" src="/static/back.png" mode=""></image> |
|||
<image class="save-icon" src="/static/save-btn.png" mode=""></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
onMounted, |
|||
nextTick |
|||
} from 'vue'; |
|||
import RandomImage from '../../components/chapter3/RandomImage.vue'; |
|||
|
|||
// 获取传递的图片数组 |
|||
const randomImages = ref([]); |
|||
const randomImageRef = ref(null); |
|||
onMounted(() => { |
|||
// 尝试从本地存储获取 |
|||
let storedImages = uni.getStorageSync('randomImages'); |
|||
|
|||
// 检查全局数据 |
|||
const app = getApp(); |
|||
|
|||
if (storedImages) { |
|||
// 从本地存储恢复 |
|||
randomImages.value = JSON.parse(storedImages); |
|||
} else if (app.globalData && app.globalData.randomImages) { |
|||
// 从全局数据获取 |
|||
randomImages.value = app.globalData.randomImages; |
|||
} else { |
|||
// 使用默认图片数组 |
|||
randomImages.value = [ |
|||
'/static/images/chapter3/random/image1.png', |
|||
'/static/images/chapter3/random/image2.png', |
|||
'/static/images/chapter3/random/image3.png', |
|||
'/static/images/chapter3/random/image4.png', |
|||
'/static/images/chapter3/random/image5.png', |
|||
'/static/images/chapter3/random/image6.png', |
|||
'/static/images/chapter3/random/image7.png' |
|||
]; |
|||
} |
|||
|
|||
// 等待组件挂载完成 |
|||
nextTick(() => { |
|||
if (randomImageRef.value && randomImageRef.value.selectRandomImage) { |
|||
randomImageRef.value.selectRandomImage(); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
|
|||
// 返回第三章封面 |
|||
const goBack = () => { |
|||
const app = getApp(); |
|||
app.globalData.mainSliderIndex = 4; // 第三章封面的索引 |
|||
uni.navigateTo({ |
|||
url: '/pages/home/home' |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.random-image-container { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
left: 40rpx; |
|||
top: 40rpx; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.save-icon { |
|||
width: 340rpx; |
|||
height: 60rpx; |
|||
position: absolute; |
|||
left: 50%; |
|||
z-index: 10; |
|||
bottom: 14%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,880 @@ |
|||
<template> |
|||
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|||
<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex"> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[outerIndex]"> |
|||
<image v-show="shouldShowContent(outerIndex)" class="bg-image" |
|||
:src="`/static/images/chapter4/detail${outerIndex+1}/cover-bg.png`" mode="" :lazy-load="true"> |
|||
</image> |
|||
|
|||
<view v-show="shouldShowContent(outerIndex)" class="content-layer"> |
|||
<swiper class="image-swiper" circular :indicator-dots="false" |
|||
@change="(e) => handleImageSwiperChange(e, outerIndex)" :autoplay="false" |
|||
:current="innerSwiperIndices[outerIndex]" :key="`inner-swiper-${outerIndex}`"> |
|||
<swiper-item v-for="index in 7" :key="index"> |
|||
<view class="swiper-item-container"> |
|||
<view class="image-wrapper" :class="{'selected-image': selectedImages[outerIndex] === index-1 && userSelected[outerIndex], |
|||
'image-wrapper-full': [0, 3, 5, 6].includes(outerIndex), |
|||
'image-wrapper-compact': [1, 2, 4].includes(outerIndex) |
|||
}" @click="selectImage(outerIndex, index-1)"> |
|||
<image |
|||
:src="`/static/images/chapter4/detail${outerIndex+1}/swiper-img${index}.png`" |
|||
class="swiper-image" mode="aspectFit" :lazy-load="true" /> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 自定义指示器 --> |
|||
<view class="indicator-container"> |
|||
<view v-for="index in 7" :key="index" class="indicator-dot" |
|||
:class="{ 'active': innerSwiperIndices[outerIndex] === index - 1 }" |
|||
@click="() => changeSlide(index - 1, outerIndex)"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-show="shouldShowContent(outerIndex)" class="content-layer2"> |
|||
<!-- 点击确认找一找相似度 按钮 --> |
|||
<image @click="findSimilarity(outerIndex)" class="find-btn" src="/static/find-btn.png" |
|||
:lazy-load="true" mode=""></image> |
|||
<view class="problem-description"> |
|||
<view class="proportion-txt" :class="{ |
|||
'proportion-txt-position': outerIndex === 0, |
|||
'proportion-txt-position2': outerIndex === 1, |
|||
'proportion-txt-position3': outerIndex === 2, |
|||
'proportion-txt-position4': outerIndex === 3, |
|||
'proportion-txt-position5': outerIndex === 4, |
|||
'proportion-txt-position6': outerIndex === 5, |
|||
'proportion-txt-position7': outerIndex === 6 |
|||
}"> |
|||
{{ percentages[outerIndex]}} |
|||
</view> |
|||
<image class="description-txt" |
|||
:class="{'description-txt6': outerIndex === 5,'description-txt7': outerIndex === 6}" |
|||
:src="`/static/images/chapter4/detail${outerIndex+1}/cover-txt.png`" :lazy-load="true" |
|||
mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-show="shouldShowContent(outerIndex)" class="arrow-content"> |
|||
<image class="arrow-down" src="/static/arrow-icon-black.png" :lazy-load="true" mode=""></image> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item> |
|||
<view class="page-container home-page"> |
|||
<template v-if="loadedPages[7]"> |
|||
<image v-show="shouldShowContent(7)" class="bg-image" |
|||
src="/static/images/chapter4/harvestReport/cover-bg.png" :lazy-load="true" mode=""></image> |
|||
<view v-show="shouldShowContent(7)" class="harvestReport-layer"> |
|||
<view class="grid-cover img-shadow"> |
|||
<image class="grid-cover-bg" src="/static/images/chapter4/harvestReport/cover-grid.png" |
|||
:lazy-load="true" mode=""></image> |
|||
<view class="report-text-overlay" v-if="canAccessFinalReport"> |
|||
<view class="report-title">您的气味收获</view> |
|||
<view class="report-content"> |
|||
<view v-for="(item, index) in selectedResults" :key="index" class="result-item"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<image @click="ShareMoments" class="chapter4-btn" src="/static/images/chapter4/share-img.png" |
|||
:lazy-load="true" mode=""></image> |
|||
</view> |
|||
<image @click="goBack" class="back-icon" src="/static/back.png" mode=""></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
<ShareGuide v-model="showShareGuide" :text="['点击右上角...', '选择分享到朋友圈']" @close="onShareGuideClose" /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
reactive, |
|||
computed, |
|||
onMounted, |
|||
watch |
|||
} from 'vue'; |
|||
|
|||
import { |
|||
onShow, |
|||
onHide, |
|||
onShareAppMessage, |
|||
onShareTimeline |
|||
} from '@dcloudio/uni-app'; |
|||
import ShareGuide from '@/components/ShareGuide.vue'; |
|||
// import { |
|||
// request |
|||
// } from '@/utils/request'; |
|||
const showShareGuide = ref(false); |
|||
const currentIndex = ref(0); |
|||
|
|||
// 为每个外部轮播项维护独立的内部轮播索引 |
|||
const innerSwiperIndices = reactive({ |
|||
0: 0, |
|||
1: 0, |
|||
2: 0, |
|||
3: 0, |
|||
4: 0, |
|||
5: 0, |
|||
6: 0, |
|||
}); |
|||
|
|||
// 记录每个模块的选中图片索引 |
|||
const selectedImages = reactive({ |
|||
0: null, |
|||
1: null, |
|||
2: null, |
|||
3: null, |
|||
4: null, |
|||
5: null, |
|||
6: null |
|||
}); |
|||
//选择状态跟随 |
|||
const userSelected = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false, |
|||
4: false, |
|||
5: false, |
|||
6: false |
|||
}); |
|||
// 存储每个模块的百分比数据 |
|||
const percentages = reactive({ |
|||
0: '', |
|||
1: '', |
|||
2: '', |
|||
3: '', |
|||
4: '', |
|||
5: '', |
|||
6: '' |
|||
}); |
|||
|
|||
// 记录哪些模块已经请求过数据 |
|||
const requestedData = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false, |
|||
4: false, |
|||
5: false, |
|||
6: false |
|||
}); |
|||
//记录哪些模块已经完成了相似度计算 |
|||
const similarityCompleted = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false, |
|||
4: false, |
|||
5: false, |
|||
6: false |
|||
}); |
|||
// 记录哪些页面已经加载过 |
|||
const loadedPages = reactive({ |
|||
0: false, |
|||
1: false, |
|||
2: false, |
|||
3: false, |
|||
4: false, |
|||
5: false, |
|||
6: false, |
|||
7: false |
|||
}); |
|||
|
|||
// 加载预缓冲区大小 |
|||
const preloadBuffer = 1; |
|||
|
|||
// 决定是否应该显示特定页面的内容 |
|||
const shouldShowContent = (index) => { |
|||
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|||
}; |
|||
|
|||
// 选择图片 |
|||
const selectImage = (moduleIndex, imageIndex) => { |
|||
// 更新选中状态 |
|||
selectedImages[moduleIndex] = imageIndex; |
|||
// 标记为用户主动选择 |
|||
userSelected[moduleIndex] = true; |
|||
// 同步更新swiper索引 |
|||
innerSwiperIndices[moduleIndex] = imageIndex; |
|||
|
|||
console.log(`选中模块${moduleIndex + 1}的图片${imageIndex + 1}`); |
|||
}; |
|||
|
|||
// 查找相似度 |
|||
const findSimilarity = async (moduleIndex) => { |
|||
// 如果没有选中图片或没有明确选择，标记当前显示的为选中 |
|||
if (selectedImages[moduleIndex] === null || !userSelected[moduleIndex]) { |
|||
selectedImages[moduleIndex] = innerSwiperIndices[moduleIndex]; |
|||
userSelected[moduleIndex] = true; |
|||
|
|||
uni.showToast({ |
|||
title: '已选择当前图片', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
fetchSimilarityData(moduleIndex); |
|||
}; |
|||
const fetchSimilarityData = async (moduleIndex) => { |
|||
uni.showLoading({ |
|||
title: '计算相似度中...' |
|||
}); |
|||
|
|||
try { |
|||
const imageIndex = selectedImages[moduleIndex]; |
|||
|
|||
// 调用API获取百分比数据 |
|||
const result = await fetchPercentage(moduleIndex + 1, imageIndex + 1); |
|||
|
|||
// 更新百分比显示 |
|||
percentages[moduleIndex] = result.percentage; |
|||
|
|||
// 标记该模块已完成相似度计算 |
|||
similarityCompleted[moduleIndex] = true; |
|||
|
|||
// 标记该模块已请求过数据 |
|||
requestedData[moduleIndex] = true; |
|||
|
|||
uni.hideLoading(); |
|||
|
|||
uni.showToast({ |
|||
title: '计算完成', |
|||
icon: 'success' |
|||
}); |
|||
} catch (error) { |
|||
console.error('获取相似度失败:', error); |
|||
uni.hideLoading(); |
|||
uni.showToast({ |
|||
title: '获取数据失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}; |
|||
// 接口请求函数 |
|||
const fetchPercentage = async (moduleId, imageId) => { |
|||
try { |
|||
// 模拟API请求 |
|||
// const res = await request({ |
|||
// url: '/api/similarity', |
|||
// method: 'POST', |
|||
// data: { |
|||
// moduleId, |
|||
// imageId |
|||
// } |
|||
// }); |
|||
|
|||
// 模拟API响应 |
|||
return new Promise((resolve) => { |
|||
setTimeout(() => { |
|||
// 生成随机百分比，实际项目中应该使用API返回的数据 |
|||
const percentage = Math.floor(Math.random() * 41) + 60 + '%'; |
|||
resolve({ |
|||
success: true, |
|||
percentage, |
|||
moduleId, |
|||
imageId |
|||
}); |
|||
}, 800); |
|||
}); |
|||
} catch (error) { |
|||
console.error('API请求失败:', error); |
|||
throw error; |
|||
} |
|||
}; |
|||
|
|||
// 分享到朋友圈 |
|||
const ShareMoments = () => { |
|||
uni.showShareMenu({ |
|||
withShareTicket: true, |
|||
menus: ['shareAppMessage', 'shareTimeline'] |
|||
}); |
|||
|
|||
showShareGuide.value = true; |
|||
}; |
|||
|
|||
const onShareGuideClose = () => { |
|||
console.log('分享引导已关闭'); |
|||
}; |
|||
|
|||
const goBack = () => { |
|||
// 添加防抖 |
|||
if (goBack.isNavigating) return; |
|||
goBack.isNavigating = true; |
|||
|
|||
const app = getApp(); |
|||
app.globalData.mainSliderIndex = 5; |
|||
uni.redirectTo({ |
|||
url: '/pages/home/home', |
|||
complete: () => { |
|||
// 延迟重置防抖标记 |
|||
setTimeout(() => { |
|||
goBack.isNavigating = false; |
|||
}, 500); |
|||
} |
|||
}); |
|||
}; |
|||
goBack.isNavigating = false; |
|||
|
|||
// 监听currentIndex变化，更新已加载页面状态 |
|||
watch(currentIndex, (newIndex) => { |
|||
// 标记当前页面和前后buffer页为已加载 |
|||
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(7, newIndex + preloadBuffer); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
}, { |
|||
immediate: true |
|||
}); |
|||
|
|||
const handleSwiperChange = (e) => { |
|||
const newIndex = e.detail.current; |
|||
if (newIndex === 7) { |
|||
// 检查是否所有模块都完成了相似度计算 |
|||
if (!canAccessFinalReport.value) { |
|||
// 找到第一个未完成相似度计算的模块 |
|||
let firstIncompleteIndex = 0; |
|||
for (let i = 0; i < 7; i++) { |
|||
if (!similarityCompleted[i]) { |
|||
firstIncompleteIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
// 显示提示 |
|||
uni.showToast({ |
|||
title: `${moduleTips[firstIncompleteIndex]}并点击确认按钮`, |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}); |
|||
|
|||
// 跳转到未完成的模块 |
|||
setTimeout(() => { |
|||
currentIndex.value = firstIncompleteIndex; |
|||
}, 1000); |
|||
|
|||
return; |
|||
} |
|||
} |
|||
|
|||
// 正常情况下更新索引 |
|||
currentIndex.value = newIndex; |
|||
}; |
|||
|
|||
const handleImageSwiperChange = (e, outerIndex) => { |
|||
// 只更新内层swiper索引，不更新选中状态 |
|||
innerSwiperIndices[outerIndex] = e.detail.current; |
|||
|
|||
// 如果没有明确选择过，则选中状态也跟随更新 |
|||
// 如果之前已经选择过，则保持用户的选择 |
|||
if (!userSelected[outerIndex]) { |
|||
selectedImages[outerIndex] = e.detail.current; |
|||
} |
|||
}; |
|||
|
|||
const changeSlide = (index, outerIndex) => { |
|||
innerSwiperIndices[outerIndex] = index; |
|||
// 更新选中状态并标记为用户选择 |
|||
selectedImages[outerIndex] = index; |
|||
userSelected[outerIndex] = true; |
|||
}; |
|||
|
|||
const getCurrentInnerIndex = (outerIndex) => { |
|||
return innerSwiperIndices[outerIndex || currentIndex.value]; |
|||
}; |
|||
// 检查是否可以访问最终报告页 |
|||
const canAccessFinalReport = computed(() => { |
|||
// 检查所有模块是否都已选择 |
|||
f |
|||
for (let i = 0; i < 7; i++) { |
|||
if (!similarityCompleted[i]) { |
|||
return false; |
|||
} |
|||
} |
|||
return true; |
|||
}); |
|||
// 模块提示文本 |
|||
const moduleTips = [ |
|||
'请选择最有味道的歌曲', |
|||
'请选择最有味道的人物', |
|||
'请选择最有味道的食物', |
|||
'请选择最有味道的句子', |
|||
'请选择最有味道的风景', |
|||
'请选择最有味道的动漫', |
|||
'请选择最有味道的情感' |
|||
]; |
|||
const flavorTexts = { |
|||
// 歌曲文案 |
|||
0: [ |
|||
"音符在舌尖跳跃，这首歌如同陈年佳酿", |
|||
], |
|||
// 人物文案 |
|||
1: [ |
|||
"如墨般浓郁的性格，似茶般清冽的灵魂", |
|||
], |
|||
// 食物文案 |
|||
2: [ |
|||
"舌尖上的东方，是一场穿越时空的对话", |
|||
], |
|||
// 句子文案 |
|||
3: [ |
|||
"文字如酒，越品越醇，越读越深", |
|||
], |
|||
// 风景文案 |
|||
4: [ |
|||
"山水间藏着天地的密语，云雾里是岁月的轻叹", |
|||
], |
|||
// 动漫文案 |
|||
5: [ |
|||
"二次元中的东方灵魂，是跨越文化的共鸣", |
|||
], |
|||
// 情感文案 |
|||
6: [ |
|||
"情感如茶，或浓或淡，皆有韵味", |
|||
] |
|||
}; |
|||
|
|||
// 获取风味百分比描述 |
|||
const getFlavorDescription = (percentage) => { |
|||
const value = parseInt(percentage); |
|||
return; |
|||
}; |
|||
|
|||
// 修改后的selectedResults方法 |
|||
const selectedResults = computed(() => { |
|||
const results = []; |
|||
|
|||
for (let i = 0; i < 7; i++) { |
|||
if (userSelected[i]) { |
|||
// 从对应模块的文案库中随机选择一条 |
|||
const textOptions = flavorTexts[i]; |
|||
const randomIndex = Math.floor(Math.random() * textOptions.length); |
|||
const text = textOptions[randomIndex]; |
|||
results.push(`${text}`); |
|||
} |
|||
} |
|||
|
|||
return results; |
|||
}); |
|||
// 页面加载完成后预加载第一页 |
|||
onMounted(() => { |
|||
// 设置当前页为0，确保第一页和相邻页面的内容被加载 |
|||
currentIndex.value = 0; |
|||
|
|||
// 初始化标记第一页和相邻页为已加载 |
|||
for (let i = 0; i <= Math.min(preloadBuffer, 7); i++) { |
|||
loadedPages[i] = true; |
|||
} |
|||
}); |
|||
|
|||
// 微信分享配置 |
|||
// #ifdef MP-WEIXIN |
|||
onShareAppMessage(() => { |
|||
return { |
|||
title: '细嗅东方｜「Epic Soul」阅读体 issue02', |
|||
mpId: 'wx8954209bb3ad489e', |
|||
path: '/pages/chapter4/cover', |
|||
imageUrl: '/static/share-img.jpg' |
|||
} |
|||
}); |
|||
|
|||
onShareTimeline(() => { |
|||
return { |
|||
title: '细嗅东方｜「Epic Soul」阅读体 issue02', |
|||
query: '', |
|||
imageUrl: '/static/share-img.jpg' |
|||
} |
|||
}); |
|||
// #endif |
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.main-swiper { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.page-container { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.home-page { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.swiper-item-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.image-swiper { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.image-wrapper { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
transition: all 0.3s; |
|||
height: 100%; |
|||
} |
|||
|
|||
.image-wrapper-full { |
|||
width: 80%; |
|||
} |
|||
|
|||
.image-wrapper-compact { |
|||
width: 100%; |
|||
} |
|||
|
|||
.selected-image { |
|||
border: 4rpx solid #f0ad4e; |
|||
box-shadow: 0 0 10rpx rgba(240, 173, 78, 0.6); |
|||
background-color: rgba(240, 173, 78, 0.1); |
|||
} |
|||
|
|||
.swiper-image { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
display: block; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.bg-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 内容层样式 */ |
|||
.content-layer { |
|||
position: relative; |
|||
z-index: 2; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top: 20%; |
|||
box-sizing: border-box; |
|||
/* 添加此行 */ |
|||
padding: 0; |
|||
/* 确保没有内边距 */ |
|||
} |
|||
|
|||
.content-layer2 { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
position: relative; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.find-btn { |
|||
width: 300rpx; |
|||
height: 50rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.problem-description { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
margin-top: 150rpx; |
|||
} |
|||
|
|||
.proportion-txt { |
|||
font-size: 48rpx; |
|||
color: #0f944f; |
|||
} |
|||
|
|||
.proportion-txt-position { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.proportion-txt-position2 { |
|||
position: absolute; |
|||
right: 120rpx; |
|||
top: 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.proportion-txt-position3 { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.proportion-txt-position4 { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.proportion-txt-position5 { |
|||
position: absolute; |
|||
right: 120rpx; |
|||
top: 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.description-txt { |
|||
width: 400rpx; |
|||
height: 120rpx; |
|||
} |
|||
|
|||
.description-txt6 { |
|||
width: 460rpx !important; |
|||
height: 50rpx !important; |
|||
} |
|||
|
|||
.description-txt7 { |
|||
width: 460rpx !important; |
|||
height: 120rpx !important; |
|||
} |
|||
|
|||
.proportion-txt-position6 { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
line-height: 1; |
|||
font-size: 38rpx !important; |
|||
} |
|||
|
|||
.proportion-txt-position7 { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.image-swiper { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
} |
|||
|
|||
.swiper-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.back-icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
left: 40rpx; |
|||
top: 40rpx; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.indicator-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 50rpx; |
|||
} |
|||
|
|||
.indicator-dot { |
|||
width: 14rpx; |
|||
height: 14rpx; |
|||
border-radius: 50%; |
|||
background-color: rgba(255, 255, 255, 0.5); |
|||
margin: 0 8rpx; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.indicator-dot.active { |
|||
background-color: #ffffff; |
|||
transform: scale(1.2); |
|||
} |
|||
|
|||
.harvestReport-layer { |
|||
position: relative; |
|||
z-index: 2; |
|||
display: flex; |
|||
margin-top: 42%; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 100%; |
|||
} |
|||
|
|||
.grid-cover { |
|||
width: 85%; |
|||
height: 60%; |
|||
} |
|||
|
|||
.grid-cover-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.chapter4-btn { |
|||
width: 280rpx; |
|||
height: 60rpx; |
|||
margin-top: 60rpx; |
|||
} |
|||
|
|||
.img-shadow { |
|||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), |
|||
0 6px 20px 0 rgba(0, 0, 0, 0.19); |
|||
transition: box-shadow 0.3s ease; |
|||
} |
|||
|
|||
.arrow-content { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
left: 50%; |
|||
transform: translate(-50%, 0); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-down { |
|||
width: 200rpx; |
|||
height: 40rpx; |
|||
animation: bounce 1.5s infinite; |
|||
} |
|||
|
|||
@keyframes bounce { |
|||
|
|||
0%, |
|||
20%, |
|||
50%, |
|||
80%, |
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
40% { |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
60% { |
|||
transform: translateY(-10rpx); |
|||
} |
|||
} |
|||
|
|||
.report-text-overlay { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
z-index: 8; |
|||
text-align: center; |
|||
} |
|||
|
|||
.report-title { |
|||
font-size: 48rpx; |
|||
color: #f0ad4e; |
|||
font-weight: bold; |
|||
margin-bottom: 40rpx; |
|||
text-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3); |
|||
animation: fade-in 1.5s ease-out; |
|||
} |
|||
|
|||
.report-content { |
|||
width: 100%; |
|||
} |
|||
|
|||
.result-item { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
line-height: 1.8; |
|||
margin-bottom: 20rpx; |
|||
text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.5); |
|||
opacity: 0; |
|||
animation: slide-in 0.5s ease-out forwards; |
|||
} |
|||
|
|||
.result-item:nth-child(1) { |
|||
animation-delay: 0.2s; |
|||
} |
|||
|
|||
.result-item:nth-child(2) { |
|||
animation-delay: 0.4s; |
|||
} |
|||
|
|||
.result-item:nth-child(3) { |
|||
animation-delay: 0.6s; |
|||
} |
|||
|
|||
.result-item:nth-child(4) { |
|||
animation-delay: 0.8s; |
|||
} |
|||
|
|||
.result-item:nth-child(5) { |
|||
animation-delay: 1.0s; |
|||
} |
|||
|
|||
.result-item:nth-child(6) { |
|||
animation-delay: 1.2s; |
|||
} |
|||
|
|||
.result-item:nth-child(7) { |
|||
animation-delay: 1.4s; |
|||
} |
|||
|
|||
@keyframes fade-in { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(-20rpx); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-in { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateX(-30rpx); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
.grid-cover { |
|||
position: relative; |
|||
height: 60%; |
|||
z-index: 7; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue