# 基座大转盘
基座大转盘是大转盘的变体（变体的详细说明可以查看变体与预设），其支持大转盘的大部分能力，当然也支持不均分转盘，也属于可控组件（详细说明可查看基础玩法组件逻辑规范）
另外，一个基座大转盘主要由大转盘的基本元素（底盘、灯光、转盘、指针、开始按钮）和基座等组成
# 按需引入
import Vue from 'vue'
import WheelFoundation from '@tuia/market-ui/lib/WheelFoundation'
import '@tuia/market-ui/lib/WheelFoundation/style'
// 使用默认
Vue.use(WheelFoundation)
// 使用红色预设，组件名字也为 mk-wheel-foundation
Vue.use(WheelFoundation.Presets.Red)
# 代码演示
其使用方法与大转盘一模一样
<mk-wheel-foundation
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();
}
},
},
};
# 支持预设
| 名称 | 使用 | 配置 |
|---|---|---|
| 红色 | WheelFoundation.Presets.Red | 待补充 |
| 黄色 | WheelFoundation.Presets.Yellow | 待补充 |
| 蓝色 | WheelFoundation.Presets.Blue | 待补充 |
| 绿色 | WheelFoundation.Presets.Green | 待补充 |
# 推荐出图规范
按照以下尺寸格式出图，可以更快速更方便地定制使用
| 资源名 | 对应参数 | 宽x高 | 说明 | 示例 |
|---|---|---|---|---|
| 转盘底部 | containerImg | 750x750 | 居中 |  |
| 转盘灯光 | lightImg | 750x750 | 居中，旋转15度后闪烁播放 |  |
| 转盘 | rotateImg | 635x635 | 居中 |  |
| 指针 | pointImg | 270x270 | 圆圈居中 |  |
| 开始按钮 | btnImg | 175x175 | 居中，运行时会在0.95-1之间缩放 |  |
| 开始按钮禁用 | btnDisableImg | 175x175 | 居中 |  |
| 基座 | foundationImg | 750x300 | 左右居中，顶部距离转盘底部顶部610 |  |
# 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 |
| foundationStyle | 底座样式 | StyleType | { width: 750, height: 300, top: 610 } |
| foundationImg | 底座图片 | string | //yun.tuisnake.com/market-ui/8a636ef9-2a48-4c47-b817-1806bfe0ba03.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 | 6 |
| maxTurningSpeed | 转盘运行每秒转动度数（最大转速） | number | 900 |
| extraRotate | 初始转盘上奖品相对于转盘需要额外转动的度数 | number | 0 |
| rangePercent | 指针命中区域范围：0-1 | number[] | [0.1, 0.9] |
| top | 整体位置 | number | 0 |
| 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 |