Browse Source

注册页面完善,添加登录的选项

liukai 8 months ago
parent
commit
44c665586b

+ 167 - 103
packages/cpt_auth/lib/modules/login/login_page.dart

@@ -1,6 +1,7 @@
 import 'package:cs_resources/constants/color_constants.dart';
 import 'package:cs_resources/generated/assets.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:get/get.dart';
 import 'package:plugin_basic/base/base_stateful_page.dart';
 import 'package:plugin_basic/base/base_state.dart';
@@ -8,6 +9,8 @@ import 'package:plugin_basic/base/mixin_state_lifecycle.dart';
 import 'package:plugin_basic/utils/ext_get_nav.dart';
 import 'package:router/path/router_path.dart';
 import 'package:shared/utils/log_utils.dart';
+import 'package:shared/utils/screen_util.dart';
+import 'package:widgets/custom_radio_check.dart';
 import 'package:widgets/ext/ex_widget.dart';
 import 'package:widgets/my_button.dart';
 import 'package:widgets/my_load_image.dart';
@@ -80,113 +83,152 @@ class _MainPageState extends BaseState<LoginPage, LoginController> with StateLif
                 end: Alignment.bottomCenter,
               ),
             ),
-            child: SingleChildScrollView(
-              scrollDirection: Axis.vertical,
-              physics: const BouncingScrollPhysics(),
-              child: Column(
-                mainAxisSize: MainAxisSize.max,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  //顶部Logo
-                  MyAssetImage(
-                    Assets.assetsYyBusinessTopLogo,
-                    width: 164.5,
-                    height: 101,
-                  ).marginOnly(top: 75),
-
-                  //中间的输入框布局
-                  Container(
-                    width: double.infinity,
-                    margin: EdgeInsets.symmetric(vertical: 45, horizontal: 15),
-                    padding: EdgeInsets.symmetric(vertical: 33, horizontal: 20),
-                    decoration: BoxDecoration(
-                      color: Color(0xFF4DCFF6).withOpacity(0.2), // 设置背景颜色和不透明度
-                      borderRadius: BorderRadius.circular(5.0), // 设置圆角
-                    ),
-                    child: Center(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          //登录文本
-                          MyTextView(
-                            "Login Code".tr,
-                            isFontMedium: true,
-                            fontSize: 17,
-                            textColor: ColorConstants.white,
-                          ),
+            child: Column(
+              mainAxisSize: MainAxisSize.max,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                //当前选择的国家,这个不跟随滚动
+                Align(
+                  alignment: Alignment.topRight,
+                  child: MyTextView(
+                    "Vietnam".tr,
+                    textColor: ColorConstants.white,
+                    isFontMedium: true,
+                    fontSize: 15,
+                    marginTop: ScreenUtil.getStatusBarH(context) + 20,
+                    marginRight: 20,
+                  ),
+                ),
 
-                          // 登录表单 - 账号
-                          _buildInputLayout(
-                            "code",
-                            textInputAction: TextInputAction.next,
-                            errorText: controller.codeErrorText,
-                            onSubmit: (formKey, value) {
-                              state.formData[formKey]!['focusNode'].unfocus();
-                              FocusScope.of(context).requestFocus(state.formData['password']!['focusNode']);
-                            },
-                          ),
+                // 底部滚动的布局
+                SingleChildScrollView(
+                  scrollDirection: Axis.vertical,
+                  physics: const BouncingScrollPhysics(),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.max,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      MyTextView(
+                        "Casual Labour System",
+                        textColor: ColorConstants.white,
+                        isFontBold: true,
+                        fontSize: 35,
+                        marginTop: 20,
+                        fontStyle: FontStyle.italic,
+                        textAlign: TextAlign.center,
+                        marginLeft: 50,
+                        marginRight: 50,
+                      ),
 
-                          //密码文本
-                          MyTextView(
-                            "Password".tr,
-                            isFontMedium: true,
-                            fontSize: 17,
-                            textColor: ColorConstants.white,
-                            marginTop: 18,
-                          ),
+                      //中间的输入框布局
+                      Container(
+                        width: double.infinity,
+                        margin: EdgeInsets.symmetric(vertical: 45, horizontal: 15),
+                        padding: EdgeInsets.symmetric(vertical: 33, horizontal: 20),
+                        decoration: BoxDecoration(
+                          color: Color(0xFF4DCFF6).withOpacity(0.2), // 设置背景颜色和不透明度
+                          borderRadius: BorderRadius.circular(5.0), // 设置圆角
+                        ),
+                        child: Center(
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              //登录文本
+                              MyTextView(
+                                "Login Code".tr,
+                                isFontMedium: true,
+                                fontSize: 17,
+                                textColor: ColorConstants.white,
+                              ),
 
-                          // 登录表单 - 密码
-                          _buildInputLayout(
-                            "password",
-                            obscureText: !controller.pwdVisibility,
-                            errorText: controller.passwordErrorText,
-                            showRightIcon: true,
-                            rightWidget: IconButton(
-                              highlightColor: Colors.transparent,
-                              splashColor: Colors.transparent,
-                              icon: controller.pwdVisibility
-                                  ? const MyAssetImage(
-                                      Assets.cptAuthPasswordShowIcon,
-                                      width: 21,
-                                      height: 21,
-                                      color: ColorConstants.white,
-                                    )
-                                  : const MyAssetImage(
-                                      Assets.cptAuthPasswordHideIcon,
-                                      width: 21,
-                                      height: 21,
-                                      color: ColorConstants.white,
-                                    ),
-                              onPressed: () {
-                                controller.switchPwdVisibility();
-                              },
-                            ),
-                            onSubmit: (formKey, value) {
-                              state.formData[formKey]!['focusNode'].unfocus();
-                              controller.doInputLogin();
-                            },
-                          ),
+                              // 登录表单 - 账号
+                              _buildInputLayout(
+                                "code",
+                                textInputAction: TextInputAction.next,
+                                errorText: controller.codeErrorText,
+                                onSubmit: (formKey, value) {
+                                  state.formData[formKey]!['focusNode'].unfocus();
+                                  FocusScope.of(context).requestFocus(state.formData['password']!['focusNode']);
+                                },
+                              ),
+
+                              //密码文本
+                              MyTextView(
+                                "Password".tr,
+                                isFontMedium: true,
+                                fontSize: 17,
+                                textColor: ColorConstants.white,
+                                marginTop: 18,
+                              ),
+
+                              // 登录表单 - 密码
+                              _buildInputLayout(
+                                "password",
+                                obscureText: !controller.pwdVisibility,
+                                errorText: controller.passwordErrorText,
+                                showRightIcon: true,
+                                rightWidget: IconButton(
+                                  highlightColor: Colors.transparent,
+                                  splashColor: Colors.transparent,
+                                  icon: controller.pwdVisibility
+                                      ? const MyAssetImage(
+                                          Assets.cptAuthPasswordShowIcon,
+                                          width: 21,
+                                          height: 21,
+                                          color: ColorConstants.white,
+                                        )
+                                      : const MyAssetImage(
+                                          Assets.cptAuthPasswordHideIcon,
+                                          width: 21,
+                                          height: 21,
+                                          color: ColorConstants.white,
+                                        ),
+                                  onPressed: () {
+                                    controller.switchPwdVisibility();
+                                  },
+                                ),
+                                onSubmit: (formKey, value) {
+                                  state.formData[formKey]!['focusNode'].unfocus();
+                                  controller.doInputLogin();
+                                },
+                              ),
+
+                              //选择签到功能还是全功能
+                              CustomRadioCheck(
+                                options: state.loginOption,
+                                onOptionSelected: (index, text) {
+                                  state.loginOptionPosition = index;
+                                },
+                              ).marginSymmetric(vertical: 20),
+
+                              //登录按钮
+                              MyButton(
+                                type: ClickType.throttle,
+                                milliseconds: 500,
+                                onPressed: () {
+                                  FocusScope.of(context).unfocus();
+                                  controller.doInputLogin();
+                                },
+                                text: "Log in".tr,
+                                textColor: ColorConstants.white,
+                                fontSize: 16,
+                                radius: 22.5,
+                                backgroundColor: hexToColor("#FFBB1B"),
+                                fontWeight: FontWeight.w500,
+                              ),
+
+                              //注册入口
+                              _buildRichText(),
 
-                          MyButton(
-                            type: ClickType.throttle,
-                            milliseconds: 500,
-                            onPressed: () {
-                              FocusScope.of(context).unfocus();
-                              controller.doInputLogin();
-                            },
-                            text: "Log in".tr,
-                            textColor: ColorConstants.white,
-                            fontSize: 16,
-                            radius: 22.5,
-                            backgroundColor: hexToColor("#FFBB1B"),
-                            fontWeight: FontWeight.w500,
-                          ).marginOnly(top: 31)
-                        ],
+                              //注册入口
+                            ],
+                          ),
+                        ), // 传递子部件
                       ),
-                    ), // 传递子部件
-                  ),
-                ],
-              ),
+                    ],
+                  )
+                ).expanded(),
+              ],
             ),
           ),
         );
