先上效果图

Screenshot_2024-07-11T171321.png Screenshot_2024-07-11T171404.png

实现

• 1 代码有删减看思路吧

@CustomDialog
struct VFBlockDialog {
  controller?: CustomDialogController
  onResultsClick: (token: string,captchaVerification:string) => void=()=>{};
  @State positionX: number = 0
  @State value: number = 0
  @State seconds: number = 0.1
  @State timeTemp: number = 0
  @State type: number = 0 //默认0  1 失败  2成功
  @State isLoding: boolean = false
  @State captchaBean: CaptchaBean = Const.TabBars_DEFAULT_NEWS_TYPES;

  build() {
    Column() {
      Row() {
        Text('请完成安全验证')
        Image($r('app.media.vfet_delete')).width(20).height(20)
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
            }
          })
      }
      .width("100%").padding({ top: 16, left: 16, right: 16 }).justifyContent(FlexAlign.SpaceBetween)

      Stack({ alignContent: Alignment.TopStart, }) {
        Image(this.captchaBean.originalImageUrl)
          .height(155)
          .borderRadius(10)
          .width('100%')

        Image(this.captchaBean.jigsawImageUrl)// 数据改变时，改变组件位置
          .height(155)
          .translate({ x: this.positionX, y: 0, z: 0 })
        Image($r('app.media.vficon_refresh')).width(30).height(30)
          .translate({ x: 280, y: 0, z: 0 })
          .onClick(() => {
            if(this.type==0){
              this.refresh()
            }
          })
        if (this.type!=0) {
          Column() {
            Image(this.type==1?$r('app.media.vfdrag_error'):$r('app.media.vfdrag_success')).width(32).height(32).margin({ top: 39 })
            Text(this.type==1?$r('app.string.vfblock_failed'):$r('app.string.vfblock_success')).fontSize(16).fontColor(this.type==1?0xFA5E59:0x51c024).margin({ top: 16 })
            if (this.type==1){
              Text(){
               Span($r('app.string.vf_pintu_error_tip')).fontSize(14).fontColor(0x333333)
               Span($r('app.string.correct')).fontSize(14).fontColor(0xFA5E59)
               Span($r('app.string.position')).fontSize(14).fontColor(0x333333)
              }.margin({ top: 4 })
            }else {
              Text(){
                Span($r('app.string.vfpinyu_success_tip')).fontSize(14).fontColor(0x333333)
                Span(this.seconds.toFixed(1)).fontSize(14).fontColor(0x51c024)
                Span($r('app.string.vfpinyu_success_seconds')).fontSize(14).fontColor(0x333333)
                Span(this.seconds>1?((99 - (this.seconds - 1) / 0.1))<1?'1':((99 - (this.seconds - 1) / 0.1)).toFixed(0):'99').fontSize(14).fontColor(0x51c024)
                Span($r('app.string.vfpinyu_success_user')).fontSize(14).fontColor(0x333333)
              }.margin({ top: 4 })
            }

          }.height(155).backgroundColor(0xbbFFFFFF)
          .width(310)
        }
        if (this.isLoding) {
          Progress({ value: 0, total: 100, type: ProgressType.Ring })
            .width(50).color(Color.Blue)
            .translate({ x: 130, y: 50, z: 0 })
            .style({ strokeWidth: 10, status: ProgressStatus.LOADING })
        }


      }
      .width('100%')
      .padding({
        top: 14,
        left: 16,
        bottom: 15,
        right: 16
      })
      .borderRadius(10)

      Stack({ alignContent: Alignment.Center, }) {

        Slider({
          style: SliderStyle.InSet,
          value: this.value,
          max: 310,
          min: 0
        })
          .width('100%')
          .enabled(this.type==0&&this.captchaBean.originalImageUrl!='')
          .padding({ left: 10, right: 10, bottom: 16 })
          .blockStyle({ type: SliderBlockType.IMAGE, image:this.type==0?$r('app.media.vfdrag_btn_n'):this.type==1?$r('app.media.vfdrag_btn_error'):$r('app.media.vfdrag_btn_success') })
          .trackBorderRadius(10)
          .trackThickness(40)
          .selectedColor(this.type==0?'#117BFF':this.type==1?'#FA5E59':'#65C93D')
          .blockSize({ width: 40, height: 40 })
          .onChange((value: number, mode: SliderChangeMode) => {
            this.value = value;
            this.positionX = (310 - 65) / 310 * value
            // console.info('value:' + value + 'positionX:' + this.positionX.toFixed(0)+"--->"+mode+"---"+SliderChangeMode.Begin);
            if (mode == SliderChangeMode.End) {
              this.seconds=((new Date().getTime()-this.timeTemp)/1000)
              console.info('seconds-->'+this.seconds+"--->"+this.timeTemp)
              this.checkAsync(this.positionX)
              // this.positionX = 0
              // this.value = 0;
            }else if (mode==SliderChangeMode.Begin){
                this.timeTemp=new Date().getTime();
            }
          })
        if (this.value == 0) {
          Text($r('app.string.vf_drag_tv_tip2')).height(40).padding({ bottom: 16 }).fontSize(16).fontColor(Color.Gray)
        }
      }
      .width('100%')

    }
  }
}

