honghe
/
h5-draw-lots
Seguir 3
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Activity
Explorar el Código

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

李志伟 hace 3 años
padre
0a7bba875c 285f6e1464
commit
1585a4f1a6
Se han modificado 13 ficheros con 1230 adiciones y 105 borrados
Dividir vista Mostrar estadísticas de diff
  1. 35
    15
      public/index.html
  2. BIN
      public/loading.gif
  3. 305
    0
      src/components/CalendarPoster.vue
  4. 305
    0
      src/components/MyWinning.vue
  5. 25
    14
      src/components/Popup.vue
  6. 3
    43
      src/components/ShaerPopup.vue
  7. 325
    0
      src/components/WinningPopup.vue
  8. 169
    30
      src/pages/Honghe.vue
  9. 19
    2
      src/pages/SaveShare.vue
  10. 11
    0
      src/services/person.js
  11. 4
    0
      src/utils/index.js
  12. 28
    0
      src/utils/math.js
  13. 1
    1
      src/utils/request.js

+ 35
- 15
public/index.html Ver fichero 

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

BIN
public/loading.gif Ver fichero


+ 305
- 0
src/components/CalendarPoster.vue Ver fichero 

@@ -0,0 +1,305 @@
1 
+<template>
2 
+  <div v-if="show" class="dialog-show">
3 
+    <div style=" height:100vh; width:100%;
4 
+    ">
5 
+      <!-- 弹窗 -->
6 
+      <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" />
7 
+      <!-- 弹窗 -->
8 
+
9 
+      <!-- <router-link :to="{path:'/'}"> -->
10 
+      <div
11 
+        class="backhome"
12 
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
13 
+        @click="cancelPopupts"
14 
+      ></div>
15 
+      <!-- </router-link> -->
16 
+
17 
+      <div>
18 
+        <div v-if="stater==0">
19 
+          <!-- 领取屏保 -->
20 
+          <div class="outer3 flex-col">
21 
+            <div class="haibao">
22 
+              <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
23 
+            </div>
24 
+            <div class="mod2 flex-col">
25 
+              <div class="block1 flex-col">
26 
+                <div
27 
+                  class="section1 flex-col"
28 
+                  @click="()=>{this.shaerShow=true}"
29 
+                  :style="`background-image: url(${shaerBut});`"
30 
+                ></div>
31 
+                <span :style="`background-image: url(${pressImage});`" class="info2"></span>
32 
+              </div>
33 
+            </div>
34 
+          </div>
35 
+        </div>
36 
+        <div v-else style="overflow: auto;height:100vh;">
37 
+          <!-- 挂历 -->
38 
+          <div class="page flex-col">
39 
+            <div class="group1 flex-col">
40 
+              <div class="wrap3 flex-col">
41 
+                <img src="~@/assets/saverShaerImg/calendar.jpg" class="subhaibao" />
42 
+              </div>
43 
+              <div class="wrap5 flex-col">
44 
+                <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
45 
+                <div
46 
+                  class="main5 flex-col"
47 
+                  :style="`background-image: url(${shaerButRed});`"
48 
+                  @click="()=>{this.shaerShow=true}"
49 
+                ></div>
50 
+              </div>
51 
+            </div>
52 
+          </div>
53 
+        </div>
54 
+      </div>
55 
+    </div>
56 
+  </div>
57 
+</template>
58 
+
59 
+<script>
60 
+import { hideLoading } from '@/utils'
61 
+
62 
+export default {
63 
+  name: 'CalendarPoster',
64 
+  components: {
65 
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
66 
+  },
67 
+  props: {
68 
+    show: {
69 
+      type: Boolean,
70 
+      default: false,
71 
+      required: true
72 
+    },
73 
+    cancelText: {
74 
+      type: String,
75 
+      default: '取消',
76 
+      required: false
77 
+    },
78 
+
79 
+    stater: {
80 
+      type: Number
81 
+    }
82 
+  },
83 
+
84 
+  data() {
85 
+    return {
86 
+      shaerShow: false,
87 
+      backimg: require('../assets/saverShaerImg/back.png'),
88 
+      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
89 
+      pressImage: require('../assets/saverShaerImg/PressImage.png'),
90 
+      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
91 
+      pressLucky: require('../assets/saverShaerImg/PressLucky.png')
92 
+    }
93 
+  },
94 
+
95 
+  watch: {
96 
+    stater(val, res) {
97 
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
98 
+    },
99 
+    created() {
100 
+      // this.showSelf = this.show
101 
+    },
102 
+    mounted() {
103 
+      hideLoading() //loading
104 
+
105 
+      this.forbidScroll()
106 
+      if (this.show === true) {
107 
+        this.transform()
108 
+      }
109 
+    }
110 
+  },
111 
+  methods: {
112 
+    /** 取消按钮操作 */
113 
+    cancelPopupts() {
114 
+      // this.shaerShow = false
115 
+      // console.log(22222222222222222222222)
116 
+      this.$emit('cancelPopus', true)
117 
+    },
118 
+
119 
+    cancelPopup() {
120 
+      this.shaerShow = false
121 
+    },
122 
+    // shareClick() {
123 
+    //   this.$router.replace({
124 
+    //     path: 'SaveShare',
125 
+    //     query: { states: 0 }
126 
+    //   })
127 
+    // },
128 
+    // saveClick() {
129 
+    //   this.$router.replace({
130 
+    //     path: 'SaveShare',
131 
+    //     query: { states: 1 }
132 
+    //   })
133 
+    // },
134 
+    transform() {
135 
+      setTimeout(() => {
136 
+        this.classDivAA = this.show
137 
+      }, 0)
138 
+    },
139 
+    /** 禁止页面滚动 */
140 
+    forbidScroll() {
141 
+      this.bodyOverflow = document.body.style.overflow
142 
+      document.body.style.overflow = 'hidden'
143 
+    },
144 
+
145 
+    /**  每次获取之后 zindex 自动增加 */
146 
+    getZIndex() {
147 
+      let zIndexInit = 2022112
148 
+      return zIndexInit++
149 
+    },
150 
+
151 
+    /** 确认按钮操作 */
152 
+    confirm() {
153 
+      this.$emit('confirm', true)
154 
+    },
155 
+
156 
+    /** 点击遮罩关闭弹窗 */
157 
+    closeMyself(event) {
158 
+      // this.sloveBodyOverflow()
159 
+      this.$emit('closeMyself', true)
160 
+    },
161 
+
162 
+    /** 恢复页面的滚动 */
163 
+    sloveBodyOverflow() {
164 
+      // this.showSelf = false
165 
+      document.body.style.overflow = this.bodyOverflow
166 
+    }
167 
+  }
168 
+}
169 
+</script>
170 
+
171 
+<style lang="less" scoped>
172 
+// 弹窗动画
173 
+
174 
+// 最外层 设置position定位
175 
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
176 
+
177 
+.flex-col {
178 
+  display: flex;
179 
+  flex-direction: column;
180 
+}
181 
+.dialog {
182 
+  position: fixed;
183 
+  top: 0;
184 
+  right: 0;
185 
+  width: 100%;
186 
+  height: 100%;
187 
+  transition: opacity 1s;
188 
+
189 
+  // 内容层 z-index要比遮罩大，否则会被遮盖
190 
+  .backhome {
191 
+    width: 75px;
192 
+    height: 42px;
193 
+    position: fixed;
194 
+    left: 1rem;
195 
+    top: 1rem;
196 
+    z-index: 19;
197 
+    background-repeat: no-repeat;
198 
+  }
199 
+  .outer3 {
200 
+    width: 100vw;
201 
+    height: 100vh;
202 
+    justify-content: flex-end;
203 
+    .haibao {
204 
+      width: 100vw;
205 
+      position: absolute;
206 
+      left: 0;
207 
+      top: 0;
208 
+    }
209 
+    .mod2 {
210 
+      z-index: 35;
211 
+      height: 210px;
212 
+      background-image: linear-gradient(
213 
+        180deg,
214 
+        transparent,
215 
+        rgba(0, 0, 0, 0.6)
216 
+      );
217 
+      width: 100vw;
218 
+      justify-content: flex-end;
219 
+      padding-bottom: 33px;
220 
+      align-items: center;
221 
+      .block1 {
222 
+        width: 180px;
223 
+        height: 113px;
224 
+        .section1 {
225 
+          height: 48px;
226 
+          border-radius: 8px;
227 
+          background-size: 100% auto;
228 
+          background-color: #fff;
229 
+          width: 180px;
230 
+          justify-content: center;
231 
+          align-items: center;
232 
+          border: 0;
233 
+        }
234 
+        .info2 {
235 
+          width: 152px;
236 
+          height: 54px;
237 
+          display: block;
238 
+          color: #fff;
239 
+          text-align: center;
240 
+          align-self: center;
241 
+          margin-top: 12px;
242 
+          background-size: 100% auto;
243 
+          background-repeat: no-repeat;
244 
+        }
245 
+      }
246 
+    }
247 
+  }
248 
+
249 
+  // 第二个页面
250 
+  .page {
251 
+    // z-index: 1;
252 
+    // position: relative;
253 
+    // overflow-y: auto;
254 
+    // width: 100vw;
255 
+    // height: 100vh;
256 
+
257 
+    .group1 {
258 
+      .wrap3 {
259 
+        z-index: 13;
260 
+        width: 100vw;
261 
+        overflow: hidden;
262 
+        align-self: center;
263 
+        margin-top: 1vw;
264 
+        margin-left: 0;
265 
+        .subhaibao {
266 
+          // position: absolute;
267 
+          width: 100%;
268 
+          left: 0;
269 
+          top: 0;
270 
+        }
271 
+      }
272 
+      .wrap5 {
273 
+        height: 137px;
274 
+        background-color: #efe9e0;
275 
+        width: 100vw;
276 
+        justify-content: center;
277 
+        align-items: center;
278 
+        display: flex;
279 
+        .txt1 {
280 
+          background-size: 100% auto;
281 
+          background-repeat: no-repeat;
282 
+          width: 112px;
283 
+          height: 18px;
284 
+          margin-bottom: 80px;
285 
+        }
286 
+      }
287 
+
288 
+      .main5 {
289 
+        background-size: 100% auto;
290 
+        background-repeat: no-repeat;
291 
+        height: 48px;
292 
+        border-radius: 8px;
293 
+        margin-top: 11px;
294 
+        width: 343px;
295 
+        background-color: #c1172d;
296 
+        border: 0;
297 
+        position: fixed;
298 
+        z-index: 15;
299 
+        bottom: 5vh;
300 
+      }
301 
+    }
302 
+  }
303 
+}
304 
+</style>
305 
+

