先上效果圖
Screenshot_2024-07-11T171321.png
Screenshot_2024-07-11T171404.png
實(shí)現(xiàn)
- 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 //默認(rèn)0 1 失敗 2成功
@State isLoding: boolean = false
@State captchaBean: CaptchaBean = Const.TabBars_DEFAULT_NEWS_TYPES;
build() {
Column() {
Row() {
Text('請完成安全驗(yàn)證')
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)// 數(shù)據(jù)改變時，改變組件位置
.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 //默認(rèn)0 1 失敗 2成功
@State isLoding: boolean = false
@State captchaBean: CaptchaBean = Const.TabBars_DEFAULT_NEWS_TYPES;
@State pointList: Point[] = [];
build() {
Column() {
Row() {
Text('請完成安全驗(yàn)證')
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('點(diǎn)擊事件' + event.x + "----" + event.y)
console.log('點(diǎn)擊事件' + 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 })
}
}
}
