game_cocos_2c/assets/scripts/modules/lobby/ui/LoginView/LoginView.ts

import { _decorator, Button, Color, EditBox, instantiate, Label, Node, RichText, Sprite, SpriteFrame, sys, UITransform } from 'cc';
import { UIView } from '@scripts/framework/ui/UIView';
import { AppKernel } from '@scripts/app/AppKernel';
import { UIViewID } from '@scripts/define/UIDefine';
import { UICloseReason } from '@scripts/framework/ui/UILayer';
import { formatCurrency } from '@scripts/utils/Helper';
import { addBtnClick } from '@scripts/utils/UIHelper';

const { ccclass, property } = _decorator;

@ccclass('LoginView')
export class LoginView extends UIView {
  readonly viewId = UIViewID.LoginView;

  @property(Button)
  btnGuest: Button;

  @property(Button)
  btnFacebook: Button;

  @property(Button)
  btnGoogle: Button;

  @property(EditBox)
  loginAccount: EditBox;

  @property(EditBox)
  loginPassword: EditBox;

  @property(Node)
  psd_visible_control: Node;

  @property(Node)
  btnLogin: Node;

  @property(Node)
  btnRegister: Node;

  @property(Node)
  btnResetPsd: Node;

  @property(Node)
  btnSupport: Node;

  @property(Node)
  policy_container: Node;

  private _labelLayout: Node | null = null;
  private _labelTemplate: Node | null = null;
  private _policyAgree = true;
  private _googleWebBtn;

  private listenViews: UIViewID[] = [
    UIViewID.Register,
    UIViewID.ResetPsd,
    UIViewID.Support
  ];

  protected onCreate(): void | Promise<void> {
    addBtnClick(this.btnGuest.node, this.onBtnGuestClick, this);
    addBtnClick(this.btnFacebook.node, this.onBtnFBClick, this);
    addBtnClick(this.btnGoogle.node, this.onBtnGoogleClick, this);
    this._googleWebBtn = AppKernel.google.createLoginBtn(
      this.btnGoogle.node,
      res => this.onGoogleWebLogin(res),
    );

    addBtnClick(this.btnRegister, this.onBtnRegisterClick, this);
    addBtnClick(this.btnLogin, this.onBtnLoginClick, this);
    addBtnClick(this.btnResetPsd, this.onBtnResetPsdClick, this);
    addBtnClick(this.btnSupport, this.onBtnSupportClick, this);

    AppKernel.events.on('open:ui-view', this.handleSubViewOpen, this);
    AppKernel.events.on('close:ui-view', this.handleSubViewClose, this);




    this.initPsdInput();
    this.initPolicyDesc();
  }

  private initPolicyDesc(): void {
    if (!this.policy_container) return;

    this._labelTemplate = this.policy_container.getChildByName("template") ?? null;
    this._labelLayout = this.policy_container.getChildByName("layout") ?? null;
    if (!this._labelTemplate || !this._labelLayout) return;

    this._labelLayout.removeAllChildren();

    const check_bg = this.policy_container.getChildByName("check_bg") ?? null;
    addBtnClick(check_bg, this.onTogglePolicyAgree, this);

    this.createText("I am 18+, in an eligible state, and agree to the ", true);
    this.createLink("Terms", () => this.onClickTerm());
    this.createText(" & ", true);
    this.createLink("Privacy Policy", () => this.onClickPrivacy());
  }

  private initPsdInput(): void {
    addBtnClick(this.psd_visible_control, this.onTogglePsdVisible, this);
    const eye_open = this.psd_visible_control.getChildByName("open");
    const eye_close = this.psd_visible_control.getChildByName("close");
    eye_close.active = true;
    eye_open.active = false;
  }

