Turntable 转盘抽奖 H5

介绍

用于大转盘滚动抽奖场景，可配置奖品、图片、转盘样式等。

基础用法

<template>
  <nut-turntable
    ref="turntableEl"
    width="300px"
    height="300px"
    :prize-list="prizeList"
    :prize-index="prizeIndex"
    :style-opt="styleOpt"
    :pointer-style="pointerStyle"
    @start-turns="onTurnsStart()"
    @end-turns="onTurnsEnd()"
  ></nut-turntable>
</template>

import type { TurnTableInst } from "nutui-uniapp";

const turntableEl = ref<TurnTableInst>();

// 转盘样式的选项
const styleOpt = reactive({
  // 转盘中每一块扇形的背景色,根据奖品的index来取每一块的对应颜色
  prizeBgColors: [
    "rgb(255, 231, 149)",
    "rgb(255, 247, 223)",
    "rgb(255, 231, 149)",
    "rgb(255, 247, 223)",
    "rgb(255, 231, 149)",
    "rgb(255, 247, 223)"
  ],
  // 每一个扇形的外边框颜色
  borderColor: "#ff9800"
});

// 转盘指针图片样式
const pointerStyle = {
  width: "80px",
  height: "80px",
  backgroundImage: `url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")`,
  backgroundSize: "contain",
  backgroundRepeat: "no-repeat"
};

// 转盘上要展示的奖品数据
const prizeList = ref([
  {
    id: "xiaomi",
    prizeName: "小米手机",
    prizeImg: "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png"
  },
  {
    id: "blue",
    prizeColor: "rgb(251, 219, 216)",
    prizeName: "蓝牙耳机",
    prizeImg: "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg"
  },
  {
    id: "apple",
    prizeName: "apple watch",
    prizeImg: "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png"
  },
  {
    id: "fruit",
    prizeColor: "rgba(246, 142, 46, 0.5)",
    prizeName: "迪士尼苹果",
    prizeImg: "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png"
  },
  {
    id: "fish",
    prizeName: "海鲜套餐",
    prizeImg: "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png"
  },
  {
    id: "thanks",
    prizeName: "谢谢参与",
    prizeImg: "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png"
  }
]);

// 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
const prizeIndex = ref(-1);

function onTurnsStart() {
  prizeIndex.value = Math.floor(Math.random() * prizeList.value.length);
  turntableEl.value.rotateTurn();
}

function onTurnsEnd() {
  console.log("中奖了");
}

Props

参数	说明	类型	可选值	默认值
width	转盘的宽度	string	-	300px
height	转盘的高度	string	-	300px
prize-list	奖品列表	Array	-	[]
prize-index	中奖奖品在列表的索引位置	number	-	-1
turns-number	转动的圈数	number	-	5
turns-time	从开始转动到结束所用时间（单位：s）	number	-	5
lock-time 1.0.6	下次抽奖的间隔时间（单位：s）	number	-	0
style-opt	转盘中的样式，包括每个扇区的背景颜色（在每条数据中页可单独设置 prizeColor），扇区的边框颜色	Object	-	{prizeBgColors: [], borderColor: ''}
pointer-style	转盘中指针的样式，包括背景图片、大小等	Object	-	{width: '80px', height: '80px'}

Events

事件名	说明	类型
start-turns	转盘开始转动	() => void
end-turns	转盘中停止转动后	() => void
lock-turns 1.0.6	禁止抽奖时	() => void

Exposes

名称	说明	类型
rotateTurn	开始转动	() => void