7.抽奖功能lucky-canvas总结

1.使用开源组件lucky-canvas

100px.net/usage/vue.h...

2.大转盘demo

js 复制代码

<template>
  <LuckyWheel
    class="draw-box"
    ref="myLucky"
    width="5.2rem"
    height="5.2rem"
    :default-config="config"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>
<script setup lang="ts">
import drawHttp from '@/http/draw'
import { useRoute, useRouter } from 'vue-router'

const props= defineProps({
  theme: {
    type: String,
    default: ''
  },
  prizeTextColor: {
    type: String,
    default: ''
  },
})
const router = useRouter()

const route = useRoute()
const emits = defineEmits(['endCallback'])

const config = reactive({
  gutter:0, // 缝隙
  stopRange: 0.1, // 指针在扇形区域的停止范围
  offsetDegree: 0, // 转盘的偏移角度
  speed: 16, // s
  accelerationTime:4000, // ms
  decelerationTime:1500 // ms
})
const blocks = reactive([{ padding: '0px', background: 'transparent' }]) 
const prizes = ref([])
const buttons = reactive([
  {
    radius: '2rem',
    background: 'transparent',
    pointer: false,
    // fonts: [{ text: '开始', top: '-10px' }],
    imgs: [
      {
        src: 'https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/wheel/wheel-pointer.png',
        top: '-0.98rem',
        width: '1.74rem',
        height: '1.96rem'
      }
    ]
  }
])
const myLucky = ref()
const msgInfo= reactive({})
const startCallback = async() => {
  msgInfo.value={}
  // 调用抽奖组件的play方法开始游戏
  myLucky.value.play()
  const req = {id:route.query.id}
  const res = await drawHttp.getRewardInfo(req)
  if(res.data.code===200 && res.data.data.winedPrize){
    // 抽中的奖品是哪个
    msgInfo.value = res.data.data.winedPrize
   const curInd =  prizes.value.findIndex((item:any)=>item.title===res.data.data.winedPrize.prizeTitle)
    myLucky.value.stop(curInd)
  }else{
    msgInfo.value={error:true,...res.data}
    myLucky.value.stop()
  }
}
// 抽奖结束会触发end回调
const endCallback = () => {
  setTimeout(()=>{
    emits('endCallback', toRaw(msgInfo.value))
  }, 500)
  
}

const getRewardLists= async() => {
  const req = {wheelLotteryId:route.query.id}
  const res = await drawHttp.getReWardList(req)
  if(res?.data?.data){
    const ParityLen = res.data.data.length
    const ParityFlag = ParityLen %2 
    // 判断展示的背景颜色色值
    const colors=props.theme!==1?['#95c9ff','#e1e7ff','#c1dffe']:['#fff7e1','#ffc295','#fedbc1']
    prizes.value = res.data.data.map((item:any,index)=>{
    return {
      title: item.prizeTitle,
      fonts: [{ text: item.prizeTitle.slice(0,5), fontColor:props.prizeTextColor, top: '.24rem',fontSize:'0.28rem' }],
      background: !ParityFlag?colors[index%2]:(ParityLen-1===index)?colors[1]:colors[index%3], // 奇偶颜色判断
      imgs: [
        {
          src: item.prizeImage,
          width: '0.8rem',
          height:'0.8rem',
          top: '120%'
        }
      ]
    }
  })
  console.log(88888,prizes.value)
  }
}
defineExpose({
  getRewardLists
})
// getRewardLists()
</script>
<style lang="scss" scoped>

</style>

3.九宫格

js 复制代码

<template>

      <LuckyGrid
        class="draw-box"
        ref="myLucky"
        width="5.58rem"
        height="5.58rem"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        :rows="3"
        :cols="3"
        :defaultConfig="defaultConfig"
        :activeStyle="activeStyle"
        @start="startCallback"
        @end="endCallback"
      />
</template>
<script setup lang="ts">
import drawHttp from '@/http/draw'
import { useRoute, useRouter } from 'vue-router'
const props= defineProps({
  theme: {
    type: String,
    default: ''
  },
  prizeTextColor: {
    type: String,
    default: ''
  },
})
const router = useRouter()

