基础库
 
 
 
 
 

618 lines
20 KiB

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/gestures.dart';
  3. import 'package:flutter/material.dart';
  4. import 'package:cached_network_image/cached_network_image.dart';
  5. import 'package:flutter_bloc/flutter_bloc.dart';
  6. import 'package:provider/provider.dart';
  7. import 'package:zhiying_comm/pages/login_page/invite/login_invite_page.dart';
  8. import 'package:zhiying_comm/pages/login_page/model/login_model.dart';
  9. import 'package:zhiying_comm/zhiying_comm.dart';
  10. import 'bloc/bloc.dart';
  11. import 'bloc/login_account_repository.dart';
  12. import 'login_account_sk.dart';
  13. import 'widget/slide_verify_widget.dart';
  14. import 'package:zhiying_comm/util/empty_util.dart';
  15. import 'package:fluttertoast/fluttertoast.dart';
  16. import 'widget/vcode_widget.dart';
  17. ///
  18. /// 账号登陆(手机验证码,密码)
  19. ///
  20. class LoginAccountPage extends StatelessWidget {
  21. final Map<String, dynamic> model;
  22. const LoginAccountPage(this.model, {Key key}) : super(key: key);
  23. @override
  24. Widget build(BuildContext context) {
  25. return Scaffold(
  26. resizeToAvoidBottomInset: false,
  27. backgroundColor: HexColor.fromHex('#FFFFFF'),
  28. body: BlocProvider<LoginAccountBloc>(
  29. create: (_) => LoginAccountBloc(repository: LoginAccountRepository())..add(LoginAccountInitEvent()),
  30. child: LoginAccountPageContianer(),
  31. ),
  32. );
  33. }
  34. }
  35. /// 啦啦啦
  36. class LoginAccountPageContianer extends StatefulWidget {
  37. @override
  38. _LoginAccountPageContianerState createState() => _LoginAccountPageContianerState();
  39. }
  40. ///
  41. /// 主体逻辑
  42. ///
  43. class _LoginAccountPageContianerState extends State<LoginAccountPageContianer> implements OnClickListener {
  44. TextEditingController _phoneEdController;
  45. TextEditingController _vcodeEdController;
  46. TextEditingController _passEdController;
  47. FocusNode _phoneFN;
  48. FocusNode _passFN;
  49. FocusNode _vcodeFN;
  50. // 是否登录中
  51. bool _isLogging = false;
  52. /// 跳转到邀请码页面
  53. void _openInvitePage() {
  54. print('跳转到邀请码页面');
  55. RouterUtil.hideKeyboard(context);
  56. Navigator.push(
  57. context,
  58. CupertinoPageRoute(
  59. // builder: (_) => PageFactory.create('login_invite', null)
  60. builder: (_) => LoginInvitePage()));
  61. }
  62. /// 登陆成功页面
  63. void _openLoginSuccessPage() {
  64. RouterUtil.hideKeyboard(context);
  65. Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context) => PageFactory.create('homePage', null)), (Route<dynamic> route) => false,);
  66. }
  67. /// 返回上一页
  68. void _openPop() {
  69. if (Navigator.canPop(context)) {
  70. Navigator.pop(context);
  71. }
  72. }
  73. /// 登陆
  74. void _submitOnClick() {
  75. print('登陆');
  76. if (_checkParam(true) && !_isLogging) {
  77. setState(() {
  78. _isLogging = true;
  79. });
  80. if (_useVcode) {
  81. BlocProvider.of<LoginAccountBloc>(context).add(LoginAccountTypeVcodeEvent(mobile: _phoneEdController?.text?.toString()?.trim() ?? '', captcha: _vcodeEdController?.text?.toString()?.trim() ?? ''));
  82. } else {
  83. BlocProvider.of<LoginAccountBloc>(context).add(LoginAccountTypePasswordEvent(username: _phoneEdController?.text?.toString()?.trim() ?? '', password: _passEdController?.text?.toString()?.trim() ?? ''));
  84. }
  85. }else{
  86. Logger.log('参数有误 或者 正在登录中。。。');
  87. }
  88. }
  89. /// 切换登陆方式
  90. void _changeLoginTypeOnClick() {
  91. print('切换登陆');
  92. _passFN?.unfocus();
  93. _vcodeFN?.unfocus();
  94. _phoneFN?.unfocus();
  95. setState(() {
  96. _useVcode = !_useVcode;
  97. });
  98. // 清除缓存
  99. if (_useVcode) {
  100. _passEdController?.clear();
  101. } else {
  102. _vcodeEdController?.clear();
  103. }
  104. }
  105. /// 同意协议
  106. void _agreeOnClick() {
  107. print('同意协议');
  108. setState(() {
  109. _acceptAgreement = !_acceptAgreement;
  110. });
  111. _checkParam(false);
  112. }
  113. /// 打开协议
  114. void _openAgreement(String url) {
  115. if (!EmptyUtil.isEmpty(url)) {
  116. print('打开协议$url');
  117. }
  118. }
  119. /// 输入框监听
  120. void _onChange(string) {
  121. print('$string');
  122. _checkParam(false);
  123. }
  124. /// 校验登陆参数
  125. bool _checkParam(bool needToast) {
  126. // 验证码
  127. if (_useVcode) {
  128. String phone = _phoneEdController?.text?.toString()?.trim() ?? null;
  129. String vcode = _vcodeEdController?.text?.toString()?.trim() ?? null;
  130. if (EmptyUtil.isEmpty(phone)) {
  131. if (needToast) Fluttertoast.showToast(msg: '手机号不能为空!');
  132. return false;
  133. }
  134. if (phone.length != 11) {
  135. if (needToast) Fluttertoast.showToast(msg: '手机号格式有误!');
  136. return false;
  137. }
  138. if (EmptyUtil.isEmpty(vcode)) {
  139. if (needToast) Fluttertoast.showToast(msg: '验证码不能为空!');
  140. return false;
  141. }
  142. if (vcode.length < 4) {
  143. if (needToast) Fluttertoast.showToast(msg: '验证码号格式有误!');
  144. return false;
  145. }
  146. } else {
  147. String phone = _phoneEdController?.text?.toString()?.trim() ?? null;
  148. String pass = _passEdController?.text?.toString()?.trim() ?? null;
  149. if (EmptyUtil.isEmpty(phone)) {
  150. if (needToast) Fluttertoast.showToast(msg: '手机号不能为空!');
  151. return false;
  152. }
  153. if (phone.length != 11) {
  154. if (needToast) Fluttertoast.showToast(msg: '手机号格式有误!');
  155. return false;
  156. }
  157. if (EmptyUtil.isEmpty(pass)) {
  158. if (needToast) Fluttertoast.showToast(msg: '验证码不能为空!');
  159. return false;
  160. }
  161. if (pass.length < 4) {
  162. if (needToast) Fluttertoast.showToast(msg: '验证码号格式有误!');
  163. return false;
  164. }
  165. }
  166. if (!_acceptAgreement) {
  167. if (needToast) Fluttertoast.showToast(msg: '请同意用户协议与隐私政策');
  168. return false;
  169. }
  170. setState(() {
  171. _canSubmit = true;
  172. });
  173. return true;
  174. }
  175. /// 检测手机号是否合法
  176. bool _checkPhoneNumParam(bool needToast) {
  177. String phone = _phoneEdController?.text?.toString()?.trim() ?? null;
  178. if (EmptyUtil.isEmpty(phone)) {
  179. if (needToast) Fluttertoast.showToast(msg: '手机号不能为空!');
  180. return false;
  181. }
  182. if (phone.length != 11) {
  183. if (needToast) Fluttertoast.showToast(msg: '手机号格式有误!');
  184. return false;
  185. }
  186. return true;
  187. }
  188. /// 是否使用验证码登陆 默认使用
  189. bool _useVcode = true;
  190. /// 是否可以登陆
  191. bool _canSubmit = false;
  192. /// 是否同意协议
  193. bool _acceptAgreement = true;
  194. /// 是否显示第三方验证码
  195. bool _showOtherVcode = false;
  196. @override
  197. void initState() {
  198. _phoneEdController = TextEditingController();
  199. _passEdController = TextEditingController();
  200. _vcodeEdController = TextEditingController();
  201. _vcodeFN = FocusNode();
  202. _passFN = FocusNode();
  203. _phoneFN = FocusNode();
  204. super.initState();
  205. }
  206. @override
  207. void dispose() {
  208. _phoneEdController?.dispose();
  209. _passEdController?.dispose();
  210. _vcodeEdController?.dispose();
  211. _phoneFN?.unfocus();
  212. _passFN?.unfocus();
  213. _vcodeFN?.unfocus();
  214. _phoneFN?.dispose();
  215. _passFN?.dispose();
  216. _vcodeFN?.dispose();
  217. super.dispose();
  218. }
  219. @override
  220. bool onVcodeClick() {
  221. /// 获取验证码
  222. if (_checkPhoneNumParam(true)) {
  223. BlocProvider.of<LoginAccountBloc>(context).add(LoginAccountGetVcodeEvent(mobile: _phoneEdController?.text?.toString()?.trim() ?? ''));
  224. return true;
  225. }
  226. return false;
  227. }
  228. @override
  229. Widget build(BuildContext context) {
  230. return BlocConsumer<LoginAccountBloc, LoginAccountState>(
  231. listener: (context, state) {
  232. if (state is LoginAccountLoginSuccessState) {}
  233. },
  234. buildWhen: (prev, current) {
  235. // 登陆失败
  236. if (current is LoginAccountLoginErrorState) {
  237. // Fluttertoast.showToast(msg: '登陆失败');
  238. setState(() {
  239. _isLogging = false;
  240. });
  241. return false;
  242. }
  243. // 登陆成功
  244. if (current is LoginAccountLoginSuccessState) {
  245. /// 缓存登陆数据
  246. Provider.of<UserInfoNotifier>(context, listen: false)?.setUserInfo(current.model);
  247. if (current?.model?.registerInviteCodeEnable != '1') {
  248. Fluttertoast.showToast(msg: '登录成功~');
  249. /// 打开也买
  250. _openLoginSuccessPage();
  251. } else {
  252. /// 打开邀请页面
  253. _openInvitePage();
  254. }
  255. return false;
  256. }
  257. // 获取验证码成功
  258. if (current is LoginAccountGetVcodeSuccessState) {
  259. Fluttertoast.showToast(msg: '验证码下发成功');
  260. return false;
  261. }
  262. // 获取验证码失败
  263. if (current is LoginAccountGetVcodeErrorState) {
  264. Fluttertoast.showToast(msg: '验证码获取失败~');
  265. return false;
  266. }
  267. return true;
  268. },
  269. builder: (context, state) {
  270. print('state = $state');
  271. if (state is LoginAccountLoadedState) {
  272. return _getMainWidget(state.model);
  273. }
  274. // 返回骨架屏
  275. return LoginAccountSkeleton();
  276. },
  277. );
  278. }
  279. /// 主页面
  280. Widget _getMainWidget(LoginModel model) {
  281. print(model);
  282. return Column(
  283. children: <Widget>[
  284. /// appBar
  285. _getAppBarWidget(model),
  286. /// title
  287. Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 40), child: _getTitleWidget(model)),
  288. /// 手机输入框
  289. Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 30), child: _getPhoneWidget(model)),
  290. /// 验证码
  291. Visibility(visible: _useVcode, child: Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 15), child: _getVcodeWidget(model))),
  292. /// 密码
  293. Visibility(visible: !_useVcode, child: Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 15), child: _getPassInputWidget(model))),
  294. /// 第三方验证码
  295. Visibility(visible: _showOtherVcode, child: Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 15), child: _getOtherVcodeInputWidget(model))),
  296. /// 切换登陆方式tip
  297. Padding(padding: const EdgeInsets.only(top: 15), child: _getChangeTipWidget(model)),
  298. /// 登录按钮
  299. Padding(padding: const EdgeInsets.only(left: 27.5, right: 27.5, top: 30), child: _getSubmiBtnWidget(model)),
  300. /// 协议
  301. Padding(padding: const EdgeInsets.only(top: 15), child: _getProtoclWidget(model)),
  302. /// 底部提示tip
  303. Visibility(visible: _useVcode, child: Expanded(child: Align(alignment: Alignment.bottomCenter, child: _getBottomTipWidget(model))))
  304. ],
  305. );
  306. }
  307. /// appBar
  308. Widget _getAppBarWidget(LoginModel model) {
  309. return AppBar(
  310. backgroundColor: HexColor.fromHex('#FFFFFF'),
  311. brightness: Brightness.light,
  312. elevation: 0,
  313. title: Text(
  314. model?.mobile?.appBarTitle ?? '登录',
  315. style: TextStyle(color: HexColor.fromHex(model?.mobile?.appBarTitleColor ?? '#333333')),
  316. ),
  317. centerTitle: true,
  318. leading: IconButton(
  319. icon: Icon(
  320. Icons.arrow_back_ios,
  321. size: 22,
  322. color: HexColor.fromHex('#333333'),
  323. ),
  324. onPressed: () => _openPop(),
  325. ),
  326. );
  327. }
  328. /// title
  329. Widget _getTitleWidget(LoginModel model) {
  330. return Align(
  331. alignment: Alignment.centerLeft,
  332. child: Text(
  333. model?.mobile?.title ?? '您好,欢迎登录',
  334. style: TextStyle(color: HexColor.fromHex(model?.mobile?.titleColor ?? '#333333'), fontSize: 25),
  335. ));
  336. }
  337. /// 手机输入框
  338. Widget _getPhoneWidget(LoginModel model) {
  339. return _getCustomInputWidget(
  340. hint: model?.mobile?.inputMobileHintText ?? '请输入您的手机号',
  341. controller: _phoneEdController,
  342. focusNode: _phoneFN,
  343. onChanged: _onChange,
  344. hintColor: model?.mobile?.inputHintColor ?? '#999999',
  345. bgColor: model?.mobile?.inputBgColor ?? '#F7F7F7',
  346. textColor: model?.mobile?.inputTextColor ?? '#333333',
  347. iconUrl: model?.mobile?.inputMobileIcon ?? '');
  348. }
  349. /// 验证码输入框
  350. Widget _getVcodeWidget(LoginModel model) {
  351. return Container(
  352. height: 42,
  353. child: Stack(
  354. children: <Widget>[
  355. _getCustomInputWidget(
  356. controller: _vcodeEdController,
  357. focusNode: _vcodeFN,
  358. onChanged: _onChange,
  359. hintColor: model?.mobile?.inputHintColor ?? '#999999',
  360. hint: model?.mobile?.inputVcodeHintText ?? '请输入您的验证码',
  361. bgColor: model?.mobile?.inputBgColor ?? '#F7F7F7',
  362. textColor: model?.mobile?.inputTextColor ?? '#333333',
  363. iconUrl: model?.mobile?.inputVcodeIcon ?? ''),
  364. Align(alignment: Alignment.centerRight, child: _getVcodeButtonWidget(model)),
  365. ],
  366. ),
  367. );
  368. }
  369. /// 验证码按钮
  370. Widget _getVcodeButtonWidget(LoginModel model) {
  371. return VcodeWidget(
  372. onCallBack: this,
  373. awaitTime: int.parse(model?.mobile?.vcodeTime ?? '60'),
  374. btnAwaitText: '秒',
  375. btnText: '获取验证码',
  376. btnTextColor: model?.mobile?.btnVcodeTextColor ?? '#FFFFFF',
  377. color: model?.mobile?.btnVcodeBgColor ?? '#FF4343',
  378. disabledColor: model?.mobile?.btnVcodeBanBgColor ?? '#DDDDDD',
  379. disabledTextColor: model?.mobile?.btnVcodeBanTextColor ?? '#FFFFFF');
  380. }
  381. /// 第三方验证码输入框
  382. Widget _getOtherVcodeInputWidget(var model) {
  383. return Container(
  384. width: 240,
  385. height: 42,
  386. alignment: Alignment.centerLeft,
  387. child: SlideVerifyWidget(
  388. width: 240,
  389. ),
  390. // child: Row(
  391. // children: <Widget>[
  392. // // 输入框
  393. // Expanded(
  394. // child: _getCustomInputWidget(hint: '请输入右方验证码', hintColor: '#999999', textColor: '#333333', bgColor: '#F7F7F7', iconUrl: null, )
  395. // ),
  396. // // 第三方验证码
  397. // Container(
  398. // margin: const EdgeInsets.only(left: 5),
  399. // width: 100,
  400. // height: double.infinity,
  401. // decoration: BoxDecoration(
  402. // borderRadius: BorderRadius.circular(8),
  403. // color: Colors.red
  404. // ),
  405. // ),
  406. //
  407. // ],
  408. // ),
  409. );
  410. }
  411. /// 密码输入框
  412. Widget _getPassInputWidget(LoginModel model) {
  413. return Container(
  414. height: 42,
  415. child: _getCustomInputWidget(
  416. obscureText: true,
  417. keyboardType: TextInputType.text,
  418. controller: _passEdController,
  419. focusNode: _passFN,
  420. onChanged: _onChange,
  421. hint: model?.mobile?.inputPassHintText ?? '请输入您的密码',
  422. iconUrl: model?.mobile?.inputPassIcon ?? '',
  423. hintColor: model?.mobile?.inputHintColor ?? '#999999',
  424. textColor: model?.mobile?.inputTextColor ?? '#333333',
  425. bgColor: model?.mobile?.inputBgColor ?? '#F7F7F7'),
  426. );
  427. }
  428. /// 切换登陆方式tip
  429. Widget _getChangeTipWidget(LoginModel model) {
  430. return GestureDetector(
  431. behavior: HitTestBehavior.opaque,
  432. onTap: () => _changeLoginTypeOnClick(),
  433. child: Text(
  434. _useVcode ? model?.mobile?.textUsePassTip ?? '使用密码登录' : model?.mobile?.textUseVcodeTip ?? '使用验证码登陆',
  435. style: TextStyle(fontSize: 12, color: HexColor.fromHex(_useVcode ? model?.mobile?.textUsePassTipColor ?? '#999999' : model?.mobile?.textUseVcodeTipColor ?? '#999999')),
  436. ),
  437. );
  438. }
  439. /// 登陆按钮
  440. Widget _getSubmiBtnWidget(LoginModel model) {
  441. return Material(
  442. child: Container(
  443. height: 52,
  444. width: double.infinity,
  445. color: Colors.white,
  446. child: RaisedButton(
  447. child: Text(
  448. _isLogging ? '登录中...' : model?.mobile?.btnLoginText ?? '立即登录',
  449. style: TextStyle(fontSize: 15),
  450. ),
  451. textColor: HexColor.fromHex(model?.mobile?.btnLoginTextColor ?? '#FFFFFF'),
  452. color: HexColor.fromHex(model?.mobile?.btnLoginBgColor ?? '#FF3939'),
  453. disabledColor: HexColor.fromHex(model?.mobile?.btnLoginBanBgColor ?? '#F5F5F5'),
  454. disabledTextColor: HexColor.fromHex(model?.mobile?.btnLoginBanTextColor ?? '#999999'),
  455. elevation: 5,
  456. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(52 / 2)),
  457. onPressed: _canSubmit ? _submitOnClick : null,
  458. ),
  459. ),
  460. );
  461. }
  462. /// 协议
  463. Widget _getProtoclWidget(LoginModel model) {
  464. // return Text('同意《嗨如意用户协议》 及《营私政策》', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#C0C0C0')));
  465. return Row(
  466. mainAxisAlignment: MainAxisAlignment.center,
  467. children: <Widget>[
  468. /// 图标
  469. GestureDetector(
  470. behavior: HitTestBehavior.opaque,
  471. onTap: () => _agreeOnClick(),
  472. child: Padding(
  473. padding: const EdgeInsets.all(8.0),
  474. child: CachedNetworkImage(
  475. imageUrl: _acceptAgreement ? model?.mobile?.protocolSelectIcon ?? '' : model?.mobile?.protocolUnselectIcon ?? '',
  476. width: 12,
  477. ))),
  478. /// 协议文字
  479. RichText(
  480. text: TextSpan(
  481. text: '',
  482. children: model.mobile.protocol.map((item) {
  483. return TextSpan(
  484. text: item?.text,
  485. style: TextStyle(color: HexColor.fromHex(item?.textColor), fontSize: 10),
  486. recognizer: TapGestureRecognizer()
  487. ..onTap = () {
  488. _openAgreement(item.url);
  489. });
  490. }).toList()),
  491. )
  492. ],
  493. );
  494. }
  495. /// 底部提示tip
  496. Widget _getBottomTipWidget(LoginModel model) {
  497. return Padding(
  498. padding: const EdgeInsets.only(bottom: 25),
  499. child: Text(
  500. model?.mobile?.textBottomTip ?? '未注册过的手机将自动注册',
  501. style: TextStyle(fontSize: 11, color: HexColor.fromHex(model?.mobile?.textBottomTipColor ?? '#999999')),
  502. ),
  503. );
  504. }
  505. /// 自定义输入框
  506. Widget _getCustomInputWidget({
  507. String hint,
  508. String hintColor,
  509. String bgColor,
  510. String textColor,
  511. String iconUrl,
  512. TextEditingController controller,
  513. ValueChanged<String> onChanged,
  514. FocusNode focusNode,
  515. TextInputType keyboardType,
  516. bool obscureText = false,
  517. }) {
  518. var border = OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: HexColor.fromHex(bgColor), width: 0));
  519. return Container(
  520. height: 42,
  521. padding: const EdgeInsets.symmetric(horizontal: 15),
  522. decoration: BoxDecoration(
  523. color: HexColor.fromHex(bgColor),
  524. borderRadius: BorderRadius.circular(8),
  525. ),
  526. child: Row(
  527. mainAxisAlignment: MainAxisAlignment.start,
  528. crossAxisAlignment: CrossAxisAlignment.center,
  529. children: <Widget>[
  530. CachedNetworkImage(
  531. imageUrl: iconUrl ?? '',
  532. width: 10,
  533. ),
  534. Expanded(
  535. child: TextField(
  536. obscureText: obscureText ?? false,
  537. controller: controller,
  538. focusNode: focusNode,
  539. onChanged: onChanged,
  540. expands: false,
  541. style: TextStyle(color: HexColor.fromHex(textColor)),
  542. maxLines: 1,
  543. keyboardType: keyboardType ?? TextInputType.number,
  544. decoration: InputDecoration(
  545. contentPadding: EdgeInsets.only(top: 30, left: 7.5),
  546. hintText: hint,
  547. hintStyle: TextStyle(fontSize: 13, color: HexColor.fromHex(hintColor)),
  548. hintMaxLines: 1,
  549. filled: true,
  550. fillColor: Colors.transparent,
  551. border: border,
  552. focusedBorder: border,
  553. enabledBorder: border,
  554. disabledBorder: border,
  555. errorBorder: border,
  556. focusedErrorBorder: border,
  557. ),
  558. ),
  559. ),
  560. ],
  561. ),
  562. );
  563. }
  564. }