18xchat/assets/Scripts/chat18x/ui/panels/SafeCheckPanel.ts

import { _decorator, EditBox, Label } from "cc";
import Utils from "../../../Main/Common/Utils";
import li_BaseView from "../../../Main/Common/li_BaseView";
import { GButton } from "../../../Main/Common/GButton";
import { ViewManager } from "../../../Main/Manager/ViewManager";

const { ccclass, property } = _decorator;

/**
 * 安全验证页面
 * 预制体位于 resources/loginPanel/SafeCheckPanel
 */
@ccclass("SafeCheckPanel")
export class SafeCheckPanel extends li_BaseView {
  private _nodeTab: any = {};

  // 验证码倒计时
  private _countdown: number = 0;
  private _countdownTimer: any = null;

  /**
   * 组件初始化时调用
   */
  onLoadCT(): void {
    // 解析节点，将子节点存储到 _nodeTab 中
    Utils.parseNode(this.node, this._nodeTab);

    // 初始化UI
    this.initUI();

    // 注册事件监听
    this.registerListener();
  }

  /**
   * 初始化UI
   */
  private initUI(): void {
    // 初始化发送按钮状态
    this.updateSendBtnState(true);
  }

  /**
   * 注册事件监听
   */
  private registerListener(): void {
    // 绑定发送验证码按钮点击事件
    if (this._nodeTab.SendBtn) {
      GButton.BandClick(this._nodeTab.SendBtn, this.onClickSendCode, this);
    }

    // 绑定确定按钮点击事件
    if (this._nodeTab.ConfirmBtn) {
      GButton.BandClick(this._nodeTab.ConfirmBtn, this.onClickConfirm, this);
    }

    // 绑定关闭按钮点击事件
    if (this._nodeTab.CloseBtn) {
      GButton.BandClick(this._nodeTab.CloseBtn, this.onClickClose, this);
    }
  }

  /**
   * 点击发送验证码按钮
   */
  private onClickSendCode(): void {
    // 如果正在倒计时，不允许再次发送
    if (this._countdown > 0) {
      return;
    }

    // 获取邮箱输入框
    const emailInput = this._nodeTab.EmailInput?.getComponent(EditBox);

    if (!emailInput) {
      console.error("未找到邮箱输入框");
      return;
    }

    const email = emailInput.string.trim();

    // 验证邮箱
    if (!email) {
      console.log("请输入邮箱");
      // TODO: 显示提示信息
      return;
    }

    if (!this.isValidEmail(email)) {
      console.log("请输入有效的邮箱地址");
      // TODO: 显示提示信息
      return;
    }

    // TODO: 调用后端接口发送验证码
    console.log("发送验证码到：", email);
    this.requestSendCode(email);
  }

  /**
   * 调用后端接口发送验证码
   */
  private requestSendCode(email: string): void {
    // TODO: 实现后端发送验证码接口调用
    // 示例：
    // const data = { email: email, type: 'forgetPassword' };
    // NetworkManager.request('/api/sendCode', data, (response) => {
    //   if (response.success) {
    //     // 发送成功，开始倒计时
    //     this.startCountdown();
    //   } else {
    //     // 发送失败，显示错误信息
    //     console.error('发送验证码失败：', response.message);
    //   }
    // });

    console.log("TODO: 实现发送验证码接口调用");
    // 临时模拟发送成功，启动倒计时
    this.startCountdown();
  }

  /**
   * 开始倒计时
   */
  private startCountdown(): void {
    this._countdown = 60; // 60秒倒计时
    this.updateSendBtnState(false);

    this._countdownTimer = setInterval(() => {
      this._countdown--;

      if (this._countdown <= 0) {
        // 倒计时结束
        clearInterval(this._countdownTimer);
        this._countdownTimer = null;
        this.updateSendBtnState(true);
      } else {
        // 更新按钮文本
        this.updateSendBtnState(false);
      }
    }, 1000);
  }

  /**
   * 更新发送按钮状态
   */
  private updateSendBtnState(canSend: boolean): void {
    if (!this._nodeTab.SendBtn) return;

    const label = this._nodeTab.SendBtn.getComponentInChildren(Label);
    if (label) {
      if (canSend) {
        label.string = "发送验证码";
      } else {
        label.string = `${this._countdown}秒后重试`;
      }
    }

    // TODO: 可以设置按钮的可交互状态
    // const button = this._nodeTab.SendBtn.getComponent(Button);
    // if (button) {
    //   button.interactable = canSend;
    // }
  }

  /**
   * 点击确定按钮
   */
  private onClickConfirm(): void {
    // 获取邮箱和验证码输入框
    const emailInput = this._nodeTab.EmailInput?.getComponent(EditBox);
    const codeInput = this._nodeTab.CodeInput?.getComponent(EditBox);

    if (!emailInput || !codeInput) {
      console.error("未找到邮箱或验证码输入框");
      return;
    }

    const email = emailInput.string.trim();
    const code = codeInput.string.trim();

    // 验证输入
    if (!email) {
      console.log("请输入邮箱");
      // TODO: 显示提示信息
      return;
    }

    if (!this.isValidEmail(email)) {
      console.log("请输入有效的邮箱地址");
      // TODO: 显示提示信息
      return;
    }

    if (!code) {
      console.log("请输入验证码");
      // TODO: 显示提示信息
      return;
    }

    // TODO: 调用后端接口验证验证码
    console.log("验证验证码：", email, code);
    this.requestVerifyCode(email, code);
  }

  /**
   * 调用后端接口验证验证码
   */
  private requestVerifyCode(email: string, code: string): void {
    // TODO: 实现后端验证验证码接口调用
    // 示例：
    // const data = {
    //   email: email,
    //   code: code,
    //   type: 'forgetPassword'
    // };
    // NetworkManager.request('/api/verifyCode', data, (response) => {
    //   if (response.success) {
    //     // 验证成功，跳转到修改密码页面
    //     this.openNewPasswordPanel(email, code);
    //   } else {
    //     // 验证失败，显示错误信息
    //     console.error('验证码错误：', response.message);
    //     // TODO: 显示错误提示
    //   }
    // });

    console.log("TODO: 实现验证验证码接口调用");
    // 临时模拟验证成功，跳转到修改密码页面
    this.openNewPasswordPanel(email, code);
  }

  /**
   * 打开修改密码页面
   */
  private openNewPasswordPanel(email: string, code: string): void {
    // 关闭当前页面
    this.close();

    // 打开修改密码页面，并传递邮箱和验证码信息
    ViewManager.I.openMainView("loginPanel/NewPasswordPanel", {
      email: email,
      code: code,
    });
  }

  /**
   * 点击关闭按钮
   */
  private onClickClose(): void {
    // 清理倒计时定时器
    if (this._countdownTimer) {
      clearInterval(this._countdownTimer);
      this._countdownTimer = null;
    }

    // 关闭当前界面
    this.close();
  }

  /**
   * 验证邮箱格式
   */
  private isValidEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  /**
   * 界面销毁时调用
   */
  protected onDestroy(): void {
    // 清理倒计时定时器
    if (this._countdownTimer) {
      clearInterval(this._countdownTimer);
      this._countdownTimer = null;
    }
  }
}