鸿蒙开发 - 15天

最新推荐文章于 2024-08-24 16:13:21 发布

shr007_

最新推荐文章于 2024-08-24 16:13:21 发布

阅读量223

点赞数 7

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/shr007_/article/details/137080773

版权

本文介绍了如何使用React或类似框架构建一个带有动态效果的抽奖卡片组件，包括显示背景图片、计数器和随机选择奖品。组件包含三种结构，分别对应未抽卡、首次抽卡成功和已中奖状态。

摘要由CSDN通过智能技术生成

抽奖卡片练习

interface Card {
  name: string
  count: number
}


@Entry
@Component
struct Job01 {
  @State card: Card[] = [
    { name: 'bg_00', count: 0 },
    { name: 'bg_01', count: 0 },
    { name: 'bg_02', count: 0 },
    { name: 'bg_03', count: 0 },
    { name: 'bg_04', count: 0 },
    { name: 'bg_05', count: 0 },
  ]
  @State cardOpacity: number = 0
  @State cardZindex: number = -1
  @State cardRandom: number = 0
  @State cardAngle: number = -180
  @State cardScale: number = 0
  @State isGet: boolean = false
  @State Jp: string[] = ['hw', 'pg', 'xm']

  build() {
    Column() {

      Stack() {

        // 结构1

        Column() {

          Flex({ wrap: FlexWrap.Wrap }) {
            ForEach(this.card, (item: Card) => {
              Column() {
                Image($r(`app.media.${item.name}`))
                  .width(80)


                // if (item.count > 0) {
                //   Text(`${item.count}`)
                //     .position({ x: 70, y: 0 })
                //     .backgroundColor(Color.Red)
                //     .width(20)
                //     .aspectRatio(1)
                //     .textAlign(TextAlign.Center)
                //     .borderRadius(10)
                //     .fontSize(12)
                //     .opacity(1)
                // }


                Text(`${item.count}`)
                  .position({ x: 70, y: 0 })
                  .backgroundColor(Color.Red)
                  .width(20)
                  .aspectRatio(1)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
                  .fontSize(12)
                  .opacity(
                    item.count > 0 ? 1 : 0
                  )
              }
              .margin(20)

            })


          }

          Button('立即抽卡')
            .backgroundColor(Color.Red)
            .width(200)
            .onClick(() => {
              this.cardOpacity = 1
              this.cardZindex = 99
              this.cardRandom = Math.floor(Math.random() * this.card.length)
              this.cardAngle = 0
              this.cardScale = 1
            })


        }


        if (this.isGet == false) {

          // 结构2

          Column({ space: 20 }) {
            Text('获得生肖卡')
              .fontColor('#ffffff')
              .fontSize(25)
            Image($r(`app.media.img_0${this.cardRandom}`))
              .width(300)
              .rotate({ angle: this.cardAngle })
              .scale({ x: this.cardScale, y: this.cardScale })
              .animation({
                duration: 300
              })
            Button('开心收下')
              .width(200)
              .backgroundColor(Color.Red)
              .onClick(() => {
                this.cardOpacity = 0
                this.cardZindex = -1
                this.cardScale = 0
                this.cardAngle = -180
                this.card[this.cardRandom] = {
                  name: `img_0${this.cardRandom}`,
                  count: this.card[this.cardRandom].count + 1
                }

                let sum: number = 0
                for (let item of this.card) {
                  if (item.count > 0) {
                    sum++
                  } else {
                    break
                  }
                }
                if (sum == this.card.length) {
                  this.isGet = true
                  this.cardRandom = Math.floor(Math.random() * this.Jp.length)
                }


              })


          }
          .opacity(this.cardOpacity)
          .zIndex(this.cardZindex)
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%')
          .backgroundColor('rgba(0,0,0,0.8)')

        } else {

          // 结构 3

          Column({ space: 20 }) {
            Text('中奖了')
              .fontColor('#ffffff')
              .fontSize(25)
            Image($r(`app.media.${this.Jp[this.cardRandom]}`))
              .width(300)
            Button('再来一次')
              .width('100%')
              .backgroundColor(Color.Red)
              .onClick(() => {

                this.card =
                  [
                    { name: 'bg_00', count: 0 },
                    { name: 'bg_01', count: 0 },
                    { name: 'bg_02', count: 0 },
                    { name: 'bg_03', count: 0 },
                    { name: 'bg_04', count: 0 },
                    { name: 'bg_05', count: 0 },
                  ]

                this.cardOpacity = 0
                this.cardZindex = -1

                this.cardRandom = 0
                this.cardAngle = -180
                this.cardScale = 0
                this.isGet = false


              })
          }
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%')
          .backgroundColor('rgba(0,0,0,0.8)')

        }


      }

    }
    .height('100%')
    .width('100%')
  }
}