menduner-mall-uniapp/pages/lucky/slotMachine.vue

<!-- 老虎机 -->
<template>
  <view class="box" v-if="prizes?.length">
    <SlotMachine
      ref="myLucky"
      width="300px"
      :height="props.height + 'px'"
      :prizes="prizes"
      :blocks="blocks"
      :slots="slots"
      accelerationTime="1000"
      decelerationTime="10000"
      :default-config="defaultConfig"
      class="prizeDraw"
      @start="startCallback"
      @end="endCallback"
    />
    
    <image
      v-if="!disabled"
      src="https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300"
      style="margin: 0 auto; width: 180rpx; height: 180rpx;"
      @click="startCallback"
    />
  </view>
</template>

<script setup>
import PrizeApi from '@/sheep/api/prizeDraw'
import SlotMachine from '@lucky-canvas/uni/slot-machine'
// import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const emit = defineEmits(['start', 'end'])
const props = defineProps({
  height: {
    type: String,
    default: '300px'
  },
  disabled: Boolean,
  lotteryId: String,
  orderId: String,
})

const myLucky = ref()
// 背景样式
const blocks = [
  { padding: '10px', background: '#00B760', 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 () => {
  const res = await PrizeApi.getPrizeByLotteryId(props.lotteryId)
  prizes.value = []
  const data = res?.data || []
  data.forEach(item => {
    prizes.value.push({
      prize: item,
      background: '#fe920200',
      borderRadius: '10px',
      imgs: [{
        width: '100%',
        top: '0%',
        src: item.image
      }]
    })
  })
}
getPrizeData()

const startCallback = () => {
  // if (props.disabled) return sheep.$helper.toast('抽奖次数已用完')
  emit('start')
  // 调用抽奖组件的play方法开始游戏
  myLucky.value.play()
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 中奖索引
    const index = 3
    // 调用stop停止旋转并传递中奖索引
    myLucky.value.stop(index)
  }, 1500)
}

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

</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>