dating_touchme_app/lib/pages/mine/phone_login_page.dart

import 'package:dating_touchme_app/controller/mine/login_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';

class PhoneLoginPage extends StatelessWidget {
  const PhoneLoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetX<LoginController>(
      init: LoginController(),
      builder: (controller){
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: !(controller.isSend.value) ? Container(
              width: 375.w,
              padding: EdgeInsets.only(
                  top: 310.w,
                  left: 25.w,
                  right: 25.w
              ),
              child: Column(
                children: [
                  Container(
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(9.w)),
                        border: Border.all(width: 1.w, color: const Color.fromRGBO(230, 230, 230, 1))
                    ),
                    child: Center(
                      child: TextField(
                        decoration: const InputDecoration(
                          hintText: '请输入你的手机号',
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(
                            horizontal: 15,
                            vertical: 0,
                          ),
                          counterText: '',
                        ),
                        keyboardType: TextInputType.phone,
                        inputFormatters: [
                          // 只允许 0-9
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        maxLength: 11,
                        onChanged: (value) {
                          controller.phoneNumber.value = value;
                        },
                        style: const TextStyle(fontSize: 16),
                      ),
                    ),
                  ),
                  SizedBox(height: 10.w,),
                  Text(
                    "未注册的手机号将在登录后自动注册",
                    style: TextStyle(
                        fontSize: 11.w,
                        color: const Color.fromRGBO(189, 189, 189, 1)
                    ),
                  ),
                  SizedBox(height: 30.w,),
                  Container(
                    width: 325.w,
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(52.w)),
                        gradient: controller.phoneNumber.value.isNotEmpty ? LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(131, 89, 255, 1),
                            Color.fromRGBO(61, 138, 224, 1),
                          ],
                        ) : null,
                        color: const Color.fromRGBO(217, 217, 217, 1)
                    ),
                    child: Center(
                      child: Text(
                        "获取验证码",
                        style: TextStyle(
                            fontSize: 18.w,
                            color: Colors.white
                        ),
                      ),
                    ),
                  ).onTap(() {
                    controller.isSendingCode.value ||
                        controller.countdownSeconds.value > 0
                        ? null
                        : controller.getVerificationCode();
                  }),
                ],
              ),
            ) : Container(
              width: 375.w,
              padding: EdgeInsets.only(
                  top: 271.w,
                  left: 25.w,
                  right: 25.w
              ),
              child: Column(
                children: [
                  Text(
                    "已发送到${controller.phoneNumber.value}",
                    style: TextStyle(
                        fontSize: 14.w
                    ),
                  ),
                  SizedBox(height: 20.w,),

                  Pinput(
                    length: 6,
                    controller: controller.passwordController.value,
                    inputFormatters: [
                      // 只允许 0-9
                      FilteringTextInputFormatter.digitsOnly,
                    ],
                    onCompleted: (pin) {
                      controller.verificationCode.value = pin;
                      controller.isLoggingIn.value
                          ? null
                          : controller.login();
                    },
                  ),
                  SizedBox(height: 40.w,),
                  Container(
                    width: 325.w,
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(52.w)),
                        gradient: controller.countdownSeconds.value <= 0 ? LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(131, 89, 255, 1),
                            Color.fromRGBO(61, 138, 224, 1),
                          ],
                        ) : null,
                        color: const Color.fromRGBO(217, 217, 217, 1)
                    ),
                    child: Center(
                      child: Text(
                        controller.countdownSeconds.value > 0 ? "获取验证码 ${controller.countdownSeconds.value}s" : "获取验证码",
                        style: TextStyle(
                            fontSize: 18.w,
                            color: Colors.white
                        ),
                      ),
                    ),
                  ).onTap(() {
                    controller.isSendingCode.value ||
                        controller.countdownSeconds.value > 0
                        ? null
                        : controller.getVerificationCode();
                  }),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}