app/lib/paegs/registered_page/registered_page.dart

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:bbyyy/beans/login_information_bean_entity.dart';
import 'package:bbyyy/beans/upload_image_bean_entity.dart';
import 'package:bbyyy/https/MyDio.dart';
import 'package:bbyyy/https/my_request.dart';
import 'package:bbyyy/my_tools/my_apis.dart';
import 'package:bbyyy/my_tools/my_colors.dart';
import 'package:bbyyy/my_tools/my_cookie.dart';
import 'package:bbyyy/my_tools/my_tools.dart';
import 'package:bbyyy/my_tools/my_views.dart';
import 'package:bbyyy/my_tools/protocol.dart';
import 'package:bbyyy/paegs/login_page/login_page.dart';
import 'package:bbyyy/paegs/root_page/root_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

class RegisteredPage extends StatefulWidget {
  @override
  _RegisteredPageState createState() => _RegisteredPageState();
}

class _RegisteredPageState extends State<RegisteredPage> {
  TextEditingController _phoneNum = TextEditingController(text: '');
  TextEditingController _verificationCode = TextEditingController(text: '');
  TextEditingController _nickname = TextEditingController(text: '');
  TextEditingController _pw = TextEditingController(text: '');
  bool showPW = true;
  int focus = -1;
  bool haveRead = false;
  String verificationCodeText = '发送验证码';

