# 刮刮卡

一个蒙层覆盖的区域，用户可以模拟刮彩票，容器背后的图片最终会显现出来。其为不可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，一个刮刮卡主要由背景、奖品、封面、刷子等组成

# 按需引入

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

Vue.use(ScratchCard)

# 代码演示

# 普通形式（刮一下后触发自动刮）

<mk-scratch-card
  ref="card"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  methods: {
    async clickStart(startPromise) {
      const card = this.$refs.card;
      // 这里返回的Promise即为start方法的Promise
      await startPromise;
      // 判断是否还可以继续玩
      if (true) {
        await card.reset();
      } else {
        // 不可玩就禁用
        await card.disable();
      }
    },
  },
};

# 不触发自动刮（js代码逻辑与触发时一致）

<mk-scratch-card
  ref="card"
  :enableAutoScratch="false"
  @clickStart="clickStart"
/>

# 直接自动刮

// 直接调用 start 方法即可
this.$refs.card.start();

# 推荐出图规范

暂未标准化

# API

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

# 基本类型定义

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

// 宽高定义
export interface SizeType extends StyleType {
  width: number;
  height: number;
}

# Props

参数	说明	类型	默认值
containerStyle	底盘样式（包含整体位置）	StyleType	`{ width: 750, height: 465 }`
containerImg	底盘图片	string	`//yun.tuisnake.com/market-ui/c6c0a01c-59e1-4317-bfa2-b46c361e9a3a.png`
scratchSize	可刮区域宽高	SizeType	`{ width: 720, height: 405 }`
scratchStyle	刮刮卡样式	StyleType	`{ left: 15, height: 30 }`
coverImg	刮刮卡封面图片	string	`//yun.tuisnake.com/market-ui/71d1c715-17d2-426a-867f-da00c4647213.png`
coverDisableImg	刮刮卡禁用时封面图片	string	`//yun.tuisnake.com/market-ui/71d1c715-17d2-426a-867f-da00c4647213.png`
coverColor	刮刮卡封面兜底颜色	string	`#c5c5c5`
brushSize	刮刮卡刷子宽高	SizeType	`{ width: 160, height: 100 }`
brushImg	刮刮卡刷子图片	string	`//yun.tuisnake.com/market-ui/7fde6794-f9b4-49a1-8f08-44673bacbb23.png`
brushRadius	刮的刷子兜底圆圈半径	number	`40`
prizeImg	奖品图片	string	`//yun.tuisnake.com/market-ui/b16b8439-b6ee-4aa4-8c2a-c158c1ea613c.png`
coreRect	奖品核心区域范围，用于判断刮的程度，数字数组（0-1）：[left, top, width, height]	number[]	`[0.1, 0.1, 0.8, 0.8]`
endRatio	当核心区域手动刮掉的面积达到这个值时，表示刮完了	number	`0.5`
enableAutoScratch	当手动刮一次未达到结束标准时，是否触发自动刮开	boolean	`true`
autoScratchPath	自动刮开路径，二维坐标数组（0-1）最后一项表示该路径耗时：[[x1, y1], [x2, y2, t2]]	number[][]	`[[0.9, 0.1], [0.1, 0.27, 250], [0.96, 0.36, 250], [0.07, 0.62, 250], [0.96, 0.6, 250], [0.05, 0.85, 250]]`
tipsStyle	提示文字（跳动文字）整体样式	StyleType	`{ 'font-size': 100 }`
tipsWords	提示文字（跳动文字）	string	`领福利啦～`
handStyle	手势样式	StyleType	`{ width: 160, height: 170 }`
handImg	手势图片	string	`//yun.tuisnake.com/tact/turnCircle/bcb4fc7e-18c1-46d7-bdae-2e91147196c1.png`
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	`undefined`

# Slots

名称	作用域	说明
result	无	奖品内容替换
tips	无	提示信息替换

# Events

名称	参数	说明
clickStart	Promise	第一次手动刮的时候触发，可以通过等待返回的Promise来监听刮卡结束
stateChange	StateChangeDataType	状态变化事件，详见基础玩法组件逻辑规范

# Methods

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

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

# State

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

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