englishread-front/pages/components/SplashScreen.vue

<template>
  <view v-if="showSplash" class="splash-screen">
    <!-- 富文本內容 -->
    <view class="splash-content">
      <image
        :src="splashContent"
        mode="scaleToFill"
        class="splash-image"
      />
    </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: 5
    }
  },
  data() {
    return {
      showSplash: false,
      countdown: 5,
      timer: null,
      splashContent: ''
    }
  },
  computed: {
    image() {
      return this.configParamContent('creen_image') || uni.getStorageSync('screen_image')
    }
  },
  mounted() {
    this.initSplash()
    
    uni.hideTabBar()
  },
  beforeDestroy() {
    this.clearTimer()
  },
  methods: {
    // 初始化開動頁面
    async initSplash() {
      try {
        // 獲取富文本內容
      this.splashContent = this.image
        
        // 如果有內容才顯示
        if (this.splashContent) {
          this.countdown = this.duration
          this.showSplash = true
          this.startCountdown()
        }
      } catch (error) {
        console.error('獲取開動頁面內容失敗:', error)
      }
    },
    
    // 開始倒計時
    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
      }
    }
  }
}
</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: 100%;
  overflow: hidden;
  
  // 富文本樣式
  :deep(rich-text) {
    width: 100%;
    height: 100%;
    display: block;
    img{
      width: 100%;
    height: 100%;
    }
  }
}

.skip-button {
  position: absolute;
  top: 100rpx;
  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;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

// 英文文字样式
.english-text {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 32rpx; // 16px转换为rpx
  line-height: 48rpx; // 24px转换为rpx
  letter-spacing: 0;
  color: #FFFFFF;
  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: #FFFFFF;
  background: transparent;
}

// 確保覆蓋 tabbar
.splash-screen {
  // 覆蓋所有內容，包括 tabbar
  position: fixed !important;
  z-index: 9999 !important;
}
</style>