背景
平时在电商业务开发中，经常会碰到需要开发一些营销相关的功能单页，例如大转盘，刮刮卡，翻牌抽奖等营销功能。为了提高项目的开发速度，故对这些营销功能进行组件封装。
计划
参考支付宝小程序版本，开发出对应vue版本的营销组件库。
营销功能罗列（vue组件版本）
- wheel-draw 大转盘
- scratch-card 刮刮卡
- flip-draw 翻牌抽奖
- fruit-slots 水果机
- hit-eggs 砸金蛋
- dice-roller 摇骰子
设计与分析
大转盘原型脑图：
抽奖按钮状态图：
项目难点：
- 1.奖项布局问题。
根据传入的全部的奖项数组进行动态分配空间和布局，利用
transform配合transformOrigin进行布局 - 2.转盘怎么转起来，并且是一开始从慢到快，再到停下来的动画？（纯css能实现吗？）
可以利用css3的
transform：rotate(x deg),配合动画过渡属性transition: all 6s ease完成旋转动画。 - 3.某一次抽奖奖项的确认在什么时机确认比较合适？
- 1.点击抽奖按钮时才去请求抽奖接口确认，这种情况存在接口延迟的请求，转盘不会马上转起来，只有等到奖项回传后才会转起来，用户体验感不好；
- 2.初始化时就调用了抽奖逻辑（如果有抽奖次数），然后点击抽奖按钮时已经知道当前抽奖的奖项，同时调用抽奖接口，把下一次抽奖的奖项返回回来（如果有抽奖次数），这种处理逻辑可以避免点击抽奖按钮，转盘不能马上转起来的问题，同时引入了另外一个问题，就是当前的抽奖操作和用户的操作其实是不一致的。
组件API设计
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 转盘的宽度 | Number|String | 300 |
| initDeg | 转盘初始化旋转的角度 | Number | 0 |
| rotTimes | 抽奖的剩余次数 | Number | 1 |
| prizeList | 奖项列表数组 | Array | [] |
| prizeName | 抽奖名称 | String | '' |
| prizeWidth | 抽奖的宽度 | Number | NaN |
| prizePaddingTop | 抽奖距离顶部的距离 | Number | NaN |
| bgImg | 转盘背景图 | String | gw.alipayobjects.com/zos/rmsport… |
| btnImg | 抽奖按钮图 | String | gw.alipayobjects.com/zos/rmsport… |
| onStart | 抽奖开始触发的回调函数 | Function | () => {} |
| onFinish | 抽奖结束触发的回调函数 | Function | () => {} |
| onTimesUp | 没有抽奖次数触发的回调函数 | Function | () => {} |
代码逻辑
template结构
<template>
<div class="wheel-container" :style="{
width: width + 'px',
height: width + 'px'
}">
<div
class="wheel-list"
:style="{
background: 'url(' + bgImg + ') 0% 0% / 100% 100% no-repeat',
transform: 'rotate(' + (degValue || initDeg) + 'deg)'
}"
>
<div class="wheel-item" v-for="(item, index) in prizeList" :key="index">
<div
class="wheel-img"
:style="{
width: prizeWidthData,
paddingTop: prizePaddingTopData,
transform: 'rotate(' + (index + 0.5)/6 + 'turn)',
transformOrigin: itemTransformOrigin,
}"
>
<img :src="item.img" style="width: 100%;height:auto;">
</div>
</div>
</div>
<div class="wheel-btn">
<img :src="btnImg" class="img" @click="start">
</div>
</div>
</template>
未完待续~~~
最后
项目代码地址：营销组件，欢迎留言，顺手点个start~
