方形转盘

方形转盘是大转盘的变体（变体的详细说明可以查看变体与预设），但是只是复用了转盘的逻辑。其为可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，一个大转盘主要由底盘、灯光(未支持)、格子底、格子遮罩、开始按钮等组成，暂时只支持九宫格形式

按需引入

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

Vue.use(SquareWheel)

代码演示

其使用方法与大转盘一模一样，但只支持8个奖品

<mk-square-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',
        },
        {
          title: '七等奖',
          image: '//yun.tuisnake.com/mami-media/img/570a6594-vhcb3jmuz8.png',
        },
        {
          title: '八等奖',
          image: '//yun.tuisnake.com/mami-media/img/570a6594-vhcb3jmuz8.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	居中
转盘灯光		750x750	暂无
格子底部图片	gridBottomImg	200x200	居中
格子灰色遮罩图片	gridMaskImg	200x200	居中
开始按钮	btnImg	200x200	居中，运行时会在0.95-1之间缩放
开始按钮禁用	btnDisableImg	200x200	居中

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/80775426-025f-44ab-8374-d3bc03e15b9b.png
gridStyle	每个格子的样式	StyleType	{ width: 200, height: 200 }
gridBottomImg	格子底部图片	string	//yun.tuisnake.com/market-ui/ac59e2bb-df18-47cc-bb29-f121366cefb7.png
gridMaskImg	格子灰色遮罩图片	string	//yun.tuisnake.com/market-ui/a998b80c-d270-4f13-96a6-13fcb31f150c.png
gridHorizontalSpace	格子横向间距	number	6
gridVerticalSpace	格子纵向间距	number	6
btnImg	开始按钮图片	string	//yun.tuisnake.com/market-ui/a6897dca-63b7-4a1b-8ab4-48c305f7b1ef.png
btnDisableImg	开始按钮禁用图片	string	//yun.tuisnake.com/market-ui/6d09d7aa-c799-446b-949e-72ac5cdf97f8.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: 120, height: 120, top: 15 }
prizeTextStyle	奖品标题样式	StyleType	{ width: 180, height: 50, 'line-height': 50, top: 135, 'font-size': 24 }
prizeList	奖品列表（当前仅支持8个）	PrizeType[]	[...]
idleTurningSpeed	转盘闲置每秒转动度数（闲置转速）	number	24
maxTurningSpeed	转盘运行每秒转动度数（最大转速）	number	900
rangePercent	指针命中区域范围：0-1	number[]	[0.01, 0.02]

Slots

名称	作用域	说明
hand	无	手势替换

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