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

src/components/imgbox.vue

@@ -1,14 +1,11 @@
 <template>
-  <div :class="{ bigBox: state === 1 }">
-    <popup :show="showPopup" @cancel="cancelFrom" />
-    <div class="card" :class="{ flipped: state === 1 }" @click="showPopup=true">
+  <div class="bigBox">
+    <div class="card" :class="{ flipped: mode === 2 }">
       <div class="front">
-        <img v-if="isFrist" :src="fristFontImg" class="nowimage" />
-        <img v-else :src="nowFontImg" class="nowimage" />
+        <img :src="poster" class="nowimage" />
       </div>
       <div class="back">
-        <img v-if="state===1" :src="nowBackImg" class="nowimage" />
-        <img v-else :src="openImg" class="nowimage" />
+        <img :src="nowBackImg" class="nowimage" />
       </div>
     </div>
   </div>
@@ -16,14 +13,11 @@
 <script>
 export default {
   props: {
-    value: {
-      type: String,
-      require: true,
+    prize: {
+      type: Object,
+      default: () => ({})
     },
   },
-  components: {
-    Popup: () => import("@/components/Popup.vue"),
-  },
   data() {
     return {
       showPopup: false,
@@ -31,30 +25,20 @@ export default {
       classList: ["card"],
       fristFontImg:undefined,
       nowFontImg: require('../assets/popupImg/backImag.jpg'),
-      nowBackImg: require('../assets/popupImg/popuBody.jpg'),
+      // nowBackImg: require('../assets/popupImg/popuBody.jpg'),
       openImg: require('../assets/popupImg/redBack.jpg'),
       isFrist:true,
     };
   },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          this.fristFontImg = val;
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    transform() {
-      this.showPopup=true
-      this.state = Math.abs(this.state - 1);
+  computed: {
+    poster() {
+      return this.mode === 1 ? this.nowFontImg : '';
+    },    
+    mode() {
+      return this.prize.mode;
     },
-    cancelFrom() {
-      this.state = Math.abs(this.state - 1);
-      this.showPopup=false
-      this.isFrist=false
+    nowBackImg() {
+      return this.mode === 3 ? require('../assets/popupImg/popuBody.jpg') : '';
     }
   },
 };

src/pages/Honghe.vue

@@ -11,11 +11,16 @@
       <div class="outer6 flex-col">
         <div v-for="month in list" :key="month.id" class="section-item">
           <div @click="handleMonthClick(month)">
+            <ImgBox :prize="month"></ImgBox>
             <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
-            <img
+            <!-- <img
               :class="`section-item-image ${rotateY?'backImag':''}` "
               src="../assets/popupImg/backImag.jpg"
+<<<<<<< HEAD
+            /> -->
+=======
             />
+>>>>>>> 1642bbb59612c65d05be612782386af72e35bd92
           </div>
         </div>
       </div>
@@ -37,7 +42,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 2,
@@ -45,7 +51,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 3,
@@ -53,7 +60,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 4,
@@ -61,7 +69,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 5,
@@ -69,7 +78,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 6,
@@ -77,7 +87,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 7,
@@ -85,7 +96,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 8,
@@ -93,7 +105,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 9,
@@ -101,7 +114,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 10,
@@ -109,7 +123,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 11,
@@ -117,7 +132,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 12,
@@ -125,14 +141,21 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   }
 ]
 
 export default {
   name: 'Honghe',
   components: {
+<<<<<<< HEAD
+    Popup: () => import('@/components/Popup.vue'),
+    MyWinning: () => import('@/components/MyWinning.vue'),
+    ImgBox: () => import('@/components/imgbox.vue')
+=======
     Popup: () => import('@/components/Popup.vue')
+>>>>>>> 1642bbb59612c65d05be612782386af72e35bd92
   },
   data() {
     return {
@@ -161,8 +184,18 @@ export default {
     //关闭
     cancelFrom() {
       this.showPopup = false
+      this.list.map((item) => {
+        if (item.id == this.currentMonth.id) {
+          item.mode=3
+        }
+      })
     },
     handleMonthClick(month) {
+      this.list.map((item) => {
+        if (item.id == month.id) {
+          item.mode=2
+        }
+      })
       this.currentMonth = month
 
       // 如果点击可以抽奖