harmony/features/mypage/src/main/ets/view/ChangePhoneComp.ets

import { hdHttp, HdResponse, BasicConstant, ExpertData, authStore, ChangeUtil } from '@itcast/basic'
import { BusinessError } from '@kit.BasicServicesKit';
import promptAction from '@ohos.promptAction';
import HashMap from '@ohos.util.HashMap';
import { router } from '@kit.ArkUI';

interface callBackData {
  code: number,
  message:string,
  msg:string,
  data: string
}

@Component
export struct ChangePhoneComp {
  @State phoneNumber: string = ''
  @State smsCode: string = ''
  @State countdown: number = 0

  uploadChangePhoneAction(){
    const hashMap: HashMap<string, string> = new HashMap();
    hashMap.set('newMobile',this.phoneNumber)
    hashMap.set('oldMobile',authStore.getUser().photo)
    hashMap.set('sms',this.smsCode)
    hdHttp.httpReq<string>(BasicConstant.urlExpertAPI+'updateMobile',hashMap).then(async (res: HdResponse<string>) => {
      let json:callBackData = JSON.parse(res+'') as callBackData;
      console.log('更新手机号数据:',json);
      if (json.code == 200) {
        promptAction.showToast({message:'修改成功'});
        router.back();
      } else {
        promptAction.showToast({message:json.message});
      }
    }).catch((err: BusinessError) => {
      console.info(`Response login succeeded: ${err}`);
    })
  }

  uploadSmsAction(){
    const hashMap: HashMap<string, string> = new HashMap();
    hashMap.set('type','6');
    hashMap.set('mobile',this.phoneNumber)
    hdHttp.httpReq<string>(BasicConstant.urlExpertAPI+'smsSend',hashMap).then(async (res: HdResponse<string>) => {
      let json:callBackData = JSON.parse(res+'') as callBackData;
      console.log('获取验证码数据:',json);
      if (json.code == 200) {
        promptAction.showToast({message:'发送成功'});
        this.startCountdown();
      } else {
        promptAction.showToast({message:json.message});
      }
    }).catch((err: BusinessError) => {
      console.info(`Response login succeeded: ${err}`);
    })
  }

  // 验证码倒计时
  private startCountdown() {
    this.countdown = 60
    const timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        clearInterval(timer)
      }
    }, 1000)
  }

  build() {
    Column() {
      // 手机号输入框
      Row() {
        Image($r('app.media.icon_phone'))
          .width(18)
          .height(18)
          .objectFit(ImageFit.Contain)
          .margin({left:10})

        TextInput({ placeholder: '请输入新的手机号码' })
          .fontSize(16)
          .backgroundColor(Color.White)
          .onChange((value: string) => {
            this.phoneNumber = value
          })
      }
      .margin({ top: 10 })
      .width('95%')
      .height(48)
      .borderRadius(4)
      .borderWidth(1)
      .borderColor('#CCCCCC')

      // 验证码输入区域
      Row() {
        Row() {
          Image($r('app.media.icon_verification_code'))
            .width(18)
            .height(18)
            .objectFit(ImageFit.Contain)
            .margin({left:10})
          TextInput({ placeholder: '请输入验证码' })
            .fontSize(16)
            .backgroundColor(Color.White)
            .onChange((value: string) => {
              this.smsCode = value
            })
        }
        .margin({ top: 10 })
        .width('60%')
        .height(48)
        .borderRadius(4)
        .borderWidth(1)
        .borderColor('#CCCCCC')

        Button({type:ButtonType.Normal}){
          Text(this.countdown ? `${this.countdown}s` : '获取验证码')
        }
        .width('37%')
        .height(32)
        .borderRadius(5)
        .borderColor('#8B2316')
        .borderWidth(1)
        .backgroundColor(Color.White)
        .fontColor('#8B2316')
        .fontSize(12)
        .margin({ top: 10 })
        .enabled(this.countdown === 0)
        .onClick(() => {
          if (this.phoneNumber.length < 11 || !this.phoneNumber) {
            promptAction.showToast({message:'请输入手机号'})
            return
          }
          if (!ChangeUtil.isMobileNum(this.phoneNumber)) {
            promptAction.showToast({message:'请输入正确的手机号'})
            return
          }
          this.uploadSmsAction()
        })
      }
      .width('95%')
      .justifyContent(FlexAlign.SpaceBetween)

      // 登录按钮
      Button({type:ButtonType.Normal}){
        Text('确 定')
      }
      .width('90%')
      .height(48)
      .borderRadius(8)
      .borderWidth(1)
      .borderColor('#8B2316')
      .backgroundColor(Color.White)
      .fontColor('#8B2316')
      .fontSize(18)
      .position({x:'5%',y:'80%'})
      .onClick(() => {
        if (!this.phoneNumber) {
          promptAction.showToast({message:'请输入手机号'})
          return
        }
        if (!ChangeUtil.isMobileNum(this.phoneNumber)) {
          promptAction.showToast({message:'手机号格式错误，请重新输入'})
          return
        }
        if (!this.smsCode) {
          promptAction.showToast({message:'验证码不能为空'})
          return
        }
        this.uploadChangePhoneAction();
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}