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

<template>
  <view class="prizeDrawBox">
    <LuckyGrid
      ref="myLucky"
      width="300px"
      height="300px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      :default-config="defaultConfig"
      :disabled="true"
      class="prizeDraw"
      @start="startCallback"
      @end="endCallback"
    />
    <view class="numberBox mt-5">您还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</view>
  </view>
</template>

<script setup>
import LuckyGrid from '@lucky-canvas/uni/lucky-grid'
import { ref } from 'vue'
import sheep from '@/sheep';

const myLucky = ref()
const blocks = [
  // { padding: '10px', background: '#fff', imgs:[] },
  { padding: '10px', background: '#00897B', borderRadius: 6 },
]
const prizeImg = {
  src: 'https://img1.baidu.com/it/u=681765036,1809656907&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
  activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
  width: '100%',
  top: '0%'
}
const prizes = [
  { x: 0, y: 0, imgs: [prizeImg] },
  { x: 1, y: 0, imgs: [prizeImg] },
  { x: 2, y: 0, imgs: [prizeImg] },
  { x: 2, y: 1, imgs: [prizeImg] },
  { x: 2, y: 2, imgs: [prizeImg] },
  { x: 1, y: 2, imgs: [prizeImg] },
  { x: 0, y: 2, imgs: [prizeImg] },
  { x: 0, y: 1, imgs: [prizeImg] }
]
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 // 旋转速度的峰值
}

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

const endCallback  = (prize) => {
  console.log(prize, 'end')
  getData()
}


// 获取抽奖次数
const number = ref(3)
const getData = async () => {
  number.value--
  // const data = await getProductDetail()
  // number.value = data || 0
}
getData()

</script>

<style scoped lang="scss">
.prizeDrawBox {
  padding: 40px;
  background-color: var(--default-bgc);
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}
.prizeDraw {
  margin: 0 auto; 
  cursor: pointer;
}
.numberBox {
  font-size: 20px;
  font-weight: bold;
  padding: 2px 38px;
  border-bottom: 3px solid #00897B;
}
.colorBase {
  color: var(--v-primary-base);
  margin: 0 6px;
  font-size: 22px;
}
</style>