@@ -194,8 +236,30 @@ class _MainPageState extends BaseState<LoginPage, LoginController> with StateLif
     );
   }
 
+  //底部的注册文本
+  Widget _buildRichText() {
+    return Align(
+      alignment: Alignment.center,
+      child: RichText(
+        text: TextSpan(
+          style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: ColorConstants.textGrayAECAE5),
+          children: <TextSpan>[
+            TextSpan(
+              text: "Don’t have an account?".tr,
+              style: TextStyle(color: ColorConstants.textGrayAECAE5),
+            ),
+            TextSpan(
+              text: "Sign up".tr,
+              style: TextStyle(color: ColorConstants.textYellowFFBB1B),
+            ),
+          ],
+        ),
+      ),
+    ).marginOnly(top: 23);
+  }
+
   /// 输入框 账号与密码
-  _buildInputLayout(
+  Widget _buildInputLayout(
     String key, {
     double marginTop = 0,
     bool? showRightIcon = false, //是否展示右侧的布局

+ 6 - 2
packages/cpt_auth/lib/modules/login/login_state.dart

@@ -1,5 +1,3 @@
-
-
 import 'package:flutter/material.dart';
 import 'package:plugin_basic/basic_export.dart';
 
@@ -21,4 +19,10 @@ class LoginState {
       'obsecure': true,
     },
   };
+
+  //登录的功能选项
+  final loginOption = ['Sign in/Sign out'.tr, 'Admin'.tr];
+  //登录选项默认选中索引为0
+  int loginOptionPosition = 0;
+
 }

BIN
packages/cs_resources/assets/cpt_auth/login_radio_checked.webp


BIN
packages/cs_resources/assets/cpt_auth/login_radio_uncheck.webp


+ 2 - 42
packages/cs_resources/lib/constants/color_constants.dart

@@ -10,59 +10,19 @@ class ColorConstants {
   static const Color secondaryAppColor = Color(0xff00AFFF); //可以用作光标的一些颜色
   static const Color secondaryDarkAppColor = Color(0xFF1D1D1E); //Theme的Appbar颜色
 
-  static const Color pageBg = Color(0xffF9F9F9);
   static const Color gray = Color(0xFFCCCCCC);
-  static const Color lightGray = Color(0xffF6F6F6);
   static const Color black = Color(0xFF000000);
   static const Color white = Color(0xFFFFFFFF);
-  static const Color dividerColor = Color(0xffd2d2d2);
   static const Color dividerA6 = Color(0x4da6a6a6);
   static const Color dividerItem = Color(0xffEDF0F3);
-  static const Color dividerD9 = Color(0x4dd9d9d9);
   static const Color appBlue = Color(0xff0689fb);
-  static const Color warningYellow = Color(0xffFF8A00);
-  static const Color appRed = Color(0xffFF5E75);
-  static const Color appGreen = Color(0xff28BE5D);
-  static const Color redfe4093 = Color(0xffFE4049);
-  static const Color grayf7f7fb = Color(0xffF7F7FB);
-  static const Color grayd2 = Color(0xffD2D2D2);
-  static const Color grayf4f6f8 = Color(0xFFF4F6F8);
   static const Color blue1578fe = Color(0xFF1578FE);
-  static const Color employerText = Color(0xffA6BCFF);
-  static const Color gray66 = Color(0xff666666);
-  static const Color gray77 = Color(0xff777777);
-  static const Color gray76 = Color(0xff767676);
-  static const Color black43 = Color(0xff434343);
-  static const Color black323843 = Color(0xff323843);
-  static const Color grayf1 = Color(0xffF1F1F1);
   static const Color black33 = Color(0xff333333);
   static const Color black404A5B = Color(0xff404A5B);
-  static const Color gray99 = Color(0xff999999);
-  static const Color graye5 = Color(0xffE5E5E5);
-  static const Color gray88 = Color(0xff888888);
-  static const Color gray82 = Color(0xff828282);
   static const Color whitefe = Color(0xffFEFEFE);
-  static const Color gray949cb4 = Color(0xff949CB4);
-  static const Color blue4493fe = Color(0xff4493FE);
-  static const Color blueecf4ff = Color(0xffECF4FF);
-  static const Color green11b876 = Color(0xff11B876);
-  static const Color grayeee = Color(0xffEEEEEE);
   static const Color greye0 = Color(0xffE0E0E0);
-  static const Color tabTextBlue = Color(0xff00AFFF);
-  static const Color tabTextBlack = Color(0xff373737);
-  static const Color graySearchBg = Color(0xA50067B1);
-  static const Color grayededed = Color(0xFFEDEDED);
-  static const Color orangefb7746 = Color(0xFFFB7746);
-  static const Color grayFullBg = Color(0xA5F9F9F9);
-  static const Color whiteA5 = Color(0x40000000);
-  static const Color orangeff9300 = Color(0xFFFF9300);
-  static const Color blued5ebff = Color(0xFFD5EBFF);
-  static const Color bluedc9cfe5 = Color(0xFFC9CFE5);
-  static const Color bluede6f3ff = Color(0xFFE6F3FF);
-  static const Color gary575757 = Color(0xFF575757);
-  static const Color blue175285 = Color(0xFF175285);
-  static const Color gray9B9B9B = Color(0xFF9B9B9B);
-  static const Color gray9DF = Color(0xFFDFDFDF);
+  static const Color textGrayAECAE5 = Color(0xFFAECAE5);
+  static const Color textYellowFFBB1B = Color(0xFFFFBB1B);
 
   //黑暗模式的一些色值
   static const Color darkBlackBg = Color(0xFF0F0F0F);

+ 2 - 0
packages/cs_resources/lib/generated/assets.dart

@@ -10,6 +10,8 @@ class Assets {
   static const String baseLibWhiteBack = 'assets/base_lib/white_back.webp';
   static const String baseServicePageLoadError = 'assets/base_service/page_load_error.webp';
   static const String baseServicePageNoData = 'assets/base_service/page_no_data.webp';
+  static const String cptAuthLoginRadioChecked = 'assets/cpt_auth/login_radio_checked.webp';
+  static const String cptAuthLoginRadioUncheck = 'assets/cpt_auth/login_radio_uncheck.webp';
   static const String cptAuthPasswordHideIcon = 'assets/cpt_auth/password_hide_icon.webp';
   static const String cptAuthPasswordShowIcon = 'assets/cpt_auth/password_show_icon.webp';
   static const String cptJobArrawDownIcon = 'assets/cpt_job/arraw_down_icon.webp';

+ 5 - 0
packages/cs_resources/lib/local/language/en_US.dart

@@ -21,6 +21,11 @@ const Map<String, String> en_US = {
   'Confirm': 'Confirm',
   'Sign Here': 'Sign Here',
   'Clean': 'Clean',
+  'Vietnam': 'Vietnam',
+  'Sign in/Sign out': 'Sign in/Sign out',
+  'Admin': 'Admin',
+  'Don’t have an account?': 'Don’t have an account?',
+  'Sign up': 'Sign up',
 
 
   'Pull to refresh': 'Pull to refresh',

+ 5 - 0
packages/cs_resources/lib/local/language/zh_CN.dart

@@ -21,6 +21,11 @@ const Map<String, String> zh_CN = {
   'Confirm': '确认',
   'Sign Here': '请在此签名',
   'Clean': '清除',
+  'Vietnam': '越南',
+  'Sign in/Sign out': '签到/签出',
+  'Admin': '管理员',
+  'Don’t have an account?': '没有账号?',
+  'Sign up': '点击注册',
 
 
   'Pull to refresh': '下拉刷新',

+ 69 - 0
packages/cs_widgets/lib/custom_radio_check.dart

@@ -0,0 +1,69 @@
+import 'package:cs_resources/constants/color_constants.dart';
+import 'package:cs_resources/generated/assets.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get_utils/src/extensions/widget_extensions.dart';
+import 'package:widgets/ext/ex_widget.dart';
+import 'package:widgets/my_load_image.dart';
+import 'package:widgets/my_text_view.dart';
+
+class CustomRadioCheck extends StatefulWidget {
+  final List<String> options;
+  final Function(int index, String text) onOptionSelected;
+
+  CustomRadioCheck({required this.options, required this.onOptionSelected});
+
+  @override
+  _CustomRadioCheckState createState() => _CustomRadioCheckState();
+}
+
+class _CustomRadioCheckState extends State<CustomRadioCheck> {
+  String? _selectedOption;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.options.isNotEmpty) {
+      _selectedOption = widget.options.first;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 8.0, // 水平间距
+      runSpacing: 8.0, // 垂直间距
+      children: widget.options.map((option) {
+        return _buildRadioWithIconAndText(
+          path: option == _selectedOption ? Assets.cptAuthLoginRadioChecked : Assets.cptAuthLoginRadioUncheck,
+          text: option,
+          value: option == _selectedOption,
+          onChanged: (value) {
+            setState(() {
+              _selectedOption = option;
+              int selectedIndex = widget.options.indexOf(option);
+              widget.onOptionSelected(selectedIndex, option);
+            });
+          },
+        );
+      }).toList(),
+    );
+  }
+
+  Widget _buildRadioWithIconAndText({
+    required String path,
+    required String text,
+    required bool value,
+    required Function(bool) onChanged,
+  }) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        MyAssetImage(path, width: 22, height: 22),
+        SizedBox(width: 8),
+        MyTextView(text, marginLeft: 10, textColor: ColorConstants.white, fontSize: 14, isFontRegular: true),
+      ],
+    ).marginOnly(right: 20).onTap((){
+      onChanged(true);
+    });
+  }
+}

+ 5 - 0
packages/cs_widgets/lib/my_text_view.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 import 'ext/ex_widget.dart';
@@ -33,6 +35,7 @@ class MyTextView extends StatelessWidget {
   bool? isFontBold;
   FontWeight? fontWeight;
   TextAlign? textAlign;
+  FontStyle? fontStyle;
   int? maxLines;
 
   //底部是Text的父容器属性
@@ -87,6 +90,7 @@ class MyTextView extends StatelessWidget {
     this.boxWidth,
     this.boxHeight,
     this.onClick,
+    this.fontStyle,
     this.type = ClickType.none, //默认没有点击类型
     this.milliseconds = 500, //点击类型的时间戳(毫秒)
   }) : super(key: key) {
@@ -177,6 +181,7 @@ class MyTextView extends StatelessWidget {
         color: textColor,
         fontSize: fontSize ?? 14,
         fontWeight: fontWeight,
+        fontStyle: fontStyle,
         overflow: isTextEllipsis ?? false ? TextOverflow.ellipsis : TextOverflow.clip,
       ),
     );