  File _image;
  final picker = ImagePicker();
  Timer _timer;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        MyTools().hideKeyboard(context);
        setState(() {
          focus = -1;
        });
      },
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              Column(
                children: [
                  Container(
                    height: MediaQuery.of(context).size.width * (506 / 750),
                    child: Stack(
                      children: [
                        Image.asset(
                          'images/bg_1.png',
                          width: MediaQuery.of(context).size.width,
                          height:
                              MediaQuery.of(context).size.width * (506 / 750),
                        ),
                        Positioned(
                          top: 67,
                          child: Column(
                            children: [
                              Stack(
                                children: [
                                  Image.asset(
                                    'images/yuan_bg.png',
                                    height: 147,
                                    width: 147,
                                  ),
                                  GestureDetector(
                                    child: _image == null
                                        ? SvgPicture.asset(
                                            'images/svg/头像上传.svg',
                                            height: 75,
                                            width: 75,
                                          )
                                        : ClipRRect(
                                            child: Image.file(
                                              _image,
                                              height: 75,
                                              width: 75,
                                            ),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(75 / 2)),
                                          ),
                                    onTap: () async {
                                      final pickedFile = await picker.getImage(
                                          source: ImageSource.gallery);
                                      print('pickedFile---${pickedFile.path}');
                                      if (pickedFile != null) {
                                        File cropperImg =
                                            await ImageCropper.cropImage(
                                                sourcePath: pickedFile.path,
                                                cropStyle: CropStyle.rectangle,
                                                aspectRatio: CropAspectRatio(
                                                    ratioX: 1, ratioY: 1),
                                                aspectRatioPresets: [
                                                  CropAspectRatioPreset.square,
                                                ],
                                                androidUiSettings:
                                                    AndroidUiSettings(
                                                        toolbarTitle: '图片剪裁',
                                                        toolbarColor:
                                                            MyColors.cFF4233,
                                                        toolbarWidgetColor:
                                                            Colors.white,
                                                        initAspectRatio:
                                                            CropAspectRatioPreset
                                                                .square,
                                                        lockAspectRatio: true),
                                                iosUiSettings: IOSUiSettings(
                                                    minimumAspectRatio: 1.0,
                                                    resetAspectRatioEnabled:
                                                        false,
                                                    rotateButtonsHidden: true));
                                        if (cropperImg != null) {
                                          setState(() {
                                            print(
                                                'cropperImg---${cropperImg.path}');
                                            _image = cropperImg;
                                            print('_image---${_image.path}');
                                          });
                                        }
                                      }
                                    },
                                    behavior: HitTestBehavior.translucent,
                                  )
                                ],
                                alignment: Alignment.center,
                              ),
                              Container(
                                child: Text(
                                  '头像上传',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 14),
                                ),
                                margin: EdgeInsets.only(top: 6),
                              )
                            ],
                          ),
                        )
                      ],
                      alignment: Alignment.topCenter,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 47, right: 47, top: 26),
                    child: Column(
                      children: [
                        // Container(
                        //   child: Text(
                        //     'Hello Welcome !',
                        //     style: TextStyle(
                        //         color: MyColors.cFF4233, fontSize: 24),
                        //   ),
                        //   margin: EdgeInsets.only(bottom: 25),
                        // ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/手机.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _phoneNum,
                                inputFormatters: [
                                  onlyInputNumberAndWorkFormatter(),
                                  LengthLimitingTextInputFormatter(11)
                                ],
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 0;
                                  });
                                },
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  disabledBorder: InputBorder.none,
                                  enabledBorder: InputBorder.none,
                                  focusedBorder: InputBorder.none,
                                  isDense: true,
                                  hintText: '请输入手机号',
                                  hintStyle: TextStyle(
                                      color: MyColors.c999999, fontSize: 16),
                                  contentPadding: const EdgeInsets.fromLTRB(
                                      14, 4.5, 8, 4.5),
                                ),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.number,
                                onChanged: (t) {},
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 1,
                          color:
                              focus == 0 ? MyColors.cFF4233 : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/昵称.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                inputFormatters: [
                                  LengthLimitingTextInputFormatter(12)
                                ],
                                controller: _nickname,
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 2;
                                  });
                                },
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    hintText: '请输入昵称',
                                    hintStyle: TextStyle(
                                        color: MyColors.c999999, fontSize: 16),
                                    isDense: true,
                                    contentPadding: const EdgeInsets.fromLTRB(
                                        14, 4.5, 8, 4.5)),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.text,
                                onChanged: (t) {},
                              ),
                            ),
                          ],
                        ),
                        Container(
                          height: 1,
                          color:
                          focus == 2 ? MyColors.cFF4233 : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/验证码.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _verificationCode,
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                inputFormatters: [
                                  onlyInputNumberAndWorkFormatter(),
                                  LengthLimitingTextInputFormatter(6)
                                ],
                                onTap: () {
                                  setState(() {
                                    focus = 1;
                                  });
                                },
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    hintText: '请输入验证码',
                                    hintStyle: TextStyle(
                                        color: MyColors.c999999, fontSize: 16),
                                    isDense: true,
                                    contentPadding:
                                    const EdgeInsets.fromLTRB(14, 4.5, 8, 4.5)),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.number,
                                onChanged: (t) {},
                              ),
                            ),
                            GestureDetector(
                              onTap: (){
                                if(verificationCodeText!='发送验证码'){
                                  showToast('验证码发送中');
                                  return;
                                }
                                sendTheVerificationCode();
                              },
                              behavior: HitTestBehavior.translucent,
                              child: Container(
                                decoration: BoxDecoration(
                                    color: MyColors.c19FF4233,
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(4))),
                                child: Text(verificationCodeText,style: TextStyle(color: MyColors.cFF4233,fontSize: 14),),
                                alignment: Alignment.center,
                                height: 34,
                                width: 90,
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 1,
                          color:
                              focus == 1 ? MyColors.cFF4233 : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/密码.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _pw,
                                inputFormatters: [
                                  onlyInputNumberAndWorkFormatter(),
                                  LengthLimitingTextInputFormatter(8)
                                ],
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 3;
                                  });
                                },
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    hintText: '请输入密码(6到8位)',
                                    hintStyle: TextStyle(
                                        color: MyColors.c999999, fontSize: 16),
                                    isDense: true,
                                    contentPadding: const EdgeInsets.fromLTRB(
                                        14, 4.5, 8, 4.5)),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.visiblePassword,
                                obscureText: !showPW,
                                onChanged: (t) {},
                              ),
                            ),
                            GestureDetector(
                                onTap: () {
                                  setState(() {
                                    showPW = !showPW;
                                  });
                                },
                                behavior: HitTestBehavior.translucent,
                                child: Container(
                                  height: 30,width: 30,
                                    padding: EdgeInsets.all(4),
                                    child: SvgPicture.asset(showPW
                                        ? 'images/svg/不显示.svg'
                                        : 'images/svg/显示.svg'))),
                          ],
                        ),
                        Container(
                          height: 1,
                          color:
                              focus == 3 ? MyColors.cFF4233 : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 20),
                        ),
                        Row(
                          children: [
                            Checkbox(
                              value: haveRead,
                              onChanged: (v) {
                                setState(() {
                                  haveRead = v;
                                });
                              },
                              activeColor: MyColors.cFF4233,
                            ),
                            RichText(
                              text: TextSpan(
                                  text: '我已阅读并同意',
                                  style: TextStyle(
                                      color: MyColors.c999999, fontSize: 12),
                                  children: [
                                    TextSpan(
                                        text: '《使用协议》',
                                        style: TextStyle(
                                            color: MyColors.cFF4233,
                                            fontSize: 12),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {
                                            MyTools().toPage(
                                                context,
                                                PrivacyPolicyPage('使用协议'),
                                                (then) {});
                                          }),
                                    TextSpan(
                                      text: '和',
                                      style: TextStyle(
                                          color: MyColors.c999999,
                                          fontSize: 12),
                                    ),
                                    TextSpan(
                                        text: '《隐私政策》',
                                        style: TextStyle(
                                            color: MyColors.cFF4233,
                                            fontSize: 12),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {
                                            MyTools().toPage(
                                                context,
                                                PrivacyPolicyPage('隐私政策'),
                                                (then) {});
                                          }),
                                  ]),
                            ),
                          ],
                          mainAxisAlignment: MainAxisAlignment.end,
                        ),
                        GestureDetector(
                          onTap: () {
                            if (_phoneNum.text.isEmpty ||
                                _phoneNum.text.length != 11) {
                              showToast('请填写正确的手机号');
                              return;
                            }
                            if (_pw.text.isEmpty || _pw.text.length < 6) {
                              showToast('请填写正确的密码（由数字和字母组合的至少6位的组合）');
                              return;
                            }
                            if (_nickname.text.isEmpty) {
                              showToast('请填写昵称');
                              return;
                            }
                            if (_verificationCode.text.isEmpty) {
                              showToast('请填写验证码');
                              return;
                            }
                            if (_image == null) {
                              showToast('请设置头像');
                              return;
                            }
                            if (!haveRead) {
                              showToast('请阅读并同意《隐私政策》');
                              return;
                            }
                            verificationCode();
                          },
                          behavior: HitTestBehavior.translucent,
                          child: Container(
                            margin: EdgeInsets.only(top: 20),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(20),
                              ),
                              gradient: LinearGradient(
                                colors: MyColors.lg,
                              ),
                            ),
                            height: 44,
                            child: Text(
                              '注 册',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 17),
                            ),
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(bottom: 2),
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerRight,
                          child: GestureDetector(
                            onTap: () {
                              MyTools().toPage(context, LoginPage(), (then) {},
                                  noBack: true);
                            },
                            behavior: HitTestBehavior.translucent,
                            child: Container(
                              child: Text(
                                '已有账号，去登录',
                                style: TextStyle(
                                    color: MyColors.cFF4233, fontSize: 13),
                              ),
                              padding: EdgeInsets.all(8),
                              margin: EdgeInsets.only(top: 20),
                            ),
                          ),
                        ),
                      ],
                      crossAxisAlignment: CrossAxisAlignment.start,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  void uploadAvatar() {
    upload(_image, (r, hasError) {
      if (!hasError) {
        UploadImageBeanEntity data =
            UploadImageBeanEntity().fromJson(json.decode(r.data.toString()));
        registered(data);
      }
    }, (error) {});
  }

  void registered(UploadImageBeanEntity data) {
    registeredAccountNumber({
      'mobile': _phoneNum.text,
      'name': _nickname.text,
      'password': MyTools.base64Encode(_pw.text),
      'picture': data.data[0].path,
    }, (re, hasError) {
      if (!hasError) {
        // showToast('注册成功');
        // MyTools().toPage(
        //     context, LoginPage(), (then) {},
        //     noBack: true);
        _timer.cancel();
        loginAccount({
          'user': _phoneNum.text,
          'password': MyTools.base64Encode(_pw.text),
          'version': MyCookie().packageInfo.version,
          'phone': Platform.isAndroid ? 'Android' : 'IOS'
        }, (r, hE) {
          if (!hE) {
            LoginInformationBeanEntity entity = LoginInformationBeanEntity()
                .fromJson(json.decode(r.data.toString()));
            MyCookie().saveLoginInformationBeanEntity(entity);
            MyDio().initDio();
            MyTools().toPage(context, RootPage(), (then) {}, noBack: true);
          }
        }, (e) {});
      }
    }, (error) {});
  }

  int countdown = 60;
  void sendTheVerificationCode() {
    if(_phoneNum.text.isEmpty||_phoneNum.text.length!=11){
      showToast('请输入正确的手机号');
      return;
    }
    MyDio().post(MyApis.getApi('sendCode'), {
      'mobile':_phoneNum.text
    }, (response, hasError) {
      if(!hasError){

      }
    }, (error) {
      showToast('发送失败');
      countdown = 2;
    });

    setState(() {
      setState(() {
        verificationCodeText = '$countdown s';
        countdown--;
      });
    });
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if(countdown==0){
        timer.cancel();
        setState(() {
          countdown = 60;
          verificationCodeText = '发送验证码';
        });
        return;
      }
      setState(() {
        verificationCodeText = '$countdown s';
        countdown--;
      });
    });
  }

  void verificationCode() {
    MyDio().post(MyApis.getApi('verifyCode'), {
      'mobile':_phoneNum.text,
      'code':int.parse(_verificationCode.text),
    }, (response, hasError) {
      if(!hasError){
        uploadAvatar();
      }
    }, (error) {
      showToast('验证码错误');
      return;
    });
  }
}

class PrivacyPolicyPage extends StatefulWidget {
  String type;

  PrivacyPolicyPage(this.type);

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

class _PrivacyPolicyPageState extends State<PrivacyPolicyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          MyViews().myAppBar(widget.type, context, []),
          Expanded(
              child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                  widget.type == '使用协议' ? serviceAgreement : privacyPolicy),
            ),
          ))
        ],
      ),
    );
  }
}