398 lines
18 KiB
Dart
398 lines
18 KiB
Dart
import 'package:al_downloader/al_downloader.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:wgshare/utils/utils.dart';
|
|
|
|
import '../../routes/app_routes.dart';
|
|
import '../../utils/color_util.dart';
|
|
import 'login_logic.dart';
|
|
|
|
class LoginPage extends StatefulWidget {
|
|
const LoginPage({super.key});
|
|
|
|
@override
|
|
State<LoginPage> createState() => _LoginPageState();
|
|
}
|
|
|
|
class _LoginPageState extends State<LoginPage> {
|
|
final logic = Get.find<LoginLogic>();
|
|
final state = Get.find<LoginLogic>().state;
|
|
|
|
@override
|
|
void initState() {
|
|
Utils.hideKeyboard();
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
SystemChrome.setSystemUIOverlayStyle(
|
|
const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
|
|
return Scaffold(
|
|
extendBodyBehindAppBar: true,
|
|
backgroundColor: Colors.white,
|
|
body: Column(
|
|
children: [
|
|
Container(
|
|
height: 340,
|
|
decoration: const BoxDecoration(
|
|
image: DecorationImage(
|
|
image: AssetImage('assets/images/login_bg.png'),
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
margin: const EdgeInsets.only(top: 20),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/logo.png',
|
|
width: 80.w,
|
|
height: 80.h,
|
|
),
|
|
SizedBox(height: 20.h),
|
|
Image.asset(
|
|
'assets/images/logo_title.png',
|
|
width: 70.w,
|
|
height: 24.h,
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
Container(
|
|
height: 40,
|
|
decoration: const BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(99),
|
|
topRight: Radius.circular(99)),
|
|
color: Colors.white,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Obx(() => Container(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
GestureDetector(
|
|
child: Container(
|
|
width: 140.w,
|
|
height: 40.h,
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: AssetImage(state.pageState.value ==
|
|
0
|
|
? 'assets/images/login_tab_left_select_y.png'
|
|
: 'assets/images/login_tab_left_select_n.png'),
|
|
fit: BoxFit.fill,
|
|
),
|
|
),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
'账号',
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: state.pageState.value == 0
|
|
? Colors.white
|
|
: ColorUtil.Color_120_137_203),
|
|
),
|
|
),
|
|
onTap: () {
|
|
logic.changePageState(0);
|
|
},
|
|
),
|
|
GestureDetector(
|
|
child: Container(
|
|
width: 140.w,
|
|
height: 40.h,
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: AssetImage(state.pageState.value ==
|
|
0
|
|
? 'assets/images/login_tab_right_select_n.png'
|
|
: 'assets/images/login_tab_right_select_y.png'),
|
|
fit: BoxFit.fill,
|
|
),
|
|
),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
'会议号',
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: state.pageState.value == 0
|
|
? ColorUtil.Color_120_137_203
|
|
: Colors.white),
|
|
),
|
|
),
|
|
onTap: () {
|
|
logic.changePageState(1);
|
|
},
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
/**
|
|
* 账号密码输入框
|
|
*/
|
|
Visibility(
|
|
visible: state.pageState.value == 0 ? true : false,
|
|
child: Container(
|
|
width: 280.w,
|
|
height: 40.h,
|
|
margin: const EdgeInsets.only(top: 30),
|
|
padding: const EdgeInsets.only(left: 12, right: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
const BorderRadius.all(Radius.circular(99)),
|
|
border: Border.all(
|
|
width: 1.w,
|
|
color: ColorUtil.Color_153_153_153),
|
|
),
|
|
child: TextField(
|
|
controller: state.userNameController,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
),
|
|
inputFormatters: <TextInputFormatter>[
|
|
LengthLimitingTextInputFormatter(18)
|
|
],
|
|
decoration: InputDecoration(
|
|
contentPadding: const EdgeInsets.all(0),
|
|
border: const OutlineInputBorder(
|
|
borderSide: BorderSide.none),
|
|
hintText: '请输入账号',
|
|
hintStyle: TextStyle(
|
|
color: ColorUtil.Color_153_153_153,
|
|
fontSize: 14.sp)),
|
|
),
|
|
),
|
|
),
|
|
|
|
Visibility(
|
|
visible: state.pageState.value == 0 ? true : false,
|
|
child: Container(
|
|
width: 280.w,
|
|
height: 40.h,
|
|
margin: const EdgeInsets.only(top: 12),
|
|
padding: const EdgeInsets.only(left: 12, right: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
const BorderRadius.all(Radius.circular(99)),
|
|
border: Border.all(
|
|
width: 1.w,
|
|
color: ColorUtil.Color_153_153_153),
|
|
),
|
|
child: TextField(
|
|
obscureText: true,
|
|
controller: state.passwordController,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
),
|
|
inputFormatters: <TextInputFormatter>[
|
|
FilteringTextInputFormatter.allow(RegExp("^[a-z0-9A-Z]+")),//只允许输入数字，字母
|
|
LengthLimitingTextInputFormatter(20)
|
|
//限制长度
|
|
],
|
|
decoration: InputDecoration(
|
|
contentPadding: const EdgeInsets.all(0),
|
|
border: const OutlineInputBorder(
|
|
borderSide: BorderSide.none),
|
|
hintText: '请输入密码',
|
|
hintStyle: TextStyle(
|
|
color: ColorUtil.Color_153_153_153,
|
|
fontSize: 14.sp)),
|
|
),
|
|
),
|
|
),
|
|
|
|
/// 会议号输入框
|
|
Visibility(
|
|
visible: state.pageState.value == 0 ? false : true,
|
|
child: Container(
|
|
width: 280.w,
|
|
height: 40.h,
|
|
margin: const EdgeInsets.only(top: 30),
|
|
padding: const EdgeInsets.only(left: 12, right: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
const BorderRadius.all(Radius.circular(99)),
|
|
border: Border.all(
|
|
width: 1.w,
|
|
color: ColorUtil.Color_153_153_153),
|
|
),
|
|
child: TextField(
|
|
controller: state.meetingCodeController,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
),
|
|
inputFormatters: <TextInputFormatter>[
|
|
FilteringTextInputFormatter.digitsOnly,
|
|
LengthLimitingTextInputFormatter(8)
|
|
//限制长度
|
|
],
|
|
decoration: InputDecoration(
|
|
contentPadding: const EdgeInsets.all(0),
|
|
border: const OutlineInputBorder(
|
|
borderSide: BorderSide.none),
|
|
hintText: '请输入会议号',
|
|
hintStyle: TextStyle(
|
|
color: ColorUtil.Color_153_153_153,
|
|
fontSize: 14.sp)),
|
|
),
|
|
),
|
|
),
|
|
|
|
/// 昵称输入框
|
|
Visibility(
|
|
visible: state.pageState.value == 0 ? false : true,
|
|
child: Container(
|
|
width: 280.w,
|
|
height: 40.h,
|
|
margin: const EdgeInsets.only(top: 12),
|
|
padding: const EdgeInsets.only(left: 12, right: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
const BorderRadius.all(Radius.circular(99)),
|
|
border: Border.all(
|
|
width: 1.w,
|
|
color: ColorUtil.Color_153_153_153),
|
|
),
|
|
child: TextField(
|
|
controller: state.nickNameCodeController,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
),
|
|
inputFormatters: <TextInputFormatter>[
|
|
LengthLimitingTextInputFormatter(10)
|
|
//限制长度
|
|
],
|
|
decoration: InputDecoration(
|
|
contentPadding: const EdgeInsets.all(0),
|
|
border: const OutlineInputBorder(
|
|
borderSide: BorderSide.none),
|
|
hintText: '请输入昵称',
|
|
hintStyle: TextStyle(
|
|
color: ColorUtil.Color_153_153_153,
|
|
fontSize: 14.sp)),
|
|
),
|
|
),
|
|
),
|
|
|
|
/// 相关协议
|
|
Container(
|
|
width: 280.w,
|
|
margin: const EdgeInsets.only(top: 16),
|
|
child: Row(
|
|
children: [
|
|
GestureDetector(
|
|
child: Image.asset(
|
|
state.checkAgreementBool.value == false
|
|
? 'assets/images/login_agreement_select_n.png'
|
|
: 'assets/images/login_agreement_select_y.png',
|
|
width: 16.w,
|
|
height: 16.h,
|
|
),
|
|
onTap: () {
|
|
if (state.checkAgreementBool.value == false) {
|
|
logic.changeAgreementState(true);
|
|
} else {
|
|
logic.changeAgreementState(false);
|
|
}
|
|
},
|
|
),
|
|
SizedBox(width: 6.w),
|
|
Text(
|
|
'我阅读并同意',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: ColorUtil.Color_153_153_153,
|
|
),
|
|
),
|
|
GestureDetector(
|
|
child: Text(
|
|
'《服务协议》',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: ColorUtil.Color_85_117_242,
|
|
),
|
|
),
|
|
onTap: (){
|
|
Get.toNamed(Routes.agreementReadPage);
|
|
},
|
|
),
|
|
Text(
|
|
'和',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: ColorUtil.Color_153_153_153,
|
|
),
|
|
),
|
|
GestureDetector(
|
|
child: Text(
|
|
'《隐私政策》',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: ColorUtil.Color_85_117_242,
|
|
),
|
|
),
|
|
onTap: (){
|
|
Get.toNamed(Routes.agreementReadPage);
|
|
},
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
/// 按钮
|
|
GestureDetector(
|
|
child: Container(
|
|
width: 280.w,
|
|
height: 44.h,
|
|
margin: const EdgeInsets.only(top: 50),
|
|
decoration: const BoxDecoration(
|
|
borderRadius:
|
|
BorderRadius.all(Radius.circular(99)),
|
|
color: ColorUtil.Color_85_117_242,
|
|
),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
state.pageState.value == 0 ? '登录' : '加入会议',
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
onTap: () {
|
|
ALDownloader.cancelAll();
|
|
if (state.pageState.value == 0) {
|
|
logic.doHttpLogin();
|
|
} else {
|
|
logic.doHttpCheckMeetingRoom();
|
|
}
|
|
},
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|