|
|
@@ -29,7 +29,7 @@ class LoginPage extends BasePage<LoginController> {
|
|
|
Widget buildBody(BuildContext context) {
|
|
|
return Stack(
|
|
|
children: [
|
|
|
- buildBackgroundImage(),
|
|
|
+ _buildBackgroundImage(),
|
|
|
Scaffold(
|
|
|
resizeToAvoidBottomInset: false,
|
|
|
backgroundColor: Colors.transparent,
|
|
|
@@ -52,174 +52,10 @@ class LoginPage extends BasePage<LoginController> {
|
|
|
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,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
+ _buildPhoneTextField(),
|
|
|
+ _buildCodeTextField(),
|
|
|
+ _buildLoginBtn(),
|
|
|
+ _buildAgreeText(),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
@@ -263,74 +99,186 @@ class LoginPage extends BasePage<LoginController> {
|
|
|
// );
|
|
|
}
|
|
|
|
|
|
- Widget buildBackgroundImage() {
|
|
|
+ // 背景图片
|
|
|
+ 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],
|
|
|
- ),
|
|
|
+ // 电话号码输入框
|
|
|
+ Widget _buildPhoneTextField() {
|
|
|
+ return 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(),
|
|
|
),
|
|
|
),
|
|
|
- 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],
|
|
|
- ),
|
|
|
+ ),
|
|
|
+ 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,
|
|
|
),
|
|
|
- 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],
|
|
|
- ),
|
|
|
+ style: TextStyle(fontSize: 14.sp),
|
|
|
+ onChanged: (value) {
|
|
|
+ controller.setPhone(value);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证码输入框
|
|
|
+ Widget _buildCodeTextField() {
|
|
|
+ return 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(),
|
|
|
),
|
|
|
),
|
|
|
- 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],
|
|
|
+ ),
|
|
|
+ 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,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 登录按钮
|
|
|
+ Widget _buildLoginBtn() {
|
|
|
+ return 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,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget _buildAgreeText() {
|
|
|
+ return 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,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
);
|
|
|
}
|
|
|
}
|