跳到主要内容

九宫格抽奖

Lottery

适用场景​

用于实现基础的九宫格抽奖活动。

基础能力说明​

奖品配置​

最多支持在奖品设置属性中设置 8 个奖品内容

抽奖执行逻辑​

  1. 点击组件中间的开始抽奖按钮后，仅当满足以下其一条件时，才会触发抽奖动画，开始依次循环选中各个奖品（该能力保证在抽奖流程中，开发者可对用户抽奖条件进行前置判断检查）
    1. 「启动抽奖」属性开启时
    2. 触发了该组件的内置组件动作「开始抽奖」
  2. 抽奖动画被触发，会开始计时，计时 2 秒后，会读取「抽奖结果」属性中的中奖数字，让奖品选择框选中该奖品

扩展场景说明​

通过数据模型数据生成动态奖品内容​

  1. 创建 1 个数据模型，在其中新建 2 个字段：奖品名称（文本类型）、奖品图标（图片类型）

  2. 在该模型中录入几个示例数据

  3. 创建一个变量 prize，数组类型，数据模型选择刚创建的模型

  4. 页面加载事件触发调用该数据模型的查看列表方法，查询该数据模型的列表数据，并将出参存入变量 prize

  5. 点击组件奖品设置属性右侧的数据绑定模式按钮

  6. 点击变量属性右侧的数据绑定按钮，变量属性绑定该 prize 变量

  7. 奖品名称属性输入数据模型中奖品名称字段的字段标识，奖品图标属性输入数据模型中奖品图片字段的字段标识，则可发现奖品内容展示为了数据模型中提前录入的数据

属性介绍​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
奖品设置prizeListarray

仅前8项奖品会展示在组件中

示例：[ { "title": "8元优惠券", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/70122750-ba8b-4ac7-be71-c2300f1f8c6f.png" }, { "title": "劳动节水杯", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/c2842881-5e15-409d-8dd3-352205abe38c.png" }, { "title": "10元优惠券", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/b99c4350-c619-4fff-90e0-1980075e0417.png" }, { "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/7cefce40-73e4-4cdd-aa30-d178a4cb6624.png", "title": "旅行背包" }, { "title": "谢谢参与", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/0aa4dc06-e375-45c2-8ec2-0461a83d5d4a.png" }, { "title": "20积分", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/de35f413-6971-4ab3-a816-9c488e169d46.png" }, { "title": "流量券", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/3c0ff8a2-8362-4219-875d-0778d65bba80.png" }, { "title": "10元优惠券", "image": "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d11056cc-b8a1-4d50-b993-65d8a434802f.png" } ]

启动抽奖enablePrizeboolean

示例：true

抽奖结果prizeResultstring

以左上角为起始位置，顺时针确定8个奖品位置分别1-8

示例："1"

事件​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击开始抽奖按钮clickLotteryButton兼容三端

-

开奖finishLotteryobject
  • prize: string开奖结果

    开奖结果， 等于 prizeResult属性
  • result: object
    • desc: string中奖项名称
    • idx: number中奖项索引
兼容三端

-