feat:登录模块代码提交

liangchengyou
1 parent 4847e3dc
Showing 19 changed files with 446 additions and 86 deletions
assets/images/Input_layer_down.png
assets/images/Input_layer_up.png
assets/images/lock.png
assets/images/login_enter.png
assets/images/login_enter_dis.png
assets/images/login_logo.png
assets/images/phone.png
assets/images/securitycode.png
assets/images/securitycode_dis.png
assets/images/splash.png
assets/images/wow_logo.png
lib/app/splash_page.dart
lib/common/extension/string_extension.dart
lib/login/blocs/login_bloc.dart
lib/login/blocs/login_event.dart
lib/login/blocs/login_state.dart
lib/login/login_page.dart
lib/route/route.dart
pubspec.yaml
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/network/basic_configuration.dart';
 import 'package:wow_english/route/route.dart';
-import 'package:wow_english/widgets/we_app_bar.dart';
+
 class SplashPage extends StatelessWidget {
   const SplashPage({super.key});
@@ -22,23 +25,36 @@ class TransitionView extends StatefulWidget {
 }
 class _TransitionViewState extends State<TransitionView> {
+
+  Future startTime() async {
+    Timer(const Duration(seconds: 1),() {
+      if(BasicConfigurationManager().sessionId!.isNotEmpty) {
+        Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.tab, (route) => false);
+      } else {
+        Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.login,(route) => false);
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    startTime();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: WEAppBar(
-          titleText: '首页',
-          backgroundColor: Theme.of(context).colorScheme.inversePrimary
-      ),
       body: Center(
-        child: GestureDetector(
-          onTap: (){
-            if(BasicConfigurationManager().sessionId!.isNotEmpty) {
-              Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.tab, (route) => false);
-            } else {
-              Navigator.of(context).pushNamed(AppRouteName.login,arguments: {'title':'登陆'});
-            }
-          },
-          child: const Text('登陆'),
+        child: Container(
+          decoration: BoxDecoration(
+              image: DecorationImage(
+                  image: AssetImage(
+                    'splash'.assetPng,
+                  ),
+                  fit: BoxFit.fill
+              )
+          ),
         ),
       ),
     );
+const String _assetImagePrefix = "assets/images/";
+
+/// 资源类扩展方法
+extension AssetExtension on String {
+  /// 图片url
+  String get assetImg => _assetImagePrefix + this;
+  String get assetPng => 'assets/images/$this.png';
+}
 \ No newline at end of file
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_easyloading/flutter_easyloading.dart';
-import 'package:wow_english/network/api.dart';
-import 'package:wow_english/network/network_manager.dart';
 part 'login_event.dart';
 part 'login_state.dart';
+enum LoginType {
+  ///密码登陆
+  pwd,
+  ///验证码登陆
+  sms,
+}
+
 class LoginBloc extends Bloc<LoginEvent, LoginState> {
-  bool _isLogin = false;
+  bool _canLogin = false;
+  ///是否可以发送验证码
+  bool _canSendSms = false;
+  ///是否阅读协议
+  bool _agreement = false;
+  ///登陆方式
+  LoginType _loginType = LoginType.sms;
+
+  final TextEditingController phoneNumController = TextEditingController();
+  final TextEditingController checkNumController = TextEditingController();
-  bool get isLogin => _isLogin;
+  bool get canLogin => _canLogin;
+  bool get agreement => _agreement;
+  LoginType get loginType => _loginType;
+  bool get canSendSms => _canSendSms;
   LoginBloc() : super(LoginInitial()) {
     on<RequestLoginEvent>(_requestLoginApi);
+    on<ChangeLoginTypeEvent>(_changeLoginType);
+    on<PhoneNumChangeEvent>(_changePhoneNumber);
+    on<AgreementChangeEvent>(_agreementTypeChange);
+    on<ForgetPasswordEvent>(_forgetPassword);
+    on<CheckFieldChangeEvent>(_checkFiledChange);
   }
+  ///请求登陆
   void _requestLoginApi(RequestLoginEvent event, Emitter<LoginState> emitter) async {
-    EasyLoading.show(status: 'loading');
-    await DioUtil().requestData(
-        Api.testApi,
-        successCallBack: (dynamic data){
-         EasyLoading.dismiss();
-         if (kDebugMode) {
-           print(data);
-         }
-         _isLogin = true;
-         emitter(LoginEventChangeState());
-        },
-        errorCallBack: (dynamic error){
-          EasyLoading.dismiss();
-          if (kDebugMode) {
-            print(error);
-          }
-          _isLogin = false;
-          emitter(LoginEventChangeState());
-        });
+
+  }
+
+  ///切换登陆方式
+  void _changeLoginType(ChangeLoginTypeEvent event, Emitter<LoginState> emitter) async {
+    if (_loginType == LoginType.sms) {
+      _loginType = LoginType.pwd;
+    } else {
+      _loginType = LoginType.sms;
+    }
+    checkNumController.clear();
+    if (_loginStateChange()) {
+      emitter(LoginEventChangeState());
+    }
+    emitter(LoginTypeChangeState());
+  }
+
+  ///手机号输入
+  void _changePhoneNumber(PhoneNumChangeEvent event, Emitter<LoginState> emitter) async {
+    if(phoneNumController.text.isNotEmpty) {
+      if (!_canSendSms) {
+        _canSendSms = true;
+        emitter(SmsSendTypeChangeState());
+      }
+      if (_loginStateChange()) {
+        emitter(LoginEventChangeState());
+      }
+    } else {
+      if (_canSendSms) {
+        _canSendSms = false;
+        emitter(SmsSendTypeChangeState());
+      }
+      if (_loginStateChange()) {
+        emitter(LoginEventChangeState());
+      }
+    }
+  }
+
+  ///验证码/密码输入变化
+  void _checkFiledChange(CheckFieldChangeEvent event,Emitter<LoginState> emitter) async {
+    if (_loginStateChange()) {
+      emitter(LoginEventChangeState());
+    }
+  }
+
+  ///是否阅读协议
+  void _agreementTypeChange(AgreementChangeEvent event, Emitter<LoginState> emitter) async {
+    _agreement = !_agreement;
+    emitter(AgreementTypeChangeState());
+    if (_loginStateChange()) {
+      emitter(LoginEventChangeState());
+    }
+  }
+
+  ///忘记密码
+  void _forgetPassword(ForgetPasswordEvent event, Emitter<LoginState> emitter) async {
+
+  }
+
+  bool _loginStateChange() {
+    if (_agreement) {
+      if (phoneNumController.text.isNotEmpty && checkNumController.text.isNotEmpty) {
+        if (!_canLogin) {
+          _canLogin = true;
+          return true;
+        }
+      } else {
+        if (_canLogin) {
+          _canLogin = false;
+          return true;
+        }
+      }
+    } else {
+      if (_canLogin) {
+        _canLogin = false;
+        return true;
+      }
+    }
+    return false;
   }
 }
@@ -4,3 +4,13 @@ part of &#39;login_bloc.dart&#39;;
 abstract class LoginEvent {}
 class RequestLoginEvent extends LoginEvent {}
+
+class ChangeLoginTypeEvent extends LoginEvent {}
+
+class PhoneNumChangeEvent extends LoginEvent {}
+
+class CheckFieldChangeEvent extends LoginEvent {}
+
+class AgreementChangeEvent extends LoginEvent {}
+
+class ForgetPasswordEvent extends LoginEvent {}
@@ -6,3 +6,9 @@ abstract class LoginState {}
 class LoginInitial extends LoginState {}
 class LoginEventChangeState extends LoginState {}
+
+class LoginTypeChangeState extends LoginState {}
+
+class SmsSendTypeChangeState extends LoginState {}
+
+class AgreementTypeChangeState extends LoginState {}
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/login/blocs/login_bloc.dart';
-import 'package:wow_english/modes/test_model.dart';
-import 'package:wow_english/route/route.dart';
-import 'package:wow_english/widgets/we_app_bar.dart';
 class LoginPage extends StatelessWidget {
-  const LoginPage({super.key, this.title});
-
-  final String? title;
+  const LoginPage({super.key});
   @override
   Widget build(BuildContext context) {
@@ -23,46 +19,87 @@ class LoginPage extends StatelessWidget {
     builder: (context, state) {
       final bloc = BlocProvider.of<LoginBloc>(context);
       return Scaffold(
-        appBar: WEAppBar(
-          titleText: title??'',
-        ),
-        body: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.spaceAround,
+        body: SafeArea(
+          child: ListView(
             children: [
-              GestureDetector(
-                onTap: () {
-                  Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.tab, (route) => false);
-                },
-                child: const Text(
-                    '进入首页'
-                ),
-              ),
-              Text(
-                  bloc.isLogin?'登陆成功':'还未登陆'
-              ),
-              GestureDetector(
-                onTap: () {
-                 TestModel testModel = TestModel(name: 'lcy',age: 31,sex: '男');
-                 Map<String,dynamic> jsonMap =  testModel.toJson();
-                 if (kDebugMode) {
-                   print(jsonMap);
-                 }
-                 TestModel testModel2 = TestModel.fromJson(jsonMap);
-                 if (kDebugMode) {
-                   print(testModel2.name);
-                 }
-                },
-                child: const Text(
-                    '数据转换'
-                ),
-              ),
-              GestureDetector(
-                onTap: (){
-                  bloc.add(RequestLoginEvent());
-                },
-                child: const Text(
-                    '发起网络请求'
+              Container(
+                padding: EdgeInsets.only(top: 25.h),
+                child: Stack(
+                  children: [
+                    Positioned(
+                        right: 29.w,
+                        child: GestureDetector(
+                          onTap: () => bloc.add(ChangeLoginTypeEvent()),
+                          child: Container(
+                            decoration: BoxDecoration(
+                              image: DecorationImage(
+                                  image: AssetImage(
+                                      'login_logo'.assetPng
+                                  ),
+                                  fit: BoxFit.fill
+                              ),
+                            ),
+                            padding: const EdgeInsets.symmetric(horizontal: 18.0),
+                            child:  Text(
+                                bloc.loginType == LoginType.sms?'密码登陆':'验证码密码'
+                            ),
+                          ),
+                        )
+                    ),
+                    Center(
+                      child: Column(
+                        children: [
+                          Image.asset(
+                            'wow_logo'.assetPng,
+                            height: 81.h,
+                            width: 139.w,),
+                          Offstage(
+                            offstage: bloc.loginType == LoginType.pwd,
+                            child: _buildSmsViewWidget(),
+                          ),
+                          Offstage(
+                            offstage: bloc.loginType == LoginType.sms,
+                            child: _buildPwdViewWidget(),
+                          ),
+                          20.verticalSpace,
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              GestureDetector(
+                                onTap: () => bloc.add(AgreementChangeEvent()),
+                                child: Icon(
+                                    bloc.agreement ? Icons.check_circle_outlined:Icons.circle_outlined,
+                                    color:bloc.agreement ? Colors.green:Colors.black),
+                              ),
+                              6.horizontalSpace,
+                              const Text('我已阅读并同意《用户隐私协议》，《儿童隐私策略》')
+                            ],
+                          ),
+                          14.5.verticalSpace,
+                          GestureDetector(
+                            onTap: () => bloc.add(ChangeLoginTypeEvent()),
+                            child: Container(
+                              decoration: BoxDecoration(
+                                image: DecorationImage(
+                                    image: AssetImage(
+                                        bloc.canLogin?'login_enter'.assetPng:'login_enter_dis'.assetPng
+                                    ),
+                                    fit: BoxFit.fill
+                                ),
+                              ),
+                              padding: const EdgeInsets.symmetric(
+                                  horizontal: 36.0,
+                                  vertical: 20.0
+                              ),
+                              child:  const Text(
+                                  '登录'
+                              ),
+                            ),
+                          )
+                        ],
+                      ),
+                    )
+                  ],
                 ),
               )
             ],
@@ -71,4 +108,202 @@ class LoginPage extends StatelessWidget {
       );
     },
   );
+
+  Widget _buildSmsViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
+      builder: (context,state){
+        final bloc = BlocProvider.of<LoginBloc>(context);
+        return Column(
+          children: [
+            15.verticalSpace,
+            Container(
+                padding: EdgeInsets.symmetric(horizontal: 135.w),
+                width: double.infinity,
+                height: 55,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                    image: DecorationImage(
+                        image: AssetImage(
+                            'Input_layer_up'.assetPng
+                        )
+                    )
+                ),
+                child: TextField(
+                  controller: bloc.phoneNumController,
+                  textAlign: TextAlign.center,
+                  textInputAction: TextInputAction.done,
+                  keyboardType: TextInputType.phone,
+                  decoration: const InputDecoration(
+                    hintText: '请输入手机号',
+                    border: InputBorder.none,
+                  ),
+                  onChanged: (String value) {
+                    bloc.add(PhoneNumChangeEvent());
+                  },
+                )
+            ),
+            6.5.verticalSpace,
+            const Text('未注册用户登录默认注册'),
+            4.5.verticalSpace,
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 205.w),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Container(
+                      width: 257,
+                      height: 50,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          image: DecorationImage(
+                              image: AssetImage(
+                                  'Input_layer_down'.assetPng
+                              )
+                          )
+                      ),
+                      child: TextField(
+                        controller: bloc.checkNumController,
+                        textAlign: TextAlign.center,
+                        textInputAction: TextInputAction.done,
+                        keyboardType: TextInputType.number,
+                        decoration: const InputDecoration(
+                          hintText: '请输入验证码',
+                          border: InputBorder.none,
+                        ),
+                        onChanged: (String value) {
+                          bloc.add(CheckFieldChangeEvent());
+                        },
+                      )
+                  ),
+                  GestureDetector(
+                    onTap: () {
+                      if (bloc.canSendSms) {
+                        bloc.add(ChangeLoginTypeEvent());
+                      }
+                    },
+                    child: Container(
+                      decoration: BoxDecoration(
+                        image: DecorationImage(
+                            image: AssetImage(
+                                bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
+                            ),
+                            fit: BoxFit.fill
+                        ),
+                      ),
+                      padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
+                      child:  const Text(
+                          '获取验证码'
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            )
+          ],
+        );
+      });
+
+  Widget _buildPwdViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
+      builder: (context,state){
+        final bloc = BlocProvider.of<LoginBloc>(context);
+        return Container(
+          padding: EdgeInsets.symmetric(horizontal: 135.w),
+          child: Column(
+            children: [
+              15.verticalSpace,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Image.asset(
+                    'phone'.assetPng,
+                    height: 45,
+                    width: 35,
+                  ),
+                  10.5.horizontalSpace,
+                  Container(
+                      width: 397.5,
+                      height: 55,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          image: DecorationImage(
+                              image: AssetImage(
+                                  'Input_layer_up'.assetPng
+                              ),
+                            fit: BoxFit.fill,
+                          )
+                      ),
+                      child: TextField(
+                        controller: bloc.phoneNumController,
+                        textAlign: TextAlign.center,
+                        textInputAction: TextInputAction.done,
+                        decoration: const InputDecoration(
+                          hintText: '请输入手机号',
+                          border: InputBorder.none,
+                        ),
+                        keyboardType: TextInputType.phone,
+                        onChanged: (String value) {
+                          bloc.add(PhoneNumChangeEvent());
+                        },
+                      )
+                  ),
+                  5.horizontalSpace,
+                  const SizedBox(
+                    width: 100,
+                    height: 55.0,
+                  )
+                ],
+              ),
+              12.verticalSpace,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Image.asset(
+                    'lock'.assetPng,
+                    height: 34,
+                    width: 31,
+                  ),
+                  10.5.horizontalSpace,
+                  Container(
+                      width: 397.5,
+                      height: 55,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          image: DecorationImage(
+                              image: AssetImage(
+                                  'Input_layer_down'.assetPng
+                              ),
+                            fit: BoxFit.fill,
+                          )
+                      ),
+                      child: TextField(
+                        controller: bloc.checkNumController,
+                        textAlign: TextAlign.center,
+                        textInputAction: TextInputAction.done,
+                        decoration: const InputDecoration(
+                          hintText: '请输入密码',
+                          border: InputBorder.none,
+                        ),
+                        onChanged: (String value) {
+                          bloc.add(CheckFieldChangeEvent());
+                        },
+                      )
+                  ),
+                  5.horizontalSpace,
+                  GestureDetector(
+                    onTap: () => bloc.add(ForgetPasswordEvent()),
+                    child: Container(
+                      width: 100,
+                      height: 55.0,
+                      alignment: Alignment.centerLeft,
+                      child: const Text(
+                          '忘记密码 ?'
+                      ),
+                    ),
+                  )
+                ],
+              )
+            ],
+          ),
+        );
+      });
+
 }
@@ -25,8 +25,7 @@ class AppRouter {
             transitionDuration: Duration.zero,
             transitionsBuilder: (_, __, ___, child) => child);
       case AppRouteName.login:
-        final title = (settings.arguments as Map)['title'] as String;
-        return CupertinoPageRoute(builder: (_) =>  LoginPage(title: title));
+        return CupertinoPageRoute(builder: (_) =>  const LoginPage());
       case AppRouteName.tab:
         return PageRouteBuilder(
             opaque: false,
@@ -108,6 +108,9 @@ flutter:
   # the material Icons class.
   uses-material-design: true
+  assets:
+    - assets/images/
+
   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg