fishfish/features/feature/src/main/ets/view/MainView.ets

import { AppStorageKeyFishCollect, avPlayerManager, Vibration, YTAvoid, YTHeader, yTRouter } from 'basic';
import { faceDetector } from '@kit.CoreVisionKit';
import { trustedAppService } from '@kit.DeviceSecurityKit';
import { promptAction } from '@kit.ArkUI';
import { Cell } from '../models';


@Component
export struct MainView{
  @Watch('changeText')
  @StorageProp(AppStorageKeyFishCollect.FISHTEXT)
  text:string=""
  @State private  currentIndex: number = 0
  tabsController: TabsController = new TabsController()
  @StorageProp(YTAvoid.SAFE_TOP_KEY) top: number = 0
  @State list: Cell[] = []; // 存储所有 Cell 对象的数组
  private indexCount: number = 0; // 记录当前滚动的索引
  private count: number = 10; // 列表中 Cell 对象的数量
  private image: ResourceStr=$r('app.media.muyu')
  changeText(){
    if(this.text!="") {
      this.list.forEach(item => item.value = this.text)
    }
  }

  //是否是手动
  @State isAuto:boolean=false
  //是否展示侧边工具栏
  @State isShowSilder:boolean=true
  //是否展示信息展示
  @State isShowMessage:boolean=true
  //是否开启声音
  @State isOpenMusic:boolean=true
  //是否开启震动
  @State isOpenVibration:boolean=true

  //动画true/false
  @State isAnimation:boolean=false
  //进度条
  @State currentMerit:number=0
  @State totalMerit:number=500

  //时间间隔
  @State time:number=1000

  @State isShowTimeManger:boolean=false
  @State valueTime:number=10

  //开启关闭音乐
  async openMusic(){
    await avPlayerManager.playByRawSrc('music3.mp3')

  }
  async closeMusic(){
    await avPlayerManager.stop()
  }

  //点击动画
  onclikMerit(){
    if(this.isAnimation){
      return
    }
    if(this.isOpenMusic){
      this.openMusic()
    }
    if(this.isOpenVibration){
      Vibration.startVibration()
    }
    this.isAnimation=true
    this.currentMerit++
    let index = this.indexCount % this.count; // 计算当前滚动的索引
    this.indexCount++; // 更新索引计数器
    animateToImmediately({
      // 立即开始动画
      duration: 0, // 动画持续时间为0毫秒
      onFinish: () => { // 动画完成后的回调
        animateToImmediately({
          // 再次立即开始动画
          duration: 500, // 动画持续时间为1000毫秒
          onFinish:()=>{
            this.isAnimation=false
            this.closeMusic()
          }
        }, () => {
          this.list[index].y = -200 // 设置 Cell 的垂直偏移量
          this.list[index].opacity = 0 // 设置 Cell 的透明度
        })

      }
    }, () => {
      this.list[index].y = 0 // 设置 Cell 的垂直偏移量
      this.list[index].opacity = 1 // 设置 Cell 的透明度

    })

  }

