SteamCloudGame/lib/tools/login/login_page.dart

import 'dart:async';

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../me/set/agreement_page.dart';
import 'login_model.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _codeController = TextEditingController();

  late StreamSubscription subscription;
  final LoginModel _viewModel = LoginModel();

  int _timeLeft = 60; // 倒计时时间，单位为秒
  bool _isCountingDown = false;
  Timer? _timer;

  //协议
  bool isCheck = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = _viewModel.streamController.stream.listen((event) {
      String code = event['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "sendPhoneNumber":
            EasyLoading.showToast("${event['data']}");
            break;

          case "login":
            // EasyLoading.showToast(event['data']);
            if (_timer != null) {
              _timer!.cancel();
            }
            Navigator.pushReplacementNamed(context, "/HomePage");
            break;
        }
      }
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _phoneController.dispose();
    _codeController.dispose();
    subscription.cancel();
    _timer?.cancel();
    super.dispose();
  }

  ///获取验证码
  void getCode() {
    if (_phoneController.text == "") {
      EasyLoading.showToast("请输入手机号");
      return;
    }
    _startCountdown();
    _viewModel.sendPhoneNumber(_phoneController.text);
  }

  ///登录
  void login() {
    if (_phoneController.text == "") {
      EasyLoading.showToast("请输入手机号");
      return;
    }
    if (_codeController.text == "") {
      EasyLoading.showToast("请输入验证码");
      return;
    }
    if (!isCheck) {
      EasyLoading.showToast("请勾选协议");
      return;
    }
    _viewModel.login(_phoneController.text, _codeController.text);
  }

  void _startCountdown() {
    setState(() {
      _isCountingDown = true;
    });

    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_timeLeft > 0) {
        setState(() {
          _timeLeft--;
        });
      } else {
        timer.cancel();
        setState(() {
          _isCountingDown = false;
          _timeLeft = 60;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xFF17181A),
      body: SizedBox(
        width: size.width,
        height: size.height,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              top: 0,
              right: 0,
              child: Image(width: 253, image: AssetImage('assets/images/ic_login1.png')),
            ),
            Positioned(
              top: 174,
              left: 21,
              child: Image(width: 50, height: 50, image: AssetImage('assets/images/ic_login2.png')),
            ),
            Positioned(
              top: 187,
              left: 30,
              child: Text(
                "登录/注册",
                style: TextStyle(fontSize: 14, color: Color(0x8AFFFFFF)),
              ),
            ),

            ///手机号
            Positioned(
              top: 294,
              child: Container(
                width: 331,
                height: 52,
                padding: EdgeInsets.only(left: 20),
                decoration: BoxDecoration(
                  color: Color(0xFF30343B),
                  borderRadius: BorderRadius.all(
                    Radius.circular(90),
                  ),
                  border: Border.all(color: Color(0x1AFFFFFF)),
                ),
                child: TextField(
                  controller: _phoneController,
                  style: TextStyle(fontSize: 14, color: Colors.white),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: '请输入您的手机号码',
                    hintStyle: TextStyle(fontSize: 13, color: Color(0x80FFFFFF)),
                  ),
                ),
              ),
            ),

            ///验证码
            Positioned(
              top: 359,
              child: Container(
                width: 331,
                height: 52,
                padding: EdgeInsets.only(left: 20, right: 20),
                decoration: BoxDecoration(
                  color: Color(0xFF30343B),
                  borderRadius: BorderRadius.all(Radius.circular(90)),
                  border: Border.all(color: Color(0x1AFFFFFF)),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _codeController,
                        cursorColor: Color(0xFF074CE7),
                        style: TextStyle(fontSize: 14, color: Colors.white),
                        decoration: InputDecoration(
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        if (!_isCountingDown) {
                          getCode();
                        }
                      },
                      child: Text(
                        !_isCountingDown ? "获取验证码" : "$_timeLeft后重新获取",
                        style: TextStyle(fontSize: 13, color: Color(0xFF969798)),
                      ),
                    ),
                  ],
                ),
              ),
            ),

            Positioned(
              top: 471,
              child: GestureDetector(
                onTap: () {
                  login();
                },
                child: Container(
                  width: 331,
                  height: 52,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Color(0xFF074CE7),
                    borderRadius: BorderRadius.all(Radius.circular(90)),
                  ),
                  child: Text(
                    "登录",
                    style: TextStyle(fontSize: 14, color: Colors.white),
                  ),
                ),
              ),
            ),

            Positioned(
                bottom: 35,
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {
                          isCheck = !isCheck;
                          setState(() {});
                        },
                        child: Image(
                            width: 16, image: isCheck ? const AssetImage('assets/images/ic_ck_s.png') : const AssetImage('assets/images/ic_ck.png')),
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 10),
                        child: RichText(
                          text: TextSpan(children: <TextSpan>[
                            const TextSpan(text: '我已阅读并同意', style: TextStyle(fontSize: 12, color: Color(0xFF5F5F5F))),
                            TextSpan(
                                text: '《用户协议》',
                                style: const TextStyle(fontSize: 12, color: Color(0xFF074CE7)),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => AgreementPage(
                                                title: "用户协议",
                                                url: "https://shhuanmeng.com/yonghuxieyi.html",
                                              )),
                                    );
                                  }),
                            const TextSpan(text: '和', style: TextStyle(fontSize: 12, color: Color(0xFF5F5F5F))),
                            TextSpan(
                                text: '《隐私政策》',
                                style: const TextStyle(fontSize: 12, color: Color(0xFF074CE7)),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => AgreementPage(
                                                title: "隐私政策",
                                                url: "https://shhuanmeng.com/yinsixieyi.html",
                                              )),
                                    );
                                  }),
                          ]),
                        ),
                      )
                    ],
                  ),
                )),
          ],
        ),
      ),
    );
  }
}