18xchat/assets/Scripts/chat18x/ui/panels/RegisterPanel.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";

const { ccclass, property } = _decorator;

/**
 * 注册页面
 * 预制体位于 resources/loginPanel/RegisterPanel
 */
@ccclass("RegisterPanel")
export class RegisterPanel 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.RegisterBtn) {
      GButton.BandClick(this._nodeTab.RegisterBtn, this.onClickRegister, 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: 'register' };
    // 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 onClickRegister(): void {
    // 获取输入框
    const emailInput = this._nodeTab.EmailInput?.getComponent(EditBox);
    const passwordInput = this._nodeTab.PasswordInput?.getComponent(EditBox);
    const codeInput = this._nodeTab.CodeInput?.getComponent(EditBox);

    if (!emailInput || !passwordInput || !codeInput) {
      console.error("未找到输入框");
      return;
    }

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

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

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

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

    if (password.length < 6) {
      console.log("密码长度不能少于6位");
      // TODO: 显示提示信息
      return;
    }

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

    // TODO: 调用后端接口进行注册
    console.log("注册：", email, password, code);
    this.requestRegister(email, password, code);
  }

  /**
   * 调用后端注册接口
   */
  private requestRegister(email: string, password: string, code: string): void {
    // TODO: 实现后端注册接口调用
    // 示例：
    // const data = {
    //   email: email,
    //   password: password,
    //   code: code
    // };
    // NetworkManager.request('/api/register', data, (response) => {
    //   if (response.success) {
    //     // 注册成功
    //     console.log('注册成功');
    //     // 关闭注册界面
    //     this.close();
    //   } else {
    //     // 注册失败，显示错误信息
    //     console.error('注册失败：', response.message);
    //   }
    // });

    console.log("TODO: 实现注册接口调用");
  }

  /**
   * 点击关闭按钮
   */
  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;
    }
  }
}