• 2 代码有删减看思路吧

@CustomDialog
struct VFWordCaptchaDialog {
  controller?: CustomDialogController
  onResultsClick: (token: string,captchaVerification:string) => void=()=>{};
  @State type: number = 0 //默认0  1 失败  2成功
  @State isLoding: boolean = false
  @State captchaBean: CaptchaBean = Const.TabBars_DEFAULT_NEWS_TYPES;
  @State pointList: Point[] = [];
  build() {
    Column() {
      Row() {
        Text('请完成安全验证')
        Image($r('app.media.vfet_delete')).width(20).height(20)
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
            }
          })
      }
      .width("100%").padding({ top: 16, left: 16, right: 16 }).justifyContent(FlexAlign.SpaceBetween)

      Stack({ alignContent: Alignment.TopStart, }) {
        Image(this.captchaBean.originalImageUrl)
          .height(155)
          .borderRadius(10)
          .width('100%')
          .onClick((event: ClickEvent) => {
            if (this.pointList.length<this.captchaBean.wordList.length){
              this.pointList.push(new Point(Math.round(event.x), Math.round(event.y)))
              console.log('点击事件' + event.x + "----" + event.y)
              console.log('点击事件' + JSON.stringify(this.pointList))
              if (this.pointList.length==this.captchaBean.wordList.length) {
                this.checkAsync()
              }
            }
          })
        if (this.pointList != null && this.pointList.length > 0) {
          ForEach(this.pointList, (item: Point, index: number) => {
            Stack({ alignContent: Alignment.Top, }){
              Text((index+1).toString()).fontColor(Color.White).fontSize(14).margin({top:5,right:2})
            }.width(34).height(34).backgroundImage($r('app.media.vfdot_bg')).translate({x:item.x-17,y:item.y-17,z:0})
          })
        }

        Image($r('app.media.vficon_refresh')).width(30).height(30)
          .translate({ x: 280, y: 0, z: 0 })
          .onClick(() => {
            this.refresh()
          })
        if (this.isLoding) {
          Progress({ value: 0, total: 100, type: ProgressType.Ring })
            .width(50).color(Color.Blue)
            .translate({ x: 130, y: 50, z: 0 })
            .style({ strokeWidth: 10, status: ProgressStatus.LOADING })
        }
      }
      .width('100%')
      .padding({
        top: 14,
        left: 16,
        bottom: 15,
        right: 16
      })
      .borderRadius(10)

      Stack() {
        Row({}) {
          if (this.type == 0) {
            Text($r('app.string.vfplease_click_next')).fontSize(14).fontColor(0x3B4147)
            Text(this.captchaBean.wordList.toString() + "】").fontSize(14).fontColor(0x3B4147)
          } else if (this.type == 1) {
            Image($r('app.media.vfword_res_error')).width(24).height(24)
            Text($r('app.string.vf_error')).fontSize(14).fontColor(Color.White).margin({ left: 10 })
          } else {
            Image($r('app.media.vfword_res_success')).width(24).height(24)
            Text($r('app.string.vf_success')).fontSize(14).fontColor(Color.White).margin({ left: 10 })
          }

        }
        .height(40)
        .borderRadius(10)
        .margin({
          top: 4,
          bottom: 16
        })
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .backgroundColor((this.type == 0) ? 0xEBF0F5 : (this.type == 1) ? 0xFA5E59 : 0x65C93D)

      }.margin({ left: 16, right: 16 })
    }

  }
}