h5-draw-lots/src/pages/Honghe.vue

<template>
  <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/indexBgctop.jpg" alt />
      <!-- </div>
    </div> -->
    <div class="outer6-wrapper">
      <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useModel } from '@/store'
import { drawLottery, getPrizeList } from '@/services/person'
import { rand, shuffle } from '@/utils/math'
import { hideLoading } from '@/utils'

// 月份信息
//posterImg关闭的图片
//popImg 打开的图片
//shareImg分享图片
//screenImg屏保
//calendarImg日历图片
const monthList = [
  {
    id: 1,
    posterImg: require('../assets/indexImg/imgex_MEW/1.jpg'),
    popImg: require('../assets/luckyImg/1.jpg'),
    shareImg: require('../assets/sharePagesImg/1.jpg'),
    screenImg: require('../assets/screenImg/1.jpg'),
    calendarImg: require('../assets/monthImg/January1.jpg'),
    mode: 1
  },
  {
    id: 2,
    posterImg: require('../assets/indexImg/imgex_MEW/2.jpg'),
    popImg: require('../assets/luckyImg/2.jpg'),
    shareImg: require('../assets/sharePagesImg/2.jpg'),
    screenImg: require('../assets/screenImg/2.jpg'),
    calendarImg: require('../assets/monthImg/February2.jpg'),
    mode: 1
  },
  {
    id: 3,
    posterImg: require('../assets/indexImg/imgex_MEW/3.jpg'),
    popImg: require('../assets/luckyImg/3.jpg'),
    shareImg: require('../assets/sharePagesImg/3.jpg'),
    screenImg: require('../assets/screenImg/3.jpg'),
    calendarImg: require('../assets/monthImg/March3.jpg'),
    mode: 1
  },
  {
    id: 4,
    posterImg: require('../assets/indexImg/imgex_MEW/4.jpg'),
    popImg: require('../assets/luckyImg/4.jpg'),
    shareImg: require('../assets/sharePagesImg/4.jpg'),
    screenImg: require('../assets/screenImg/4.jpg'),
    calendarImg: require('../assets/monthImg/April4.jpg'),
    mode: 1
  },
  {
    id: 5,
    posterImg: require('../assets/indexImg/imgex_MEW/5.jpg'),
    popImg: require('../assets/luckyImg/5.jpg'),
    shareImg: require('../assets/sharePagesImg/5.jpg'),
    screenImg: require('../assets/screenImg/5.jpg'),
    calendarImg: require('../assets/monthImg/May5.jpg'),
    mode: 1
  },
  {
    id: 6,
    posterImg: require('../assets/indexImg/imgex_MEW/6.jpg'),
    popImg: require('../assets/luckyImg/6.jpg'),
    shareImg: require('../assets/sharePagesImg/6.jpg'),
    screenImg: require('../assets/screenImg/6.jpg'),
    calendarImg: require('../assets/monthImg/June6.jpg'),
    mode: 1
  },
  {
    id: 7,
    posterImg: require('../assets/indexImg/imgex_MEW/7.jpg'),
    popImg: require('../assets/luckyImg/7.jpg'),
    shareImg: require('../assets/sharePagesImg/7.jpg'),
    screenImg: require('../assets/screenImg/7.jpg'),
    calendarImg: require('../assets/monthImg/July7.jpg'),
    mode: 1
  },
  {
    id: 8,
    posterImg: require('../assets/indexImg/imgex_MEW/8.jpg'),
    popImg: require('../assets/luckyImg/8.jpg'),
    shareImg: require('../assets/sharePagesImg/8.jpg'),
    screenImg: require('../assets/screenImg/8.jpg'),
    calendarImg: require('../assets/monthImg/August8.jpg'),
    mode: 1
  },
  {
    id: 9,
    posterImg: require('../assets/indexImg/imgex_MEW/9.jpg'),
    popImg: require('../assets/luckyImg/9.jpg'),
    shareImg: require('../assets/sharePagesImg/9.jpg'),
    screenImg: require('../assets/screenImg/9.jpg'),
    calendarImg: require('../assets/monthImg/September9.jpg'),
    mode: 1
  },
  {
    id: 10,
    posterImg: require('../assets/indexImg/imgex_MEW/10.jpg'),
    popImg: require('../assets/luckyImg/10.jpg'),
    shareImg: require('../assets/sharePagesImg/10.jpg'),
    screenImg: require('../assets/screenImg/10.jpg'),
    calendarImg: require('../assets/monthImg/October10.jpg'),
    mode: 1
  },
  {
    id: 11,
    posterImg: require('../assets/indexImg/imgex_MEW/11.jpg'),
    popImg: require('../assets/luckyImg/11.jpg'),
    shareImg: require('../assets/sharePagesImg/11.jpg'),
    screenImg: require('../assets/screenImg/11.jpg'),
    calendarImg: require('../assets/monthImg/November11.jpg'),
    mode: 1
  },
  {
    id: 12,
    posterImg: require('../assets/indexImg/imgex_MEW/12.jpg'),
    popImg: require('../assets/luckyImg/12.jpg'),
    shareImg: require('../assets/sharePagesImg/12.jpg'),
    screenImg: require('../assets/screenImg/12.jpg'),
    calendarImg: require('../assets/monthImg/December12.jpg'),
    mode: 1
  }
]

