android-cloud-H5/pages/claimCloudPhone/index.vue

<template>
  <div class="loader-container">
    <div
      style="height: 100%; width: 100%; background: #000; position: relative"
      v-if="$userAgent.isWx && !$userAgent.isMiniProgram"
    >
    <img src="@/assets/image/point.png" alt="" class="point">
    </div>
    <div class="loader" v-else></div>
  </div>
</template>

<script>
import common from './mixins/common.js';
export default {
  name: 'claimCloudPhone',
  auth: false,
  head: {
    title: '0元购机，尽情享受',
  },
  mixins: [common],
  data() {
    return {};
  },
  mounted() {
    if (this.$userAgent.isWx && !this.$userAgent.isMiniProgram) {
      return;
    }

    const {
      invitationUserName,
      operateActivityId,
      userLaunchId,
      bool = 0,
    } = this.$route.query;
    if (invitationUserName && operateActivityId && userLaunchId) {
      // 删除旧的token
      localStorage.removeItem('auth._token.password');
      // 如果有这个说明被邀请人
      localStorage.setItem('auth.inviteeNum', 1);
      // 活动Id
      localStorage.setItem(
        'auth.operateActivityId',
        window.atob(operateActivityId),
      );
      this.$router.replace({
        path: '/claimCloudPhone/0',
        query: this.$route.query,
      });
      return;
    }
    if (!+bool) {
      localStorage.removeItem('auth.inviteeNum');
      localStorage.setItem('auth.operateActivityId', operateActivityId);
    }

    setTimeout(() => {
      this.bargainingStatus();
    });
  },
  methods: {
    bargainingStatus() {
      this.$axios
        .$get('activity/v5/assist/bargaining/current/bargainingStatus', {
          headers: this.headers,
        })
        .then((res) => {
          if (res.success) {
            localStorage.setItem(
              'bargainingStatusInfo',
              JSON.stringify(res.data),
            );
            // bargainingStatus 0 ：选择云机界面  1：砍一刀界面 2；邀请好友页面 3：成功，领取下一台云机界面  4：失败，领取下一台云机界面
            switch (res.data.bargainingStatus) {
              case 0:
                this.$router.replace('/claimCloudPhone/chooseCloudPhone');
                break;
              default:
                this.$router.replace(
                  '/claimCloudPhone/' + res.data.bargainingStatus,
                );
                break;
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.loader-container {
  background: rgba(237, 228, 228, 1);
  height: 100%;
  width: 100%;
}
.point{
  position: absolute;
  top: 5%;
  right: 5%;
  width: 250px;
  height: 250px;
}

.loader {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  transform: rotate(165deg);
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.25em;
  transform: translate(-50%, -50%);
}

.loader:before {
  animation: before8 2s infinite;
}

.loader:after {
  animation: after6 2s infinite;
}

@keyframes before8 {
  0% {
    width: 0.5em;
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }

  35% {
    width: 2.5em;
    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75),
      0 0.5em rgba(111, 202, 220, 0.75);
  }

  70% {
    width: 0.5em;
    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75),
      1em 0.5em rgba(111, 202, 220, 0.75);
  }

  100% {
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }
}

@keyframes after6 {
  0% {
    height: 0.5em;
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }

  35% {
    height: 2.5em;
    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75),
      -0.5em 0 rgba(233, 169, 32, 0.75);
  }

  70% {
    height: 0.5em;
    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75),
      -0.5em 1em rgba(233, 169, 32, 0.75);
  }

  100% {
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }
}

.loader {
  position: absolute;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
}
</style>