张延森 3 years ago
parent
commit
74f2d1ba25
4 changed files with 27 additions and 1 deletions
  1. 14
    0
      public/index.html
  2. BIN
      public/loading.gif
  3. 9
    1
      src/pages/Honghe.vue
  4. 4
    0
      src/utils/index.js

+ 14
- 0
public/index.html View File

6
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
7
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
     <title><%= htmlWebpackPlugin.options.title %></title>
8
     <title><%= htmlWebpackPlugin.options.title %></title>
9
+    <style>
10
+      .mainloading {
11
+        position: absolute;
12
+        left: 0;
13
+        top: 0;
14
+        width: 100vw;
15
+        height: 100vh;
16
+        overflow: hidden;
17
+
18
+        background: #262626 url('./loading.gif') no-repeat center center;
19
+        z-index: 999;
20
+      }
21
+    </style>
9
   </head>
22
   </head>
10
   <body>
23
   <body>
11
     <noscript>
24
     <noscript>
12
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
25
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
     </noscript>
26
     </noscript>
27
+    <div class="mainloading"></div>
14
     <div id="app"></div>
28
     <div id="app"></div>
15
     <!-- built files will be auto injected -->
29
     <!-- built files will be auto injected -->
16
   </body>
30
   </body>

BIN
public/loading.gif View File


+ 9
- 1
src/pages/Honghe.vue View File

26
 import { useModel } from '@/store'
26
 import { useModel } from '@/store'
27
 import { drawLottery, getPrizeList } from '@/services/person'
27
 import { drawLottery, getPrizeList } from '@/services/person'
28
 import { rand, shuffle } from '@/utils/math'
28
 import { rand, shuffle } from '@/utils/math'
29
+import { hideLoading } from '@/utils'
29
 
30
 
30
 // 月份信息
31
 // 月份信息
31
 const monthList = [
32
 const monthList = [
110
     },
111
     },
111
     // 获取奖品列表
112
     // 获取奖品列表
112
     getPrizes() {
113
     getPrizes() {
113
-      getPrizeList().then(list => this.prizeList = list);
114
+      getPrizeList().then(list => {
115
+        this.prizeList = list;
116
+
117
+        const t = setTimeout(() => {
118
+          hideLoading()
119
+          clearTimeout(t)
120
+        }, 1000);
121
+      });
114
     }
122
     }
115
   }
123
   }
116
 }
124
 }

+ 4
- 0
src/utils/index.js View File

1
+
2
+export function hideLoading() {
3
+  document.getElementsByClassName('mainloading')[0].style="display: none"
4
+}