Flutter-防京东商城项目-编写注册(1)-34

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

注册获取到的验证码在打印台上面可以收到。

gif图的效果是34和35的代码来的。

回到页面编写下面的代码
1.导入

import '../config/Config.dart';
import 'package:dio/dio.dart';
//提示框
import 'package:fluttertoast/fluttertoast.dart';

2.添加下面的方法

String tel;
sendCode() async {
  RegExp reg = new RegExp(r"^1\d{10}$");
  if (reg.hasMatch(this.tel)) {
    var api = '${Config.domain}api/sendCode';
    var response = await Dio().post(api, data: {"tel": this.tel});
    if (response.data["success"]) {

      print(response);  //演示期间服务器直接返回  给手机发送的验证码

      Navigator.pushNamed(context, '/registerSecond',arguments: {
        "tel":this.tel
      });

    } else {
      Fluttertoast.showToast(
        msg: '${response.data["message"]}',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  } else {
    Fluttertoast.showToast(
      msg: '手机号格式不对',
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
    );
  }
}

3.修改下面的内容 两个地方而已

this.tel = value;

sendCode

回到页面
4.导入

import 'dart:async';   //Timer定时器需要引入
import '../config/Config.dart';
import 'package:dio/dio.dart';
import 'package:fluttertoast/fluttertoast.dart';

5添加下面的代码

Map arguments;

this.arguments



  String tel;
  bool sendCodeBtn=false;
  int seconds=10;
  String code;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.tel=widget.arguments['tel'];
    this._showTimer();
  }

  //倒计时
  _showTimer(){
    Timer t;
    t=Timer.periodic(Duration(milliseconds:1000), (timer){
      setState(() {
        this.seconds--;
      });
      if(this.seconds==0){
        t.cancel(); //清除定时器
        setState(() {
          this.sendCodeBtn=true;
        });

      }
    });

  }
  //重新发送验证码
  sendCode() async {
    setState(() {
      this.sendCodeBtn=false;
      this.seconds=10;
      this._showTimer();
    });
    var api = '${Config.domain}api/sendCode';
    var response = await Dio().post(api, data: {"tel": this.tel});
    if (response.data["success"]) {
      print(response);  //演示期间服务器直接返回  给手机发送的验证码
    }
  }
  //验证验证码

  validateCode() async{
    var api = '${Config.domain}api/validateCode';
    var response = await Dio().post(api, data: {"tel": this.tel,"code": this.code});
    if (response.data["success"]) {
      Navigator.pushNamed(context, '/registerThird',arguments: {
        "tel":this.tel,
        "code":this.code
      });
    }else{
      Fluttertoast.showToast(
        msg: '${response.data["message"]}',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  }

//--------------------------------------------------------------------------

Text("验证码已经发送到了您的${this.tel}手机，请输入${this.tel}手机号收到的验证码"),
//--------------------------------------------------------------------------
this.code=value;

//--------------------------------------------------------------------------
this.sendCodeBtn?RaisedButton(
  child: Text('重新发送'),
  onPressed: this.sendCode,
):RaisedButton(
  child: Text('${this.seconds}秒后重发'),
  onPressed: (){

  },
),

//--------------------------------------------------------------------------
this.validateCode,

5.回到路由界面添加下面的代码

'/registerSecond': (context,{arguments}) => RegisterSecondPage(arguments: arguments),