Kaynağa Gözat

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

李志伟 3 yıl önce
ebeveyn
işleme
85ac6d54bd

+ 14
- 13
src/components/CalendarPoster.vue Dosyayı Görüntüle

43
               <div class="wrap5 flex-col">
43
               <div class="wrap5 flex-col">
44
                 <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
44
                 <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
45
                 <div
45
                 <div
46
-                  class="main5 flex-col"
46
+                  class="main5-month flex-col"
47
                   :style="`background-image: url(${shaerButRed});`"
47
                   :style="`background-image: url(${shaerButRed});`"
48
                   @click="()=>{this.shaerShow=true}"
48
                   @click="()=>{this.shaerShow=true}"
49
                 ></div>
49
                 ></div>
90
       backimg: require('../assets/buttonImg/backImg.png'),
90
       backimg: require('../assets/buttonImg/backImg.png'),
91
       shaerBut: require('../assets/buttonImg/sayFriend.png'),
91
       shaerBut: require('../assets/buttonImg/sayFriend.png'),
92
       pressImage: require('../assets/buttonImg/pressSave.png'),
92
       pressImage: require('../assets/buttonImg/pressSave.png'),
93
-      shaerButRed: require('../assets/buttonImg/sayFriend.png'),
94
-      pressLucky: require('../assets/buttonImg/happyAccept.png')
93
+      shaerButRed: require('../assets/buttonImg/happyAccept.png'),
94
+      pressLucky: require('../assets/buttonImg/pressSave.png')
95
     }
95
     }
96
   },
96
   },
97
 
97
 
191
 
191
 
192
   // 内容层 z-index要比遮罩大,否则会被遮盖
192
   // 内容层 z-index要比遮罩大,否则会被遮盖
193
   .backhome {
193
   .backhome {
194
-    width: 75px;
194
+    width: 85px;
195
     height: 42px;
195
     height: 42px;
196
     position: fixed;
196
     position: fixed;
197
     left: 1rem;
197
     left: 1rem;
198
     top: 1rem;
198
     top: 1rem;
199
     z-index: 19;
199
     z-index: 19;
200
-    background-repeat: no-repeat;
200
+    background-repeat: no-repeat !important;
201
   }
201
   }
