menduner/src/views/mall/components/prizeDraw/grid.vue

<!-- 九宫格 -->
<template>
  <div>
    <LuckyGrid
      ref="myLucky"
      width="300px"
      height="300px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      :default-config="defaultConfig"
      :disabled="true"
      class="prizeDraw"
      @start="startCallback"
      @end="endCallback"
    />
  </div>
</template>

<script setup>
defineOptions({name: 'prizeDraw-LuckyGrid'})
import { getPrizeByLotteryId } from '@/api/mall/prize'
import Snackbar from '@/plugins/snackbar'
import { ref } from 'vue'
const emit = defineEmits(['start', 'end'])
const props = defineProps({ lotteryId: [Number, String], disabled: [Number, Boolean] })

const myLucky = ref()
// 背景样式
const blocks = [
  { padding: '10px', background: '#00897B', borderRadius: 6 }
]
const prizes = ref([
  { x: 0, y: 0, imgs: [] },
  { x: 1, y: 0, imgs: [] },
  { x: 2, y: 0, imgs: [] },
  { x: 2, y: 1, imgs: [] },
  { x: 2, y: 2, imgs: [] },
  { x: 1, y: 2, imgs: [] },
  { x: 0, y: 2, imgs: [] },
  { x: 0, y: 1, imgs: [] }
])
const buttons = [
  {
    x: 1, y: 1,
    background: '#fe920200',
    borderRadius: '10px',
    imgs: [{
      src: 'https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
      width: '100%',
      height: '100%'
    }]
  }
]
const defaultConfig = {
  gutter: 10, // 格子之间的间隙
  speed: 10 // 旋转速度的峰值
}

// 根据活动id获取奖品列表
const getPrizeData = async (lotteryId) => {
  let id = lotteryId || props.lotteryId
  const data = await getPrizeByLotteryId(id)

  data.forEach((item, index) => {
    prizes.value[index].prize = item
    prizes.value[index].imgs = [{
      src: item.image,
      activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
      width: '100%',
      top: '0%'
    }]
  })
}
if (props.lotteryId) getPrizeData()

const startCallback = () => {
  if (props.disabled) return Snackbar.warning('抽奖次数已用完!')
  emit('start')
  // 调用抽奖组件的play方法开始游戏
  myLucky.value.play()
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = 3
    // 调用stop停止旋转并传递中奖索引
    myLucky.value.stop(index)
  }, 1500)
}

const endCallback  = (value) => {
  emit('end', value)
}

</script>
<style lang="scss" scoped>
</style>