Skip to main content

Lucky Draw Grid

Lottery

Applicable Scenarios

Used to implement basic Lucky Draw Grid activities.

Basic Capabilities Description

Prize Configuration

Supports configuring up to 8 prize items in the prize settings properties.

Lucky Draw Execution Logic

  1. After clicking the start lucky draw button in the center of the component, the draw animation is triggered and begins sequentially cycling through each prize only when one of the following conditions is met (this capability ensures developers can perform pre-draw condition checks on users during the draw process).
    1. When the 'Start Lucky Draw' property is enabled
    2. The built-in component action 'Start Lucky Draw' has been triggered
  2. When the draw animation is triggered, a timer will start. After 2 seconds, the winning number in the 'draw result' property will be read, causing the prize selection box to select that prize.

Extended Scenarios Description

Generating Dynamic Prize Content Using Data Model Data

  1. Create one data model and add two fields within it: prize name (text type), prize icon (image type).

  2. Enter several sample data records into the model.

  3. Create a variable 'prize' of array type, and select the newly created model for the data model.

  4. When the page load event is triggered, it calls the list method of this data model to query its list data, and stores the output parameters in the prize variable.

  5. Click the data binding mode button on the right side of the component's prize setting property.

  6. Click the data binding button on the right side of the variable property; bind the variable property to the prize variable.

  7. Enter the field identifier of the prize name field from the data model into the prize name property, and enter the field identifier of the prize image field from the data model into the prize icon property. You will then observe that the prize content displays the data pre-entered in the data model.

Property Introduction

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

属性名
属性标识
类型
说明
奖品设置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

抽奖时长durationnumber

默认值:2000

抽奖结果prizeResultstring

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

示例:"1"

Events

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

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

-

开奖finishLotteryobject
  • prize: string开奖结果

    开奖结果, 等于 prizeResult属性

  • result: object
    • desc: string中奖项名称
    • idx: number中奖项索引
兼容三端

-

Method API

通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法,如 $w.form1.submit()

方法名
方法标识
参数
方法说明
开始抽奖start

-