大转盘

最古老的玩法之一，开始可以慢速转动。用户交互之后，让转盘快速转起来，并逐渐停留到某个位置。支持不均分转盘。其为可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，一个大转盘主要由底盘、灯光、转盘、指针、开始按钮等组成

按需引入

import Vue from 'vue'
import Wheel from '@tuia/market-ui/lib/Wheel'
import '@tuia/market-ui/lib/Wheel/style'

Vue.use(Wheel)

代码演示

普通形式

<mk-wheel
  ref="wheel"
  :prizeList="prizeList"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  data() {
    return {
      prizeList: [
        {
          title: '一等奖',
          image: '//yun.tuisnake.com/mami-media/img/50d7608a-ociowk8pm5.png',
        },
        {
          title: '二等奖',
          image: '//yun.tuisnake.com/mami-media/img/691aa62e-d5xwaga1hn.png',
        },
        {
          title: '三等奖',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/lucky.png',
        },
        {
          title: '四等奖',
          image: '//yun.tuisnake.com/mami-media/img/8ecabe26-iq6wlrhpam.png',
        },
        {
          title: '五等奖',
          image: '//yun.tuisnake.com/mami-media/img/570a6594-vhcb3jmuz8.png',
        },
        {
          title: '谢谢参与',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/thanks.png',
        },
      ],
    };
  },

  methods: {
    async clickStart() {
      const wheel = this.$refs.wheel;
      if (!wheel.isWaitStart) {
        return;
      }
      await wheel.start();
      // ... 一些操作
      // 传入需要停止的奖品索引
      await wheel.stop({ index: 1 });
      // 判断是否还可以继续玩
      if (true) {
        await wheel.reset();
      } else {
        // 不可玩就禁用
        await wheel.disable();
      }
    },
  },
};

高级定制（不均分转盘）

<mk-wheel
  ref="wheel"
  v-bind="baseConfig"
  :prizeList="prizeList"
  @clickStart="clickStart"
>
  <template #light>
    <!-- 去掉灯光 -->
    <div></div>
  </template>
  <template #prize="{ index, item }">
    <!-- 定制奖品4样式 -->
    <div v-if="index === 3" class="word">{{ item.title }}</div>
  </template>
</mk-wheel>

点击展开js部分代码

export default {
  data() {
    return {
      // 静态配置可以 freeze 来减少vue监听 （非必需）
      baseConfig: Object.freeze({
        // 不均分转盘比例
        prizePercent: [70, 70, 50, 70, 30, 70],
        containerImg: '//yun.tuisnake.com/market-ui/872894c9-c2e9-4206-b821-59dde2eac08d.png',
        rotateImg: '//yun.tuisnake.com/market-ui/71a4c83b-89d8-4df0-aa36-d58fa38e9dfc.png',
        pointImg: '//yun.tuisnake.com/market-ui/4649d2aa-da5e-4beb-9ad1-9a1cfdec0c1e.png',
        btnImg: '//yun.tuisnake.com/market-ui/ef8281a6-f3c9-4945-b402-77141183be8b.png',
        btnDisableImg: '//yun.tuisnake.com/market-ui/9b369a5b-e045-414d-b808-0b096dedfe0f.png',
      }),
      prizeList: [
        {
          title: '一等奖',
          image: '//yun.tuisnake.com/mami-media/img/50d7608a-ociowk8pm5.png',
        },
        {
          title: '二等奖',
          image: '//yun.tuisnake.com/mami-media/img/691aa62e-d5xwaga1hn.png',
        },
        {
          title: '三等奖',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/lucky.png',
        },
        {
          title: '四等奖',
          image: '//yun.tuisnake.com/mami-media/img/8ecabe26-iq6wlrhpam.png',
        },
        {
          title: '五等奖',
          image: '//yun.tuisnake.com/mami-media/img/570a6594-vhcb3jmuz8.png',
        },
        {
          title: '谢谢参与',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/thanks.png',
        },
      ],
    };
  },

  methods: {
    async clickStart() {
      const wheel = this.$refs.wheel;
      if (!wheel.isWaitStart) {
        return;
      }
      await wheel.start();
      // ... 一些操作
      // 传入需要停止的奖品索引
      await wheel.stop({ index: 1 });
      // 判断是否还可以继续玩
      if (true) {
        await wheel.reset();
      } else {
        // 不可玩就禁用
        await wheel.disable();
      }
    },
  },
};

推荐出图规范

按照以下尺寸格式出图，可以更快速更方便地定制使用

资源名	对应参数	宽x高	说明	示例
转盘底部	containerImg	750x750	居中
转盘灯光	lightImg	750x750	居中，旋转15度后闪烁播放
转盘	rotateImg	635x635	居中
指针	pointImg	270x270	圆圈居中
开始按钮	btnImg	175x175	居中，运行时会在0.95-1之间缩放
开始按钮禁用	btnDisableImg	175x175	居中

