翻牌子

排成方形的卡牌阵型，用户点击卡牌，卡牌进行翻转动画后，触发后续的中奖回调。其为不可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，翻牌子主要由卡片正面、卡片背面等组成

按需引入

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

Vue.use(TurnCard)

代码演示

普通形式

<mk-turn-card
  ref="turnCard"
  v-bind="baseConfig"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  data() {
    return {
      // 静态配置可以 freeze 来减少vue监听 （非必需）
      baseConfig: Object.freeze({
        cardsConfig: {
          img: '//yun.tuisnake.com/h5-mani/turncard_fivelucky/9722f608-dfb4-4b52-bfb3-880406c637a0.png',
          length: 9,
        },
        // 翻转后卡片正面图片
        frontImg: '//yun.tuisnake.com/h5-mani/turncard_fivelucky/f25455fe-ce70-431f-8086-c5fe2d7e4dfc.png',
      }),
    };
  },

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

重置所有卡牌

// 只重置组件状态，不会重置卡牌状态
this.$refs.turnCard.reset();
// 重置组件状态，并将所有卡牌重置翻面
this.$refs.turnCard.reset({
  needResetAll: true,
});

塞入特殊的卡牌状态

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

推荐出图规范

暂未标准化

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[];
}

// 插槽使用参数
export interface CardInfoType {
  // 卡牌背面/正面图片
  img: string;
  // 卡牌索引
  index: number;
}

Props

参数	说明	类型	默认值
containerStyle	容器样式	StyleType	{ width: 750, height: 750 }
cardsArray	卡片背面图片数组，每张卡片背面可不同，长度大于0时，优先级比 cardsConfig 高	string[]	-
cardsConfig	卡片背面图片以及长度，每张背面图片一样，优先级比 cardsArray 低	CardsConfigType	{ img: '//yun.tuisnake.com/h5-mani/turncard_fivelucky/9722f608-dfb4-4b52-bfb3-880406c637a0.png', length: 9 }
frontImg	默认卡片正面图片	string	//yun.tuisnake.com/h5-mani/turncard_fivelucky/f25455fe-ce70-431f-8086-c5fe2d7e4dfc.png
rowsAmount	一行卡牌数	number	3
cardStyle	卡片样式	StyleType	{ width: 187, height: 239, perspective: 500 }
waitShakeInterval	等待开始时，每张卡片晃动间隔（ms）	number	1600
waitShakeIndexArray	等待开始时，摇动的顺序, 默认按照正常顺序	number[]	-
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	undefined

Slots

名称	作用域	说明
back	CardInfoType	卡牌背面插槽
front	CardInfoType	卡牌正面面插槽

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