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

<template>
  <div class="index-box">
    <bg-music />
    <popup
      :show="showPopup"
      @cancel="cancelFrom"
      :current-month="currentMonth"
      :is-prize="myPrize"
      :PrizeState="PrizeState"
      :prizeList="prizeList"
    />

    <WinningPopup
      :show="showMyWinning"
      @cancel="canclMyWinning"
      :current-person="person"
      :prize="myPrize"
    />
    <!-- 奖品没了 -->

    <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">
          <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'
import { share } from '@/utils/wx'

/**
 * 月份信息
 * 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/December12.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'),
    WinningPopup: () => import('@/components/WinningPopup.vue'),
    ImgBox: () => import('@/components/imgbox.vue'),
    BgMusic: () => import('@/components/BgMusic.vue')
    // MyWinning: () => import('@/components/MyWinning.vue')
  },
  data() {
    return {
      list: shuffle(monthList),
      currentMonth: null,
      showPopup: false,
      showMyWinning: false,
      prizeList: [],
      bingoId: rand(0, 12) + 1, // 可以抽奖的月份
      NOMyWinningShow: true,
      PrizeState: null
    }
  },
  computed: {
    person: {
      get() {
        return useModel('person')[0]
      },
      set(val) {
        useModel('person')[1](val)
      }
    },
    myPrize() {
      if (this.prizeList.length && this.person.prizeId) {
        return this.prizeList.filter(
          (x) => x.prizeId === this.person.prizeId
        )[0]
      }

      return undefined
    },
    noPrize() {
      if (this.prizeList.length) {
        return this.prizeList.reduce((sum, x) => x.exitsNum + sum, 0) <= 0
      }

      return true
    }
  },
  created() {
    this.getPrizes()
    this.noShowMy()
    // 设置微信分享
    share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
  },
  watch: {
    showMyWinning(newValue, oldValue) {
      // 微信分享
      // 1、正常情况下, 分享主题是 抽取幸运签，解锁隐藏福利
      // 2、中奖弹出情况下, 分享主题是 我中奖啦! 来试试你的运气吧
      if (newValue && !oldValue) {
        share({
          title: '我中奖啦! 来试试你的运气吧',
          desc: '抽取幸运签，解锁隐藏福利'
        })
      } else if (newValue !== oldValue) {
        share({ title: '抽取幸运签，解锁隐藏福利', desc: '每月都有欢乐发生' })
      }
    }
  },
  methods: {
    noShowMy() {
      if (this.person.prizeId !== '' && this.noPrize) {
        console.log('有奖品')
      } else {
        this.PrizeState = true

        console.log('没有奖品')
      }
    },
    //关闭
    cancelFrom() {
      this.showPopup = false
      this.list.map((item) => {
        if (item.id == this.currentMonth.id) {
          item.mode = 3
        }
      })
    },
    canclMyWinning() {
      this.showMyWinning = 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

      console.log(
        '🚀 ~ file: Honghe.vue ~ line 193 ~ handleMonthClick ~ month',
        month
      )

      // 如果点击可以抽奖
      if (month.id === this.bingoId && !this.noPrize) {
        // if (!this.noPrize) {
        //   this.PrizeState = 2
        // }

        if (!this.person.personId) {
          // 报错, 提示刷新页面
        } else {
          // 如果还没有参与
          if (!this.person.isJoined) {
            this.drawLots()
          } else {
            this.showPopup = true
          }
        }
      } else {
        this.showPopup = true
        this.PrizeState = 2
      }
    },
    // 抽奖
    drawLots() {
      drawLottery(this.person)
        .then((res) => {
          // 更新人员信息
          this.person = res
          this.showMyWinning = true
          // this.PrizeState = 0

          console.log('showMyWinning-----------')

          // 其他动作
        })
        .catch((err) => {
          if (err && err.code === 9999) {
            this.PrizeState = 2

            // 奖品没了
          } else {
            // 其他错误
            const errMsg = err.message || err
            console.log('🚀 ~ file: Honghe.vue ~errMsg errMsg', errMsg)
            alert('请刷新重试')
          }
        })
    },
    // 获取奖品列表
    getPrizes() {
      getPrizeList().then((list) => {
        this.prizeList = list
        console.log(
          '🚀 ~ file: Honghe.vue ~ line 227 ~ getPrizeList ~ list',
          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 {
    padding-top: 2em;
    width: 100vw;
  }
  .outer6-wrapper {
    width: 92vw;
    border: 1px solid #d0b69a;
    margin: 0 auto 2em;

    .outer6 {
      flex-flow: row wrap;
      align-content: flex-start;
      z-index: 2;
      background-color: #b12b32;
      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;
      }
    }
  }
}
</style>