  // 创建普通文本
  private createText(str: string, bold: boolean) {
    const node = instantiate(this._labelTemplate!);
    node.active = true;
    const label = node.getComponent(Label)!;
    label.string = str;
    label.isBold = bold;
    label.color = Color.WHITE;
    label.isUnderline = false; // 关闭下划线

    node.setParent(this._labelLayout);
    return node;
  }
  // 创建链接文字
  private createLink(str: string, clickCb: () => void) {
    const node = instantiate(this._labelTemplate!);
    node.active = true;
    const label = node.getComponent(Label)!;
    label.string = str;
    label.isBold = true;
    label.color = new Color(0xff, 0xd2, 0x00);
    label.isUnderline = true;

    addBtnClick(node, clickCb, this);
    node.setParent(this._labelLayout);
    return node;
  }

  private onClickTerm() {
    console.log("打开用户协议");
  }

  private onClickPrivacy() {
    console.log("打开隐私政策");
  }


  protected onOpen(_params: unknown): void | Promise<void> {
    /// 播放完打开动画后 再显示h5 google login btn dom
    this._googleWebBtn?.setActive(true);
  }

  protected onClose(_reason: UICloseReason): void | Promise<void> {
    this._googleWebBtn?.setActive(false);
  }

  protected onDestroy(): void {
    this._googleWebBtn?.clear();
    super.onDestroy();
  }

  private async onBtnGuestClick() {
    AppKernel.ui.loading(true);
    await AppKernel.services.loginService.guestLogin();
    AppKernel.ui.loading(false);
  }

  private async onBtnFBClick() {
    AppKernel.ui.loading(true);
    await AppKernel.services.loginService.fbLogin();
    AppKernel.ui.loading(false);
  }

  private async onGoogleWebLogin(res) {
    AppKernel.ui.loading(true);
    await AppKernel.services.loginService.googleLogin(res);
    AppKernel.ui.loading(false);
  }

  private async onBtnGoogleClick() {
    AppKernel.ui.loading(true);
    await AppKernel.services.loginService.googleLogin();
    AppKernel.ui.loading(false);
  }

  private onBtnRegisterClick() {
    // this._googleWebBtn?.setActive(false);
    AppKernel.ui.open(UIViewID.Register);
  }

  private async onBtnLoginClick() {
    const account = this.loginAccount.string;
    const password = this.loginPassword.string;

    const res = await AppKernel.services.loginService.loginAccount(account, password);
    if (res) await AppKernel.appLobby.onLoginSuccess();
  }

  private onBtnResetPsdClick() {
    // this._googleWebBtn?.setActive(false);
    AppKernel.ui.open(UIViewID.ResetPsd);
  }

  private async onBtnSupportClick() {
    // this._googleWebBtn?.setActive(false);
    AppKernel.ui.open(UIViewID.Support);
  }

  private onTogglePsdVisible() {
    const eye_open = this.psd_visible_control.getChildByName("open");
    const eye_close = this.psd_visible_control.getChildByName("close");
    eye_close.active = !eye_close.active;
    eye_open.active = !eye_open.active;

    if (eye_open.active) {
      this.loginPassword.inputFlag = EditBox.InputFlag.DEFAULT;
    } else {
      this.loginPassword.inputFlag = EditBox.InputFlag.PASSWORD;
    }
  }

  private onTogglePolicyAgree() {
    const check_bg = this.policy_container.getChildByName("check_bg") ?? null;
    const check = check_bg.getChildByName("check") ?? null;
    check.active = !check.active;
    this._policyAgree = check.active;
  }


  getGoogleLoginBtnDom() {
    if (!sys.isBrowser) {
      return null;
    }
    const btnDom = document.getElementById('google-login-button') as HTMLElement | null;
    return btnDom;
  }

  private handleSubViewOpen(payload: UIViewID) {
    if (this.listenViews.includes(payload)) {
      this._googleWebBtn?.setActive(false);
      console.log("LoginView handleSubUIOpen", payload);
    }
  }

  private handleSubViewClose(payload: UIViewID) {
    if (this.listenViews.includes(payload)) {
      this._googleWebBtn?.setActive(true);
      console.log("LoginView handleSubUIClose", payload);
    }
  }

}