API

支持基本的屏幕适配以及基础玩法组件逻辑规范涉及的API

基本类型定义

// 样式值定义
export type StyleValueType = string | number;
// 样式对象定义
export type StyleType = Record<string, StyleValueType>;

// 转盘上奖品类型定义
export interface PrizeType {
  title?: string;
  image?: string;
}
// 奖品信息定义
export interface PrizeInfoType {
  // 奖品信息
  item: PrizeType,
  // 奖品在列表中的位置
  index: number,
}
// stop方法入参
export interface WheelStopOptionType {
  // 命中目标索引
  index?: number;
}

Props

参数	说明	类型	默认值
containerStyle	底盘样式（包含整体位置）	StyleType	{ width: 750, height: 750, top: 0, left: 0 }
containerImg	底盘图片	string	//yun.tuisnake.com/market-ui/e7185b56-1757-40f7-a921-f8c818d4c1a7.png
lightStyle	底盘灯样式	StyleType	{ width: 750, height: 750 }
lightImg	底盘灯图片	string	//yun.tuisnake.com/market-ui/d9d80c69-fe30-42a9-9794-e61f00193593.png
rotateStyle	转盘样式	StyleType	{ width: 635, height: 635, top: 57.5 }
rotateImg	转盘图片	string	//yun.tuisnake.com/market-ui/c31f472a-5be9-4296-9b0f-353b6583bbd9.png
pointStyle	指针样式	StyleType	{ width: 270, height: 270, top: 240 }
pointImg	指针图片	string	//yun.tuisnake.com/market-ui/0b7f2b9d-c63f-46fc-a851-edc2d47df9ab.png
btnStyle	开始按钮样式	StyleType	{ width: 175, height: 175, top: 287.5 }
btnImg	开始按钮图片	string	//yun.tuisnake.com/market-ui/db4540bd-8c5a-439d-bbb6-ea3f114c4902.png
btnDisableImg	开始按钮禁用图片	string	//yun.tuisnake.com/market-ui/11c22d77-2e83-405b-85e8-c8832dc78529.png
handStyle	手势样式	StyleType	{ width: 160, height: 170, top: 390, left: 400 }
handImg	手势图片	string	//yun.tuisnake.com/tact/turnCircle/bcb4fc7e-18c1-46d7-bdae-2e91147196c1.png
prizeImgStyle	奖品图片样式	StyleType	{ width: 140, height: 140 }
prizeTextStyle	奖品标题样式	StyleType	{ width: 280, height: 50, 'font-size': 24 }
prizeList	奖品列表	PrizeType[]	[...]
prizePercent	奖品转盘划分比例，默认（不传）均分	number[]	undefined
idleTurningSpeed	转盘闲置每秒转动度数（闲置转速）	number	24
maxTurningSpeed	转盘运行每秒转动度数（最大转速）	number	900
extraRotate	初始转盘上奖品相对于转盘需要额外转动的度数	number	0
rangePercent	指针命中区域范围：0-1	number[]	[0.1, 0.9]
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	undefined

Slots

名称	作用域	说明
light	无	底盘灯展示替换
prize	PrizeInfoType	奖品展示替换
hand	无	手势替换
rotateBottom	无	转盘插槽，可做转盘灯

Events

名称	参数	说明
prizeClick	PrizeInfoType	奖品被点击时触发
clickStart	无	开始按钮被点击时触发
stateChange	StateChangeDataType	状态变化事件，详见基础玩法组件逻辑规范

Methods

对于基础玩法组件的stop方法入参做了限定，来确定命中目标

名称	入参	出参	说明
start	无	Promise	开始方法，详见基础玩法组件逻辑规范
stop	WheelStopOptionType	Promise	结束方法，详见基础玩法组件逻辑规范
reset	无	Promise	重置方法，详见基础玩法组件逻辑规范
disable	无	Promise	禁用方法，详见基础玩法组件逻辑规范
getState	无	StateConstant	获取状态方法，详见基础玩法组件逻辑规范
addUnitFunc	StyleValueType	string	单位转换方法（仅处理数字），优先使用forceUnitFunc，若未定义则按照750=100vw来转换，详见屏幕适配
addUnitForAll	StyleType	StyleType	对样式对象中所有数字样式进行转换处理，详见屏幕适配

State

暴露了部分computed的数据，方便外部判断

参数	说明	类型	示例
isWaitStart	是否为等待开始状态，详见基础玩法组件逻辑规范	boolean	true
isDisable	是否为禁用状态，详见基础玩法组件逻辑规范	boolean	false