  @Builder
  timeMangerBuilder(){
    Column(){
      Stack({alignContent:Alignment.Top}) {
        Tabs({ barPosition: BarPosition.Start, controller: this.tabsController  }) {
          TabContent() {
            Column() {
              Text('敲击间隔时长（1-10秒）')

              Row() {
                TextInput()
                  .width(70)
                  .height(40)
                  .padding(0)
                  .type(InputType.Number) // 设置输入类型为数字
                  .textAlign(TextAlign.Center)
                  .borderRadius(4)
                  .backgroundColor(Color.Gray)

                Text('秒')
              }
            }

          }.tabBar('无限')

          TabContent() {
            Column() {
              Column() {
                Text('敲击次数（1-9999次）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

              Column() {
                Text('敲击间隔时长（1-10秒）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

            }

          }.tabBar('固定次数')

          TabContent() {
            Column() {
              Column() {
                Text('倒计时（1-9999次）')
                Stack() {
                  Progress({ value: this.valueTime, total: 70, type: ProgressType.Linear }).backgroundColor('#4c4c4c')
                  Row({space:30}){
                    ForEach([0,10,20,30,40,50,60,70],(item:number,index:number)=>{
                      Column(){
                      }.width(10)
                      .height(10)
                      .borderRadius('50%')
                      .onClick(()=>{
                        if(index!=7){
                          this.valueTime=item
                        }else{
                          this.currentIndex=3
                          this.tabsController.changeIndex(this.currentIndex)
                        }

                      })
                      .backgroundColor(Color.Yellow)
                      // .backgroundColor(this.valueTime>=item?Color.Yellow:Color.White)
                    })


                  }.width('100%')

                }
              }

              Column() {
                Text('敲击间隔时长（1-10秒）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

            }


          }.tabBar('倒计时')
          TabContent() {
            Column() {
              Text('自定义时间')
              Row() {
                TextInput()
                  .width(70)
                  .height(40)
                  .padding(0)
                  .type(InputType.Number) // 设置输入类型为数字
                  .textAlign(TextAlign.Center)
                  .borderRadius(4)
                  .backgroundColor(Color.Gray)

                Text('秒')
              }
            }
          }.tabBar('自定义')

        }.width('100%').barHeight(0)
        Row(){
          Text('无限')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor(this.currentIndex==0?Color.Green:Color.Transparent)
            .onClick(()=>{
            this.currentIndex=0
            this.tabsController.changeIndex(this.currentIndex)

          })
          Text('固定次数')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor(this.currentIndex==1?Color.Green:Color.Transparent).onClick(()=>{
            this.currentIndex=1
            this.tabsController.changeIndex(this.currentIndex)

          })
          Text('倒计时')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor((this.currentIndex==2||this.currentIndex==3)?Color.Green:Color.Transparent)
            .onClick(()=>{
            this.currentIndex=2
            this.tabsController.changeIndex(this.currentIndex)

          })

        }.width('100%')
        .borderRadius(10)
        .height(30)
        .backgroundColor(Color.Pink)
      }


    }.width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor(Color.White)

  }

  // 初始化方法，在组件即将显示时被调用
  aboutToAppear(): void {
    for (let i = 0; i < this.count; i++) {
      this.list.push(new Cell()); // 初始化 Cell 数组
    }
  }

  build() {
    Column() {


      Stack({alignContent:Alignment.Bottom}) {
        Column() {
          if (this.isShowMessage) {

            Row() {
              Column({ space: 20 }) {
                //积功德+清零
                Row() {
                  Text() {
                    Span('积功德: ').fontColor(Color.White).fontSize(18)
                    Span(`${this.currentMerit}`).fontSize(18).fontColor($r('[basic].color.login_main_yellow'))
                  }.margin({ left: 50 })

                  Row() {
                    Text('清零')
                      .borderRadius(20)
                      .padding({
                        left: 6,
                        right: 6,
                        top: 4,
                        bottom: 4
                      })
                      .backgroundColor($r('[basic].color.login_main_yellow'))
                      .fontColor(Color.Black)
                      .onClick(() => {
                        this.currentMerit = 0
                      })


                  }

                }.width('100%').justifyContent(FlexAlign.SpaceAround)

                //进度条
                Column() {
                  Stack({ alignContent: Alignment.Center }) {
                    Progress({ value: this.currentMerit, total: this.totalMerit, type: ProgressType.Ring })
                      .width(80).color('#3dbbd1')
                      .style({ strokeWidth: 6, shadow: true })
                      .backgroundColor(Color.White)
                    Text('集福').fontSize(20).fontColor(Color.White)
                  }.margin({ left: 10 })

                  Text() {
                    Span(`${this.currentMerit}`).fontColor($r('[basic].color.login_main_yellow'))
                    Span(`/${this.totalMerit}`)
                  }.fontColor(Color.White).margin({ left: 10 }).width(80).textAlign(TextAlign.Center)

                }.width('100%').justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
              }.layoutWeight(1)

              //右边的按钮

              Column({ space: 20 }) {
                Image($r('app.media.muyu')).width(30).onClick(() => {
                  this.isShowSilder = !this.isShowSilder
                })
                if (this.isShowSilder) {
                  //是否开启声音
                  Image($r('app.media.muyu')).width(30).onClick(() => {
                    this.isOpenMusic = !this.isOpenMusic
                  })
                  //是否开启震动
                  Image($r('app.media.muyu')).width(30).onClick(() => {
                    this.isOpenVibration = !this.isOpenVibration
                  })

                  Column() {
                    Column() {
                      Text(this.isAuto ? '自动' : '手动')
                        .padding({
                          left: 3,
                          right: 3,
                          top: 10,
                          bottom: 10
                        })
                        .margin({ bottom: 10 })
                        .backgroundColor('#252111')
                        .fontColor(Color.White)
                        .onClick(() => {
                          this.isAuto = !this.isAuto
                          //如果是本来自动，再点击就是手动，不需要设置任何东西
                          // if (!this.isHand) {
                          //   this.isHand = true
                          // } else {
                          //   //如果本来是手动，再点击就是自动，就需要设置东西
                          //   this.isHand = false
                          // }
                        })
                      if (this.isAuto) {
                        Column({ space: 10 }) {
                          Text('结束')
                            .padding({
                              left: 3,
                              right: 3,
                              top: 10,
                              bottom: 10
                            })
                            .fontColor(Color.White)
                            .backgroundColor('#252111')
                            .onClick(() => {
                              this.isAuto = !this.isAuto
                            })
                          Text('设置')
                            .padding({
                              left: 3,
                              right: 3,
                              top: 10,
                              bottom: 10
                            })
                            .fontColor(Color.White)
                            .backgroundColor('#252111')
                            .bindSheet($$this.isShowTimeManger, this.timeMangerBuilder(), {
                              width: '100%',
                              height: 400,
                              showClose: false,
                            })
                            .onClick(() => {
                              this.isShowTimeManger = true
                            })
                          Text('设置2')
                            .padding({
                              left: 3,
                              right: 3,
                              top: 10,
                              bottom: 10
                            })
                            .fontColor(Color.White)
                            .backgroundColor('#252111')
                            .onClick(() => {
                              //去往设置页面
                              yTRouter.router2FishSettingPage()
                            })
                        }
                      }
                    }
                  }
                }

              }.width(50)
              .justifyContent(FlexAlign.Center)
              .alignItems(HorizontalAlign.End)

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

            .alignItems(VerticalAlign.Top)
          }
        }
        .height('100%')
        .margin({ top: 20 })

        Column() {
          Stack() { // 创建一个堆栈布局容器
            ForEach(this.list, (item: Cell, _index: number) => { // 遍历 list 中的每一个 Cell
              Text(item.value)// 显示 Cell 中的文字
                .fontColor(Color.White)// 设置文字颜色为白色
                .fontSize('50lpx')// 设置文字大小
                .translate({ x: 0, y: `${item.y}lpx` })// 设置文字的垂直偏移量
                .opacity(item.opacity) // 设置文字的透明度
            })
          }
          .width(200) //
          .height(100)
          .align(Alignment.BottomEnd)
          Image(this.image)
            .width(200)
            .height(200)
            .objectFit(ImageFit.Contain)
            .clickEffect({
              // 点击效果配置
              scale: 0.5, // 缩放比例
              level: ClickEffectLevel.LIGHT // 效果级别
            })
            .onClick(() => { // 点击图片时触发的回调
              this.onclikMerit()
            })

          Row(){

            Image($r('app.media.muyu')).width(30).onClick(()=>{
              this.isShowMessage=!this.isShowMessage
            })
          }.width('100%')
          .margin({top:50})
          .justifyContent(FlexAlign.End)
        }
        .width('100%')
        .margin({bottom:20})

      }.height('100%')

      // Row(){
      //   Button('改变文字').onClick(()=>{
      //     this.list.forEach(item=>{item.value='吴亮+1'})
      //   })
      //   Button('敲击时长间隔1秒').onClick(()=>{
      //     this.time=1000
      //
      //   })
      //   Button('固定10次').onClick(()=>{
      //     //自动敲击
      //     const a=setInterval(()=>{
      //       this.onclikMerit()
      //
      //     },this.time)
      //     const b=setTimeout(()=>{
      //       clearInterval(a)
      //       clearTimeout(b)
      //     },this.time*10)
      //
      //
      //   })
      //   Button('倒计时规定时间').onClick(()=>{
      //     this.onclikMerit()
      //     const a=setInterval(()=>{
      //       this.onclikMerit()
      //     },this.time)
      //     const b=setTimeout(()=>{
      //       clearInterval(a)
      //       clearTimeout(b)
      //     },10000)
      //
      //   })
      // }
      //
      // Button('xxx').bindSheet($$this.isShowTimeManger,this.timeMangerBuilder(),{
      //   width:'100%',
      //   height:400,
      //   showClose:false
      // }).onClick(()=>{
      //   this.isShowTimeManger=true
      // })
      //
      // Button('震动').onClick(()=>{
      //   Vibration.startVibration()
      // })


      // Stack() {
      //   Progress({ value: this.valueTime, total: 70, type: ProgressType.Linear }).backgroundColor(Color.White)
      //   Row({space:30}){
      //     ForEach([0,10,20,30,40,50,60,70],(item:number)=>{
      //       Column(){
      //       }.width(10)
      //       .height(10)
      //       .borderRadius('50%')
      //       .onClick(()=>{
      //         this.valueTime=item
      //       })
      //       .backgroundColor(this.valueTime>=item?Color.Pink:Color.White)
      //     })
      //
      //
      //   }.width('100%')
      //
      // }





    }.width('100%')
    .height('100%')
    .padding({
      top:this.top,
      left:16,
      right:16
    })
    .backgroundColor(Color.Black)
  }
}