You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
6.6 KiB
305 lines
6.6 KiB
<template>
|
|
<view v-if="showSplash" class="splash-screen">
|
|
<!-- 富文本內容 -->
|
|
<view class="splash-content">
|
|
<image
|
|
:src="splashContent"
|
|
mode="aspectFit"
|
|
class="splash-image"
|
|
@error="onImageError"
|
|
@load="onImageLoad"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 跳過按鈕 -->
|
|
<view class="skip-button" >
|
|
<text class="skip-text">跳过 ({{ countdown }}s)</text>
|
|
</view>
|
|
<!-- 定位英語文字和中文文字到左下角 -->
|
|
<view class="text-container">
|
|
<text class="english-text">
|
|
{{ configParamContent('creen_en') }}
|
|
</text>
|
|
<text class="chinese-text">
|
|
{{ configParamContent('creen_zh') }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import config from '../../mixins/config.js'
|
|
|
|
export default {
|
|
name: 'SplashScreen',
|
|
// mixins: [config],
|
|
props: {
|
|
// 顯示時長（秒）
|
|
duration: {
|
|
type: Number,
|
|
default: 2
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showSplash: false,
|
|
countdown: 5,
|
|
timer: null,
|
|
splashContent: ''
|
|
}
|
|
},
|
|
computed: {
|
|
image() {
|
|
try {
|
|
// 優先從配置獲取
|
|
const configImage = this.configParamContent && this.configParamContent('creen_image')
|
|
if (configImage && configImage !== 'undefined' && configImage !== '') {
|
|
return configImage
|
|
}
|
|
|
|
// 備用方案：從本地存儲獲取
|
|
const storageImage = uni.getStorageSync('screen_image')
|
|
if (storageImage && storageImage !== 'undefined' && storageImage !== '') {
|
|
return storageImage
|
|
}
|
|
|
|
return ''
|
|
} catch (error) {
|
|
console.error('獲取開屏圖片失敗:', error)
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initSplash()
|
|
|
|
uni.hideTabBar()
|
|
},
|
|
beforeDestroy() {
|
|
this.clearTimer()
|
|
},
|
|
methods: {
|
|
// 檢查是否為H5环境
|
|
isH5() {
|
|
// #ifdef H5
|
|
return true
|
|
// #endif
|
|
// #ifndef H5
|
|
return false
|
|
// #endif
|
|
},
|
|
|
|
// 檢查是否已显示过开屏
|
|
hasShownSplash() {
|
|
if (this.isH5()) {
|
|
try {
|
|
return sessionStorage.getItem('splash_shown') === 'true'
|
|
} catch (error) {
|
|
console.error('读取sessionStorage失败:', error)
|
|
return false
|
|
}
|
|
}
|
|
return false
|
|
},
|
|
|
|
// 设置开屏已显示标记
|
|
setSplashShown() {
|
|
if (this.isH5()) {
|
|
try {
|
|
sessionStorage.setItem('splash_shown', 'true')
|
|
} catch (error) {
|
|
console.error('设置sessionStorage失败:', error)
|
|
}
|
|
}
|
|
},
|
|
|
|
// 初始化开动頁面
|
|
async initSplash() {
|
|
try {
|
|
// 在H5环境下检查是否已显示过开屏
|
|
if (this.hasShownSplash()) {
|
|
console.log('开屏已显示过，跳过开屏动画')
|
|
this.$emit('close')
|
|
return
|
|
}
|
|
|
|
// 等待一小段時間確保 store 數據加載完成
|
|
await this.$nextTick()
|
|
|
|
// 獲取圖片URL，優先使用配置，然後使用本地存儲
|
|
let imageUrl = ''
|
|
|
|
// 嘗試從配置獲取
|
|
if (this.$store.state.configList && this.$store.state.configList['creen_image']) {
|
|
imageUrl = this.configParamContent('creen_image')
|
|
}
|
|
|
|
// 如果配置中沒有，嘗試從本地存儲獲取
|
|
if (!imageUrl) {
|
|
imageUrl = uni.getStorageSync('screen_image')
|
|
}
|
|
|
|
console.log('開屏圖片URL:', imageUrl)
|
|
|
|
// 如果有圖片URL才顯示開屏
|
|
if (imageUrl && imageUrl !== 'undefined' && imageUrl !== '') {
|
|
this.splashContent = imageUrl
|
|
this.countdown = this.duration
|
|
this.showSplash = true
|
|
this.startCountdown()
|
|
} else {
|
|
console.log('沒有開屏圖片，跳過開屏動畫')
|
|
this.$emit('close')
|
|
}
|
|
} catch (error) {
|
|
console.error('獲取開動頁面內容失敗:', error)
|
|
// 發生錯誤時直接關閉開屏
|
|
this.$emit('close')
|
|
}
|
|
},
|
|
|
|
// 開始倒計時
|
|
startCountdown() {
|
|
this.timer = setInterval(() => {
|
|
this.countdown--
|
|
if (this.countdown <= 0) {
|
|
this.closeSplash()
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
// 關閉開動頁面
|
|
closeSplash() {
|
|
this.showSplash = false
|
|
|
|
// 在H5环境下设置开屏已显示标记
|
|
this.setSplashShown()
|
|
|
|
uni.showTabBar({
|
|
animation: true
|
|
})
|
|
this.clearTimer()
|
|
this.$emit('close')
|
|
},
|
|
|
|
// 清除計時器
|
|
clearTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
|
|
// 圖片加載成功
|
|
onImageLoad() {
|
|
console.log('開屏圖片加載成功')
|
|
},
|
|
|
|
// 圖片加載失敗
|
|
onImageError(e) {
|
|
console.error('開屏圖片加載失敗:', e)
|
|
// 圖片加載失敗時直接關閉開屏
|
|
this.closeSplash()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.splash-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.splash-image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.splash-content {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 80%;
|
|
overflow: hidden;
|
|
|
|
// 富文本樣式
|
|
:deep(rich-text) {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skip-button {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: 40rpx;
|
|
background-color: #0000004D;
|
|
|
|
border-radius: 100rpx;
|
|
width: 148rpx ;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
z-index: 10000;
|
|
|
|
|
|
.skip-text {
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// 文字容器定位到左下角
|
|
.text-container {
|
|
// position: absolute;
|
|
// bottom: 80rpx;
|
|
// left: 40rpx;
|
|
// z-index: 10001;
|
|
height: 20%;
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
// 英文文字样式
|
|
.english-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx; // 16px转换为rpx
|
|
line-height: 48rpx; // 24px转换为rpx
|
|
letter-spacing: 0;
|
|
color: black;
|
|
background: transparent;
|
|
}
|
|
|
|
// 中文文字样式
|
|
.chinese-text {
|
|
font-family: PingFang SC;
|
|
// font-weight: 600;
|
|
font-size: 32rpx; // 16px转换为rpx
|
|
line-height: 48rpx; // 24px转换为rpx
|
|
letter-spacing: 0;
|
|
color: black;
|
|
background: transparent;
|
|
}
|
|
|
|
// 確保覆蓋 tabbar
|
|
.splash-screen {
|
|
// 覆蓋所有內容，包括 tabbar
|
|
position: fixed !important;
|
|
z-index: 9999 !important;
|
|
}
|
|
</style>
|