+ 305
- 0
src/components/MyWinning.vue Ver fichero 

@@ -0,0 +1,305 @@
1 
+<template>
2 
+  <div v-if="show" class="dialog-my">
3 
+    <div style=" height:100vh; width:100%;
4 
+    ">
5 
+      <!-- 弹窗 -->
6 
+      <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
7 
+      <!-- 弹窗 -->
8 
+
9 
+      <!-- <router-link :to="{path:'/'}"> -->
10 
+      <div
11 
+        class="backhome"
12 
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
13 
+        @click="cancelPopupts"
14 
+      ></div>
15 
+      <!-- </router-link> -->
16 
+
17 
+      <div>
18 
+        <div v-if="stater!==0">
19 
+          <!-- 领取屏保 -->
20 
+          <div class="outer3 flex-col">
21 
+            <div class="haibao">
22 
+              <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
23 
+            </div>
24 
+            <div class="mod2 flex-col">
25 
+              <!-- <div class="block1 flex-col">
26 
+                <div
27 
+                  class="section1 flex-col"
28 
+                  @click="()=>{this.shaerShow=true}"
29 
+                  :style="`background-image: url(${shaerBut});`"
30 
+                ></div>
31 
+                <span :style="`background-image: url(${pressImage});`" class="info2"></span>
32 
+              </div>-->
33 
+            </div>
34 
+          </div>
35 
+        </div>
36 
+        <div v-else style="overflow: auto;height:100vh;">
37 
+          <!-- 挂历 -->
38 
+          <div class="page flex-col">
39 
+            <div class="group1 flex-col">
40 
+              <div class="wrap3 flex-col">
41 
+                <img src="~@/assets/saverShaerImg/calendar.jpg" class="subhaibao" />
42 
+              </div>
43 
+              <!-- <div class="wrap5 flex-col">
44 
+                <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
45 
+                <div
46 
+                  class="main5 flex-col"
47 
+                  :style="`background-image: url(${shaerButRed});`"
48 
+                  @click="()=>{this.shaerShow=true}"
49 
+                ></div>
50 
+              </div>-->
51 
+            </div>
52 
+          </div>
53 
+        </div>
54 
+      </div>
55 
+    </div>
56 
+  </div>
57 
+</template>
58 
+
59 
+<script>
60 
+import { hideLoading } from '@/utils'
61 
+
62 
+export default {
63 
+  name: 'CalendarPoster',
64 
+  components: {
65 
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
66 
+  },
67 
+  props: {
68 
+    show: {
69 
+      type: Boolean,
70 
+      default: false,
71 
+      required: true
72 
+    },
73 
+    cancelText: {
74 
+      type: String,
75 
+      default: '取消',
76 
+      required: false
77 
+    },
78 
+
79 
+    stater: {
80 
+      type: Number
81 
+    }
82 
+  },
83 
+
84 
+  data() {
85 
+    return {
86 
+      shaerShow: false,
87 
+      backimg: require('../assets/saverShaerImg/back.png'),
88 
+      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
89 
+      pressImage: require('../assets/saverShaerImg/PressImage.png'),
90 
+      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
91 
+      pressLucky: require('../assets/saverShaerImg/PressLucky.png')
92 
+    }
93 
+  },
94 
+
95 
+  watch: {
96 
+    stater(val, res) {
97 
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
98 
+    },
99 
+    created() {
100 
+      // this.showSelf = this.show
101 
+    },
102 
+    mounted() {
103 
+      hideLoading() //loading
104 
+
105 
+      this.forbidScroll()
106 
+      if (this.show === true) {
107 
+        this.transform()
108 
+      }
109 
+    }
110 
+  },
111 
+  methods: {
112 
+    /** 取消按钮操作 */
113 
+    cancelPopupts() {
114 
+      // this.shaerShow = false
115 
+      // console.log(22222222222222222222222)
116 
+      this.$emit('cancelPopus', true)
117 
+    },
118 
+
119 
+    cancelPopup() {
120 
+      this.shaerShow = false
121 
+    },
122 
+    // shareClick() {
123 
+    //   this.$router.replace({
124 
+    //     path: 'SaveShare',
125 
+    //     query: { states: 0 }
126 
+    //   })
127 
+    // },
128 
+    // saveClick() {
129 
+    //   this.$router.replace({
130 
+    //     path: 'SaveShare',
131 
+    //     query: { states: 1 }
132 
+    //   })
133 
+    // },
134 
+    transform() {
135 
+      setTimeout(() => {
136 
+        this.classDivAA = this.show
137 
+      }, 0)
138 
+    },
139 
+    /** 禁止页面滚动 */
140 
+    forbidScroll() {
141 
+      this.bodyOverflow = document.body.style.overflow
142 
+      document.body.style.overflow = 'hidden'
143 
+    },
144 
+
145 
+    /**  每次获取之后 zindex 自动增加 */
146 
+    getZIndex() {
147 
+      let zIndexInit = 2022112
148 
+      return zIndexInit++
149 
+    },
150 
+
151 
+    /** 确认按钮操作 */
152 
+    confirm() {
153 
+      this.$emit('confirm', true)
154 
+    },
155 
+
156 
+    /** 点击遮罩关闭弹窗 */
157 
+    closeMyself(event) {
158 
+      // this.sloveBodyOverflow()
159 
+      this.$emit('closeMyself', true)
160 
+    },
161 
+
162 
+    /** 恢复页面的滚动 */
163 
+    sloveBodyOverflow() {
164 
+      // this.showSelf = false
165 
+      document.body.style.overflow = this.bodyOverflow
166 
+    }
167 
+  }
168 
+}
169 
+</script>
170 
+
171 
+<style lang="less" scoped>
172 
+// 弹窗动画
173 
+
174 
+// 最外层 设置position定位
175 
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
176 
+
177 
+.flex-col {
178 
+  display: flex;
179 
+  flex-direction: column;
180 
+}
181 
+.dialog-my {
182 
+  position: fixed;
183 
+  top: 0;
184 
+  right: 0;
185 
+  width: 100%;
186 
+  height: 100%;
187 
+  transition: opacity 1s;
188 
+
189 
+  // 内容层 z-index要比遮罩大，否则会被遮盖
190 
+  .backhome {
191 
+    width: 75px;
192 
+    height: 42px;
193 
+    position: fixed;
194 
+    left: 1rem;
195 
+    top: 1rem;
196 
+    z-index: 19;
197 
+    background-repeat: no-repeat;
198 
+  }
199 
+  .outer3 {
200 
+    width: 100vw;
201 
+    height: 100vh;
202 
+    justify-content: flex-end;
203 
+    .haibao {
204 
+      width: 100vw;
205 
+      position: absolute;
206 
+      left: 0;
207 
+      top: 0;
208 
+    }
209 
+    .mod2 {
210 
+      z-index: 35;
211 
+      height: 210px;
212 
+      background-image: linear-gradient(
213 
+        180deg,
214 
+        transparent,
215 
+        rgba(0, 0, 0, 0.6)
216 
+      );
217 
+      width: 100vw;
218 
+      justify-content: flex-end;
219 
+      padding-bottom: 33px;
220 
+      align-items: center;
221 
+      .block1 {
222 
+        width: 180px;
223 
+        height: 113px;
224 
+        .section1 {
225 
+          height: 48px;
226 
+          border-radius: 8px;
227 
+          background-size: 100% auto;
228 
+          background-color: #fff;
229 
+          width: 180px;
230 
+          justify-content: center;
231 
+          align-items: center;
232 
+          border: 0;
233 
+        }
234 
+        .info2 {
235 
+          width: 152px;
236 
+          height: 54px;
237 
+          display: block;
238 
+          color: #fff;
239 
+          text-align: center;
240 
+          align-self: center;
241 
+          margin-top: 12px;
242 
+          background-size: 100% auto;
243 
+          background-repeat: no-repeat;
244 
+        }
245 
+      }
246 
+    }
247 
+  }
248 
+
249 
+  // 第二个页面
250 
+  .page {
251 
+    // z-index: 1;
252 
+    // position: relative;
253 
+    // overflow-y: auto;
254 
+    // width: 100vw;
255 
+    // height: 100vh;
256 
+
257 
+    .group1 {
258 
+      .wrap3 {
259 
+        z-index: 13;
260 
+        width: 100vw;
261 
+        overflow: hidden;
262 
+        align-self: center;
263 
+        margin-top: 1vw;
264 
+        margin-left: 0;
265 
+        .subhaibao {
266 
+          // position: absolute;
267 
+          width: 100%;
268 
+          left: 0;
269 
+          top: 0;
270 
+        }
271 
+      }
272 
+      .wrap5 {
273 
+        height: 137px;
274 
+        background-color: #efe9e0;
275 
+        width: 100vw;
276 
+        justify-content: center;
277 
+        align-items: center;
278 
+        display: flex;
279 
+        .txt1 {
280 
+          background-size: 100% auto;
281 
+          background-repeat: no-repeat;
282 
+          width: 112px;
283 
+          height: 18px;
284 
+          margin-bottom: 80px;
285 
+        }
286 
+      }
287 
+
288 
+      .main5 {
289 
+        background-size: 100% auto;
290 
+        background-repeat: no-repeat;
291 
+        height: 48px;
292 
+        border-radius: 8px;
293 
+        margin-top: 11px;
294 
+        width: 343px;
295 
+        background-color: #c1172d;
296 
+        border: 0;
297 
+        position: fixed;
298 
+        z-index: 15;
299 
+        bottom: 5vh;
300 
+      }
301 
+    }
302 
+  }
303 
+}
304 
+</style>
305 
+

