支付宝小程序营销组件 翻牌抽奖·flip-draw

页面上有 N 张卡牌，每张卡牌对应不同奖品，用户点击卡牌进行翻牌抽奖。开发者可自定义卡牌数量和翻牌的次数。

更多详细信息请参见 代码市场。

扫码体验

示例代码

安装

npm i ant-mini-flip-draw --save

注册

//.json
{
  "usingComponents": {
    "flipdraw": "ant-mini-flip-draw/component/index"
  }
}

调用

<!-- .axml -->
<view>
<flipdraw
    prizeList="{{prizeList}}"
    prizeName="{{prizeName}}"
    isDrawing="{{isDrawing}}"
    flipAllCards="{{flipAllCards}}"
    onFlipStart="onFlipStart"
  />
</view>

//.js
Page({
  data: {
    docParamsImg: "https://img.alicdn.com/tfs/TB1sfaaJSzqK1RjSZFHXXb3CpXa-1326-846.png",
    prizeList: [
      {
      'name': '谢谢参与1',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '666元红包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/nxpXbcNBOmbeIOVCUsuS.png'
      },
      {
      'name': '1元红包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
      'name': '3元红包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/tyMAYvTdjRFOVxqWVhsj.png'
      },
      {
      'name': '谢谢参与2',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '1元红包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
      'name': '谢谢参与3',
      'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
      'name': '5元红包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/qanDEFeGBoiPflYxkhJY.png'
      }
    ],
    cardBgImg: 'https://gw.alicdn.com/tfs/TB1P.AMXMHqK1RjSZJnXXbNLpXa-610-600.png',
    prizeName: '',
    flipAllCards: false,
    isDrawing: false,
  },
  onFlipStart() {
    console.log('开始了，这个时候最好页面控制下 loading 状态，组件内不做控制');
    this.setData({
      isDrawing: true, // 修改抽奖状态，防止重复点击多次请求
    });
    // 开始抽奖
    setTimeout(() => {
      console.log('拿到结果，设置奖品信息');
      if (Math.random() > 0.3) {
        this.setData({
          prizeName: '666元红包',
          isDrawing: false,
        });
      } else {
        this.setData({
          isDrawing: false, // 抽奖结束一定要还原 isDrawing 状态
        });
      }
      this.showResultDialog()
    }, 1000);
  },
  showResultDialog() {
    // do something
    this.setData({
      flipAllCards: true, // 将剩下未翻过的牌自动翻，展示奖品结果。
    })
  }
});undefined

属性

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

注意

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