feats

src/pages/Honghe.vue

 <template>
   <div class="index-box">
-    <popup :show="showPopup" @cancel="cancelFrom" />
+    <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
     <div>
       <div>
         <img class="topImage" src="../assets/hareTop.png" alt />
     </div>
     <div class="outer6-wrapper">
       <div class="outer6 flex-col">
-        <div v-for="item in indexJPG" :key="item" class="section-item">
-          <div @click="baga">
+        <div v-for="month in list" :key="month.id" class="section-item">
+          <div @click="handleMonthClick(month)">
             <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
             <img
               :class="`section-item-image ${!showPopup?'backImag':''}` "
 <script>
 import { useModel } from '@/store'
 import { drawLottery, getPrizeList } from '@/services/person'
-import { rand } from '@/utils/math'
+import { rand, shuffle } from '@/utils/math'
+
+// 月份信息
+const monthList = [
+  { id: 1, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 2, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 3, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 4, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 5, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 6, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 7, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 8, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 9, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 10, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 11, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  { id: 12, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+]
 
 export default {
   name: 'Honghe',
   },
   data() {
     return {
-      indexJPG: new Array(12).fill(null),
+      list: shuffle(monthList),
+      currentMonth: null,
       showPopup: false,
       prizeList: [],
       clickNum: 0,
     cancelFrom() {
       this.showPopup = false
     },
-    baga(e) {
-      console.log(e)
-      this.showPopup = true
+    handleMonthClick(month) {
+      this.currentMonth = month
 
       // 如果点击可以抽奖
       if (this.clickNum === this.bingoClickNum) {
           // 如果还没有参与
           if (!this.person.isJoined) {
             this.drawLots()
+          } else {
+            this.showPopup = true
           }
         }
+      } else {
+        this.showPopup = true
       }
 
       if (this.clickNum < this.bingoClickNum) {

src/utils/math.js

 export function rand(min, max) {
   return min + Math.floor(Math.random() * (max - min))
 }
+
+/**
+ * 随机打散数组
+ * @param {*} arr 
+ * @returns 
+ */
+export function shuffle(arr) {
+  // 拷贝一份
+  const list = arr.slice()
+
+  for (var i = list.length - 1; i >= 0; i--) {
+    var randomIndex = Math.floor(Math.random() * (i + 1));
+    var itemAtIndex = list[randomIndex];
+    list[randomIndex] = list[i];
+    list[i] = itemAtIndex;
+  }
+  return list;
+}