ant-mini-flip-draw

翻牌抽奖小程序模块

API

属性名	类型	默认值	描述
prizeList	Array	[]	奖项列表【必填】，须包含 name 和 icon 字段
prizeName	String	''	抽奖结果的奖品 name【必填】，其值必须位于 prizeList 中
cardNum	Number	9	展示多少张卡片，推荐3/6/9
cardHeight	Number	210	宽度固定210，高度需要等比换算设置
cardBgImg	String	-	卡背图片
unawardImg	String	-	未中奖展示图片
isDrawing	Boolean	-	是否正在抽奖，用于限制点击
flipAllCards	String	-	是否翻转剩余卡片
onFlipStart	Function	() => {}	转动开始的回调【选填】

示例

视图：

<view>
<flipdraw
    prizeList="{{prizeList}}"
    prizeName="{{prizeName}}"
    isDrawing="{{isDrawing}}"
    flipAllCards="{{flipAllCards}}"
    onFlipStart="onFlipStart"
  />
</view>

逻辑：

Page({
  data: {
    prizeList: [{
      'name': '谢谢参与1',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
    }, ... ],
    prizeName: '',
    flipAllCards: false,
    isDrawing: false,
  },
  onFlipStart() {
    console.log('开始了，这个时候最好页面控制下 loading 状态，组件内不做控制');
    this.setData({
      isDrawing: true, // 修改抽奖状态，防止重复点击多次请求
    });
    // 开始抽奖
    drawRequest().then(res => {
      console.log('拿到结果，设置奖品信息');
      if (res.success) {
        this.setData({
          prizeName: '666元红包',
          isDrawing: false,
        });
      } else {
        this.setData({
          isDrawing: false, // 抽奖结束一定要还原 isDrawing 状态
        });
      }
      this.showResultDialog()
    });
  },
  showResultDialog() {
    // do something
    this.setData({
      flipAllCards: true, // 将剩下未翻过的牌自动翻，展示奖品结果。
    })
  }
});
 

注意

• 请求前一定要设置 isDrawing = true，请求结束后一定要设置 isDrawing = false。
• cardHeight 卡片高度是相对750视觉稿设置的，宽高默认210x210rpx。宽度固定，高度可变。比如210x300的图片，cardHeight就设置为300；如果是200x250的图片需要等比转换一下，cardHeight = 210 * (250/200)