export default {
  name: 'Honghe',
  components: {
    Popup: () => import('@/components/Popup.vue'),
    MyWinning: () => import('@/components/MyWinning.vue'),
    ImgBox: () => import('@/components/imgbox.vue')
  },
  data() {
    return {
      list: shuffle(monthList),
      currentMonth: null,
      showPopup: false,
      showMyWinning: false,
      prizeList: [],
      clickNum: 0,
      bingoClickNum: rand(0, 12)
    }
  },
  computed: {
    person: {
      get() {
        return useModel('person')[0]
      },
      set(val) {
        useModel('person')[1](val)
      }
    }
  },
  created() {
    this.getPrizes()
  },
  methods: {
    //关闭
    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

      // 如果点击可以抽奖
      if (this.clickNum === this.bingoClickNum) {
        if (!this.person.personId) {
          // 报错, 提示刷新页面
        } else {
          // 如果还没有参与
          if (!this.person.isJoined) {
            this.drawLots()
          } else {
            this.showPopup = true
          }
        }
      } else {
        this.showPopup = true
      }

      if (this.clickNum < this.bingoClickNum) {
        this.clickNum += 1
      }
    },
    // 抽奖
    drawLots() {
      drawLottery(this.person).then((res) => {
        // 更新人员信息
        this.person = res

        // 其他动作
      })
    },
    // 获取奖品列表
    getPrizes() {
      getPrizeList().then((list) => {
        this.prizeList = list

        const t = setTimeout(() => {
          hideLoading()
          clearTimeout(t)
        }, 1000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.flex-col {
  display: flex;
  flex-direction: column;
}
.index-box {
  background-color: #b12b32;
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  .dialog {
    z-index: 2;
  }
  .topImage {
    width: 100vw;
  }
  .outer6-wrapper {
    width: 92vw;
    border: 1px solid #d0b69a;
    margin: 0 auto;
    margin-bottom: 2em;

    .outer6 {
      flex-flow: row wrap;
      align-content: flex-start;
      z-index: 2;
      background-color: #9c0014;
      align-self: center;
      width: 90vw;
      margin: 3px auto;
      border-right: 1px solid #d0b69a;
      border-bottom: 1px solid #d0b69a;
      overflow: hidden;
      .section-item {
        width: 22vw;
        border-left: 1px solid #d0b69a;
        border-top: 1px solid #d0b69a;
        display: inline-flex;
        overflow: hidden;
        &-image {
          width: 22vw;

          background-size: 100% 100%;
        }
        .backImag {
          // position: relative;
          width: 22vw;
          animation: change 0.8s linear forwards;
        }
        @keyframes change {
          from {
            width: 44vw;
            transform: rotateY(180deg);
          }
          to {
            width: 22vw;
          }
        }
      }
    }
  }
}
</style>