333 lines
12 KiB
Dart
333 lines
12 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_easyloading/flutter_easyloading.dart';
|
|
import 'package:talk/tools/login/login_model.dart';
|
|
|
|
import '../me/agreement_page.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 = 60; // 倒计时时间，单位为秒
|
|
bool _isCountingDown = false;
|
|
|
|
Timer? _timer;
|
|
|
|
///获取验证码
|
|
void getCode() {
|
|
if (phoneText == "") {
|
|
EasyLoading.showToast("请输入手机号");
|
|
return;
|
|
}
|
|
_viewmodel.sendPhoneNumber(phoneText);
|
|
}
|
|
|
|
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
|
|
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']);
|
|
if (_timer != null) {
|
|
_timer!.cancel();
|
|
}
|
|
Navigator.pushReplacementNamed(context, "/HomePage");
|
|
break;
|
|
|
|
case "getUserInfo":
|
|
EasyLoading.dismiss();
|
|
// _timer.cancel();
|
|
// Navigator.pushReplacementNamed(context, "/HomePage");
|
|
break;
|
|
|
|
default:
|
|
EasyLoading.showToast(newData['data']);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
// TODO: implement dispose
|
|
_phoneController.dispose();
|
|
_codeController.dispose();
|
|
subscription.cancel();
|
|
_timer!.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final size = MediaQuery.of(context).size;
|
|
final l22 = size.width / 16.36363636363636;
|
|
final h23 = size.width / 15.65217391304348;
|
|
final l36 = size.width / 10;
|
|
final t76 = size.width / 4.736842105263158;
|
|
final t115 = size.width / 3.130434782608696;
|
|
final b35 = size.width / 10.28571428571429;
|
|
final b70 = size.width / 5.142857142857143;
|
|
final h43 = size.width / 8.372093023255814;
|
|
final w288 = size.width / 1.25;
|
|
final b125 = size.width / 2.88;
|
|
final b178 = size.width / 2.02247191011236;
|
|
|
|
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: const AssetImage('assets/images/login_bj.png'),
|
|
),
|
|
Positioned(
|
|
left: l22,
|
|
top: MediaQuery.of(context).padding.top + 9,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
},
|
|
child: Image(
|
|
height: h23,
|
|
image: const AssetImage('assets/images/ic_left_arrow.png'),
|
|
),
|
|
)),
|
|
Positioned(
|
|
left: l36,
|
|
top: t76,
|
|
child: const Text(
|
|
'妙语星河',
|
|
style: TextStyle(color: Colors.white, fontSize: 33),
|
|
)),
|
|
Positioned(
|
|
left: l36,
|
|
top: t115,
|
|
child: const Text(
|
|
'登陆 / 注册',
|
|
style: TextStyle(color: Color(0xFFD5D5D5), fontSize: 18),
|
|
)),
|
|
Positioned(
|
|
bottom: b35,
|
|
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(0xFFFF9000)),
|
|
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(0xFFFF9000)),
|
|
recognizer: TapGestureRecognizer()
|
|
..onTap = () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => AgreementPage(
|
|
title: "隐私政策",
|
|
url: "https://shhuanmeng.com/yinsixieyi.html",
|
|
)),
|
|
);
|
|
}),
|
|
]),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
Positioned(
|
|
bottom: b70,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
if (phoneText != "" && codeText != "") {
|
|
if (isCheck) {
|
|
EasyLoading.show(status: 'loading...');
|
|
_viewmodel.login(phoneText, codeText, 1, "");
|
|
} else {
|
|
EasyLoading.showToast("请选中协议");
|
|
}
|
|
}
|
|
},
|
|
child: Container(
|
|
height: h43,
|
|
width: w288,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
color: Color(phoneText != "" && codeText != "" ? 0xFFFF9000 : 0xFFAC6D1C),
|
|
borderRadius: const BorderRadius.all(Radius.circular(7)),
|
|
),
|
|
child: const Text(
|
|
'登录',
|
|
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
|
|
),
|
|
),
|
|
)),
|
|
Positioned(
|
|
bottom: b125,
|
|
child: Container(
|
|
height: h43,
|
|
width: w288,
|
|
alignment: Alignment.center,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0x33FFFFFF),
|
|
borderRadius: BorderRadius.all(Radius.circular(7)),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
padding: const EdgeInsets.only(left: 17),
|
|
child: TextField(
|
|
controller: _codeController,
|
|
onChanged: _codeChanged,
|
|
cursorColor: const Color(0xFFFF9000),
|
|
keyboardType: TextInputType.number,
|
|
decoration: const InputDecoration(
|
|
border: InputBorder.none,
|
|
enabledBorder: InputBorder.none,
|
|
focusedBorder: InputBorder.none,
|
|
hintText: "请输入验证码",
|
|
hintStyle: TextStyle(color: Color(0xFFB5B5B5), fontSize: 15),
|
|
),
|
|
style: const TextStyle(color: Colors.white),
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
if (!_isCountingDown) {
|
|
getCode();
|
|
}
|
|
},
|
|
child: Container(
|
|
margin: const EdgeInsets.only(right: 14),
|
|
child: Text(
|
|
!_isCountingDown ? "获取验证码" : "$_timeLeft后重新获取",
|
|
style: const TextStyle(fontSize: 15, color: Color(0xFFB5B5B5)),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)),
|
|
Positioned(
|
|
bottom: b178,
|
|
child: Container(
|
|
height: h43,
|
|
width: w288,
|
|
alignment: Alignment.center,
|
|
padding: const EdgeInsets.only(left: 17),
|
|
decoration: const BoxDecoration(
|
|
color: Color(0x33FFFFFF),
|
|
borderRadius: BorderRadius.all(Radius.circular(7)),
|
|
),
|
|
child: TextField(
|
|
controller: _phoneController,
|
|
onChanged: _phoneChanged,
|
|
cursorColor: const Color(0xFFFF9000),
|
|
keyboardType: TextInputType.number,
|
|
decoration: const InputDecoration(
|
|
border: InputBorder.none,
|
|
enabledBorder: InputBorder.none,
|
|
focusedBorder: InputBorder.none,
|
|
hintText: "请输入手机号",
|
|
hintStyle: TextStyle(color: Color(0xFFB5B5B5), fontSize: 15),
|
|
),
|
|
style: const TextStyle(color: Colors.white),
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|