remember-word/pages/start/start.vue

<template>
  <view class="main-box">
    <view class="loading-box">
      <view class="loader"></view>
      <view class="word">{{ $t("start.title") }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      seriesUuid: "",
    };
  },
  methods: {
    // 获取礼包详情
    async getGiftDetail() {
      let data = {
        seriesUuid: this.seriesUuid,
      };
      let res = await this.$api.usa.getList(data);
      if (res.status === 0) {
        let seriesData = res.data;
        uni.setStorageSync("seriesData", seriesData);
        this.getCollectionList();
      } else {
        uni.removeStorageSync("seriesData");
        uni.$u.toast(res.msg);
      }
    },
    // 获取藏品列表
    async getCollectionList() {
      let data = {
        seriesUID: this.seriesUuid,
      };
      let res = await this.$api.usa.getCollectionList(data);
      if (res.status === 0) {
        let collectionList = res.data.data;
        uni.setStorageSync("collectionList", collectionList);
        uni.redirectTo({
          url: "/pages/index/index",
        });
      } else {
        uni.removeStorageSync("collectionList");
        uni.$u.toast(res.msg);
      }
    },
  },
  onLoad(item) {
    console.log(navigator.language, 2222);
    console.log(item);
    this.seriesUuid = item.seriesUuid;
    setTimeout(async () => {
      //   uni.switchTab({
      //     url: "/pages/index/index",
      //   });
      // 获取礼包详情
      await this.getGiftDetail();
    }, 2000);
  },
};
</script>

<style lang="scss">
page {
  height: 100vh;
  background: url("../../static/image/start/new_bg.png") no-repeat center center
    fixed;
  background-size: cover;
  box-sizing: border-box;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  --c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
  background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%,
    var(--c) 0 50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear;
}

@keyframes l12 {
  100% {
    transform: rotate(0.5turn);
  }
}
@keyframes l27 {
  100% {
    transform: rotate(1turn);
  }
}
.main-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-box {
  //  上下左右居中
  background-color: #fff;
  width: 234px;
  height: 234px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.word {
  margin-top: 27px;
  font-size: 16px;
  color: #000000;
  text-align: center;
}
</style>