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

<!-- 老虎机 -->
<template>
  <div class="mb-n5" v-if="prizes?.length">
    <SlotMachine
      ref="myLucky"
      width="300px"
      :height="height + 'px'"
      :prizes="prizes"
      :blocks="blocks"
      :slots="slots"
      accelerationTime="1000"
      decelerationTime="10000"
      :default-config="defaultConfig"
      class="prizeDraw"
      @start="startCallback"
      @end="endCallback"
    />
    <v-img
      src="https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300"
      :width="100"
      style="margin: 0 auto;"
      @click="startCallback"
    />
  </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], height: [Number, String] })

const myLucky = ref()
// 背景样式
const blocks = [
  { padding: '10px', background: '#00897B', borderRadius: 6 },
]
// 转速与方向
const slots = [
  { speed: 15, direction: -1 },
  { speed: 15, direction: 1 },
  { speed: 15, direction: -1 },
]
const prizes = ref([])
const defaultConfig = {
  rowSpacing: '10px',
  colSpacing: '10px',
  accelerationTime: 1000, // 开始旋转时间
  decelerationTime: 5000, // 缓慢停止时间
}

// 根据活动id获取奖品列表
const getPrizeData = async (lotteryId) => {
  let id = lotteryId || props.lotteryId
  const data = await getPrizeByLotteryId(id)
  prizes.value = []
  data.forEach(item => {
    prizes.value.push({
      prize: item,
      background: '#fe920200',
      borderRadius: '10px',
      imgs: [{
        width: '100%',
        top: '0%',
        src: item.image
      }]
    })
  })
}
if (props.lotteryId) getPrizeData()

const startCallback = () => {
  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>