# 开礼盒

开礼盒是翻牌子的变体（变体的详细说明可以查看变体与预设）。其为不可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，开礼盒主要由盒子关闭状态、盒子打开状态、提示文案等组成

# 按需引入

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

Vue.use(OpenBox)

# 代码演示

# 普通形式

<mk-open-box
  ref="openBox"
  v-bind="baseConfig"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  data() {
    return {
      // 静态配置可以 freeze 来减少vue监听 （非必需）
      baseConfig: Object.freeze({
        cardsConfig: {
          img: '//yun.tuisnake.com/market-ui/37593235-15af-4903-b0de-df417d469d97.png',
          length: 9,
        },
        // 打开后的默认图片
        frontImg: '//yun.tuisnake.com/market-ui/fc063ca2-5f03-4992-87a3-a57b56ff3ee2.png',
      }),
    };
  },

  methods: {
    async clickStart(index) {
      const openBox = this.$refs.openBox;
      if (!openBox.isWaitStart) {
        return;
      }
      await openBox.start({
        // 传入需要打开的盒子
        index,
        // （可不传）传入盒子打开后的图片
        frontImg: this.baseConfig.frontImg,
      });
      // 判断是否还可以继续玩
      if (true) {
        await openBox.reset();
      } else {
        // 不可玩就禁用
        await openBox.disable();
      }
    },
  },
};

# 重置所有盒子

// 只重置组件状态，不会重置盒子状态
this.$refs.openBox.reset();
// 重置组件状态，并将所有盒子关闭
this.$refs.openBox.reset({
  needResetAll: true,
});

# 塞入特殊的盒子状态

// 通过reset方法来塞入特殊的盒子状态
this.$refs.openBox.reset({
  // 状态中每一项都是盒子打开后图片的cdn地址
  cardsState: Array.from({ length: 9 }, () => ''),
});

# 推荐出图规范

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

资源名	对应参数	宽x高	说明
盒子关闭状态	-	190x220	与打开状态对齐
盒子打开状态	frontImg	190x220	与盒子关闭状态对齐
提示文案	tipImg	110x80	居中

# API

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

# 基本类型定义

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

// 盒子配置定义
export interface CardsConfigType {
  // 盒子关闭状态图片
  img: string;
  // 总盒子数
  length: number;
}

// 开始方法参数定义
export interface StartOptType {
  // 需要打开的盒子索引
  index: number;
  // 盒子打开状态图片
  frontImg?: string;
}

// 重置方法参数定义
export interface ResetOptType {
  // 是否全部重置为关闭
  needResetAll?: boolean;
  // 重置为特殊的盒子状态，状态中每一项都是盒子关闭图片的cdn地址
  cardsState?: string[];
}

# Props

参数	说明	类型	默认值
containerStyle	容器样式	StyleType	`{ width: 700, height: 700 }`
cardsArray	礼盒图片数组，每个礼盒图片可不同，长度大于0时，优先级比 cardsConfig 高	string[]	-
cardsConfig	礼盒图片以及礼盒数，每个礼盒图片一样，优先级比 cardsArray 低	CardsConfigType	`{ img: '//yun.tuisnake.com/market-ui/37593235-15af-4903-b0de-df417d469d97.png', length: 9 }`
frontImg	默认礼盒打开后图片	string	`//yun.tuisnake.com/market-ui/fc063ca2-5f03-4992-87a3-a57b56ff3ee2.png`
rowsAmount	一行礼盒数	number	`3`
cardStyle	礼盒样式	StyleType	`{ width: 190, height: 220 }`
waitShakeInterval	等待开始时，每个礼盒晃动间隔（ms）	number	`1600`
waitShakeIndexArray	等待开始时，摇动的顺序, 默认按照S型顺序	number[]	`[0, 1, 2, 5, 4, 3, 6, 7, 8, 5, 4, 3]`
tipImg	提示图片	string	`//yun.tuisnake.com/market-ui/9207f674-6b8a-4fd9-9111-f638c275e5c1.png`
tipStyle	提示图片样式，包含宽高，相对位置等	StyleType	`{ width: 110, height: 80, top: -10, left: 110 }`
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	`undefined`

# Slots

暂未提供插槽

# Events

名称	参数	说明
clickStart	number	点击盒子，会将盒子索引传出
stateChange	StateChangeDataType	状态变化事件，详见基础玩法组件逻辑规范

# Methods

因为其为不可控组件，故不提供stop方法，当然支持其他基础玩法组件的方法

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

# State

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

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