project_telephony/lib/ui/login/login_page.dart

370 lines
13 KiB

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/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';
}
@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 Icon(
CupertinoIcons.chevron_back,
color: Colors.black,
),
),
Padding(
padding: EdgeInsets.only(left: 239.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: 138.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,
_phoneTFWidget(),
_codeWidget(),
112.hb,
PloneBottom(
onTap: () {
Get.to(() => const TabNavigator());
},
text: "立即登录",
),
32.hb,
_getText()
],
),
),
);
}
// 输入手机号
_phoneTFWidget() {
return Container(
alignment: Alignment.centerLeft,
// padding: EdgeInsets.symmetric(horizontal: 72.w),
height: 40 * 2.h,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: TextField(
onChanged: (String phone) {
// setState(() {
// if (phone.length >= 11) {
// _getCodeEnable = true;
// } else {
// _getCodeEnable = false;
// }
// if (kDebugMode) {
// //print(_loginEnable);
// }
// }); 判断手机号长度
},
// enabled: false,
controller: _phoneController,
// focusNode: _phoneFocusNode,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 36.sp, color: const Color(0xFF999999)),
inputFormatters: [
LengthLimitingTextInputFormatter(11),
],
cursorColor: Colors.black,
decoration: InputDecoration(
// contentPadding: EdgeInsets.only(
// left: rSize(10), top: rSize(13)),
// prefixIcon: Container(
// // padding: EdgeInsets.only(right: 10.w),
// width: 50.w,
// alignment: Alignment.centerLeft,
// child: Text(
// "+86",
// style: TextStyle(
// fontSize: 32.sp,
// color: const Color(0xFF000000)),
// ),
// ),
prefixText: "+86",
prefixStyle: TextStyle(
color: Colors.black,
),
enabledBorder: const UnderlineInputBorder(
// 不是焦点的时候颜色
borderSide: BorderSide(
color: Color(0xffdddddd),
),
),
// focusedBorder: const UnderlineInputBorder( // 焦点集中的时候颜色
// borderSide: BorderSide(
// color: Color(0x19000000)
// ),
// ),
//border: InputBorder.none,
hintText:
"请输入手机号", // hintText: _phone.replaceFirst(RegExp(r'\d{4}'), '****', 3),
hintStyle: TextStyle(
color: const Color(0xFFCCCCCC), fontSize: 32.sp),
suffixIcon: GestureDetector(
onTap: () {},
// 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: const Text("获取验证码"
// _countDownStr,
// style: TextStyle(
// color: _getCodeEnable
// ? kPrimaryColor
// : BaseStyle.colorcccccc),
),
),
)),
),
),
],
),
),
//_bottomLineWidget(),
],
),
);
}
// 输入验证码
_codeWidget() {
return Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.symmetric(horizontal: 20.w),
// padding: EdgeInsets.symmetric(horizontal: 72.w),
height: 40 * 2.h,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: TextField(
onChanged: (String phone) {
setState(() {});
},
controller: _smsCodeController,
// focusNode: _smsCodeFocusNode,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 36.sp, color: BaseStyle.color999999),
inputFormatters: [
LengthLimitingTextInputFormatter(4),
],
cursorColor: Colors.black,
decoration: InputDecoration(
// prefixIcon: Container(
// width: 10.w,
// alignment: Alignment.centerLeft,
// child: Text(
// "验证码",
// style: TextStyle(
// fontSize: 32.sp,
// color: const Color(0xFF000000)),
// ),
// ),
prefixText: "验证码",
prefixStyle: const TextStyle(
color: Colors.black,
),
enabledBorder: const UnderlineInputBorder(
// 不是焦点的时候颜色
borderSide: BorderSide(
color: BaseStyle.color999999,
),
),
hintText: "请输入验证码",
hintStyle: TextStyle(
color: BaseStyle.colorcccccc, fontSize: 36.sp),
)),
),
],
),
),
//_bottomLineWidget(),
],
),
);
}
// // 倒计时
// _beginCountDown() {
// ///开始倒计时
// setState(() {
// _getCodeEnable = false;
// _countDownStr = "重新获取($_countDownNum)";
// });
// _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--})";
// });
// });
// }
// 协议
_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: const Icon(CupertinoIcons.circle,
size: 18, color: Color(0xFFdddddd))),
// !_chooseAgreement
// ? const Icon(CupertinoIcons.circle,
// size: 18, color: Color(0xFFdddddd))
// : const Icon(CupertinoIcons.checkmark_circle,
// size: 18, color: Colors.red)),
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)),
])),
],
),
);
}
}