基础库
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.
 
 
 
 
 

300 line
8.7 KiB

  1. import 'package:cached_network_image/cached_network_image.dart';
  2. import 'package:flutter/cupertino.dart';
  3. import 'package:flutter/gestures.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:flutter_bloc/flutter_bloc.dart';
  6. import 'package:zhiying_comm/pages/login_page/account/login_account_page.dart';
  7. import 'package:zhiying_comm/util/empty_util.dart';
  8. import 'package:zhiying_comm/zhiying_comm.dart';
  9. import 'bloc/bloc.dart';
  10. import 'bloc/login_repository.dart';
  11. import 'login_page_sk.dart';
  12. import 'model/login_model.dart';
  13. ///
  14. /// 登陆页面
  15. ///
  16. class LoginPage extends StatelessWidget {
  17. const LoginPage({Key key}) : super(key: key);
  18. @override
  19. Widget build(BuildContext context) {
  20. return Scaffold(
  21. backgroundColor: HexColor.fromHex('#FFFFFF'),
  22. body: BlocProvider<LoginBloc>(
  23. create: (_) => LoginBloc(repository: LoginRepository())..add(LoginInitEvent()),
  24. child: LoginPageContainer(),
  25. ),
  26. );
  27. }
  28. }
  29. class LoginPageContainer extends StatefulWidget {
  30. @override
  31. _LoginPageContainerState createState() => _LoginPageContainerState();
  32. }
  33. class _LoginPageContainerState extends State<LoginPageContainer> {
  34. /// 微信登陆
  35. void _loginClick(String type) {
  36. print('登陆$type');
  37. if(type == 'mobile'){
  38. RouterUtil.hideKeyboard(context);
  39. Navigator.push(context, CupertinoPageRoute(
  40. builder: (_) => LoginAccountPage(null)
  41. ));
  42. }
  43. }
  44. /// 返回上一页
  45. void _openPop(){
  46. if(Navigator.canPop(context)){
  47. Navigator.pop(context);
  48. }
  49. }
  50. /// 第三方登陆
  51. void _otherLoginClick(BottomIcons model) {
  52. print('第三方登陆${model.type}');
  53. }
  54. /// 跳到用户协议
  55. void _jumpUserAgreement(String url) {
  56. if(!EmptyUtil.isEmpty(url)) {
  57. print('协议');
  58. RouterUtil.openWebview(url, context);
  59. }
  60. }
  61. /// 展开关闭其它登陆
  62. void _showOrColoseOtherLogin() {
  63. setState(() {
  64. _showOther = !_showOther;
  65. });
  66. }
  67. final _sizedHeight50 = const SizedBox(height: 50);
  68. final _sizedHeight9 = const SizedBox(height: 9);
  69. final _sizedHeight18 = const SizedBox(height: 18);
  70. final _sizedHeight21 = const SizedBox(height: 21);
  71. bool _showOther = true;
  72. @override
  73. Widget build(BuildContext context) {
  74. return BlocConsumer<LoginBloc, LoginState>(
  75. listener: (context, state) {
  76. // Fluttertoast.showToast(msg: '网络异常');
  77. },
  78. buildWhen: (prev, current) {
  79. if (current is LoginErrorState) {
  80. return false;
  81. }
  82. return true;
  83. },
  84. builder: (context, state) {
  85. if (state is LoginCacheState) {
  86. return _getMainWidget(state.model);
  87. }
  88. if (state is LoginLoadedState) {
  89. return _getMainWidget(state.model);
  90. }
  91. return LoginPageSkeleton(); // 骨架屏幕
  92. },
  93. );
  94. }
  95. /// 主视图
  96. Widget _getMainWidget(LoginModel model) {
  97. return Column(
  98. children: <Widget>[
  99. /// 头部
  100. _headWidget(model),
  101. _sizedHeight50,
  102. /// 按钮
  103. _buttonsWidget(model),
  104. _sizedHeight9,
  105. /// 协议
  106. _protocolWidget(model),
  107. /// 其它登陆方式
  108. _otherLoginWidget(model),
  109. ],
  110. );
  111. }
  112. /// 头部Widget
  113. Widget _headWidget(LoginModel model) {
  114. return Container(
  115. height: 228 + MediaQuery.of(context).padding.top,
  116. width: double.infinity,
  117. decoration: BoxDecoration(
  118. image: DecorationImage(
  119. image: CachedNetworkImageProvider(model?.main?.backgroundImg ?? ''),
  120. fit: BoxFit.fill,
  121. ),
  122. ),
  123. child: Stack(
  124. alignment: Alignment.center,
  125. children: <Widget>[
  126. AppBar(
  127. backgroundColor: Colors.transparent,
  128. elevation: 0,
  129. leading: IconButton(
  130. icon: Icon(
  131. Icons.arrow_back_ios,
  132. size: 22,
  133. color: HexColor.fromHex('#333333'),
  134. ),
  135. onPressed: ()=> _openPop(),
  136. ),
  137. ),
  138. Column(
  139. crossAxisAlignment: CrossAxisAlignment.center,
  140. mainAxisAlignment: MainAxisAlignment.center,
  141. children: <Widget>[
  142. /// logo
  143. Container(
  144. margin: EdgeInsets.only(bottom: 12, top: MediaQuery.of(context).padding.top),
  145. decoration: BoxDecoration(
  146. borderRadius: BorderRadius.circular(14),
  147. boxShadow: [
  148. BoxShadow(color: Colors.grey[300], offset: Offset(0.0, 0.0), blurRadius: 10.0, spreadRadius: 1.0),
  149. BoxShadow(color: Colors.grey[300], offset: Offset(0.0, 0.0)),
  150. ],
  151. ),
  152. height: 80,
  153. width: 80,
  154. child: CachedNetworkImage(imageUrl: model?.logoImg ?? ''),
  155. ),
  156. /// logo 名字
  157. CachedNetworkImage( imageUrl: model?.main?.appNameImg ?? '', width: 90,),
  158. ],
  159. ),
  160. ],
  161. ),
  162. );
  163. }
  164. /// 按钮
  165. Widget _buttonsWidget(LoginModel model) {
  166. return Container(
  167. padding: const EdgeInsets.symmetric(horizontal: 27.5),
  168. child: Column(
  169. children: model.main.importanceLogin.map((item) {
  170. return Padding(
  171. padding: const EdgeInsets.only(bottom: 8),
  172. child: _customButton(
  173. height: 40,
  174. text: item?.btnText,
  175. iconUrl: item?.btnMobileIcon ?? '',
  176. textColor: item?.btnTextColor,
  177. bgColor: item?.btnBgColor,
  178. borderColor: item?.btnBorderColor,
  179. onTap: () => _loginClick(item?.type)),
  180. );
  181. }).toList(),
  182. ),
  183. );
  184. }
  185. /// 协议
  186. Widget _protocolWidget(LoginModel model) {
  187. return RichText(
  188. text: TextSpan(text: '', children: model.main.agreements.map((item){
  189. return TextSpan(text: item?.text, style: TextStyle(color: HexColor.fromHex(item?.textColor), fontSize: 10),recognizer: TapGestureRecognizer()..onTap = (){
  190. _jumpUserAgreement(item?.url);
  191. });
  192. }).toList()),
  193. );
  194. }
  195. /// 其它登陆方式
  196. Widget _otherLoginWidget(LoginModel model) {
  197. return Expanded(
  198. child: Column(
  199. mainAxisAlignment: MainAxisAlignment.end,
  200. children: <Widget>[
  201. _getOtherLoginTitle(model),
  202. _sizedHeight18,
  203. Visibility(visible: _showOther, child: _getOtherLoginIcons(model)),
  204. Visibility(visible: _showOther, child: _sizedHeight21),
  205. ],
  206. ),
  207. );
  208. }
  209. /// 其它登陆方式的title
  210. Widget _getOtherLoginTitle(LoginModel model) {
  211. return GestureDetector(
  212. behavior: HitTestBehavior.opaque,
  213. onTap: () => _showOrColoseOtherLogin(),
  214. child: Row(
  215. mainAxisAlignment: MainAxisAlignment.center,
  216. crossAxisAlignment: CrossAxisAlignment.center,
  217. children: <Widget>[
  218. Text('${model?.main?.otherIconsTitle}', style: TextStyle(fontSize: 13, color: HexColor.fromHex(model?.main?.otherIconsTitleColor))),
  219. SizedBox(width: 5.5),
  220. RotatedBox(
  221. quarterTurns: _showOther ? 0 : 2,
  222. child: CachedNetworkImage(imageUrl: model?.main?.otherExpansionIcon ?? '', width: 12),
  223. ),
  224. ],
  225. ),
  226. );
  227. }
  228. /// 其它登陆方式的按钮
  229. Widget _getOtherLoginIcons(LoginModel model) {
  230. return Row(
  231. mainAxisAlignment: MainAxisAlignment.center,
  232. children: model.main.bottomIcons.map((item) {
  233. return GestureDetector(
  234. behavior: HitTestBehavior.opaque,
  235. onTap: () => _otherLoginClick(item),
  236. child: Container(
  237. width: 30,
  238. margin: const EdgeInsets.symmetric(horizontal: 20),
  239. child: CachedNetworkImage(imageUrl: item?.img ?? ''),
  240. ),
  241. );
  242. }).toList(),
  243. );
  244. }
  245. /// 自定义按钮
  246. Widget _customButton({double height, String text, String iconUrl, String textColor, String bgColor, String borderColor, GestureTapCallback onTap}) {
  247. return GestureDetector(
  248. onTap: onTap,
  249. child: Container(
  250. width: double.infinity,
  251. height: height ?? 0,
  252. decoration: BoxDecoration(
  253. border: Border.all(color: HexColor.fromHex(borderColor), width: 0.5),
  254. borderRadius: BorderRadius.circular(height ?? 0 / 2),
  255. color: HexColor.fromHex(bgColor),
  256. ),
  257. child: Row(
  258. mainAxisAlignment: MainAxisAlignment.center,
  259. crossAxisAlignment: CrossAxisAlignment.center,
  260. children: <Widget>[
  261. // icon
  262. CachedNetworkImage(imageUrl: iconUrl, width: 12),
  263. SizedBox(width: 8),
  264. // text
  265. Text(text, style: TextStyle(color: HexColor.fromHex(textColor), fontSize: 15))
  266. ],
  267. ),
  268. ),
  269. );
  270. }
  271. }