Преглед на файлове

Merge branch 'master' of http://git.ycjcjy.com/honghe/h5-draw-lots

Baozhangchao преди 3 години
родител
ревизия
260c9b4e15
променени са 7 файла, в които са добавени 216 реда и са изтрити 20 реда
  1. 14
    0
      public/index.html
  2. BIN
      public/loading.gif
  3. 158
    19
      src/pages/Honghe.vue
  4. 11
    0
      src/services/person.js
  5. 4
    0
      src/utils/index.js
  6. 28
    0
      src/utils/math.js
  7. 1
    1
      src/utils/request.js

+ 14
- 0
public/index.html Целия файл

@@ -6,11 +6,25 @@
6 6
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 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 22
   </head>
10 23
   <body>
11 24
     <noscript>
12 25
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 26
     </noscript>
27
+    <div class="mainloading"></div>
14 28
     <div id="app"></div>
15 29
     <!-- built files will be auto injected -->
16 30
   </body>

BIN
public/loading.gif Целия файл


+ 158
- 19
src/pages/Honghe.vue Целия файл

@@ -1,7 +1,6 @@
1 1
 <template>
2 2
   <div class="index-box">
3
-    <popup :show="showPopup" @cancel="cancelFrom" />
4
-    <!-- <SaveShare :show="sSaveSharehowPopup" @cancel="cancelFrom" /> -->
3
+    <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
5 4
     <div>
6 5
       <div>
7 6
         <img class="topImage" src="../assets/hareTop.png" alt />
@@ -9,13 +8,13 @@
9 8
     </div>
10 9
     <div class="outer6-wrapper">
11 10
       <div class="outer6 flex-col">
12
-        <div v-for="item in indexJPG" :key="item" class="section-item">
13
-          <div @click="baga">
14
-            <img class="section-item-image" src="../assets/coverIndex.jpg" />
15
-            <!-- <img
11
+        <div v-for="month in list" :key="month.id" class="section-item">
12
+          <div @click="handleMonthClick(month)">
13
+            <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
14
+            <img
16 15
               :class="`section-item-image ${!showPopup?'backImag':''}` "
17 16
               src="../assets/popupImg/backImag.jpg"
18
-            />-->
17
+            />
19 18
           </div>
20 19
         </div>
21 20
       </div>
@@ -25,6 +24,109 @@
25 24
 
26 25
 <script>
27 26
 import { useModel } from '@/store'
27
+import { drawLottery, getPrizeList } from '@/services/person'
28
+import { rand, shuffle } from '@/utils/math'
29
+import { hideLoading } from '@/utils'
30
+
31
+// 月份信息
32
+const monthList = [
33
+  {
34
+    id: 1,
35
+    posterImg: '',
36
+    popImg: '',
37
+    shareImg: '',
38
+    screenImg: '',
39
+    calendarImg: ''
40
+  },
41
+  {
42
+    id: 2,
43
+    posterImg: '',
44
+    popImg: '',
45
+    shareImg: '',
46
+    screenImg: '',
47
+    calendarImg: ''
48
+  },
49
+  {
50
+    id: 3,
51
+    posterImg: '',
52
+    popImg: '',
53
+    shareImg: '',
54
+    screenImg: '',
55
+    calendarImg: ''
56
+  },
57
+  {
58
+    id: 4,
59
+    posterImg: '',
60
+    popImg: '',
61
+    shareImg: '',
62
+    screenImg: '',
63
+    calendarImg: ''
64
+  },
65
+  {
66
+    id: 5,
67
+    posterImg: '',
68
+    popImg: '',
69
+    shareImg: '',
70
+    screenImg: '',
71
+    calendarImg: ''
72
+  },
73
+  {
74
+    id: 6,
75
+    posterImg: '',
76
+    popImg: '',
77
+    shareImg: '',
78
+    screenImg: '',
79
+    calendarImg: ''
80
+  },
81
+  {
82
+    id: 7,
83
+    posterImg: '',
84
+    popImg: '',
85
+    shareImg: '',
86
+    screenImg: '',
87
+    calendarImg: ''
88
+  },
89
+  {
90
+    id: 8,
91
+    posterImg: '',
92
+    popImg: '',
93
+    shareImg: '',
94
+    screenImg: '',
95
+    calendarImg: ''
96
+  },
97
+  {
98
+    id: 9,
99
+    posterImg: '',
100
+    popImg: '',
101
+    shareImg: '',
102
+    screenImg: '',
103
+    calendarImg: ''
104
+  },
105
+  {
106
+    id: 10,
107
+    posterImg: '',
108
+    popImg: '',
109
+    shareImg: '',
110
+    screenImg: '',
111
+    calendarImg: ''
112
+  },
113
+  {
114
+    id: 11,
115
+    posterImg: '',
116
+    popImg: '',
117
+    shareImg: '',
118
+    screenImg: '',
119
+    calendarImg: ''
120
+  },
121
+  {
122
+    id: 12,
123
+    posterImg: '',
124
+    popImg: '',
125
+    shareImg: '',
126
+    screenImg: '',
127
+    calendarImg: ''
128
+  }
129
+]
28 130
 