+ 25
- 14
src/components/Popup.vue Ver fichero 

@@ -1,11 +1,13 @@
1 1 
 <template>
2 
-  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
3 
-    <div class="dialog-mark" :style="{'z-index': zIndex + 1}">
2 
+  <div v-if="showSelf" class="dialog">
3 
+    <CalendarPoster :show="showPopupCalendarPoster" @cancelPopus="canckle" :stater="stater" />
4 
+
5 
+    <div class="dialog-mark" @click.self="closeMyself">
4 6 
       <div v-show="myShareShow" class="sharetiptxt" style>
5 7 
         <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
6 8 
       </div>
7 9 
       <transition name="dialog">
8 
-        <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
10 
+        <div class="dialog-sprite">
9 11 
           <div class="dialog-body">
10 12 
             <div class="card-wrapper">
11 13 
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
 
@@ -33,15 +35,17 @@
33 35 
             <div class="section-box-share" @click="()=>{this.myShareShow=true}">
34 36 
               <img src="../assets/popupImg/shareImage.png" alt />
35 37 
             </div>
36 
-            <div class="section-box-receive">
37 
-              <router-link :to="{path:'SaveShare',query: {  states: 0 }}">
38 
-                <img src="../assets/popupImg/receiveImage.png" alt />
39 
-              </router-link>
38 
+            <div
39 
+              class="section-box-receive"
40 
+              @click="()=>{this.showPopupCalendarPoster=true,this.stater=0}"
41 
+            >
42 
+              <img src="../assets/popupImg/receiveImage.png" alt />
40 43 
             </div>