202
   .outer3 {
202
   .outer3 {
203
     width: 100vw;
203
     width: 100vw;
225
         width: 180px;
225
         width: 180px;
226
         height: 113px;
226
         height: 113px;
227
         .section1 {
227
         .section1 {
228
-          height: 48px;
228
+          height: 84px;
229
           border-radius: 8px;
229
           border-radius: 8px;
230
           background-size: 100% auto;
230
           background-size: 100% auto;
231
           background-color: #fff;
231
           background-color: #fff;
235
           border: 0;
235
           border: 0;
236
         }
236
         }
237
         .info2 {
237
         .info2 {
238
-          width: 152px;
239
-          height: 54px;
238
+          width: 156px;
239
+          height: 60px;
240
           display: block;
240
           display: block;
241
           color: #fff;
241
           color: #fff;
242
           text-align: center;
242
           text-align: center;
282
         .txt1 {
282
         .txt1 {
283
           background-size: 100% auto;
283
           background-size: 100% auto;
284
           background-repeat: no-repeat;
284
           background-repeat: no-repeat;
285
-          width: 112px;
286
-          height: 18px;
285
+          width: 160px;
286
+          height: 48px;
287
           margin-bottom: 80px;
287
           margin-bottom: 80px;
288
         }
288
         }
289
       }
289
       }
290
 
290
 
291
-      .main5 {
292
-        background-size: 100% auto;
291
+      .main5-month {
292
+        // background-size: 100% 100%;
293
+        background-position: 50% 50%;
293
         background-repeat: no-repeat;
294
         background-repeat: no-repeat;
294
         height: 48px;
295
         height: 48px;
295
         border-radius: 8px;
296
         border-radius: 8px;
296
         margin-top: 11px;
297
         margin-top: 11px;
297
         width: 343px;
298
         width: 343px;
298
-        background-color: #b12b32;
299
+        background-color: #b02c32;
299
         border: 0;
300
         border: 0;
300
         position: fixed;
301
         position: fixed;
301
         z-index: 15;
302
         z-index: 15;

+ 5
- 6
src/components/MyWinning.vue Dosyayı Görüntüle

1
 <template>
1
 <template>
2
   <div v-if="show" class="dialog-my">
2
   <div v-if="show" class="dialog-my">
3
-    <div style=" height:100vh; width:100%;
4
-    ">
3
+    <div style=" height:100vh; width:100%;">
5
       <!-- 弹窗 -->
4
       <!-- 弹窗 -->
6
       <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
5
       <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
7
       <!-- 弹窗 -->
6
       <!-- 弹窗 -->
75
       default: '取消',
74
       default: '取消',
76
       required: false
75
       required: false
77
     },
76
     },
78
-    currentMonth: {
77
+    currentPerson: {
79
       type: Object
78
       type: Object
80
     },
79
     },
81
     stater: {
80
     stater: {
181
   flex-direction: column;
180
   flex-direction: column;
182
 }
181
 }
183
 .dialog-my {
182
 .dialog-my {
184
-  position: fixed;
183
+  position: relative;
185
   top: 0;
184
   top: 0;
186
   right: 0;
185
   right: 0;
187
   width: 100%;
186
   width: 100%;
190
 
189
 
191
   // 内容层 z-index要比遮罩大,否则会被遮盖
190
   // 内容层 z-index要比遮罩大,否则会被遮盖
192
   .backhome {
191
   .backhome {
193
-    width: 75px;
192
+    width: 85px;
194
     height: 42px;
193
     height: 42px;
195
     position: fixed;
194
     position: fixed;
196
     left: 1rem;
195
     left: 1rem;
197
     top: 1rem;
196
     top: 1rem;
198
     z-index: 19;
197
     z-index: 19;
199
-    background-repeat: no-repeat;
198
+    background-repeat: no-repeat !important;
200
   }
199
   }
201
   .outer3 {
200
   .outer3 {
202
     width: 100vw;
201
     width: 100vw;

+ 5
- 6
src/components/Popup.vue Dosyayı Görüntüle

8
     />
8
     />
9
 
9
 
10
     <!-- 我的奖品 -->
10
     <!-- 我的奖品 -->
11
-    <MyWinning
12
-      :show="MyWinningShow"
13
-      @cancel="()=>this.MyWinningShow=false"
14
-      :current-month="currentMonth"
15
-    />
11
+    <MyWinning :show="MyWinningShow" @cancel="canclMyWinning" :current-month="currentMonth" />
16
 
12
 
17
     <div class="dialog-mark" @click.self="closeMyself">
13
     <div class="dialog-mark" @click.self="closeMyself">
18
       <div v-show="myShareShow" class="sharetiptxt" style>
14
       <div v-show="myShareShow" class="sharetiptxt" style>
19
-        <img style="width:100%; height:100%;" src="../assets/buttonImg/shareText.png" alt />
15
+        <img style=" height:100%;" src="../assets/buttonImg/shareText.png" alt />
20
       </div>
16
       </div>
21
       <transition name="dialog">
17
       <transition name="dialog">
22
         <div class="dialog-sprite">
18
         <div class="dialog-sprite">
139
     }
135
     }
140
   },
136
   },
141
   methods: {
137
   methods: {
138
+    canclMyWinning() {
139
+      this.MyWinningShow = false
140
+    },
142
     canckle() {
141
     canckle() {
143
       this.showPopupCalendarPoster = false
142
       this.showPopupCalendarPoster = false
144
     },
143
     },

+ 4
- 8
src/components/ShaerPopup.vue Dosyayı Görüntüle

2
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
2
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
3
     <div class="dialog-mark" @click="closeMyself" :style="{'z-index': zIndex + 1}">
3
     <div class="dialog-mark" @click="closeMyself" :style="{'z-index': zIndex + 1}">
4
       <div v-show="myShareShow" class="sharetiptxt" style>
4
       <div v-show="myShareShow" class="sharetiptxt" style>
5
-        <img
6
-          style="width:100%; height:100%; z-index:46"
7
-          src="../assets/buttonImg/shareText.png"
8
-          alt
9
-        />
5
+        <img style=" height:100%; z-index:46" src="../assets/buttonImg/shareText.png" alt />
10
       </div>
6
       </div>
11
       <transition name="dialog">
7
       <transition name="dialog">
12
         <div class="dialog-sprite">
8
         <div class="dialog-sprite">
52
       showSelf: false,
48
       showSelf: false,
53
       zIndex: this.getZIndex(),
49
       zIndex: this.getZIndex(),
54
       bodyOverflow: '',
50
       bodyOverflow: '',
55
-      popuSave: require('../assets/sharePagesImg/2.jpg'),
51
+      popuSave: require('../assets/buttonImg/pressSave.png'),
56
 
52
 
57
       myShareShow: true
53
       myShareShow: true
58
     }
54
     }
243
       margin: 10px auto 0;
239
       margin: 10px auto 0;
244
       .btn {
240
       .btn {
245
         z-index: 42;
241
         z-index: 42;
246
-        width: 152px;
247
-        height: 50px;
242
+        width: 180px;
243
+        height: 52px;
248
         display: block;
244
         display: block;
249
         text-align: center;
245
         text-align: center;
250
         align-self: center;
246
         align-self: center;

+ 16
- 10
src/components/WinningPopup.vue Dosyayı Görüntüle

2
   <div v-if="showSelf" class="dialog">
2
   <div v-if="showSelf" class="dialog">
3
     <div class="dialog-mark" @click.self="closeMyself">
3
     <div class="dialog-mark" @click.self="closeMyself">
4
       <div class="sharetiptxt" style>
4
       <div class="sharetiptxt" style>
5
-        <img style="width:100%; height:100%;" src="../assets/buttonImg/shareText.png" alt />
5
+        <img style=" height:100%;" src="../assets/buttonImg/shareText.png" alt />
6
       </div>
6
       </div>
7
       <transition name="dialog">
7
       <transition name="dialog">
8
         <div class="dialog-sprite">
8
         <div class="dialog-sprite">
9
           <div class="dialog-body">
9
           <div class="dialog-body">
10
             <div class="card-wrapper">
10
             <div class="card-wrapper">
11
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
11
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
12
-                <img src="../assets/popupImg/popuBody.jpg" alt />
12
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
13
                 <div class="back" :style="`background-image: url(${backimg});`">
13
                 <div class="back" :style="`background-image: url(${backimg});`">
14
-                  <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt />
14
+                  <img
15
+                    style="width: 180px; height:492px"
16
+                    src="../assets/prizeImg/HappyWnning.jpg"
17
+                    alt
18
+                  />
15
                 </div>
19
                 </div>
16
 
20
 
17
                 <div class="front">
21
                 <div class="front">
18
                   <img
22
                   <img
19
                     style="width: 180px; height:492px "
23
                     style="width: 180px; height:492px "
20
-                    src="../assets/buttonImg/backImg.png"
24
+                    src="../assets/prizeImg/HappyWnning.jpg"
21
                     alt
25
                     alt
22
                   />
26
                   />
23
                 </div>
27
                 </div>
25
             </div>
29
             </div>
26
 
30
 
27
             <div @click="cancel" class="dialog-footer">
31
             <div @click="cancel" class="dialog-footer">
28
-              <!-- <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt /> -->
29
-              <h1>开心收下</h1>
32
+              <img @click="cancel" class="btn" src="../assets/buttonImg/happyAccept.png" alt />
30
             </div>
33
             </div>
31
           </div>
34
           </div>
32
           <!-- 右侧 -->
35
           <!-- 右侧 -->
252
           width: 180px;
255
           width: 180px;
253
           height: 492px;
256
           height: 492px;
254
           background-size: 100% auto;
257
           background-size: 100% auto;
258
+          background-repeat: no-repeat;
259
+
255
           // animation: change 0.8s linear forwards;
260
           // animation: change 0.8s linear forwards;
256
         }
261
         }
257
 
262
 
280
     }
285
     }
