You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

843 lines
29 KiB

import 'dart:async';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/user_info.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../login/captcha/block_puzzle_captcha.dart';
import '../view_widget/border_text.dart';
class BindingPhonePage extends StatefulWidget {
final Map<String, dynamic> arguments;
BindingPhonePage({this.arguments});
@override
State<StatefulWidget> createState() {
return _BindingPhonePage();
}
}
class _BindingPhonePage extends State<BindingPhonePage> {
ApiService apiService;
String area = "+86";
var _controllerPhone = TextEditingController();
var _controllerNewPhone = TextEditingController();
var _controllerCode = TextEditingController();
var _controllerNewCode = TextEditingController();
Color statusCodeTextColor = Color(0xFF353535);
var verifyStatus = 0;
var mobileStatus = 0;
var btnText = "获取验证码";
var _sendCodeStatus = 0;
Timer _timer;
UserInfo userInfo;
int phoneState = 1;
String mobile;
String newMobile;
@override
void initState() {
super.initState();
userInfo = widget.arguments['userInfo'];
}
@override
void dispose() {
if (_timer != null && _timer.isActive) _timer.cancel();
super.dispose();
}
///修改绑定手机号码
modifyPhoneCode(int state) async {
var mobile = _controllerPhone.text;
if (mobile == ""&& phoneState == 1) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
var newMobile = _controllerNewPhone.text;
if (newMobile == ""&& phoneState == 2) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
var code = _controllerCode.text;
if (code == "" && phoneState == 1) {
SmartDialog.showToast(S.of(context).qingshuruyanzhengma, alignment: Alignment.center);
return;
}
var newCode = _controllerNewCode.text;
if (newCode == "" && phoneState == 2) {
SmartDialog.showToast(S.of(context).qingshuruyanzhengma, alignment: Alignment.center);
return;
}
if (code.length != 6 && phoneState==1) {
SmartDialog.showToast(S.of(context).code_error, alignment: Alignment.center);
return;
}
if (newCode.length != 6 && phoneState == 2) {
SmartDialog.showToast(S.of(context).code_error, alignment: Alignment.center);
return;
}
if (apiService == null) {
SharedPreferences value = await SharedPreferences.getInstance();
apiService = ApiService(Dio(),
context: context, token: value.getString("token"), showLoading: false);
}
BaseData baseData = await apiService.changePhone({
"areaCode": area,
"capcha": phoneState == 1 ? code:newCode,
"mobile1": mobile,
"mobile2": newMobile,
"state": state,
}).catchError((error) {});
if (baseData != null && baseData.isSuccess) {
if(state == 1){
_timer.cancel();
btnText = "获取验证码";
_sendCodeStatus = 0;
phoneState = 2;
}else if(state == 2){
phoneState = 3;}
setState(() {});
} else {
setState(() {});
SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
}
}
///验证验证码
verificationCode() async {
if (apiService == null) {
SharedPreferences value = await SharedPreferences.getInstance();
apiService = ApiService(Dio(),
context: context, token: value.getString("token"), showLoading: false);
}
BaseData baseData = await apiService.changeSendVerify(mobile).catchError((error) {});
if (baseData != null && baseData.isSuccess) {
_sendCodeStatus = 1;
countdown();
SmartDialog.showToast(baseData.data ?? false, alignment: Alignment.center);
} else {
SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
}
}
countdown() {
if (_timer != null && _timer.isActive) return;
int countdown = 60;
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
countdown--;
if (countdown == 0) {
btnText = "重新发送";
_sendCodeStatus = 0;
_timer.cancel();
} else {
btnText = "${countdown}s";
}
setState(() {});
});
}
bool isPhone(mobile) {
RegExp exp = RegExp(
r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
return exp.hasMatch(mobile);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: Colors.white,
leading: GestureDetector(
child: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
onTap: () {
Navigator.of(context).pop();
}),
title: Text(
S.of(context).genggaibangdingshoujihao,
style: TextStyle(
fontWeight: MyFontWeight.regular,
fontSize: 17.sp,
color: Color(0xFF0D0D0D),
),
),
centerTitle: true,
elevation: 0.0,
),
body: Container(
margin: EdgeInsets.only(top: 12.h),
padding: EdgeInsets.symmetric(horizontal:16.w),
color: Colors.white,
width: double.infinity,
child:Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
topSequence(),
if(phoneState != 3)
Align(alignment: Alignment.center,
child: Text(
phoneState == 1 ?"现手机号验证":"修改成新号码",
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF353535),
fontSize: 18.sp,
letterSpacing:1,
fontWeight: MyFontWeight.bold,
),)),
if(phoneState == 2)
Padding(padding:EdgeInsets.only(top: 14.h),
child: Text(
"当前手机号为${area + " ${userInfo?.phone ?? ""}"} ",
style: TextStyle(
color: Color(0xFFA29E9E),
fontSize: 14.sp,
letterSpacing:0.5,
fontWeight: MyFontWeight.medium,
),)),
if(phoneState == 1)
inputPhone(),
if(phoneState == 2)
newInputPhone(),
if(phoneState == 3)
bindingSuccess(),
],
),
),
));
}
///头部手机号流程顺序
Widget topSequence(){
return Container(
margin:EdgeInsets.only(top:35.h,bottom: 31.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(100.w),
color: Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
child: Text(
"1",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14.sp,
fontWeight: MyFontWeight.regular,
),),
),
Container(
height: 1.h,
width: 74.w,
color: Color(0xFF34995E),
margin: EdgeInsets.symmetric(horizontal:8.w),
),
Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(100.w),
color: phoneState == 1?Color(0xFFB7D3C3) : Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
child: Text(
"2",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14.sp,
fontWeight: MyFontWeight.regular,
),),
),
Container(
height: 1.h,
width: 74.w,
color: Color(0xFF34995E),
margin: EdgeInsets.symmetric(horizontal:8.w),
),
Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(100.w),
color: (phoneState !=3)?Color(0xFFB7D3C3) : Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
child: Text(
"3",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14.sp,
fontWeight: MyFontWeight.regular,
),),
)
],
),
);
}
///输入现在的手机号
Widget inputPhone(){
return Container(
margin:EdgeInsets.only(top:phoneState == 1?15.h:12.h,bottom:21.h,),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding:EdgeInsets.only(bottom: 10.h),
child: Text(
"手机号",
style: TextStyle(
color: Color(0xFF181818),
fontSize: 16.sp,
fontWeight: MyFontWeight.bold,
),)),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.of(context)
.pushNamed('/router/phone_address_page')
.then((value) {
if (value != null)
setState(() {
area = value;
});
});
},
child: Text(
area,
style: TextStyle(
fontWeight: MyFontWeight.regular,
fontSize: 16.sp,
color: Color(0xFF1A1A1A),
),
)),
Icon(
Icons.keyboard_arrow_right,
size: 18,
color: Color(0xFF1A1A1A),
),
Container(
height: 30.h,
width: MediaQuery.of(context).size.width - 100.w,
margin: EdgeInsets.only(bottom:Platform.isIOS ?7.h:0),
child: TextField(
style: TextStyle(
height: 1.h,
fontSize: 16.sp,
color: Color(0xFF353535),
),
onChanged: (value) {
if (value != null && value.isNotEmpty) {
if (isPhone(value)) {
mobileStatus = 1;
} else {
mobileStatus = 2;
}
} else {
mobileStatus = 0;
}
setState(() {});
},
controller: _controllerPhone,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
errorBorder: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
hintText: S.of(context).qingshurushoujihao,
// contentPadding: EdgeInsets.only(top: 12, bottom: 12,),
hintStyle: TextStyle(
fontSize: 14.sp,
color: Color(0xFFA29E9E),
),
),
textInputAction: TextInputAction.next,
inputFormatters: [
LengthLimitingTextInputFormatter(11)
],
cursorColor: Colors.grey,
maxLines: 1,
),
),
],
),
Container(
height: 1.h,
width: MediaQuery.of(context).size.width - 80.h,
color: _controllerPhone.text == ""
? Color(0xFFE7E3E3)
: Color(0xFF32A060),
margin: EdgeInsets.only(top: 10.h),
),
SizedBox(
height: 30.h,
),
Padding(padding:EdgeInsets.only(bottom: 10.h),
child: Text(
S.of(context).yanzhengma,
style: TextStyle(
fontWeight: MyFontWeight.bold,
fontSize: 16.sp,
color: Color(0xFF181818),
),
)),
Container(
height: 30.h,
width: MediaQuery.of(context).size.width - 30.h,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextField(
style: TextStyle(
height: 1.h,
fontSize: 16.sp,
color: statusCodeTextColor,
),
onChanged: (value) {
if (value != null &&
value.isNotEmpty) {
if (value.length == 6) {
verifyStatus = 1;
} else {
verifyStatus = 2;
}
} else {
verifyStatus = 0;
}
setState(() {});
},
controller: _controllerCode,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
errorBorder: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
hintText:S.of(context).input_code_hide,
hintStyle: TextStyle(
fontSize: 14.sp,
color: Color(0xFFA29E9E),
),
),
textInputAction: TextInputAction.next,
inputFormatters: [
LengthLimitingTextInputFormatter(6)
],
cursorColor: Colors.grey,
maxLines: 1,
),
flex: 4,
),
Expanded(
child: Container(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: (){
mobile = _controllerPhone.text;
if (mobile == "" && phoneState == 1) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
newMobile = _controllerNewPhone.text;
if (newMobile == "" && phoneState == 2) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
if(mobile != (userInfo?.phone??"")){
SmartDialog.showToast("手机号码不正确",
alignment: Alignment.center);
return ;
}
loadingBlockPuzzle(context);
},
child: BorderText(
text: btnText,
borderColor: Colors.transparent,
borderWidth: 1.w,
radius: 2,
padding: EdgeInsets.only(
left: 6.w,
right: 6.w,
),
fontSize: 14.sp,
fontWeight: MyFontWeight.bold,
textColor: _sendCodeStatus == 0
? Color(0xFF32A060)
: Color(0xFFA29E9E),
),
),
),
flex: 2,
)
],
),
),
Container(
height: 1.h,
width: MediaQuery.of(context).size.width - 10.h,
color: _controllerNewCode.text == ""
? Color(0xFFE7E3E3)
: Color(0xFF32A060),
margin: EdgeInsets.only(top: 10.h),
),
SizedBox(
height: 54.h,
),
Align(alignment: Alignment.center,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: (){
modifyPhoneCode(1);
},
child: Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(23),
color: Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(vertical: 12.h,horizontal:65.w),
child: Text(
S.of(context).queding,
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 16.sp,
fontWeight: MyFontWeight.regular,
),),
),
),),
],
),
);
}
///输入新的手机号
Widget newInputPhone(){
return Container(
margin:EdgeInsets.only(top:15.h,bottom:21.h,),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
///手机号
Padding(padding:EdgeInsets.only(bottom: 10.h),
child: Text(
"手机号",
style: TextStyle(
color: Color(0xFF181818),
fontSize: 16.sp,
fontWeight: MyFontWeight.bold,
),)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.of(context)
.pushNamed('/router/phone_address_page')
.then((value) {
if (value != null)
setState(() {
area = value;
});
});
},
child: Text(
area,
style: TextStyle(
fontWeight: MyFontWeight.regular,
fontSize: 16.sp,
color: Color(0xFF1A1A1A),
),
)),
Icon(
Icons.keyboard_arrow_right,
size: 18,
color: Color(0xFF1A1A1A),
),
Container(
height: 30.h,
width: MediaQuery.of(context).size.width - 100.w,
margin: EdgeInsets.only(bottom:Platform.isIOS ? 10.h:0),
child: TextField(
style: TextStyle(
height: 1.h,
fontSize: 16.sp,
color: Color(0xFF353535),
),
onChanged: (value) {
if (value != null && value.isNotEmpty) {
if (isPhone(value)) {
mobileStatus = 1;
} else {
mobileStatus = 2;
}
} else {
mobileStatus = 0;
}
setState(() {});
},
controller: _controllerNewPhone,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
errorBorder: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
hintText: S.of(context).qingshurushoujihao,
// contentPadding: EdgeInsets.only(top: 12, bottom: 12, left: 12),
hintStyle: TextStyle(
fontSize: 14.sp,
color: Color(0xFFA29E9E),
),
),
textInputAction: TextInputAction.next,
inputFormatters: [
LengthLimitingTextInputFormatter(11)
],
cursorColor: Colors.grey,
maxLines: 1,
),
),
],
),
Container(
height: 1.h,
width: MediaQuery.of(context).size.width - 10.h,
color: _controllerNewPhone.text == ""
? Color(0xFFE7E3E3)
: Color(0xFF32A060),
margin: EdgeInsets.only(top: 10.h),
),
SizedBox(
height: 30.h,
),
///验证码
Padding(padding:EdgeInsets.only(bottom: 10.h),
child: Text(
S.of(context).yanzhengma,
style: TextStyle(
fontWeight: MyFontWeight.bold,
fontSize: 16.sp,
color: Color(0xFF181818),
),
)),
Container(
height: 30.h,
width: MediaQuery.of(context).size.width - 30.h,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextField(
style: TextStyle(
height: 1.h,
fontSize: 16.sp,
color: statusCodeTextColor,
),
onChanged: (value) {
if (value != null &&
value.isNotEmpty) {
if (value.length == 6) {
verifyStatus = 1;
} else {
verifyStatus = 2;
}
} else {
verifyStatus = 0;
}
setState(() {});
},
controller: _controllerNewCode,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
errorBorder: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
hintText:S.of(context).input_code_hide,
hintStyle: TextStyle(
fontSize: 14.sp,
color: Color(0xFFA29E9E),
),
),
textInputAction: TextInputAction.next,
inputFormatters: [
LengthLimitingTextInputFormatter(6)
],
cursorColor: Colors.grey,
maxLines: 1,
),
flex: 4,
),
Expanded(
child: Container(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap:(){
mobile = _controllerPhone.text;
if (mobile == "" && phoneState == 1) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
newMobile = _controllerNewPhone.text;
if (newMobile == "" && phoneState == 2) {
SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
return;
}
loadingBlockPuzzle(context);
},
child: BorderText(
text: btnText,
borderColor: Colors.transparent,
borderWidth: 1.w,
radius: 2,
padding: EdgeInsets.only(
left: 6.w,
right: 6.w,
),
fontSize: 14.sp,
fontWeight: MyFontWeight.bold,
textColor: _sendCodeStatus == 0
? Color(0xFF32A060)
: Color(0xFFA29E9E),
),
),
),
flex: 2,
)
],
),
),
Container(
height: 1.h,
width: MediaQuery.of(context).size.width - 10.h,
color: _controllerNewCode.text == ""
? Color(0xFFE7E3E3)
: Color(0xFF32A060),
margin: EdgeInsets.only(top: 10.h),
),
SizedBox(
height: 54.h,
),
Align(alignment: Alignment.center,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: (){
modifyPhoneCode(2);
},
child: Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(23),
color: Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(vertical: 12.h,horizontal:65.w),
child: Text(
"下一步",
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 16.sp,
fontWeight: MyFontWeight.regular,
),),
),
),),
],
),
);
}
Widget bindingSuccess(){
return Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 31.h),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
"assets/image/icon_order_success.webp",
fit: BoxFit.cover,
width: 76,
height: 76,
),
SizedBox(
height: 16.h,
),
Text(
"新号码绑定成功",
style: TextStyle(
fontWeight: MyFontWeight.semi_bold,
fontSize: 18.sp,
color: Color(0xFF353535),
),
),
SizedBox(
height: 99.h,
),
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(23),
color: Color(0xFF34995E),
),
padding: EdgeInsets.symmetric(vertical: 14.h,horizontal:65.w),
child: Text(
S.of(context).queren,
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 16.sp,
fontWeight: MyFontWeight.regular,
),),
),
)
],
),
);
}
//滑动拼图
loadingBlockPuzzle(BuildContext context,
{barrierDismissible = true}) {
showDialog<Null>(
context: context,
barrierDismissible: barrierDismissible,
builder: (BuildContext context) {
return BlockPuzzleCaptchaPage(
onSuccess: (v) {
verificationCode();
},
onFail: () {
print("onFail");
},
);
},
);
}
}