任务 **：**使用"对象数组"、"ForEach渲染"、"Badge角标组件"、"Grid布局"等相关知识，实现生效抽奖卡案例。如图1所示：
图1 生肖抽奖卡实例图
图1(a)中有6张生肖卡可以抽奖，每抽中一张，会通过弹层显示出来（图（b）），每抽中一张，图片的右上角数量增加1，若6张卡片均抽中了（每种卡片至少有一张），就可以抽更大的奖，包括华为、苹果以及小米三种不同的手机，如图1（c）。也可实现支付宝集五福案例，功能相似即可。
参考资料： 68-【阶段综合】-生肖抽卡-Badge角标组件_哔哩哔哩_bilibili
实验过程：
首先，定义了一个接口`Images`，用于描述每张生肖卡的数据结构，包含图片的URL和数量（`count`）。接着，基于这个接口准备了初始数据，即6张生肖卡，每张卡的初始数量为0。
在页面布局方面，使用了`Stack`层叠布局来实现页面的多层显示。最底层是一个`Column`布局，其中包含了一个`Grid`布局用于展示生肖卡。通过`ForEach`方法，将每张生肖卡的数据绑定到`GridItem`中，并使用`Badge`组件在每张卡的右上角显示其数量。此外，还添加了一个"立即抽卡"按钮，用于触发抽卡操作。
当点击"立即抽卡"按钮时，会触发一系列的动画效果和逻辑处理。首先，设置遮罩层的透明度、层级和缩放比例，使抽卡页面显示出来。然后，通过`Math.random()`方法生成一个随机数，表示抽中的生肖卡序号。接着，将抽中的生肖卡以放大的形式显示在抽卡页面上，并提供一个"开心收下"按钮。
点击"开心收下"按钮后，将遮罩层的透明度和层级恢复到初始状态，并将抽中的生肖卡数量加1。同时，检查是否所有生肖卡的数量都大于0，如果是，则表示集齐了所有生肖卡，可以进入中奖页面。在中奖页面中，会随机选择一个奖品（华为、苹果或小米手机），并显示相应的图片和"再来一次"按钮。点击"再来一次"按钮后，将所有生肖卡的数量重置为0，重新开始抽奖过程。
在整个实验过程中，通过合理使用`State`变量来控制页面的状态变化，以及利用`ForEach`和`Badge`组件实现了动态的数据绑定和显示效果。同时，通过`Grid`布局实现了生肖卡的规则排列，使得页面布局更加美观和清晰。
源代码：
cpp
// 1.定义接口
interface Images{
url:string
count:number
}
// 需求1：遮罩层显隐 透明度opacity 0-1 层级zInsex 1-99
// 需求2：图片收缩 缩放scale 0-1
@Entry
@Component
struct Index {
// 随机的生肖卡序号
@State randomNum:number=-1// 初始值为-1表示还没有抽卡
// 2.基于接口准备数据
@State images:Images[]=[
{url:'app.media.bg_00',count:0},
{url:'app.media.bg_01',count:0},
{url:'app.media.bg_02',count:0},
{url:'app.media.bg_03',count:0},
{url:'app.media.bg_04',count:0},
{url:'app.media.bg_05',count:0}
]
// 透明度
@State transparent:number=0 // 初始为0
//层级
@State Level:number=0 // 初始为0
// 缩放
@State zoomx:number=0
@State zoomy:number=0
// 控制中奖
@State isGet:boolean=false
// 奖池
@State arr:string[]=['pg','hw','xm']
@State price:string=''//默认没有中奖
build() {
// 层叠布局
Stack(){
// 初始化页面
Column(){
// Grid布局的基础使用：规则的行列布局中非常常见
Grid(){
ForEach(this.images,(item:Images,index:number)=>{
GridItem(){
Badge({
count:item.count,
position:BadgePosition.RightTop,
style:{
fontSize:14,
badgeSize:20,
badgeColor:Color.Red
}
}){
Image($r(item.url))
.width(100)
.height(100)
}
}
})
}
.columnsTemplate('1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.width('100%')
.height(300)
.margin({top:100})
Button('立即抽卡')
.width(200)
.backgroundColor('#de668d')
.margin({top:50})
.onClick(()=>{
this.Level=99
this.transparent=1
this.zoomx=1
this.zoomy=1
//计算随机数
this.randomNum = Math.floor(Math.random()*6)
})
}
.zIndex(5) // 初始化层级为5
.width('100%')
.height('100%')
// 抽卡时的页面
Column({space:25}){
Text('获得生肖卡片')
.fontColor('#f5ebcf')
.fontSize(25)
.fontWeight(FontWeight.Bold)
Image($r(`app.media.img_0${this.randomNum}`))
.width(200)
// 卡片的播放
.scale({
x:this.zoomx,
y:this.zoomy
})
.animation({
duration:500
})
Button('开心收下')
.width(200)
.height(50)
.backgroundColor(Color.Transparent)// 透明色
.border({width:2,color:'#fff9e0'})
.onClick(()=>{
this.transparent=0
this.Level=0
this.zoomx=0
this.zoomy=0
// 开心收下
this.images[this.randomNum]={
url:`app.media.img_0${this.randomNum}`,
count:this.images[this.randomNum].count+1
}
// 判断卡片的数量
// 如果卡片中有一个的数量为0，那就是没集齐
let flag:boolean=true
for(let item of this.images){
if(item.count==0){
flag=false
break
}
}
this.isGet=flag
if(flag){
let randomIndex:number=Math.floor(Math.random()*3)
this.price=this.arr[randomIndex]
}
})
}
.justifyContent(FlexAlign.Center)// 居中对齐
.width('100%')
.height('100%')
.backgroundColor('#cc000000')
.zIndex(this.Level)
.opacity(this.transparent)// 透明度
// 动画
.animation({
duration:200
})
if(this.isGet){
// 中奖页面
Column(){
Text('恭喜获得手机一部')
.fontColor('#f5ebcf')
.fontSize(25)
.fontWeight(700)
Image($r(`app.media.${this.price}`))
.width(300)
Button('再来一次')
.width(200)
.height(50)
.backgroundColor(Color.Transparent)
.border({width:2,color:'#fff9e0'})
.onClick(()=>{
this.isGet=false
this.price=''
this.images=[j
{url:'app.media.img_00',count:0},
{url:'app.media.img_01',count:0},
{url:'app.media.img_02',count:0},
{url:'app.media.img_03',count:0},
{url:'app.media.img_04',count:0},
{url:'app.media.img_05',count:0}
]
})
}
.zIndex(10)
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#cc000000')
}
}
}
}运行截图：