29 131
 export default {
30 132
   name: 'Honghe',
@@ -34,9 +136,12 @@ export default {
34 136
   },
35 137
   data() {
36 138
     return {
37
-      indexJPG: new Array(12).fill(null),
139
+      list: shuffle(monthList),
140
+      currentMonth: null,
38 141
       showPopup: false,
39
-      sSaveSharehowPopup: false
142
+      prizeList: [],
143
+      clickNum: 0,
144
+      bingoClickNum: rand(0, 12)
40 145
     }
41 146
   },
42 147
   computed: {
@@ -49,22 +154,56 @@ export default {
49 154
       }
50 155
     }
51 156
   },
52
-  watch: {
53
-    person: {
54
-      handler(val) {
55
-        console.log('-----watch---person----', val)
56
-      },
57
-      immediate: true
58
-    }
157
+  created() {
158
+    this.getPrizes()
59 159
   },
60 160
   methods: {
61 161
     //关闭
62 162
     cancelFrom() {
63 163
       this.showPopup = false
64 164
     },
65
-    baga(e) {
66
-      console.log(e)
67
-      this.showPopup = true
165
+    handleMonthClick(month) {
166
+      this.currentMonth = month
167
+
168
+      // 如果点击可以抽奖
169
+      if (this.clickNum === this.bingoClickNum) {
170
+        if (!this.person.personId) {
171
+          // 报错, 提示刷新页面
172
+        } else {
173
+          // 如果还没有参与
174
+          if (!this.person.isJoined) {
175
+            this.drawLots()
176
+          } else {
177
+            this.showPopup = true
178
+          }
179
+        }
180
+      } else {
181
+        this.showPopup = true
182
+      }
183
+
184
+      if (this.clickNum < this.bingoClickNum) {
185
+        this.clickNum += 1
186
+      }
187
+    },
188
+    // 抽奖
189
+    drawLots() {
190
+      drawLottery(this.person).then((res) => {
191
+        // 更新人员信息
192
+        this.person = res
193
+
194
+        // 其他动作
195
+      })
196
+    },
197
+    // 获取奖品列表
198
+    getPrizes() {
199
+      getPrizeList().then((list) => {
200
+        this.prizeList = list
201
+
202
+        const t = setTimeout(() => {
203
+          hideLoading()
204
+          clearTimeout(t)
205
+        }, 1000)
206
+      })
68 207
     }
69 208
   }
70 209
 }

+ 11
- 0
src/services/person.js Целия файл

@@ -32,3 +32,14 @@ export function drawLottery(person) {
32 32
   const url = `${baseURL}/taPerson/${person.personId}/prize`
33 33
   return request(url)
34 34
 }
35
+
36
+
37
+/**
38
+ * 获取奖品列表
39
+ * @param {*} person 
40
+ * @returns 
41
+ */
42
+export function getPrizeList() {
43
+  const url = `${baseURL}/taPrize`
44
+  return request(url)
45
+}

+ 4
- 0
src/utils/index.js Целия файл

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

+ 28
- 0
src/utils/math.js Целия файл

@@ -0,0 +1,28 @@
1
+
2
+/**
3
+ * 生成 [min, max) 范围内的随机整数
4
+ * @param {*} min 
5
+ * @param {*} max 
6
+ * @returns 
7
+ */
8
+export function rand(min, max) {
9
+  return min + Math.floor(Math.random() * (max - min))
10
+}
11
+
12
+/**
13
+ * 随机打散数组
14
+ * @param {*} arr 
15
+ * @returns 
16
+ */
17
+export function shuffle(arr) {
18
+  // 拷贝一份
19
+  const list = arr.slice()
20
+
21
+  for (var i = list.length - 1; i >= 0; i--) {
22
+    var randomIndex = Math.floor(Math.random() * (i + 1));
23
+    var itemAtIndex = list[randomIndex];
24
+    list[randomIndex] = list[i];
25
+    list[i] = itemAtIndex;
26
+  }
27
+  return list;
28
+}

+ 1
- 1
src/utils/request.js Целия файл

@@ -1,7 +1,7 @@
1 1
 
2 2
 import { getToken } from './token'
3 3
 
4
-export default function request (url, options) {
4
+export default function request (url, options = {}) {
5 5
   const headers = new Headers();
6 6
   headers.append('Content-Type', 'application/json;charset=utf8');
7 7
   headers.append('X-Authorization-JWT', getToken());