AiKeyboard2025/lib/module/login/login_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/login/login_controller.dart';
import 'package:get/get.dart';
import 'package:keyboard/router/app_pages.dart';
import 'package:keyboard/utils/common_expand.dart';
import 'package:keyboard/widget/platform_util.dart';

import '../../data/consts/web_url.dart';
import '../../resource/assets.gen.dart';
import '../../resource/colors.gen.dart';
import '../../resource/string.gen.dart';
import '../../utils/styles.dart';
import '../../widget/click_text_span.dart';

class LoginPage extends BasePage<LoginController> {
  const LoginPage({super.key});

  static start() {
    Get.toNamed(RoutePath.login);
  }

  @override
  Color backgroundColor() {
    return const Color(0xFFF6F5FA);
  }

  @override
  immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (didPop, result) async {
        if (didPop) {
          return;
        }
        controller.clickBack();
      },
      child: Stack(
        children: [
          Assets.images.bgLogin.image(fit: BoxFit.contain, width: 360.w),
          _buildTitle(),
          SafeArea(
            child: Column(
              children: [
                SizedBox(height: 225.w),
                buildPhoneTextFiled(),
                SizedBox(height: 16.w),
                buildCodeTextFiled(),
                SizedBox(height: 46.w),
                buildLoginButton(),
                SizedBox(height: 25.w),
                _buildPrivacy(),
                Spacer(),
                buildOtherLogin(),
                SizedBox(height: 20.w),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _buildTitle() {
    return SafeArea(
      child: Container(
        alignment: Alignment.topLeft,
        padding: EdgeInsets.only(top: 16.h, left: 16.w, right: 16.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: controller.clickBack,
              child: Assets.images.iconStoreBack.image(
                width: 32.w,
                height: 32.w,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildPhoneTextFiled() {
    return Container(
      height: 48.w,
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(100.w),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              cursorHeight: 20.w,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.black.withAlpha(204),
                fontWeight: FontWeight.w500,
              ),
              maxLines: 1,
              maxLength: 11,
              keyboardType: TextInputType.phone,
              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              textAlignVertical: TextAlignVertical.center,
              textInputAction: TextInputAction.next,
              decoration: InputDecoration(
                hintText: StringName.loginEtPhoneHint,
                counterText: '',
                hintStyle: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black.withAlpha(61),
                  fontWeight: FontWeight.normal,
                ),
                labelStyle: TextStyle(
                  fontSize: 14.sp,
                  color: ColorName.primaryTextColor,
                ),
                contentPadding: const EdgeInsets.all(0),
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              onChanged: controller.onPhoneChanged,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildCodeTextFiled() {
    return Container(
      height: 48.w,
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(100.w),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              cursorHeight: 20.w,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.black.withAlpha(204),
                fontWeight: FontWeight.w500,
              ),
              maxLines: 1,
              maxLength: 4,
              keyboardType: TextInputType.phone,
              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              textAlignVertical: TextAlignVertical.center,
              textInputAction: TextInputAction.next,
              decoration: InputDecoration(
                hintText: StringName.loginPrintVerificationCode,
                counterText: '',
                hintStyle: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black.withAlpha(61),
                  fontWeight: FontWeight.normal,
                ),
                labelStyle: TextStyle(
                  fontSize: 14.sp,
                  color: ColorName.primaryTextColor,
                ),
                contentPadding: const EdgeInsets.all(0),
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              onChanged: controller.onCodeChanged,
            ),
          ),
          buildVerificationCodeSendBtn(),
        ],
      ),
    );
  }

  Widget buildVerificationCodeSendBtn() {
    return GestureDetector(
      onTap: controller.onSendVerificationCode,
      child: Container(
        margin: EdgeInsets.only(left: 12.w, right: 8.w),
        child: Obx(() {
          String txt = "";

          if (controller.countDown != null) {
            txt =
                '${controller.countDown}${StringName.loginRetransmissionCode}';
          } else {
            if (controller.isFirstSend) {
              txt = StringName.loginSendVerificationCode;
            } else {
              txt = StringName.loginResendCode;
            }
          }
          return Text(
            txt,
            style: TextStyle(
              fontSize: 14.sp,
              color:
                  controller.isFirstSend
                      ? Colors.black.withAlpha(204)
                      : Color(0xCC7D46FC),
            ),
          );
        }),
      ),
    );
  }

  Widget buildLoginButton() {
    return GestureDetector(
      onTap: () {
        controller.onLoginClick();
      },
      child: Container(
        height: 48.w,
        margin: EdgeInsets.symmetric(horizontal: 24.w),
        child: Row(
          children: [
            Expanded(
              child: Obx(() {
                return Container(
                  height: 48.w,
                  decoration:
                      controller.phone.length == 11 &&
                              controller.code.isNotEmpty &&
                              controller.isAgree
                          ? Styles.getActivateButtonDecoration(50.r)
                          : Styles.getInactiveButtonDecoration(50.r),
                  child: Center(
                    child: Text(
                      StringName.login,
                      style: TextStyle(color: Colors.white, fontSize: 16.sp),
                    ),
                  ),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPrivacy() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Obx(() {
          return GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              controller.clickAgree();
            },
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 20.w, horizontal: 20.w),
              child:
                  controller.isAgree
                      ? Assets.images.iconLoginAgreePrivacy.image(
                        width: 14.w,
                        height: 14.w,
                      )
                      : Container(
                        width: 14.w,
                        height: 14.w,
                        child: Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.black.withAlpha(153),
                              width: 1.w,
                            ),
                          ),
                        ),
                      ),
            ),
          );
        }),
        Transform.translate(
          offset: Offset(-17.w, 0),
          child: Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: StringName.textSpanIHaveReadAndAgree,
                  style: TextStyle(
                    color: Colors.black.withAlpha(128),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                ClickTextSpan(
                  text: StringName.textSpanPrivacyPolicy,
                  url: WebUrl.privacyPolicy,
                  fontSize: 12.sp,
                  color: Colors.black.withAlpha(204),
                ),

                TextSpan(
                  text: StringName.textSpanAnd,
                  style: TextStyle(
                    color: Colors.black.withAlpha(128),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),

                ClickTextSpan(
                  text: StringName.textSpanServiceTerms,
                  url: WebUrl.serviceAgreement,
                  color: Colors.black.withAlpha(204),
                  fontSize: 12.sp,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildOtherLogin() {
    return Container(
      child: Column(
        children: [
          Text(
            StringName.loginOtherlogin,
            style: TextStyle(
              color: Colors.black.withValues(alpha: 0.5),
              fontSize: 12.sp,
              height: 0,
            ),
          ),
          SizedBox(height: 18.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                children: [
                  Material(
                    color: Colors.white,
                    shape: const CircleBorder(),
                    child: InkWell(
                      customBorder: const CircleBorder(), // 保证点击区域是圆的
                      onTap: () {
                        controller.clickAppleLogin();
                      },
                      child: SizedBox(
                        width: 44.w,
                        height: 44.w,
                        child: Center(
                          child: Assets.images.iconLoginDialogApple.image(
                            width: 22.w,
                            height: 22.w,
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 6.w),
                  Text(
                    StringName.loginApple,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.black.withValues(alpha: 0.5),
                      fontSize: 12.sp,
                      height: 0,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  Material(
                    color: Colors.white,
                    shape: const CircleBorder(),
                    child: InkWell(
                      customBorder: const CircleBorder(), // 保证点击区域是圆的
                      onTap: () {
                        controller.clickWxLogin();
                      },
                      child: SizedBox(
                        width: 44.w,
                        height: 44.w,
                        child: Center(
                          child: Assets.images.iconWechatLogoBlack.image(
                            width: 22.w,
                            height: 22.w,
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 6.w),
                  Text(
                    StringName.wechat,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.black.withValues(alpha: 0.5),
                      fontSize: 12.sp,
                      height: 0,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}