FondleTalk/lib/tools/login/login_page.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:talk/tools/login/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();

  //协议
  bool isCheck = false;

  ///输入框内容
  String phoneText = "";
  String codeText = "";

  void _phoneChanged(String str) {
    phoneText = str;
    setState(() {});
  }

  void _codeChanged(String str) {
    codeText = str;
    setState(() {});
  }

  int _timeLeft = 5; // 倒计时时间，单位为秒
  bool _isCountingDown = false;

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

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

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

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    subscription = _viewmodel.streamController.stream.listen((newData) {
      String code = newData['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "sendPhoneNumber":
            EasyLoading.showToast(newData['data']);
            _startCountdown();
            break;
          case "login":
            EasyLoading.showToast(newData['data']);
            Navigator.pushReplacementNamed(context, "/HomePage");
            break;

          default:
            EasyLoading.showToast(newData['data']);
            break;
        }
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Image(
            fit: BoxFit.cover,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            image: AssetImage('assets/images/login_bj.png'),
          ),
          Positioned(
              left: 22,
              top: MediaQuery.of(context).padding.top + 9,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Image(
                  height: 23,
                  image: AssetImage('assets/images/ic_left_arrow.png'),
                ),
              )),
          Positioned(
              left: 36,
              top: 76,
              child: Text(
                '妙语',
                style: TextStyle(color: Colors.white, fontSize: 33),
              )),
          Positioned(
              left: 36,
              top: 115,
              child: Text(
                '登陆 / 注册',
                style: TextStyle(color: Color(0xFFD5D5D5), fontSize: 18),
              )),
          Positioned(
              bottom: 35,
              child: Container(
                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 ? AssetImage('assets/images/ic_ck_s.png') : AssetImage('assets/images/ic_ck.png')),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      child: RichText(
                        text: TextSpan(children: <TextSpan>[
                          TextSpan(text: '我已阅读并同意', style: TextStyle(fontSize: 12, color: Color(0xFF5F5F5F))),
                          TextSpan(text: '用户协议', style: TextStyle(fontSize: 12, color: Color(0xFFFF9000))),
                          TextSpan(text: '和', style: TextStyle(fontSize: 12, color: Color(0xFF5F5F5F))),
                          TextSpan(text: '隐私协议', style: TextStyle(fontSize: 12, color: Color(0xFFFF9000))),
                        ]),
                      ),
                    )
                  ],
                ),
              )),
          Positioned(
              bottom: 70,
              child: GestureDetector(
                onTap: () {
                  if (phoneText != "" && codeText != "") {
                    if (isCheck) {
                      EasyLoading.showToast("登录");
                      _viewmodel.login(phoneText, codeText, 1, "");
                    } else {
                      EasyLoading.showToast("请选中协议");
                    }
                  }
                },
                child: Container(
                  height: 43,
                  width: 288,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Color(phoneText != "" && codeText != "" ? 0xFFFF9000 : 0xFFAC6D1C),
                    borderRadius: BorderRadius.all(Radius.circular(7)),
                  ),
                  child: Text(
                    '登录',
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
                  ),
                ),
              )),
          Positioned(
              bottom: 125,
              child: Container(
                height: 43,
                width: 288,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Color(0x33FFFFFF),
                  borderRadius: BorderRadius.all(Radius.circular(7)),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.only(left: 17, bottom: 6),
                        child: TextField(
                          controller: _codeController,
                          onChanged: _codeChanged,
                          cursorColor: Color(0xFFFF9000),
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            enabledBorder: InputBorder.none,
                            focusedBorder: InputBorder.none,
                            hintText: "请输入验证码",
                            hintStyle: TextStyle(color: Color(0xFFB5B5B5), fontSize: 15),
                          ),
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        if (!_isCountingDown) {
                          getCode();
                        }
                      },
                      child: Container(
                        margin: EdgeInsets.only(right: 14),
                        child: Text(
                          !_isCountingDown ? "获取验证码" : "$_timeLeft后重新获取",
                          style: TextStyle(fontSize: 15, color: Color(0xFFB5B5B5)),
                        ),
                      ),
                    ),
                  ],
                ),
              )),
          Positioned(
              bottom: 178,
              child: Container(
                height: 43,
                width: 288,
                alignment: Alignment.center,
                padding: EdgeInsets.only(left: 17, bottom: 6),
                decoration: BoxDecoration(
                  color: Color(0x33FFFFFF),
                  borderRadius: BorderRadius.all(Radius.circular(7)),
                ),
                child: TextField(
                  controller: _phoneController,
                  onChanged: _phoneChanged,
                  cursorColor: Color(0xFFFF9000),
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    hintText: "请输入手机号",
                    hintStyle: TextStyle(color: Color(0xFFB5B5B5), fontSize: 15),
                  ),
                  style: TextStyle(color: Colors.white),
                ),
              )),
        ],
      ),
    );
  }
}