|
|
import 'dart:async';
|
|
|
|
|
|
import 'package:bot_toast/bot_toast.dart';
|
|
|
import 'package:flutter/cupertino.dart';
|
|
|
import 'package:flutter/foundation.dart';
|
|
|
import 'package:flutter/gestures.dart';
|
|
|
import 'package:flutter/material.dart';
|
|
|
import 'package:flutter/services.dart';
|
|
|
import 'package:project_telephony/ui/widget/plone_back_button.dart';
|
|
|
import 'package:project_telephony/utils/headers.dart';
|
|
|
|
|
|
import '../../base/base_style.dart';
|
|
|
import '../tab_navigator.dart';
|
|
|
import '../widget/image_scaffold.dart';
|
|
|
import '../widget/plone_bottom.dart';
|
|
|
|
|
|
class LoginPage extends StatefulWidget {
|
|
|
const LoginPage({Key? key}) : super(key: key);
|
|
|
|
|
|
@override
|
|
|
_LoginPageState createState() => _LoginPageState();
|
|
|
}
|
|
|
|
|
|
class _LoginPageState extends State<LoginPage> {
|
|
|
// String _operator="";
|
|
|
// String _phone="";
|
|
|
bool _chooseAgreement = false;
|
|
|
bool _getCodeEnable = true;
|
|
|
late Timer _timer;
|
|
|
|
|
|
///时钟
|
|
|
String _countDownStr = "发送验证码";
|
|
|
|
|
|
///初始化文本
|
|
|
int _countDownNum = 59;
|
|
|
|
|
|
///时间倒计数值
|
|
|
// late final TextEditingController _phoneController =
|
|
|
// TextEditingController(text: "");
|
|
|
// late final TextEditingController _smsCodeController =
|
|
|
// TextEditingController(text: "");
|
|
|
|
|
|
// late FocusNode _smsCodeFocusNode=FocusNode (canRequestFocus: );
|
|
|
bool _cantSelected = false;
|
|
|
@override
|
|
|
void initState() {
|
|
|
super.initState();
|
|
|
// _operator = '中国移动认证';
|
|
|
// _phone = '12345678909';
|
|
|
}
|
|
|
|
|
|
String ploneText = ""; //手机号
|
|
|
String codeText = ""; //验证码
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
return CloudScaffold(
|
|
|
systemStyle: const SystemUiOverlayStyle(
|
|
|
statusBarIconBrightness: Brightness.dark,
|
|
|
),
|
|
|
path: Assets.images.bg.path,
|
|
|
appbar: Row(
|
|
|
children: [
|
|
|
Padding(
|
|
|
padding: EdgeInsets.only(top: 88.w, left: 8.w),
|
|
|
child: const CloudBackButton(isSpecial: true),
|
|
|
),
|
|
|
Padding(
|
|
|
padding: EdgeInsets.only(left: 186.w, top: 88.w),
|
|
|
child: Text(
|
|
|
"登录/注册",
|
|
|
style: TextStyle(
|
|
|
fontSize: BaseStyle.fontSize34,
|
|
|
color: BaseStyle.color333333,
|
|
|
fontWeight: FontWeight.bold),
|
|
|
))
|
|
|
],
|
|
|
),
|
|
|
extendBody: true,
|
|
|
body: Container(
|
|
|
padding: EdgeInsets.only(left: 64.w, right: 64.w, top: 124.w),
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
Text(
|
|
|
"短信帮手",
|
|
|
style: TextStyle(
|
|
|
fontSize: 64.sp,
|
|
|
fontWeight: FontWeight.bold,
|
|
|
color: Colors.black),
|
|
|
),
|
|
|
32.hb,
|
|
|
Text(
|
|
|
"希望能成为您的短信小助手",
|
|
|
style: TextStyle(fontSize: 32.sp, color: const Color(0xFF999999)),
|
|
|
),
|
|
|
80.hb,
|
|
|
_getBox('+86', 36, _phoneTFWidget()),
|
|
|
_getBox('验证码', 32, _codeWidget()),
|
|
|
112.hb,
|
|
|
PloneBottom(
|
|
|
blM: false,
|
|
|
border: ploneText.length != 11,
|
|
|
opacity: ploneText.length == 11 ? 1 : 0.4,
|
|
|
onTap: () {
|
|
|
if (ploneText.length < 11) {
|
|
|
BotToast.showText(text: "请输入手机号");
|
|
|
} else {
|
|
|
if (codeText.length < 6) {
|
|
|
BotToast.showText(text: "请输入验证码");
|
|
|
} else {
|
|
|
if (_chooseAgreement) {
|
|
|
Get.to(() => const TabNavigator());
|
|
|
} else {
|
|
|
BotToast.showText(text: "请同意并勾选隐私政策");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
text: "立即登录",
|
|
|
),
|
|
|
32.hb,
|
|
|
_getText()
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
_getBox(String text, int fontSize, Widget plone) {
|
|
|
return Container(
|
|
|
height: 144.w,
|
|
|
width: double.infinity,
|
|
|
padding: EdgeInsets.symmetric(vertical: 48.w),
|
|
|
decoration: BoxDecoration(
|
|
|
// color: Colors.black12,
|
|
|
border: Border(
|
|
|
bottom: BorderSide(color: const Color(0xFFE8E8E8), width: 1.w),
|
|
|
),
|
|
|
),
|
|
|
child: Row(children: [
|
|
|
SizedBox(
|
|
|
width: 112.w,
|
|
|
child: Text(
|
|
|
text,
|
|
|
style: TextStyle(
|
|
|
fontSize: fontSize.sp,
|
|
|
color: BaseStyle.color333333,
|
|
|
fontWeight: FontWeight.bold),
|
|
|
),
|
|
|
),
|
|
|
Container(
|
|
|
width: 2.w,
|
|
|
height: 48.w,
|
|
|
margin: EdgeInsets.symmetric(horizontal: 32.w),
|
|
|
color: const Color(0xFFE8E8E8),
|
|
|
),
|
|
|
plone,
|
|
|
]),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 输入手机号
|
|
|
_phoneTFWidget() {
|
|
|
return SizedBox(
|
|
|
// alignment: Alignment.centerLeft,
|
|
|
// padding: EdgeInsets.symmetric(horizontal: 72.w),
|
|
|
width: 430.w,
|
|
|
height: 50.w,
|
|
|
child: TextField(
|
|
|
maxLength: 11,
|
|
|
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))],
|
|
|
textCapitalization: TextCapitalization.none,
|
|
|
onChanged: (text) {
|
|
|
ploneText = text;
|
|
|
setState(() {});
|
|
|
},
|
|
|
decoration: InputDecoration(
|
|
|
contentPadding: EdgeInsets.only(bottom: 20.w),
|
|
|
border: InputBorder.none,
|
|
|
counterText: "",
|
|
|
//textfield占位语，类似于iOS中的placeholder
|
|
|
hintText: "请输入手机号",
|
|
|
//占位语颜色
|
|
|
hintStyle: const TextStyle(color: Colors.black12),
|
|
|
suffixIcon: GestureDetector(
|
|
|
onTap: !_getCodeEnable
|
|
|
? () {}
|
|
|
: () async {
|
|
|
// await apiClient.request(API.login.phoneCode, data: {
|
|
|
// 'phone': UserTool.userProvider.userInfo.phone,
|
|
|
// });
|
|
|
_beginCountDown();
|
|
|
if (_cantSelected) return;
|
|
|
_cantSelected = true;
|
|
|
Future.delayed(const Duration(seconds: 1), () {
|
|
|
_cantSelected = false;
|
|
|
});
|
|
|
},
|
|
|
child: Container(
|
|
|
width: 180.w,
|
|
|
alignment: Alignment.centerRight,
|
|
|
color: Colors.transparent,
|
|
|
child: Text(
|
|
|
_countDownStr,
|
|
|
style: TextStyle(
|
|
|
color: _getCodeEnable
|
|
|
? kPrimaryColor
|
|
|
: BaseStyle.colorcccccc),
|
|
|
),
|
|
|
),
|
|
|
)),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 输入验证码
|
|
|
_codeWidget() {
|
|
|
return SizedBox(
|
|
|
// alignment: Alignment.centerLeft,
|
|
|
// padding: EdgeInsets.symmetric(horizontal: 72.w),
|
|
|
width: 430.w,
|
|
|
height: 50.w,
|
|
|
child: TextField(
|
|
|
maxLength: 6,
|
|
|
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))],
|
|
|
textCapitalization: TextCapitalization.none,
|
|
|
onChanged: (text) {
|
|
|
codeText = text;
|
|
|
setState(() {});
|
|
|
},
|
|
|
decoration: InputDecoration(
|
|
|
contentPadding: EdgeInsets.only(bottom: 20.w),
|
|
|
border: InputBorder.none,
|
|
|
counterText: "",
|
|
|
//textfield占位语，类似于iOS中的placeholder
|
|
|
hintText: "请输入验证码",
|
|
|
//占位语颜色
|
|
|
hintStyle: TextStyle(color: Colors.black12),
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
_beginCountDown() {
|
|
|
///开始倒计时
|
|
|
setState(() {
|
|
|
_getCodeEnable = false;
|
|
|
_countDownStr = "${_countDownNum}s";
|
|
|
});
|
|
|
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
|
|
|
if (!mounted) {
|
|
|
return;
|
|
|
}
|
|
|
setState(() {
|
|
|
if (_countDownNum == 0) {
|
|
|
_countDownNum = 59;
|
|
|
_countDownStr = "获取验证码";
|
|
|
_getCodeEnable = true;
|
|
|
_timer.cancel();
|
|
|
return;
|
|
|
}
|
|
|
_countDownStr = "${_countDownNum--}s";
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 协议
|
|
|
_recognizer(context, int type) {
|
|
|
final TapGestureRecognizer recognizer = TapGestureRecognizer();
|
|
|
recognizer.onTap = () {
|
|
|
if (kDebugMode) {
|
|
|
print("点击协议了");
|
|
|
}
|
|
|
|
|
|
///跳转到用户协议页面
|
|
|
};
|
|
|
return recognizer;
|
|
|
}
|
|
|
|
|
|
_getText() {
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
_chooseAgreement = !_chooseAgreement;
|
|
|
setState(() {});
|
|
|
},
|
|
|
child: Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
children: [
|
|
|
Container(
|
|
|
width: 50.w,
|
|
|
height: 50.w,
|
|
|
padding: EdgeInsets.only(top: 6.w, right: 5.w),
|
|
|
child: !_chooseAgreement
|
|
|
? const Icon(CupertinoIcons.circle,
|
|
|
size: 18, color: Color(0xFFdddddd))
|
|
|
: const Icon(CupertinoIcons.checkmark_circle,
|
|
|
size: 18, color: Colors.blue),
|
|
|
),
|
|
|
RichText(
|
|
|
text: TextSpan(
|
|
|
text: "我已阅读并同意",
|
|
|
style: TextStyle(
|
|
|
color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
|
|
|
children: [
|
|
|
TextSpan(
|
|
|
text: '《用户服务协议》',
|
|
|
style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
|
|
|
recognizer: _recognizer(context, 2)),
|
|
|
TextSpan(
|
|
|
text: "和",
|
|
|
style: TextStyle(
|
|
|
color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
|
|
|
),
|
|
|
TextSpan(
|
|
|
text: '《隐私协议》',
|
|
|
style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
|
|
|
recognizer: _recognizer(context, 1)),
|
|
|
])),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|
