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

src/components/CalendarPoster.vue

@@ -43,7 +43,7 @@
               <div class="wrap5 flex-col">
                 <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
                 <div
-                  class="main5 flex-col"
+                  class="main5-month flex-col"
                   :style="`background-image: url(${shaerButRed});`"
                   @click="()=>{this.shaerShow=true}"
                 ></div>
@@ -90,8 +90,8 @@ export default {
       backimg: require('../assets/buttonImg/backImg.png'),
       shaerBut: require('../assets/buttonImg/sayFriend.png'),
       pressImage: require('../assets/buttonImg/pressSave.png'),
-      shaerButRed: require('../assets/buttonImg/sayFriend.png'),
-      pressLucky: require('../assets/buttonImg/happyAccept.png')
+      shaerButRed: require('../assets/buttonImg/happyAccept.png'),
+      pressLucky: require('../assets/buttonImg/pressSave.png')
     }
   },
 
@@ -191,13 +191,13 @@ export default {
 
   // 内容层 z-index要比遮罩大，否则会被遮盖
   .backhome {
-    width: 75px;
+    width: 85px;
     height: 42px;
     position: fixed;
     left: 1rem;
     top: 1rem;
     z-index: 19;
-    background-repeat: no-repeat;
+    background-repeat: no-repeat !important;
   }
   .outer3 {
     width: 100vw;
@@ -225,7 +225,7 @@ export default {
         width: 180px;
         height: 113px;
         .section1 {
-          height: 48px;
+          height: 84px;
           border-radius: 8px;
           background-size: 100% auto;
           background-color: #fff;
@@ -235,8 +235,8 @@ export default {
           border: 0;
         }
         .info2 {
-          width: 152px;
-          height: 54px;
+          width: 156px;
+          height: 60px;
           display: block;
           color: #fff;
           text-align: center;
@@ -282,20 +282,21 @@ export default {
         .txt1 {
           background-size: 100% auto;
           background-repeat: no-repeat;
-          width: 112px;
-          height: 18px;
+          width: 160px;
+          height: 48px;
           margin-bottom: 80px;
         }
       }
 
-      .main5 {
-        background-size: 100% auto;
+      .main5-month {
+        // background-size: 100% 100%;
+        background-position: 50% 50%;
         background-repeat: no-repeat;
         height: 48px;
         border-radius: 8px;
         margin-top: 11px;
         width: 343px;
-        background-color: #c1172d;
+        background-color: #b02c32;
         border: 0;
         position: fixed;
         z-index: 15;

src/components/MyWinning.vue

@@ -1,7 +1,6 @@
 <template>
   <div v-if="show" class="dialog-my">
-    <div style=" height:100vh; width:100%;
-    ">
+    <div style=" height:100vh; width:100%;">
       <!-- 弹窗 -->
       <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
       <!-- 弹窗 -->
@@ -75,7 +74,7 @@ export default {
       default: '取消',
       required: false
     },
-    currentMonth: {
+    currentPerson: {
       type: Object
     },
     stater: {
@@ -181,7 +180,7 @@ export default {
   flex-direction: column;
 }
 .dialog-my {
-  position: fixed;
+  position: relative;
   top: 0;
   right: 0;
   width: 100%;
@@ -190,13 +189,13 @@ export default {
 
   // 内容层 z-index要比遮罩大，否则会被遮盖
   .backhome {
-    width: 75px;
+    width: 85px;
     height: 42px;
     position: fixed;
     left: 1rem;
     top: 1rem;
     z-index: 19;
-    background-repeat: no-repeat;
+    background-repeat: no-repeat !important;
   }
   .outer3 {
     width: 100vw;
@@ -294,7 +293,7 @@ export default {
         border-radius: 8px;
         margin-top: 11px;
         width: 343px;
-        background-color: #c1172d;
+        background-color: #b12b32;
         border: 0;
         position: fixed;
         z-index: 15;

src/components/Popup.vue

@@ -8,15 +8,11 @@
     />
 
     <!-- 我的奖品 -->
-    <MyWinning
-      :show="MyWinningShow"
-      @cancel="()=>this.MyWinningShow=false"
-      :current-month="currentMonth"
-    />
+    <MyWinning :show="MyWinningShow" @cancel="canclMyWinning" :current-month="currentMonth" />
 
     <div class="dialog-mark" @click.self="closeMyself">
       <div v-show="myShareShow" class="sharetiptxt" style>
-        <img style="width:100%; height:100%;" src="../assets/buttonImg/shareText.png" alt />
+        <img style=" height:100%;" src="../assets/buttonImg/shareText.png" alt />
       </div>
       <transition name="dialog">
         <div class="dialog-sprite">
@@ -139,6 +135,9 @@ export default {
     }
   },
   methods: {
+    canclMyWinning() {
+      this.MyWinningShow = false
+    },
     canckle() {
       this.showPopupCalendarPoster = false
     },

src/components/ShaerPopup.vue

@@ -2,11 +2,7 @@
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
     <div class="dialog-mark" @click="closeMyself" :style="{'z-index': zIndex + 1}">
       <div v-show="myShareShow" class="sharetiptxt" style>
-        <img
-          style="width:100%; height:100%; z-index:46"
-          src="../assets/buttonImg/shareText.png"
-          alt
-        />
+        <img style=" height:100%; z-index:46" src="../assets/buttonImg/shareText.png" alt />
       </div>
       <transition name="dialog">
         <div class="dialog-sprite">
@@ -52,7 +48,7 @@ export default {
       showSelf: false,
       zIndex: this.getZIndex(),
       bodyOverflow: '',
-      popuSave: require('../assets/sharePagesImg/2.jpg'),
+      popuSave: require('../assets/buttonImg/pressSave.png'),
 
       myShareShow: true
     }
@@ -243,8 +239,8 @@ export default {
       margin: 10px auto 0;
       .btn {
         z-index: 42;
-        width: 152px;
-        height: 50px;
+        width: 180px;
+        height: 52px;
         display: block;
         text-align: center;
         align-self: center;

src/components/WinningPopup.vue

@@ -2,22 +2,26 @@
   <div v-if="showSelf" class="dialog">
     <div class="dialog-mark" @click.self="closeMyself">
       <div class="sharetiptxt" style>
-        <img style="width:100%; height:100%;" src="../assets/buttonImg/shareText.png" alt />
+        <img style=" height:100%;" src="../assets/buttonImg/shareText.png" alt />
       </div>
       <transition name="dialog">
         <div class="dialog-sprite">
           <div class="dialog-body">
             <div class="card-wrapper">
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
-                <img src="../assets/popupImg/popuBody.jpg" alt />
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
                 <div class="back" :style="`background-image: url(${backimg});`">
-                  <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt />
+                  <img
+                    style="width: 180px; height:492px"
+                    src="../assets/prizeImg/HappyWnning.jpg"
+                    alt
+                  />
                 </div>
 
                 <div class="front">
                   <img
                     style="width: 180px; height:492px "
-                    src="../assets/buttonImg/backImg.png"
+                    src="../assets/prizeImg/HappyWnning.jpg"
                     alt
                   />
                 </div>
@@ -25,8 +29,7 @@
             </div>
 
             <div @click="cancel" class="dialog-footer">
-              <!-- <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt /> -->
-              <h1>开心收下</h1>
+              <img @click="cancel" class="btn" src="../assets/buttonImg/happyAccept.png" alt />
             </div>
           </div>
           <!-- 右侧 -->
@@ -252,6 +255,8 @@ export default {
           width: 180px;
           height: 492px;
           background-size: 100% auto;
+          background-repeat: no-repeat;
+
           // animation: change 0.8s linear forwards;
         }
 
@@ -280,13 +285,14 @@ export default {
     }
     //底部按钮
     .dialog-footer {
-      width: 100%;
-      background-size: 100% auto;
+      width: 140px;
+
       margin: 10px auto 0;
       .btn {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
         padding-top: 0;
-        width: 32px;
-        height: 32px;
+        width: 100%;
       }
     }
   }

src/components/imgbox.vue

@@ -15,25 +15,25 @@ export default {
   props: {
     prize: {
       type: Object,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   computed: {
     poster() {
       return this.mode === 1
-        ? require("../assets/index.jpg")
+        ? require('../assets/index.jpg')
         : this.mode === 3
         ? this.prize.posterImg
-        : "";
+        : ''
     },
     mode() {
-      return this.prize.mode;
+      return this.prize.mode
     },
     nowBackImg() {
-      return this.mode === 3 ? this.prize.popImg : "";
-    },
-  },
-};
+      return this.mode === 3 ? this.prize.popImg : ''
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
 .bigBox {

src/pages/Honghe.vue

@@ -2,11 +2,7 @@
   <div class="index-box">
     <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
     <MyWinning :show="showMyWinning" :current-month="currentMonth" />
-    <div>
-      <div>
-        <!-- <img class="topImage" src="../assets/indexImg/indexBgc.jpg" alt /> -->
-      </div>
-    </div>
+    <img class="topImage" src="../assets/indexImg/indexBgctop.jpg" alt />
     <div class="outer6-wrapper">
       <div class="outer6 flex-col">
         <div v-for="month in list" :key="month.id" class="section-item">
@@ -16,6 +12,7 @@
         </div>
       </div>
     </div>
+    <img class="bottomImage" src="../assets/indexImg/loading_bar.png" alt />
   </div>
 </template>
 
@@ -146,7 +143,7 @@ export default {
   name: 'Honghe',
   components: {
     Popup: () => import('@/components/Popup.vue'),
-    MyWinning: () => import('@/components/MyWinning.vue'),
+    WinningPopup: () => import('@/components/WinningPopup.vue'),
     ImgBox: () => import('@/components/imgbox.vue')
   },
   data() {
@@ -157,7 +154,8 @@ export default {
       showMyWinning: false,
       prizeList: [],
       clickNum: 0,
-      bingoClickNum: rand(0, 12)
+      bingoClickNum: rand(0, 12),
+      prizeIds: null
     }
   },
   computed: {
@@ -183,6 +181,9 @@ export default {
         }
       })
     },
+    cancelWinnint() {
+      this.showMyWinning = false
+    },
     handleMonthClick(month) {
       this.list.map((item) => {
         if (item.id == month.id) {
@@ -190,6 +191,13 @@ export default {
         }
       })
       this.currentMonth = month
+      this.showMyWinning = true
+
+      console.log(
+        '🚀 ~ file: Honghe.vue ~ line 193 ~ handleMonthClick ~ month',
+        month
+      )
+      
 
       // 如果点击可以抽奖
       if (this.clickNum === this.bingoClickNum) {
@@ -224,6 +232,10 @@ export default {
     getPrizes() {
       getPrizeList().then((list) => {
         this.prizeList = list
+        console.log(
+          '🚀 ~ file: Honghe.vue ~ line 227 ~ getPrizeList ~ list',
+          list
+        )
 
         const t = setTimeout(() => {
           hideLoading()
@@ -241,10 +253,8 @@ export default {
   flex-direction: column;
 }
 .index-box {
-  // background: url('../assets/indexImg/indexBgc.jpg') no-repeat;
-  background-color: #c1172d;
-  background-size: 100% 100%;
-  width: 100%;
+  background-color: #b12b32;
+  width: 100vw;
   height: 100vh;
   position: relative;
   top: 0;
@@ -256,21 +266,15 @@ export default {
     z-index: 2;
   }
   .topImage {
-    width: 90%;
-    z-index: 8;
-    overflow-wrap: break-word;
-    text-align: center;
-    white-space: nowrap;
-    align-self: center;
-    margin-top: 20px;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
+    width: 100vw;
+  }
+  .bottomImage{
+    width: 100vw;
   }
   .outer6-wrapper {
     width: 92vw;
     border: 1px solid #d0b69a;
-    margin: 16px auto 0;
-    margin-bottom: 2em;
+    margin: 0 auto;
 
     .outer6 {
       flex-flow: row wrap;

src/pages/SaveShare.vue

@@ -112,13 +112,14 @@ export default {
   flex-direction: column;
 }
 .backhome {
-  width: 75px;
+  width: 85px;
+
   height: 42px;
   position: fixed;
   left: 1rem;
   top: 1rem;
   z-index: 19;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat !important;
 }
 .outer3 {
   width: 100vw;
@@ -213,7 +214,7 @@ export default {
       border-radius: 8px;
       margin-top: 11px;
       width: 343px;
-      background-color: #c1172d;
+      background-color: #b12b32;
       border: 0;
       position: fixed;
       z-index: 15;

src/router/index.js

@@ -21,12 +21,12 @@ const router = new Router({
       component: Honghe,
 
     },
-    {
-      path: '/SaveShare',
-      name: 'SaveShare',
-      component: SaveShare,
+    // {
+    //   path: '/SaveShare',
+    //   name: 'SaveShare',
+    //   component: SaveShare,
 
-    },
+    // },
   ]
 })