app-starlock/lib/mine/mine/safeVerify/safeVerify_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/app_settings/app_colors.dart';
import 'package:star_lock/mine/mine/safeVerify/safeVerify_logic.dart';
import 'package:star_lock/mine/mine/safeVerify/safeVerify_state.dart';
import 'package:star_lock/tools/submitBtn.dart';
import 'package:star_lock/tools/titleAppBar.dart';

class SafeVerifyPage extends StatefulWidget {
  const SafeVerifyPage({Key? key}) : super(key: key);

  @override
  State<SafeVerifyPage> createState() => _SafeVerifyPageState();
}

class _SafeVerifyPageState extends State<SafeVerifyPage> {
  final SafeVerifyLogic logic = Get.put(SafeVerifyLogic());
  final SafeVerifyState state = Get.find<SafeVerifyLogic>().state;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xFFFFFFFF),
        appBar: TitleAppBar(
            barTitle: '安全验证'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: safeVerifyColumn());
  }

  Widget safeVerifyColumn() {
    return Column(
      children: [
        SizedBox(
          height: 60.h,
        ),
        Container(
          margin: EdgeInsets.only(left: 60.w, right: 60.w),
          height: 60.h,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(30.w)),
          child: TextField(
            //输入框一行
            maxLines: 1,
            controller: state.codeController,
            onChanged: (value) {
              logic.checkNext(state.codeController);
            },
            autofocus: false,
            decoration: InputDecoration(
              contentPadding:
                  const EdgeInsets.only(left: 5, top: -8, bottom: 6),
              hintText: '请输入验证码'.tr,
              hintStyle: TextStyle(fontSize: 22.sp, height: 1.0),
              //不需要输入框下划线
              border: const OutlineInputBorder(),
            ),
          ),
        ),
        SizedBox(
          height: 30.h,
        ),
        Obx(() => GestureDetector(
              onTap: () {
                if (state.canResend.value) {
                  logic.sendValidationCode();
                }
              },
              child: Container(
                padding: EdgeInsets.only(
                    left: 20.w, right: 20.w, top: 10.h, bottom: 10.h),
                // height: 60.h,
                width: 200.w,
                decoration: BoxDecoration(
                  color: AppColors.mainColor,
                  borderRadius: BorderRadius.circular(10.h),
                  // borderRadius: BorderRadius.circular(30.w)
                ),
                child: Text(state.btnText.value,
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 22.sp)),
                // SubmitBtn(
                //   btnName: state.btnText.value,
                //   onClick: state.canResend.value ? () {
                //     logic.sendValidationCode();
                //   } : null,
                // ),
              ),
            )),
        SizedBox(
          height: 60.h,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Obx(() => Padding(
                  padding: EdgeInsets.only(left: 60.w, right: 60.w),
                  child: Text(
                    '${'请点击获取验证码，验证码将发送到'.tr}${state.accountStr.value}',
                    style: TextStyle(
                        color: AppColors.darkGrayTextColor, fontSize: 22.sp),
                  ),
                )),
            SizedBox(height: 10.h),
            Obx(() => Visibility(
                  visible: state.isToggle.value,
                  child: GestureDetector(
                    onTap: () {
                      if (state.channel.value == '1') {
                        // 手机号切换为邮箱
                        state.channel.value = '2';
                        state.accountStr.value = state.loginData.value.email!;
                      } else {
                        // 邮箱切换为手机号
                        state.channel.value = '1';
                        state.accountStr.value = state.loginData.value.mobile!;
                      }
                    },
                    child: Container(
                      margin: EdgeInsets.only(left: 60.w, right: 60.w),
                      padding: EdgeInsets.all(10.w),
                      // height: 60.h,
                      // width: 100.w,
                      decoration: BoxDecoration(
                        color: AppColors.mainColor,
                        borderRadius: BorderRadius.circular(10.h),
                        // borderRadius: BorderRadius.circular(30.w)
                      ),
                      child: Text('切换'.tr,
                          textAlign: TextAlign.center,
                          style:
                              TextStyle(color: Colors.white, fontSize: 22.sp)),
                    ),
                  ),
                )),
          ],
        ),
        SizedBox(
          height: 120.h,
        ),
        Obx(() => SubmitBtn(
              btnName: '验证'.tr,
              isDisabled: state.canSub.value,
              onClick: () {
                logic.deleteAccountRequest();
              },
            ))
      ],
    );
  }
}