41 
-            <div class="section-box-save">
42 
-              <router-link :to="{path:'SaveShare',query: {  states: 1 }}">
43 
-                <img src="../assets/popupImg/saveImage.png" alt />
44 
-              </router-link>
44 
+            <div
45 
+              class="section-box-save"
46 
+              @click="()=>{this.showPopupCalendarPoster=true,this.stater=1}"
47 
+            >
48 
+              <img src="../assets/popupImg/saveImage.png" alt />
45 49 
             </div>
46 50 
           </div>
47 51 
         </div>
 
@@ -53,7 +57,9 @@
53 57 
 <script>
54 58 
 export default {
55 59 
   name: 'Popup',
56 
-
60 
+  components: {
61 
+    CalendarPoster: () => import('@/components/CalendarPoster.vue')
62 
+  },
57 63 
   props: {
58 64 
     show: {
59 65 
       type: Boolean,
 
@@ -93,7 +99,9 @@ export default {
93 99 
       zIndex: this.getZIndex(),
94 100 
       bodyOverflow: '',
95 101 
       classDivAA: false,
96 
-      myShareShow: false
102 
+      myShareShow: false,
103 
+      showPopupCalendarPoster: false,
104 
+      stater: null
97 105 
     }
98 106 
   },
99 107 
   watch: {
 
@@ -122,6 +130,9 @@ export default {
122 130 
     }
123 131 
   },
124 132 
   methods: {
133 
+    canckle() {
134 
+      this.showPopupCalendarPoster = false
135 
+    },
125 136 
     shareClick() {
126 137 
       this.$router.replace({
127 138 
         path: 'SaveShare',
 
@@ -186,7 +197,7 @@ export default {
186 197
187 198 
   // 内容层 z-index要比遮罩大，否则会被遮盖
188 199 
   .dialog-mark {
189 
-    position: absolute;
200 
+    position: relative;
190 201 
     top: 0;
191 202 
     height: 0;
192 203 
     width: 100%;

+ 3
- 43
src/components/ShaerPopup.vue Ver fichero 

@@ -2,10 +2,10 @@
2 2 
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
3 3 
     <div class="dialog-mark" @click="closeMyself" :style="{'z-index': zIndex + 1}">
4 4 
       <div v-show="myShareShow" class="sharetiptxt" style>
5 
-        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
5 
+        <img style="width:100%; height:100%; z-index:46" src="../assets/popupImg/myShare.png" alt />
6 6 
       </div>
7 7 
       <transition name="dialog">
8 
-        <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
8 
+        <div class="dialog-sprite">
9 9 
           <div class="dialog-body">
10 10 
             <div class="bd2 flex-col">
11 11 
               <img class="pic1" src="../assets/ShaerPopupImg/popuBgc.jpg" alt />
 
@@ -39,7 +39,7 @@
39 39
40 40 
 <script>
41 41 
 export default {
42 
-  name: 'Popup',
42 
+  name: 'ShaerPopup',
43 43
44 44 
   props: {
45 45 
     show: {
 
@@ -47,29 +47,10 @@ export default {
47 47 
       default: false,
48 48 
       required: true
49 49 
     },
50 
-    title: {
51 
-      type: String,
52 
-      required: true
53 
-    },
54 
-    showCancel: {
55 
-      typs: Boolean,
56 
-      default: false,
57 
-      required: false
58 
-    },
59 50 
     cancelText: {
60 51 
       type: String,
61 52 
       default: '取消',
62 53 
       required: false
63 
-    },
64 
-    confirmText: {
65 
-      type: String,
66 
-      default: '确定',
67 
-      required: false
68 
-    },
69 
-    LoadingShow: {
70 
-      type: Boolean,
71 
-      default: false,
72 
-      required: true
73 54 
     }
74 55 
   },
75 56 
 
@@ -89,7 +70,6 @@ export default {
89 70 
       console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
90 71 
       this.showSelf = val
91 72
92 
-      this.transform()
93 73 
       // this.closeMyself()
94 74
95 75 
       // if (!val) {
 
@@ -104,28 +84,8 @@ export default {
104 84 
   },
105 85 
   mounted() {
106 86 
     this.forbidScroll()
107 
-    if (this.show === true) {
108 
-      this.transform()
109 
-    }
110 87 
   },
111 88 
   methods: {
112 
-    shareClick() {
113 
-      this.$router.replace({
114 
-        path: 'SaveShare',
115 
-        query: { states: 0 }
116 
-      })
117 
-    },
118 
-    saveClick() {
119 
-      this.$router.replace({
120 
-        path: 'SaveShare',
121 
-        query: { states: 1 }
122 
-      })
123 
-    },
124 
-    transform() {
125 
-      setTimeout(() => {
126 
-        this.classDivAA = this.show
127 
-      }, 0)
128 
-    },
129 89 
     /** 禁止页面滚动 */
130 90 
     forbidScroll() {
131 91 
       this.bodyOverflow = document.body.style.overflow

+ 325
- 0
src/components/WinningPopup.vue Ver fichero 

@@ -0,0 +1,325 @@
1 
+<template>
2 
+  <div v-if="showSelf" class="dialog">
3 
+    <div class="dialog-mark" @click.self="closeMyself">
4 
+      <div class="sharetiptxt" style>
5 
+        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
6 
+      </div>
7 
+      <transition name="dialog">
8 
+        <div class="dialog-sprite">
9 
+          <div class="dialog-body">
10 
+            <div class="card-wrapper">
11 
+              <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
12 
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
13 
+                <div class="back" :style="`background-image: url(${backimg});`">
14 
+                  <!-- <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt /> -->
15 
+                </div>
16 
+
17 
+                <div class="front">
18 
+                  <img
19 
+                    style="width: 180px; height:492px "
20 
+                    src="../assets/popupImg/backImag.jpg"
21 
+                    alt
22 
+                  />
23 
+                </div>
24 
+              </div>
25 
+            </div>
26 
+
27 
+            <div @click="cancel" class="dialog-footer">
28 
+              <!-- <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt /> -->
29 
+              <h1>开心收下</h1>
30 
+            </div>
31 
+          </div>
32 
+          <!-- 右侧 -->
33 
+        </div>
34 
+      </transition>
35 
+    </div>
36 
+  </div>
37 
+</template>
38 
+
39 
+<script>
40 
+export default {
41 
+  name: 'Popup',
42 
+  components: {},
43 
+  props: {
44 
+    show: {
45 
+      type: Boolean,
46 
+      default: false,
47 
+      required: true
48 
+    },
49 
+
50 
+    cancelText: {
51 
+      type: String,
52 
+      default: '取消',
53 
+      required: false
54 
+    }
55 
+  },
56 
+
57 
+  data() {
58 
+    return {
59 
+      name: 'dialog',
60 
+      showSelf: false,
61 
+      zIndex: this.getZIndex(),
62 
+      bodyOverflow: '',
63 
+      classDivAA: false,
64 
+      myShareShow: false,
65 
+      backimg: require('../assets/popupImg/popuBody.jpg'),
66 
+
67 
+      stater: null
68 
+    }
69 
+  },
70 
+  watch: {
71 
+    show(val) {
72 
+      console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
73 
+      this.showSelf = val
74 
+      if (this.show === false) {
75 
+        this.myShareShow = false
76 
+      }
77 
+      this.transform()
78 
+
79 
+      // if (!val) {
80 
+      //   this.closeMyself()
81 
+      // } else {
82 
+      //   this.showSelf = val
83 
+      // }
84 
+    }
85 
+  },
86 
+  created() {
87 
+    this.showSelf = this.show
88 
+  },
89 
+  mounted() {
90 
+    this.forbidScroll()
91 
+    if (this.show === true) {
92 
+      this.transform()
93 
+    }
94 
+  },
95 
+  methods: {
96 
+    canckle() {
97 
+      // this.showPopupCalendarPoster = false
98 
+    },
99 
+    shareClick() {
100 
+      this.$router.replace({
101 
+        path: 'SaveShare',
102 
+        query: { states: 0 }
103 
+      })
104 
+    },
105 
+    saveClick() {
106 
+      this.$router.replace({
107 
+        path: 'SaveShare',
108 
+        query: { states: 1 }
109 
+      })
110 
+    },
111 
+    transform() {
112 
+      setTimeout(() => {
113 
+        this.classDivAA = this.show
114 
+      }, 0)
115 
+    },
116 
+    /** 禁止页面滚动 */
117 
+    forbidScroll() {
118 
+      this.bodyOverflow = document.body.style.overflow
119 
+      document.body.style.overflow = 'hidden'
120 
+    },
121 
+
122 
+    /**  每次获取之后 zindex 自动增加 */
123 
+    getZIndex() {
124 
+      let zIndexInit = 2022112
125 
+      return zIndexInit++
126 
+    },
127 
+
128 
+    /** 取消按钮操作 */
129 
+    cancel() {
130 
+      this.$emit('cancel', true)
131 
+    },
132 
+
133 
+    /** 确认按钮操作 */
134 
+    confirm() {
135 
+      this.$emit('confirm', true)
136 
+    },
137 
+
138 
+    /** 点击遮罩关闭弹窗 */
139 
+    closeMyself(event) {
140 
+      // this.sloveBodyOverflow()
141 
+    },
142 
+
143 
+    /** 恢复页面的滚动 */
144 
+    sloveBodyOverflow() {
145 
+      document.body.style.overflow = this.bodyOverflow
146 
+    }
147 
+  }
148 
+}
149 
+</script>
150 
+
151 
+<style lang="less" scoped>
152 
+// 弹窗动画
153 
+
154 
+// 最外层 设置position定位
155 
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
156 
+
157 
+.dialog {
158 
+  position: fixed;
159 
+  top: 0;
160 
+  right: 0;
161 
+  width: 100%;
162 
+  height: 100%;
163 
+  transition: opacity 1s;
164 
+
165 
+  // 内容层 z-index要比遮罩大，否则会被遮盖
166 
+  .dialog-mark {
167 
+    position: relative;
168 
+    top: 0;
169 
+    height: 0;
170 
+    width: 100%;
171 
+    height: 100%;
172 
+    background: rgba(0, 0, 0, 0.6);
173 
+    left: 0;
174 
+    top: 0;
175 
+    z-index: 99;
176 
+    display: flex;
177 
+    align-items: center;
178 
+    justify-content: center;
179 
+    .sharetiptxt {
180 
+      background-size: 100% auto;
181 
+      background-repeat: no-repeat;
182 
+      z-index: 55;
183 
+      width: 20px;
184 
+      height: 320px;
185 
+      display: block;
186 
+      position: absolute;
187 
+      right: 1rem;
188 
+      top: 0.5em;
189 
+      animation: tipup 1s ease infinite;
190 
+    }
191 
+  }
192 
+}
193 
+@keyframes tipup {
194 
+  0% {
195 
+    transform: translateY(0%);
196 
+  }
197 
+  50% {
198 
+    transform: translateY(5%);
199 
+  }
200 
+  100% {
201 
+    transform: translateY(0%);
202 
+  }
203 
+}
204 
+
205 
+.dialog-sprite {
206 
+  width: 100vw;
207 
+  display: flex;
208 
+  justify-content: center;
209 
+  position: relative;
210 
+
211 
+  .header {
212 
+    padding: 15px;
213 
+    text-align: center;
214 
+    font-size: 18px;
215 
+    font-weight: 700;
216 
+    color: #333;
217 
+  }
218 
+  .dialog-body {
219 
+    flex: 1;
220 
+    overflow-x: hidden;
221 
+    overflow-y: scroll;
222 
+    padding: 0 15px 20px 15px;
223 
+
224 
+    //中间卡片
225 
+    .card-wrapper {
226 
+      perspective: 600px;
227 
+      margin-top: 2em;
228 
+
229 
+      .dialog-popuImag {
230 
+        position: relative;
231 
+        display: flex;
232 
+        justify-content: center;
233 
+        transform-style: preserve-3d;
234 
+        transition: all 1.2s ease;
235 
+
236 
+        // div {
237 
+        //   // position: relative;
238 
+        //   position: absolute;
239 
+        //   width: 100%;
240 
+        //   height: 100%;
241 
+        //   /* 背面不显示 */
242 
+        //   // backface-visibility: hidden;
243 
+        // }
244 
+        .front {
245 
+        }
246 
+        .back {
247 
+          position: absolute;
248 
+          transform: rotateY(180deg);
249 
+          width: 180px;
250 
+          height: 492px;
251 
+          background-size: 100% auto;
252 
+          // animation: change 0.8s linear forwards;
253 
+        }
254 
+
255 
+        img {
256 
+          width: 48vw;
257 
+        }
258 
+      }
259 
+      .flipped {
260 
+        animation: change 0.8s linear forwards;
261 
+      }
262 
+    }
263 
+    @keyframes change {
264 
+      from {
265 
+        top: -20vh;
266 
+        left: -20vw;
267 
+        opacity: 0;
268 
+        transform: scale(0.5);
269 
+      }
270 
+      to {
271 
+        top: -0;
272 
+        left: -0;
273 
+        opacity: 2;
274 
+        transform: scale(1);
275 
+        transform: rotateY(180deg);
276 
+      }
277 
+    }
278 
+    //底部按钮
279 
+    .dialog-footer {
280 
+      width: 100%;
281 
+      background-size: 100% auto;
282 
+      margin: 10px auto 0;
283 
+      .btn {
284 
+        padding-top: 0;
285 
+        width: 32px;
286 
+        height: 32px;
287 
+      }
288 
+    }
289 
+  }
290 
+  .section-box {
291 
+    position: absolute;
292 
+    right: 15vw;
293 
+    top: 98px;
294 
+    height: 394px;
295 
+    display: flex;
296 
+    flex-direction: column;
297 
+    width: 36px;
298 
+    justify-content: space-between;
299 
+    margin-top: 2em;
300 
+
301 
+    img {
302 
+      width: 36px;
303 
+      background-size: 100% auto;
304 
+      margin-top: 0;
305 
+      border-radius: 18px;
306 
+    }
307 
+
308 
+    &-receive {
309 
+      width: 36px;
310 
+      background-size: 100% auto;
311 
+      margin-top: 0;
312 
+    }
313 
+    &-save {
314 
+      width: 36px;
315 
+      border-radius: 18px;
316 
+      background-size: 100% auto;
317 
+      width: 36px;
318 
+      margin-top: 0;
319 
+
320 
+      // background: url('../assets/popupImg/receiveImage.png') no-repeat;
321 
+    }
322 
+  }
323 
+}
324 
+</style>
325 
+

+ 169
- 30
src/pages/Honghe.vue Ver fichero 

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

+ 19
- 2
src/pages/SaveShare.vue Ver fichero 

@@ -13,7 +13,7 @@
13 13 
         <!-- 领取屏保 -->
14 14 
         <div class="outer3 flex-col">
15 15 
           <div class="haibao">
16 
-            <img class="haibao" src="../assets/saverShaerImg/haibao.jpg" alt />
16 
+            <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
17 17 
           </div>
18 18 
           <div class="mod2 flex-col">
19 19 
             <div class="block1 flex-col">
 
@@ -50,11 +50,25 @@
50 50 
 </template>
51 51
52 52 
 <script>
53 
+import { hideLoading } from '@/utils'
54 
+
53 55 
 export default {
54 56 
   name: 'SaveShare',
55 57 
   components: {
56 58 
     ShaerPopup: () => import('@/components/ShaerPopup.vue')
57 59 
   },
60 
+  props: {
61 
+    show: {
62 
+      type: Boolean,
63 
+      default: false,
64 
+      required: true
65 
+    },
66 
+    type: String,
67 
+    cancelText: {
68 
+      default: '取消',
69 
+      required: false
70 
+    }
71 
+  },
58 72 
   data() {
59 73 
     return {
60 74 
       item: null,
 
@@ -66,6 +80,9 @@ export default {
66 80 
       pressLucky: require('../assets/saverShaerImg/PressLucky.png')
67 81 
     }
68 82 
   },
83 
+  mounted() {
84 
+    hideLoading()
85 
+  },
69 86
70 87 
   watch: {
71 88 
     '$route.query.states': {
 
@@ -175,7 +192,7 @@ export default {
175 192 
     .wrap5 {
176 193 
       height: 137px;
177 194 
       background-color: #efe9e0;
178 
-      margin-top: 19px;
195 
+      // margin-top: 19px;
179 196 
       width: 100vw;
180 197 
       justify-content: center;
181 198 
       align-items: center;

+ 11
- 0
src/services/person.js Ver fichero 

@@ -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 Ver fichero 

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

+ 28
- 0
src/utils/math.js Ver fichero 

@@ -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 Ver fichero 

@@ -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());