honghe
/
h5-draw-lots
Vērot 3
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

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

Baozhangchao 3 gadus atpakaļ
vecāks
fda2ccf943 74f2d1ba25
revīzija
260c9b4e15
7 mainītis faili ar 216 papildinājumiem un 20 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  1. 14
    0
      public/index.html
  2. Binārs
      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 Parādīt failu

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ārs
public/loading.gif Parādīt failu


+ 158
- 19
src/pages/Honghe.vue Parādīt failu

1 
 <template>
 1 
 <template>
2 
   <div class="index-box">
 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 
     <div>
 4 
     <div>
6 
       <div>
 5 
       <div>
7 
         <img class="topImage" src="../assets/hareTop.png" alt />
 6 
         <img class="topImage" src="../assets/hareTop.png" alt />
9 
     </div>
 8 
     </div>
10 
     <div class="outer6-wrapper">
 9 
     <div class="outer6-wrapper">
11 
       <div class="outer6 flex-col">
 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 
               :class="`section-item-image ${!showPopup?'backImag':''}` "
 15 
               :class="`section-item-image ${!showPopup?'backImag':''}` "
17 
               src="../assets/popupImg/backImag.jpg"
 16 
               src="../assets/popupImg/backImag.jpg"
18 
-            />-->
17 
+            />
19 
           </div>
 18 
           </div>
20 
         </div>
 19 
         </div>
21 
       </div>
 20 
       </div>
25
24
26 
 <script>
 25 
 <script>
27 
 import { useModel } from '@/store'
 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 
 export default {
 131 
 export default {
30 
   name: 'Honghe',
 132 
   name: 'Honghe',
34 
   },
 136 
   },
35 
   data() {
 137 
   data() {
36 
     return {
 138 
     return {
37 
-      indexJPG: new Array(12).fill(null),
139 
+      list: shuffle(monthList),
140 
+      currentMonth: null,
38 
       showPopup: false,
 141 
       showPopup: false,
39 
-      sSaveSharehowPopup: false
142 
+      prizeList: [],
143 
+      clickNum: 0,
144 
+      bingoClickNum: rand(0, 12)
40 
     }
 145 
     }
41 
   },
 146 
   },
42 
   computed: {
 147 
   computed: {
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 
   methods: {
 160 
   methods: {
61 
     //关闭
 161 
     //关闭
62 
     cancelFrom() {
 162 
     cancelFrom() {
63 
       this.showPopup = false
 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 Parādīt failu

32 
   const url = `${baseURL}/taPerson/${person.personId}/prize`
 32 
   const url = `${baseURL}/taPerson/${person.personId}/prize`
33 
   return request(url)
 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 Parādīt failu

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

+ 28
- 0
src/utils/math.js Parādīt failu

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 Parādīt failu

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