EpicSoul/xrcc/home/home.vue

<template>
  <view style="width: 100vw">
    <BackButton />
    <!-- <SinglePlayGif
			gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif"
			staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png"
			duration="5000"
		/> -->

    <swiper
      class="swiper"
      :current="currentIndex"
      :vertical="true"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(image, index) in swiperImages" :key="index">
        <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
          <template v-if="index == 0">
            <image
              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png"
              mode="widthFix"
              class="img1-text"
            ></image>
          </template>
          <template v-if="index == 1">
            <image
              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png"
              mode="widthFix"
              class="img1-text"
              style="width: 115.85rpx"
            ></image>
          </template>
          <template v-if="index == 2">
            <image
              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png"
              mode="widthFix"
              class="img1-text"
              style="width: 577.23rpx"
            ></image>
          </template>
          <template v-if="index == 3">
            <image
              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png"
              mode="widthFix"
              class="img4-text"
            ></image>
            <image
              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png"
              mode="widthFix"
              class="btn-img"
              @click="gotoPath('/xrcc/chapter1/index')"
            ></image>
          </template>
        </view>
      </swiper-item>
    </swiper>

    <NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
    <AudioControl
      audioSrc="https://des.js-dyyj.com/data/2025/09/05/7d970645-f026-4ae0-8d60-a8b5c47bebfc.MP3"
    />
    <MusicControl />
  </view>
</template>

<script>
import AudioControl from "@/components/AudioControl.vue";
import MusicControl from "@/components/MusicControl.vue";
import SinglePlayGif from "../components/SinglePlayGif.vue";
import NavMenu from "../components/NavMenu.vue";
export default {
  components: {
    MusicControl,
    SinglePlayGif,
    NavMenu,
    AudioControl,
  },
  data() {
    return {
      isPlaying: false,
      playTimer: null,
      duration: 5000,
      currentIndex: 0,
      navIndex: 0,
      swiperImages: [
        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif",
        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif",
        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif",
        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif",
      ],
    };
  },
  onLoad(option) {
    this.currentIndex = option.currentIndex || 0;
    if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
  },
  onShow() {
    const app = getApp();
    app.updateMusicSrc(
      "https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3"
    );
    app.initBackgroundMusic(); // 初始化背景音乐
    uni.$bgMusic.play(); // 播放音乐
  },
  methods: {
    handleJumpToPage(idx) {
      this.navIndex = idx;
      if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1;
    },
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
      if (this.currentIndex == this.swiperImages.length - 1) {
        this.navIndex = 1;
      } else {
        this.navIndex = 0;
      }
    },
  },
  // 微信分享配置
  // #ifdef MP-WEIXIN
  onShareAppMessage() {
    return {
      title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
      mpId: "wx8954209bb3ad489e",
      path: "/xrcc/home/home",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
    };
  },
  onShareTimeline() {
    return {
      title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
      query: "",
      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
    };
  },
  // #endif
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100vw;
  height: 100vh;
}

.swiper-item {
  width: 100vw;
  height: 100vh;
  background-size: 100% auto;
  background-position: center center;
  background-color: #000;
  background-repeat: no-repeat;
  position: relative;

  .img1-text {
    position: absolute;
    width: 632.16rpx;
    top: 170rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .img4-text {
    position: absolute;
    width: 476.36rpx;
    top: 170rpx;
    left: 84rpx;
  }

  .btn-img {
    position: absolute;
    width: 149.8rpx;
    bottom: 290rpx;
    left: 84rpx;
  }
}

.img4-text {
  position: absolute;
  width: 476.36rpx;
  top: 170rpx;
  left: 84rpx;
}

.btn-img {
  position: absolute;
  width: 149.8rpx;
  bottom: 290rpx;
  left: 84rpx;
}

.swiper-img {
  width: 100vw;
  height: 100vh;
}
</style>