|
|
@@ -1,5 +1,12 @@
|
|
|
import 'package:electronic_assistant/base/base_page.dart';
|
|
|
+import 'package:electronic_assistant/resource/assets.gen.dart';
|
|
|
+import 'package:electronic_assistant/resource/colors.gen.dart';
|
|
|
+import 'package:electronic_assistant/utils/expand.dart';
|
|
|
+import 'package:electronic_assistant/widget/login_code_btn.dart';
|
|
|
import 'package:flutter/material.dart';
|
|
|
+import 'package:flutter/services.dart';
|
|
|
+import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
+import 'package:get/get.dart';
|
|
|
|
|
|
import 'controller.dart';
|
|
|
|
|
|
@@ -7,42 +14,323 @@ class LoginPage extends BasePage<LoginController> {
|
|
|
const LoginPage({super.key});
|
|
|
|
|
|
@override
|
|
|
+ bool immersive() {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击空白处收起键盘
|
|
|
+ @override
|
|
|
+ void backgroundOnTapEvent() {
|
|
|
+ super.backgroundOnTapEvent();
|
|
|
+ FocusScope.of(Get.context!).requestFocus(FocusNode());
|
|
|
+ }
|
|
|
+
|
|
|
+ @override
|
|
|
Widget buildBody(BuildContext context) {
|
|
|
- return Scaffold(
|
|
|
- body: Column(
|
|
|
- children: <Widget>[
|
|
|
- TextField(
|
|
|
- onChanged: (text) {
|
|
|
- controller.setPhone(text);
|
|
|
- },
|
|
|
- decoration: const InputDecoration(
|
|
|
- labelText: "手机号",
|
|
|
- hintText: "您的手机号",
|
|
|
- prefixIcon: Icon(Icons.person)),
|
|
|
+ return Stack(
|
|
|
+ children: [
|
|
|
+ buildBackgroundImage(),
|
|
|
+ Scaffold(
|
|
|
+ resizeToAvoidBottomInset: false,
|
|
|
+ backgroundColor: Colors.transparent,
|
|
|
+ appBar: AppBar(
|
|
|
+ leading: IconButton(
|
|
|
+ icon: const Icon(Icons.arrow_back_ios),
|
|
|
+ onPressed: () {
|
|
|
+ Navigator.pop(context);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ backgroundColor: Colors.transparent,
|
|
|
+ systemOverlayStyle: SystemUiOverlayStyle.dark,
|
|
|
+ ),
|
|
|
+ body: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ margin: EdgeInsets.only(left: 28.w, top: 64.h),
|
|
|
+ width: 194.w,
|
|
|
+ height: 71.h,
|
|
|
+ child: Image(image: Assets.images.iconLoginLogo.provider()),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ margin: EdgeInsets.only(top: 44.h, left: 28.w, right: 28.w),
|
|
|
+ alignment: Alignment.center,
|
|
|
+ height: 44.h,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ border: Border(
|
|
|
+ bottom: BorderSide(
|
|
|
+ width: 1.0,
|
|
|
+ color: "#F0F0F0".toColor(),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ child: TextField(
|
|
|
+ maxLines: 1,
|
|
|
+ textAlignVertical: TextAlignVertical.center,
|
|
|
+ textInputAction: TextInputAction.search,
|
|
|
+ decoration: InputDecoration(
|
|
|
+ hintText: '输入手机号码',
|
|
|
+ hintStyle:
|
|
|
+ TextStyle(fontSize: 16, color: "#AFAFAF".toColor()),
|
|
|
+ labelStyle: const TextStyle(
|
|
|
+ fontSize: 16,
|
|
|
+ color: ColorName.primaryTextColor,
|
|
|
+ ),
|
|
|
+ contentPadding: const EdgeInsets.all(0),
|
|
|
+ border:
|
|
|
+ const OutlineInputBorder(borderSide: BorderSide.none),
|
|
|
+ enabled: true,
|
|
|
+ ),
|
|
|
+ style: TextStyle(fontSize: 14.sp),
|
|
|
+ onChanged: (value) {
|
|
|
+ controller.setPhone(value);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ margin: EdgeInsets.only(top: 36.h, left: 28.w, right: 28.w),
|
|
|
+ alignment: Alignment.center,
|
|
|
+ height: 44.h,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ border: Border(
|
|
|
+ bottom: BorderSide(
|
|
|
+ width: 1.0,
|
|
|
+ color: "#F0F0F0".toColor(),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Expanded(
|
|
|
+ child: TextField(
|
|
|
+ maxLines: 1,
|
|
|
+ textAlignVertical: TextAlignVertical.center,
|
|
|
+ textInputAction: TextInputAction.search,
|
|
|
+ decoration: InputDecoration(
|
|
|
+ hintText: '输入验证码',
|
|
|
+ hintStyle: TextStyle(
|
|
|
+ fontSize: 16, color: "#AFAFAF".toColor()),
|
|
|
+ labelStyle: const TextStyle(
|
|
|
+ fontSize: 16,
|
|
|
+ color: ColorName.primaryTextColor,
|
|
|
+ ),
|
|
|
+ contentPadding: const EdgeInsets.all(0),
|
|
|
+ border: const OutlineInputBorder(
|
|
|
+ borderSide: BorderSide.none),
|
|
|
+ enabled: true,
|
|
|
+ ),
|
|
|
+ style: TextStyle(fontSize: 14.sp),
|
|
|
+ onChanged: (value) {
|
|
|
+ controller.setCode(value);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ LoginCodeBtn(
|
|
|
+ onTapCallback: () {
|
|
|
+ controller.getUserCode();
|
|
|
+ },
|
|
|
+ available: true,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ GestureDetector(
|
|
|
+ onTap: () {
|
|
|
+ controller.login();
|
|
|
+ },
|
|
|
+ child: Container(
|
|
|
+ margin: EdgeInsets.only(
|
|
|
+ top: 54.h,
|
|
|
+ left: 28.w,
|
|
|
+ right: 28.w,
|
|
|
+ ),
|
|
|
+ height: 48.h,
|
|
|
+ alignment: Alignment.center,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: ['#6177F2'.toColor(), '#8B9DFF'.toColor()],
|
|
|
+ stops: const [0, 1.0],
|
|
|
+ ),
|
|
|
+ borderRadius: BorderRadius.circular(8),
|
|
|
+ ),
|
|
|
+ child: const Text(
|
|
|
+ "登录",
|
|
|
+ style: TextStyle(
|
|
|
+ color: ColorName.white,
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ margin: EdgeInsets.only(left: 28.w, top: 16.h),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Obx(
|
|
|
+ () {
|
|
|
+ return GestureDetector(
|
|
|
+ onTap: () {
|
|
|
+ controller.isAgree.value =
|
|
|
+ !controller.isAgree.value;
|
|
|
+ },
|
|
|
+ child: SizedBox(
|
|
|
+ width: 20.w,
|
|
|
+ height: 20.w,
|
|
|
+ child: controller.isAgree.value
|
|
|
+ ? Assets.images.iconSelectTrue.image()
|
|
|
+ : Assets.images.iconSelectFalse.image()),
|
|
|
+ );
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ Text(
|
|
|
+ "我已阅读并同意",
|
|
|
+ style: TextStyle(
|
|
|
+ color: "#AFAFAF".toColor(),
|
|
|
+ fontSize: 12,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ GestureDetector(
|
|
|
+ onTap: () {},
|
|
|
+ child: Text(
|
|
|
+ "《隐私政策》",
|
|
|
+ style: TextStyle(
|
|
|
+ color: "#5E8BFF".toColor(),
|
|
|
+ fontSize: 12,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Text(
|
|
|
+ "和",
|
|
|
+ style: TextStyle(
|
|
|
+ color: "#AFAFAF".toColor(),
|
|
|
+ fontSize: 12,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ GestureDetector(
|
|
|
+ onTap: () {},
|
|
|
+ child: Text(
|
|
|
+ "《用户使用协议》",
|
|
|
+ style: TextStyle(
|
|
|
+ color: "#5E8BFF".toColor(),
|
|
|
+ fontSize: 12,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ // return Scaffold(
|
|
|
+ // body: Column(
|
|
|
+ // children: <Widget>[
|
|
|
+ // TextField(
|
|
|
+ // onChanged: (text) {
|
|
|
+ // controller.setPhone(text);
|
|
|
+ // },
|
|
|
+ // decoration: const InputDecoration(
|
|
|
+ // labelText: "手机号",
|
|
|
+ // hintText: "您的手机号",
|
|
|
+ // prefixIcon: Icon(Icons.person)),
|
|
|
+ // ),
|
|
|
+ // TextField(
|
|
|
+ // onChanged: (text) {
|
|
|
+ // controller.setCode(text);
|
|
|
+ // },
|
|
|
+ // decoration: const InputDecoration(
|
|
|
+ // labelText: "验证码",
|
|
|
+ // hintText: "您的验证码",
|
|
|
+ // prefixIcon: Icon(Icons.lock)),
|
|
|
+ // ),
|
|
|
+ // ElevatedButton(
|
|
|
+ // child: const Text("获取验证码"),
|
|
|
+ // onPressed: () {
|
|
|
+ // controller.getUserCode();
|
|
|
+ // },
|
|
|
+ // ),
|
|
|
+ // ElevatedButton(
|
|
|
+ // child: const Text("登录"),
|
|
|
+ // onPressed: () {
|
|
|
+ // controller.login();
|
|
|
+ // },
|
|
|
+ // )
|
|
|
+ // ],
|
|
|
+ // ),
|
|
|
+ // );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildBackgroundImage() {
|
|
|
+ return Image(image: Assets.images.bgLogin.provider());
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildBackgroundGradient() {
|
|
|
+ return Stack(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ width: 1.sw,
|
|
|
+ height: 1.sh,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ '#FFC0CF'.toColor().withOpacity(0.62),
|
|
|
+ '#F6F6F6'.toColor().withOpacity(0)
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ stops: const [0, 1.0],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 1.sw,
|
|
|
+ height: 1.sh,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ '#CADCFD'.toColor().withOpacity(0.72),
|
|
|
+ '#F6F5F8'.toColor().withOpacity(0.72)
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ stops: const [0, 1.0],
|
|
|
+ ),
|
|
|
),
|
|
|
- TextField(
|
|
|
- onChanged: (text) {
|
|
|
- controller.setCode(text);
|
|
|
- },
|
|
|
- decoration: const InputDecoration(
|
|
|
- labelText: "验证码",
|
|
|
- hintText: "您的验证码",
|
|
|
- prefixIcon: Icon(Icons.lock)),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 1.sw,
|
|
|
+ height: 1.sh,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ '#B0BCFF'.toColor(),
|
|
|
+ '#FFFFFF'.toColor(),
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ stops: const [0, 1.0],
|
|
|
+ ),
|
|
|
),
|
|
|
- ElevatedButton(
|
|
|
- child: const Text("获取验证码"),
|
|
|
- onPressed: () {
|
|
|
- controller.getUserCode();
|
|
|
- },
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 1.sw,
|
|
|
+ height: 1.sh,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ '#7E92FF'.toColor(),
|
|
|
+ '#B0BCFF'.toColor(),
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ stops: const [0, 1.0],
|
|
|
+ ),
|
|
|
),
|
|
|
- ElevatedButton(
|
|
|
- child: const Text("登录"),
|
|
|
- onPressed: () {
|
|
|
- controller.login();
|
|
|
- },
|
|
|
- )
|
|
|
- ],
|
|
|
- ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
);
|
|
|
}
|
|
|
}
|