281
     //底部按钮
286
     //底部按钮
282
     .dialog-footer {
287
     .dialog-footer {
283
-      width: 100%;
284
-      background-size: 100% auto;
288
+      width: 140px;
289
+
285
       margin: 10px auto 0;
290
       margin: 10px auto 0;
286
       .btn {
291
       .btn {
292
+        background-position: 50% 50%;
293
+        background-repeat: no-repeat;
287
         padding-top: 0;
294
         padding-top: 0;
288
-        width: 32px;
289
-        height: 32px;
295
+        width: 100%;
290
       }
296
       }
291
     }
297
     }
292
   }
298
   }

+ 9
- 9
src/components/imgbox.vue Dosyayı Görüntüle

15
   props: {
15
   props: {
16
     prize: {
16
     prize: {
17
       type: Object,
17
       type: Object,
18
-      default: () => ({}),
19
-    },
18
+      default: () => ({})
19
+    }
20
   },
20
   },
21
   computed: {
21
   computed: {
22
     poster() {
22
     poster() {
23
       return this.mode === 1
23
       return this.mode === 1
24
-        ? require("../assets/index.jpg")
24
+        ? require('../assets/index.jpg')
25
         : this.mode === 3
25
         : this.mode === 3
26
         ? this.prize.posterImg
26
         ? this.prize.posterImg
27
-        : "";
27
+        : ''
28
     },
28
     },
29
     mode() {
29
     mode() {
30
-      return this.prize.mode;
30
+      return this.prize.mode
31
     },
31
     },
32
     nowBackImg() {
32
     nowBackImg() {
33
-      return this.mode === 3 ? this.prize.popImg : "";
34
-    },
35
-  },
36
-};
33
+      return this.mode === 3 ? this.prize.popImg : ''
34
+    }
35
+  }
36
+}
37
 </script>
