转盘抽奖活动

需求:h5页面设计排版大转盘样式的抽奖活动

两种格式

1. 背景图片设计出,前端写死 , 按钮写成图盘,点击触发转动事件 (插件为例子) 

网址:

大转盘 LuckyWheel | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件

1.安装

npm install @lucky-canvas/vue@latest

2.引入

// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

3.使用

const myLucky = ref(null)
const blocks = [{
  imgs: [{
    src: 'https://cpicaicdn.abtpt.cn/bxhd/xnzj/gobg.png',
    width: '100%',
    height: '100%',
    rotate: true
  }]
}];
const buttons = [
  {
    radius: '20%',
    imgs: [{
      src: 'https://cpicaicdn.abtpt.cn/bxhd/xnzj/gobtn.png',
      width: '100%',
      top: '-150%'
    }]
  }
]
//将转盘画成8等分
const prizes = [
  { title: '0' },
  { title: '1' },
  { title: '2' },
  { title: '3' },
  { title: '4' },
  { title: '5' },
  { title: '6' },
  { title: '7' },
];
const startCallback = () => {
  if (drawnumber.value == 0) {
    showFailToast('没有抽奖次数');
    return
  }
  myLucky.value.play()  //开始转动
  // 假设接口的请求速度是1s
  draw({
    code: info.code,
    source: info.source,
    token: info.token
  })
    .then(res => {
      console.log(res);
      if (res.data.errorCode == 0) {
        type.value = res.data.returnObject.type;
        prizeImg.value = res.data.returnObject.prizeImg;
        copylink.value = res.data.returnObject.copylink;
        prizeTitle.value = res.data.returnObject.prizeTitle;
        prizeName.value = res.data.returnObject.prizeName;
        prizeCode.value = res.data.returnObject.prizeCode;
        cade.value = res.data.returnObject.cade;
        link.value = res.data.returnObject.link;
        number.value = res.data.returnObject.number;
        //根据接口返回的字段,判断指针停留下的位置
        if (res.data.returnObject.prizeCode == 'JP003') {
          myLucky.value.stop(1)
        } else if (res.data.returnObject.prizeCode == 'JP004') {
          myLucky.value.stop(2)
        } else if (res.data.returnObject.prizeCode == 'JP005') {
          myLucky.value.stop(3)
        } else if (res.data.returnObject.prizeCode == 'JP007') {
          myLucky.value.stop(4)
        } else if (res.data.returnObject.prizeCode == 'JP006') {
          myLucky.value.stop(5)
        } else if (res.data.returnObject.prizeCode == 'JP002') {
          myLucky.value.stop(6)
        } else if (res.data.returnObject.prizeCode == 'JP008') {
          myLucky.value.stop(7)
        } else if (res.data.returnObject.prizeCode == 'JP001') {
          myLucky.value.stop(8)
        }
        if (res.data.returnObject.type !== '2') {
          setSensors('PopupExpouse', {
            pageName: '恭喜中奖',
            activityName: '2023新年聚会活动',
            prize: res.data.returnObject.prizeName,
          })
        } else {
          setSensors('PopupExpouse', {
            pageName: '未中奖',
            activityName: '2023新年聚会活动',
            prize: '未中奖',
          })
        }
      } else {
        showFailToast(res.data.message);
      }
    })
}

2. 背景图是由后端返回的列表前端拼接而成 ,  后端返回度数 , 奖品不是固定的 (原生为例)

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

decodeURIComponent() 函数可把encodeuri的字符串作为进行解码。

 // 接口
  draw({
    code: info.code,
    source: source,
    token: xnbs_sxinfo.token ? xnbs_sxinfo.token : "",
    empno: thdParamdata.empno ? thdParamdata.empno : "",
    thdparam:
      Object.keys(thdParamdata).length == 0
        ? ""
        : encodeURIComponent(JSON.stringify(thdParamdata)),
  })
    .then((res) => {
      if (res.data.errorCode == 0) {
        getprice.value = res.data.returnObject;
        drawNum.value = res.data.returnObject.chjnmuber;
        // 获取奖品
        let angles = res.data.returnObject.angle;  //返回的度数
        let basic = 3600;
        let timer = null;
        let begin = 0;
        timer = setInterval(() => {
          if (begin >= angles + basic) {
            console.log("转盘结束");
            clearInterval(timer);
            showprice.value = true;
            // 奖品弹窗弹出神策记录
            if (getprice.value.type == 2) {
              // 未中奖
              setSensors("PopupExpouse", {
                pageName: "未中奖",
                activityName: "2024祈福行好运",
                prize: "未中奖",
              });
            } else {
              // 中奖
              setSensors("PopupExpouse", {
                pageName: "未中奖",
                activityName: "2024祈福行好运",
                prize: getprice.value.prizeName,
              });
            }
            setTimeout(() => {
              ifzhuan.value = true;
            }, 500);
          }
          //转动的缓慢程度
          gobg.style.transform = `rotate(${begin + basic}deg)`;
          begin += Math.ceil((angles + basic - begin) * 0.1);
        }, 50);
      } else {
        ifzhuan.value = true;
      }
    })
    .finally(() => {
      closeToast();
    });