Nine-grid Lottery

Lottery

Applicable Scenarios

Used to implement basic Nine-grid Lottery activities.

Basic Capabilities Description

Prize Configuration

Supports configuring up to 8 prizes in the prize settings attributes.

Lottery Execution Logic

1. After clicking the Start Lottery button in the middle of the component, the lottery animation will only be triggered and start cycling through each prize in sequence when one of the following conditions is met (This capability ensures that during the lottery process, developers can perform pre-check judgments on user lottery conditions).
   1. When the 'Start Lottery' property is enabled

        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/6762896e132bf0e2fe92a6511fdf1c9d.png" alt="Image 6762896e132bf0e2fe92a6511fdf1c9d" />
   2. The built-in component action 'Start Lottery' is triggered

        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/41701deea1343ac3d59ccabacf0ba910.png" alt="Image 41701deea1343ac3d59ccabacf0ba910" />
2. When the lottery animation is triggered, a countdown will start. After a 2-second countdown, the winning number from the "Lottery Result" property will be read, and the prize selection box will select the corresponding prize.

Extended Scenarios Description

Generate Dynamic Prize Content via Data Model Data

1. Create one data model with two fields: prize name (text type) and prize icon (image type)

   

2. Enter several sample data in this model

   

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

   

4. The page load event triggers a call to the list retrieval method of this data model, queries the list data of the data model, and stores the output parameters in the variable prize

   

5. Click the data binding mode button on the right side of the component prize settings property.

   

6. Click the data binding mode button on the right side of the component prize settings property

   

7. For the prize name property, enter the field identifier of the prize name field in the data model; for the prize icon property, enter the field identifier of the prize image field in the data model. Then you will find the prize content displayed as the pre-entered data in the data model.

   

Property Introduction

External properties received by the component

Property Name	Property Identifier	Type	Description

Prize settings	prizeList	array	Only the first 8 prizes will display in the component Example: [ { "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" } ]
Start Lucky Draw	enablePrize	boolean	Example: true
lucky draw duration	duration	number	Default value: 2000
lucky draw result	prizeResult	string	Starting from the top-left corner, confirm 8 prize positions clockwise as 1-8. Example: "1"

Events

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

Click Start Lucky Draw button	clickLotteryButton		Compatible with all platforms	-
Draw	finishLottery	object prize: string开奖结果 开奖结果， 等于 prizeResult属性 result: object desc: string中奖项名称 idx: number中奖项索引	Compatible with all platforms	-

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

Start lucky draw

start

-