37
 </script>
38
 <style lang="less" scoped>
38
 <style lang="less" scoped>
39
 .bigBox {
39
 .bigBox {

+ 16
- 2
src/pages/Honghe.vue Dosyayı Görüntüle

143
   name: 'Honghe',
143
   name: 'Honghe',
144
   components: {
144
   components: {
145
     Popup: () => import('@/components/Popup.vue'),
145
     Popup: () => import('@/components/Popup.vue'),
146
-    MyWinning: () => import('@/components/MyWinning.vue'),
146
+    WinningPopup: () => import('@/components/WinningPopup.vue'),
147
     ImgBox: () => import('@/components/imgbox.vue')
147
     ImgBox: () => import('@/components/imgbox.vue')
148
   },
148
   },
149
   data() {
149
   data() {
154
       showMyWinning: false,
154
       showMyWinning: false,
155
       prizeList: [],
155
       prizeList: [],
156
       clickNum: 0,
156
       clickNum: 0,
157
-      bingoClickNum: rand(0, 12)
157
+      bingoClickNum: rand(0, 12),
158
+      prizeIds: null
158
     }
159
     }
159
   },
160
   },
160
   computed: {
161
   computed: {
180
         }
181
         }
181
       })
182
       })
182
     },
183
     },
184
+    cancelWinnint() {
185
+      this.showMyWinning = false
186
+    },
183
     handleMonthClick(month) {
187
     handleMonthClick(month) {
188
+      this.showMyWinning = true
189
+
190
+      console.log(
191
+        '🚀 ~ file: Honghe.vue ~ line 193 ~ handleMonthClick ~ month',
192
+        month
193
+      )
184
       this.list.map((item) => {
194
       this.list.map((item) => {
185
         if (item.id == month.id) {
195
         if (item.id == month.id) {
186
           item.mode = 2
196
           item.mode = 2
221
     getPrizes() {
231
     getPrizes() {
222
       getPrizeList().then((list) => {
232
       getPrizeList().then((list) => {
223
         this.prizeList = list
233
         this.prizeList = list
234
+        console.log(
235
+          '🚀 ~ file: Honghe.vue ~ line 227 ~ getPrizeList ~ list',
236
+          list
237
+        )
224
 
238
 
225
         const t = setTimeout(() => {
239
         const t = setTimeout(() => {
226
           hideLoading()
240
           hideLoading()

+ 3
- 2
src/pages/SaveShare.vue Dosyayı Görüntüle

112
   flex-direction: column;
112
   flex-direction: column;
113
 }
113
 }
114
 .backhome {
114
 .backhome {
115
-  width: 75px;
115
+  width: 85px;
116
+
116
   height: 42px;
117
   height: 42px;
117
   position: fixed;
118
   position: fixed;
118
   left: 1rem;
119
   left: 1rem;
119
   top: 1rem;
120
   top: 1rem;
120
   z-index: 19;
121
   z-index: 19;
121
-  background-repeat: no-repeat;
122
+  background-repeat: no-repeat !important;
122
 }
123
 }
123
 .outer3 {
124
 .outer3 {
124
   width: 100vw;
125
   width: 100vw;

+ 5
- 5
src/router/index.js Dosyayı Görüntüle

21
       component: Honghe,
21
       component: Honghe,
22
 
22
 
23
     },
23
     },
24
-    {
25
-      path: '/SaveShare',
26
-      name: 'SaveShare',
27
-      component: SaveShare,
24
+    // {
25
+    //   path: '/SaveShare',
26
+    //   name: 'SaveShare',
27
+    //   component: SaveShare,
28
 
28
 
29
-    },
29
+    // },
30
   ]
30
   ]
31
 })
31
 })
32
 
32