englishread-front/pages/components/SplashScreen.vue

<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: {
    // 初始化開動頁面
    async initSplash() {
      try {
        // 等待一小段時間確保 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
      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>