const route = useRoute()
const emits = defineEmits(['endCallback'])

const defaultConfig = reactive({
  // gutter: 15,
  speed: 16, // s
  accelerationTime:4000, // ms
  decelerationTime:1500 // ms
})
const activeStyle =ref({
  // borderRadius:'0.24rem',
  // background:'blue'
})

const blocks = ref([{ padding: '0.1rem', background: 'transparent' }])

const prizes = ref([])

const buttons = reactive([
  {
    x: 1,
    y: 1,
    background: '#fb5740',
  //   fonts: [{ text: '开始\n抽奖', fontSize: '0.48rem', fontWeight:500,fontColor:'#fff', top:'0.37rem',left:'0.45rem',right:'0.44rem',bottom:'0.37rem'
  //  }],
   imgs: [
      {
        src: 'https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/grid/draw-beigin.png',
        width: '1.86rem',
        height: '1.86rem',
        // top: '10%'
      }
    ]
  }
])

const myLucky = ref()
const msgInfo= reactive({})
const startCallback = async() => {
  msgInfo.value={}
  // 调用抽奖组件的play方法开始游戏
  myLucky.value.play()
  const req = {id:route.query.id}
  const res = await drawHttp.getRewardInfo(req)
  if(res.data.code===200 && res.data.data.winedPrize){
    // 抽中的奖品是哪个
    msgInfo.value = res.data.data.winedPrize
   const curInd =  prizes.value.findIndex((item:any)=>item.title===res.data.data.winedPrize.prizeTitle)
  //  setTimeout(()=>{
    myLucky.value.stop(curInd)
  //  },2000) 
  }else{
    msgInfo.value={error:true,...res.data}
    myLucky.value.stop()
  }
}
// 抽奖结束会触发end回调
const endCallback = () => {
  setTimeout(()=>{
    emits('endCallback', toRaw(msgInfo.value))
  }, 500)
}

const getRewardLists= async() => {
  const req = {wheelLotteryId:route.query.id}
  const res = await drawHttp.getReWardList(req)
  const resData=res?.data?.data
  while(resData.length<8){
     const curItem ={
      prizeTitle:'谢谢参与',
      prizeImage:'https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/wheel/xxcy.png'
     }
     resData.push(curItem)
  }
  if(resData){
    const xy = {
      0:{x:0,y:0},
      1:{x:1,y:0},
      2:{x:2,y:0},
      3:{x:2,y:1},
      4:{x:2,y:2},
      5:{x:1,y:2},
      6:{x:0,y:2},
      7:{x:0,y:1},
    }
    prizes.value = resData.map((item:any,index)=>{
      // console.log(index, index<4?index%3:(index+1)%3, index<4?Number.parseInt(index/3):Number.parseInt((index+1)/3))
    return   {
    title: item.prizeTitle,
    // y: index<4?Number.parseInt(index/3):Number.parseInt((index+1)/3),
    // x: index<4?index%3:(index+1)%3,
    ...xy[index],
    fonts: [{ 
      text: item.prizeTitle.slice(0,5), 
      fontColor: props.prizeTextColor, 
      top: '1.29rem',
    fontSize:'0.28rem' 
  }],
    background: '#FFFFFF',
    border: '2px solid #FFCCA9',
    shadow:'0 0 .31rem #FFC8A3',
    borderRadius: '0.24rem',
    imgs: [
    {
        src: `https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/grid/award-item${props.theme}.png`,
        width: '1.86rem',
        height: '1.86rem',
        // activeSrc:'https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/wheel/white-circle.png',
        activeSrc:`https://kcallme-static.oss-cn-beijing.aliyuncs.com/shangcheng/images/draw/grid/award-item-active${props.theme}.png`
        // top: '0.24rem'
        // top: '0rem'
      },
      {
        src: item.prizeImage,
        width: '1rem',
        height: '1rem',
        top: '0.24rem'
        // top: '0rem'
      }
    ]
  }
  })
  }
}
defineExpose({
  getRewardLists
})
</script>
<style lang="scss" scoped>
</style>