frontend-app/pages/order_package/launch_page/launch_page.vue

<template>
  <view class="splash" v-if="show">
    <!-- 宽度 = 屏幕宽，高度自适应 -->
    <image
      class="splash__bg"
      :src="sharePoster.posterUrl"
      mode="widthFix"
      @tap="goDetail"
    />
    <view class="splash__count" @tap.stop="goHome"> {{ count }}s 后跳过 </view>
  </view>
</template>

<script>
import { getSharePoster } from "@/api/common.js";
export default {
  data() {
    return {
      show: true, // 控制整个假启动页销毁
      count: 3,
      timer: null,
      sharePoster: {},
    };
  },
  async onLoad() {
    const hasShown = getApp().globalData.launchShown;
    if (hasShown) {
      uni.switchTab({ url: "/pages/home/home" });
      return;
    }

    getApp().globalData.launchShown = true; // 置为已展示
    await this.getPoster();
    this.startCountdown();
  },

  onUnload() {
    this.clearTimer();
  },
  methods: {
    /* 拉取海报 */
    async getPoster() {
      const { bizcode, data } = await getSharePoster({ type: 1 });
      if (bizcode === 100 && data.length) {
        this.sharePoster = data[0];
      } else {
        uni.switchTab({ url: "/pages/home/home" });
      }
    },
    /* 倒计时 */
    startCountdown() {
      this.timer = setInterval(() => {
        this.count--;
        if (this.count <= 0) this.goHome();
      }, 1000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    /* 业务跳转 */
    goHome() {
      this.clearTimer();
      uni.switchTab({ url: "/pages/home/home" });
    },
    goDetail() {
      this.clearTimer();
      if (this.sharePoster.goodsId) {
        uni.navigateTo({
          url: `/pages/other_package/productInfo/productInfo?id=${this.sharePoster.goodsId}&isSplash=true`,
        });
      } else {
        uni.switchTab({ url: "/pages/home/home" });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.splash {
  position: fixed;
  inset: 0;
  background: #000; // 防止图片透明区域露白
  display: flex;
  align-items: center; // 图片上下居中
  justify-content: center;

  &__bg {
    width: 100%; // 宽度 = 屏幕宽
    height: auto; // 高度自适应
    display: block; // 去掉图片底部空隙
  }

  &__count {
    position: absolute;
    right: 40rpx;
    top: 80rpx;
    color: #fff;
    font-size: 26rpx;
    padding: 6rpx 16rpx;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20rpx;
  }
}
</style>