# 扭蛋机
点击后随机出现一个扭蛋。其为可控组件（详细说明可查看基础玩法组件逻辑规范）
# 待整理
# 按需引入
import Vue from 'vue'
import Gashapon from '@tuia/market-ui/lib/Gashapon'
import '@tuia/market-ui/lib/Gashapon/style'
Vue.use(Gashapon)
# 代码演示
<mk-gashapon
ref="gashapon"
v-bind="baseConfig"
@clickStart="clickStart"
/>
点击展开js部分代码
export default {
data() {
return {
// 静态配置可以 freeze 来减少vue监听 （非必需）
baseConfig: Object.freeze({
// 用来收集的特殊小球
smallSpecialBallArray: [
'//yun.tuisnake.com/market-ui/0b0e64df-9952-42aa-82ad-6674bb7d9334.png',
'//yun.tuisnake.com/market-ui/09d29acc-8460-440f-9470-0451de9f2320.png',
'//yun.tuisnake.com/market-ui/5ec21e4a-515e-4e64-a75f-2b5c2f78e4d0.png',
'//yun.tuisnake.com/market-ui/421580be-5191-422c-9e7d-a98b0ccefca5.png',
'//yun.tuisnake.com/market-ui/89f51532-5bbf-4e5b-8fc3-6e09cead7655.png',
],
}),
};
},
methods: {
async clickStart() {
const gashapon = this.$refs.gashapon;
if (!gashapon.isWaitStart) {
return;
}
await gashapon.start();
// ... 一些操作
// 传入需要停止的奖品索引
await gashapon.stop({ index: 1 });
// 判断是否还可以继续玩
if (true) {
await gashapon.reset();
} else {
// 不可玩就禁用
await gashapon.disable();
}
},
},
};
# 推荐出图规范
按照以下尺寸格式出图，可以更快速更方便地定制使用
| 资源名 | 对应参数 | 宽x高 | 说明 | 示例 |
|---|---|---|---|---|
| 整体框架图片 | boxImg | 750x860 |  | |
| 管道门图片 | doorImg | 150x166 | 与框架图片契合 |  |
| 大球图片（特殊奖品） | bigBallArray | 180x180 | 居中，提供3张 |  |
| 可命中小球图片 | smallSpecialBallArray | 86x86 | 居中，提供5张 |  |
| 无意义小球图片 | smallEmptyBallArray | 86x86 | 居中，提供3张 |  |
| 开始按钮 | btnImg | 320x220 |  | |
| 开始按钮按下 | btnPressImg | 320x220 |  | |
| 开始按钮禁用 | btnDisableImg | 320x220 |  |
# API
支持基本的屏幕适配以及基础玩法组件逻辑规范涉及的API
# 基本类型定义
// 样式值定义
export type StyleValueType = string | number;
// 样式对象定义
export type StyleType = Record<string, StyleValueType>;
// stop方法入参
export interface StopOptionType {
index: number;
}
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| containerStyle | 容器样式（包含整体位置） | StyleType | { width: 750, height: 900, top: 0, left: 0 } |
| doorStyle | 管道门样式（包含位置） | StyleType | { width: 150, height: 166, top: 685, left: 160 } |
| doorImg | 管道门图片 | string | //yun.tuisnake.com/market-ui/e54e024f-5a36-44fe-b6a3-db16c7fc7a39.png |
| boxStyle | 框架样式（包含位置） | StyleType | { width: 750, height: 860, top: 0, left: 0 } |
| boxImg | 框架图片 | string | //yun.tuisnake.com/market-ui/4f7cb812-4d20-4bf0-8aa4-1f9c761486b5.png |
| ballContainerStyle | 球仓区域与位置 | StyleType | { width: 500, height: 470, left: 130, top: 110 } |
| downContainerStyle | 下落区域与位置 | StyleType | { width: 68, height: 420, left: 30, top: 302 } |
| doorContainerStyle | 门处区域与位置 | StyleType | { width: 150, height: 110, top: 710, left: 160 } |
| ballSize | 小球和大球的宽高，只支持正方形 | number[] | [86, 180] |
| bigBallArray | 大球图片数组，只支持3个 | string[] | ['//yun.tuisnake.com/market-ui/5c18bf18-9f0b-49f4-88cd-29d2e2aadd05.png', '//yun.tuisnake.com/market-ui/e57fa93d-de02-4afd-b766-bf5a4d14bad6.png', '//yun.tuisnake.com/market-ui/3ba4e50d-977d-400a-aa72-2bbab582eadc.png'] |
| smallSpecialBallArray | 特殊小球图片数组，只支持5个 | string[] | ['//yun.tuisnake.com/market-ui/0b0e64df-9952-42aa-82ad-6674bb7d9334.png', '//yun.tuisnake.com/market-ui/09d29acc-8460-440f-9470-0451de9f2320.png', '//yun.tuisnake.com/market-ui/5ec21e4a-515e-4e64-a75f-2b5c2f78e4d0.png', '//yun.tuisnake.com/market-ui/421580be-5191-422c-9e7d-a98b0ccefca5.png', '//yun.tuisnake.com/market-ui/89f51532-5bbf-4e5b-8fc3-6e09cead7655.png'] |
| smallEmptyBallArray | 空的小球图片数组，只支持3个 | string[] | ['//yun.tuisnake.com/market-ui/f9486030-8305-45e4-9379-13d7e88387d6.png', '//yun.tuisnake.com/market-ui/e0b63776-c0d2-454d-b4ff-8d1f9d76a746.png', '//yun.tuisnake.com/market-ui/b4f66226-3e58-47e2-aa48-1ddba7b0f2c6.png'] |
| btnStyle | 开始按钮样式 | StyleType | { width: 320, height: 220, top: 680, left: 360, } |
| btnImg | 开始按钮图片 | string | //yun.tuisnake.com/market-ui/eb925898-4bb4-4369-a741-309bfc9b4b52.png |
| btnPressImg | 开始按钮按下图片 | string | //yun.tuisnake.com/market-ui/a1ec87a9-6bfa-473b-b630-2064a05fa8c4.png |
| btnDisableImg | 开始按钮禁用图片 | string | //yun.tuisnake.com/market-ui/aed1a667-a74a-43fb-abe3-1993935c85cb.png |
| handStyle | 手势样式 | StyleType | { width: 154, height: 106, top: 740, left: 530 } |
| handImg | 手势图片 | string | //yun.tuisnake.com/market-ui/4b74d1d8-da15-4890-8353-ba9ee07afc8d.png |
| forceUnitFunc | 自定义屏幕适配转换方法，详见屏幕适配 | addUnitFuncType | undefined |
# Slots
| 名称 | 作用域 | 说明 |
|---|---|---|
| hand | 无 | 手势替换 |
# Events
| 名称 | 参数 | 说明 |
|---|---|---|
| clickStart | 无 | 开始按钮被点击时触发 |
| stateChange | StateChangeDataType | 状态变化事件，详见基础玩法组件逻辑规范 |
# Methods
对于基础玩法组件的stop方法入参做了限定，来确定命中目标
| 名称 | 入参 | 出参 | 说明 |
|---|---|---|---|
| start | 无 | Promise | 开始方法，详见基础玩法组件逻辑规范 |
| stop | StopOptionType | Promise | 结束方法，详见基础玩法组件逻辑规范 |
| reset | 无 | Promise | 重置方法，详见基础玩法组件逻辑规范 |
| disable | 无 | Promise | 禁用方法，详见基础玩法组件逻辑规范 |
| getState | 无 | StateConstant | 获取状态方法，详见基础玩法组件逻辑规范 |
| addUnitFunc | StyleValueType | string | 单位转换方法（仅处理数字），优先使用forceUnitFunc，若未定义则按照750=100vw来转换，详见屏幕适配 |
| addUnitForAll | StyleType | StyleType | 对样式对象中所有数字样式进行转换处理，详见屏幕适配 |
# State
暴露了部分computed的数据，方便外部判断
| 参数 | 说明 | 类型 | 示例 |
|---|---|---|---|
| isWaitStart | 是否为等待开始状态，详见基础玩法组件逻辑规范 | boolean | true |
| isDisable | 是否为禁用状态，详见基础玩法组件逻辑规范 | boolean | false |