index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div class="loader-container">
  3. <div class="loader"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import common from './mixins/common.js';
  8. export default {
  9. name: 'claimCloudPhone',
  10. auth: false,
  11. head: {
  12. title: '0元购机,尽情享受',
  13. },
  14. mixins: [common],
  15. data() {
  16. return {};
  17. },
  18. mounted() {
  19. const {
  20. invitationUserName,
  21. operateActivityId,
  22. userLaunchId,
  23. bool = 0,
  24. } = this.$route.query;
  25. if (invitationUserName && operateActivityId && userLaunchId) {
  26. // 删除旧的token
  27. localStorage.removeItem('auth._token.password');
  28. // 如果有这个说明被邀请人
  29. localStorage.setItem('auth.inviteeNum', 1);
  30. // 活动Id
  31. localStorage.setItem(
  32. 'auth.operateActivityId',
  33. window.atob(operateActivityId),
  34. );
  35. this.$router.replace({
  36. path: '/claimCloudPhone/0',
  37. query: this.$route.query,
  38. });
  39. return;
  40. }
  41. if (!(+bool)) {
  42. localStorage.removeItem('auth.inviteeNum');
  43. localStorage.setItem('auth.operateActivityId', operateActivityId);
  44. }
  45. setTimeout(() => {
  46. this.bargainingStatus();
  47. });
  48. },
  49. methods: {
  50. bargainingStatus() {
  51. this.$axios
  52. .$get('activity/v5/assist/bargaining/current/bargainingStatus', {
  53. headers: this.headers,
  54. })
  55. .then((res) => {
  56. if (res.success) {
  57. // bargainingStatus 0 :选择云机界面 1:砍一刀界面 2;邀请好友页面 3:成功,领取下一台云机界面 4:失败,领取下一台云机界面
  58. switch (res.data.bargainingStatus) {
  59. case 0:
  60. this.$router.replace('/claimCloudPhone/chooseCloudPhone');
  61. break;
  62. default:
  63. this.$router.replace(
  64. '/claimCloudPhone/' + res.data.bargainingStatus,
  65. );
  66. break;
  67. }
  68. }
  69. });
  70. },
  71. },
  72. };
  73. </script>
  74. <style lang="less" scoped>
  75. .loader-container {
  76. background: rgba(237, 228, 228, 1);
  77. height: 100%;
  78. width: 100%;
  79. }
  80. .loader {
  81. position: relative;
  82. width: 2.5em;
  83. height: 2.5em;
  84. transform: rotate(165deg);
  85. }
  86. .loader:before,
  87. .loader:after {
  88. content: '';
  89. position: absolute;
  90. top: 50%;
  91. left: 50%;
  92. display: block;
  93. width: 0.5em;
  94. height: 0.5em;
  95. border-radius: 0.25em;
  96. transform: translate(-50%, -50%);
  97. }
  98. .loader:before {
  99. animation: before8 2s infinite;
  100. }
  101. .loader:after {
  102. animation: after6 2s infinite;
  103. }
  104. @keyframes before8 {
  105. 0% {
  106. width: 0.5em;
  107. box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
  108. -1em 0.5em rgba(111, 202, 220, 0.75);
  109. }
  110. 35% {
  111. width: 2.5em;
  112. box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75),
  113. 0 0.5em rgba(111, 202, 220, 0.75);
  114. }
  115. 70% {
  116. width: 0.5em;
  117. box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75),
  118. 1em 0.5em rgba(111, 202, 220, 0.75);
  119. }
  120. 100% {
  121. box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
  122. -1em 0.5em rgba(111, 202, 220, 0.75);
  123. }
  124. }
  125. @keyframes after6 {
  126. 0% {
  127. height: 0.5em;
  128. box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
  129. -0.5em -1em rgba(233, 169, 32, 0.75);
  130. }
  131. 35% {
  132. height: 2.5em;
  133. box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75),
  134. -0.5em 0 rgba(233, 169, 32, 0.75);
  135. }
  136. 70% {
  137. height: 0.5em;
  138. box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75),
  139. -0.5em 1em rgba(233, 169, 32, 0.75);
  140. }
  141. 100% {
  142. box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
  143. -0.5em -1em rgba(233, 169, 32, 0.75);
  144. }
  145. }
  146. .loader {
  147. position: absolute;
  148. top: calc(50% - 1.25em);
  149. left: calc(50% - 1.25em);
  150. }
  151. </style>