抽奖小程序

entry->src->main->module.json5

"requestPermissions": [ {"name": "ohos.permission.INTERNET"} ],

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  datalist = [{"name":"P50","imgUrl":"https://img1.baidu.com/it/u=3916636701,1432676148&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500"},
    {"name":"食用油","imgUrl":"https://img0.baidu.com/it/u=945056545,3821334541&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
    {"name":"大米","imgUrl":"https://img0.baidu.com/it/u=3786834027,1648217721&fm=253&fmt=auto&app=120&f=JPEG?w=870&h=800"},
    {"name":"PC","imgUrl":"https://img2.baidu.com/it/u=438093967,2270718079&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
    {"name":"P50","imgUrl":"https://img1.baidu.com/it/u=3916636701,1432676148&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500"},
    {"name":"液晶电视","imgUrl":"https://img0.baidu.com/it/u=2113291026,4031727881&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
    {"name":"PAD","imgUrl":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2f536536-0600-4c0e-b5eb-79be53aa842d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682756379&t=e3c5202f540205c5b182165b18acaf1f"},
    {"name":"P50","imgUrl":"https://img1.baidu.com/it/u=3916636701,1432676148&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500"},
    {"name":"谢谢老板","imgUrl":"https://img0.baidu.com/it/u=1886917040,3182261868&fm=253&fmt=auto&app=138&f=JPEG?w=282&h=279"},

  ]

  //选中奖品的下标
  @State currentIndex: number = 0

  //  旋转的真实坐标
  selectIndex = [0, 1, 2, 5, 8, 7, 6, 3, 0]

  //真实的下标
  @State realIndex: number = 0
  //三元运算符

  //固定抽奖的下标
  mustIndex = 8

  build() {
    Column() {
      Flex({
        direction: FlexDirection.Row,
        justifyContent: FlexAlign.SpaceAround,
        alignItems: ItemAlign.Center,
        wrap: FlexWrap.Wrap,
        alignContent: FlexAlign.SpaceAround
      }) {
        //通过for 循环来创建
        ForEach(this.datalist, (item, index) => {
          if (index == 4) {
            //开始抽奖的按钮
            Text("开始抽奖")
              .width("30%")
              .backgroundColor(Color.Blue)
              .height(140)
              .borderRadius(20)
              .fontColor(Color.White)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .textAlign(TextAlign.Center)
              .onClick(() => {
                this.startGame()
              })
          } else {
            Column() {
              Image(item.imgUrl)
                .height(100)
                .width(100)
                .margin({top:15})
              Text(item.name)
                .fontSize(20)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 10, bottom: 10 })
            }.backgroundColor(this.realIndex == index ? Color.Pink : Color.White)
            .borderRadius(20)
            .width("30%")
          }

        })
      }.height(500)
      .backgroundColor("#ffc6ee9d")

      Text("中奖内容：" + this.datalist[this.realIndex].name)
        .fontSize(20)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 10 })
    }

  }

  //任务id
  taskId = -1
  //当前转的圈数
  currentCount = 0
  //开始游戏
  startGame() {
    //初始化随机停止数
    this.stopCount = Math.floor(Math.random() * 10) + 40
    this.taskId = setInterval(() => {
      this.countTime()
    }, 150)

  }

  //停止的圈数
  stopCount = 0
  //倒计时函数
  countTime() {
    //周期执行的函数
    if (this.currentCount<this.stopCount) {
      //当前圈数小于停止圈数 才能+1
      this.currentCount++
    }

    this.currentIndex++
    if (this.currentIndex > 7) {
      //重置为起点
      this.currentIndex = 0
    }

    this.realIndex = this.selectIndex[this.currentIndex]
    console.info(this.currentIndex + "")

    //减速操作
    if (this.currentCount == 30) {
      //先停止以前的任务
      clearInterval(this.taskId)
      //重新开启一个比较慢的任务
      this.taskId = setInterval(() => {
        this.countTime()
      }, 400)
    }

    //停止逻辑
    if (this.stopCount == this.currentCount) {

        //可以停止
        clearInterval(this.taskId)

        //重置当前圈数为0
        this.currentCount = 0

    }
  }
}