binding_phone.dart 10.9 KB
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:one_key/app.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/navigator_util.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/round_button.dart';
import 'package:one_key/widgets/system_app_bar.dart';
import 'package:one_key/widgets/v_empty_view.dart';

class BindingPhone extends StatefulWidget {
  BindingPhone({Key key}) : super(key: key);

  @override
  _BindingPhoneState createState() => _BindingPhoneState();
}

class _BindingPhoneState extends State<BindingPhone> {
  ScrollController _controller;
  FocusNode _phoneNode;
  FocusNode _codeNode;

  //定义变量
  Timer _timer;
  //倒计时数值
  var countdownTime = 0;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController();
    _phoneNode = FocusNode();
    _codeNode = FocusNode();
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }

  ///倒计时方法
  startCountdown() {
    countdownTime = 60;
    final call = (timer) {
      setState(() {
        if (countdownTime < 1) {
          _timer.cancel();
        } else {
          countdownTime -= 1;
        }
      });
    };
    _timer = Timer.periodic(Duration(seconds: 1), call);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: SystemAppBar(
        '',
        leftTitle: '上一步',
        onTap: () {
          Navigator.pop(context);
        },
      ),
      body: InkWell(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode()); //点击空白处隐藏键盘
          },
          child: Container(
              padding: EdgeInsets.symmetric(
                  horizontal: ScreenUtil().setWidth(35 * 2),
                  vertical: ScreenUtil().setWidth(30 * 2)),
              child: Column(
                children: [
                  Expanded(
                    child: SingleChildScrollView(
                      controller: _controller,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('绑定您的手机号',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: MyColours.color_333333,
                                  fontSize: ScreenUtil().setSp(40))),
                          VEmptyView(100),
                          Container(
                              height: ScreenUtil().setHeight(52 * 2),
                              // width: ScreenUtil().setWidth(611),
                              padding: EdgeInsets.only(
                                  left: ScreenUtil().setWidth(20)),
                              margin: EdgeInsets.only(
                                  top: ScreenUtil().setHeight(8)),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: MyColours.color_bff6f7,
                                      width: ScreenUtil().setWidth(2)),
                                  borderRadius: BorderRadius.circular(
                                      ScreenUtil().setWidth(10))),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  HEmptyView(30),
                                  Text(
                                    "手机号",
                                    style: TextStyle(
                                        color: MyColours.color_333333,
                                        fontSize: ScreenUtil().setSp(26)),
                                  ),
                                  HEmptyView(30),
                                  Expanded(
                                    child: TextField(
                                      focusNode: _phoneNode,
                                      style: TextStyle(
                                          color: MyColours.color_353535,
                                          fontSize: ScreenUtil().setSp(28)),
                                      decoration: InputDecoration(
                                        hintText: "请输入手机号",
                                        hintStyle: TextStyle(
                                            color: MyColours.color_999999,
                                            fontSize: ScreenUtil().setSp(26)),
                                        border: InputBorder.none,
                                        contentPadding: EdgeInsets.fromLTRB(
                                            0,
                                            ScreenUtil().setWidth(28),
                                            ScreenUtil().setWidth(30),
                                            ScreenUtil().setWidth(28)),
                                      ),
                                      onChanged: (_) {},
                                      onEditingComplete: () {
                                        FocusScope.of(context).requestFocus(
                                            FocusNode()); //点击空白处隐藏键盘
                                      },
                                      keyboardType: TextInputType.number,
                                    ),
                                  )
                                ],
                              )),
                          VEmptyView(10),
                          Container(
                              height: ScreenUtil().setHeight(52 * 2),
                              // width: ScreenUtil().setWidth(611),
                              padding: EdgeInsets.only(
                                  left: ScreenUtil().setWidth(20)),
                              margin: EdgeInsets.only(
                                  top: ScreenUtil().setHeight(8)),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: MyColours.color_bff6f7,
                                      width: ScreenUtil().setWidth(2)),
                                  borderRadius: BorderRadius.circular(
                                      ScreenUtil().setWidth(10))),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  HEmptyView(30),
                                  Text(
                                    "验证码",
                                    style: TextStyle(
                                        color: MyColours.color_333333,
                                        fontSize: ScreenUtil().setSp(26)),
                                  ),
                                  HEmptyView(30),
                                  Expanded(
                                    child: TextField(
                                      focusNode: _codeNode,
                                      style: TextStyle(
                                          color: MyColours.color_353535,
                                          fontSize: ScreenUtil().setSp(28)),
                                      decoration: InputDecoration(
                                        hintText: "请输入验证码",
                                        hintStyle: TextStyle(
                                            color: MyColours.color_999999,
                                            fontSize: ScreenUtil().setSp(26)),
                                        border: InputBorder.none,
                                        contentPadding: EdgeInsets.fromLTRB(
                                            0,
                                            ScreenUtil().setWidth(28),
                                            ScreenUtil().setWidth(30),
                                            ScreenUtil().setWidth(28)),
                                      ),
                                      onChanged: (_) {},
                                      onEditingComplete: () {
                                        FocusScope.of(context).requestFocus(
                                            FocusNode()); //点击空白处隐藏键盘
                                      },
                                      keyboardType: TextInputType.number,
                                    ),
                                  ),
                                  HEmptyView(10),
                                  RoundButton(
                                    height: ScreenUtil().setWidth(84),
                                    text: countdownTime > 0
                                        ? "${countdownTime}s后重新获取"
                                        : "获取验证码",
                                    radius: ScreenUtil().setWidth(10),
                                    textColor: MyColours.color_199095,
                                    gradientStart: MyColours.color_ffffff,
                                    gradientEnd: MyColours.color_ffffff,
                                    borderColor: Colors.transparent,
                                    fontSize: 26,
                                    isBold: false,
                                    onPressed: () {
                                      if (countdownTime == 0) {
                                        startCountdown();
                                      }
                                    },
                                  ),
                                  HEmptyView(20),
                                ],
                              )),
                          VEmptyView(120),
                          RoundButton(
                            text: '提交',
                            gradientStart: MyColours.color_199095,
                            gradientEnd: MyColours.color_199095,
                            // borderColor: MyColours.color_999999,
                            radius: ScreenUtil().setWidth(20),
                            fontSize: 34,
                            isBold: false,
                            onPressed: () {
                              //真正登录成功标志
                              App.sp.setBool("isLogin", true);
                              NavigatorUtil.goIfNeedCreateStorePage(context);
                            },
                          )

                          // Spacer(),
                        ],
                      ),
                    ),
                  ),
                ],
              ))),
    );
  }
}