基础组件库
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

team_recommend_widget.dart 13 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter/services.dart';
  3. import 'package:zhiying_base_widget/pages/team_page/model/team_data_model.dart';
  4. import 'package:zhiying_base_widget/pages/team_page/model/team_style_model.dart';
  5. import 'package:zhiying_base_widget/widgets/team/recommend/bloc/team_recommend_bloc.dart';
  6. import 'package:zhiying_base_widget/widgets/team/recommend/bloc/team_recommend_repository.dart';
  7. import 'package:zhiying_comm/zhiying_comm.dart';
  8. import 'package:cached_network_image/cached_network_image.dart';
  9. import 'package:fluttertoast/fluttertoast.dart';
  10. import 'package:flutter_bloc/flutter_bloc.dart';
  11. ///
  12. /// 我的团队 - 我的推荐人
  13. ///
  14. class TeamRecommendWidget extends StatelessWidget {
  15. TeamStyleModel styleModel;
  16. TeamDataModel dataModel;
  17. TeamRecommendWidget(this.styleModel, this.dataModel);
  18. @override
  19. Widget build(BuildContext context) {
  20. return BlocProvider<TeamRecommendBloc>(
  21. create: (_) => TeamRecommendBloc(TeamRecommendRepository())..add(TeamRecommendInitEvent(dataModel: dataModel)),
  22. child: _TeamRecommendWidgetContainer(styleModel, dataModel),
  23. );
  24. }
  25. }
  26. class _TeamRecommendWidgetContainer extends StatefulWidget {
  27. TeamStyleModel styleModel;
  28. TeamDataModel dataModel;
  29. _TeamRecommendWidgetContainer(this.styleModel, dataModel, {Key key}) : super(key: key);
  30. @override
  31. __TeamRecommendWidgetState createState() => __TeamRecommendWidgetState();
  32. }
  33. class __TeamRecommendWidgetState extends State<_TeamRecommendWidgetContainer> {
  34. TextEditingController _textEditingController;
  35. FocusNode _focusNode;
  36. TeamStyleModel styleModel;
  37. TeamDataModel dataModel;
  38. /// 按钮点击添加事件
  39. void _onClickListener() {
  40. String text = _textEditingController?.text?.toString()?.trim();
  41. if (!EmptyUtil.isEmpty(text)) {
  42. BlocProvider.of<TeamRecommendBloc>(context).add(TeamRecommendRelateEvent(text));
  43. } else {
  44. Fluttertoast.showToast(msg: '邀请码不能为空~');
  45. }
  46. }
  47. /// 拷贝
  48. void _copyText(String text) {
  49. if(!EmptyUtil.isEmpty(text)) {
  50. Clipboard.setData(ClipboardData(text: text));
  51. Fluttertoast.showToast(msg: '复制成功~');
  52. }else{
  53. Fluttertoast.showToast(msg: '内容不能为空~');
  54. }
  55. }
  56. @override
  57. void initState() {
  58. _textEditingController = TextEditingController();
  59. _focusNode = FocusNode();
  60. super.initState();
  61. }
  62. @override
  63. void dispose() {
  64. _focusNode?.unfocus();
  65. _focusNode?.dispose();
  66. _textEditingController?.dispose();
  67. super.dispose();
  68. }
  69. @override
  70. Widget build(BuildContext context) {
  71. return Container(
  72. margin: const EdgeInsets.only(left: 12.5, right: 12.5, top: 10.5),
  73. child: BlocConsumer<TeamRecommendBloc, TeamRecommendState>(
  74. listener: (context, state) {},
  75. buildWhen: (prove, current) {
  76. if (current is TeamRecommendErrorState) {
  77. return false;
  78. }
  79. return true;
  80. },
  81. builder: (context, state) {
  82. if (state is TeamRecommendLoadedState) {
  83. return _getMainWidget(state?.model);
  84. }
  85. return _getMainWidget(null);
  86. },
  87. ),
  88. );
  89. }
  90. /// 主体Widget
  91. Widget _getMainWidget(TeamDataModel dataModel) {
  92. return Container(
  93. padding: const EdgeInsets.only(left: 10, bottom: 12, right: 10),
  94. decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.white),
  95. child: Column(
  96. crossAxisAlignment: CrossAxisAlignment.start,
  97. children: <Widget>[
  98. /// 左上角的Icon
  99. _getLeftTopWidget(),
  100. const SizedBox(height: 6),
  101. /// 数据视图
  102. Visibility(
  103. visible: !EmptyUtil.isEmpty(dataModel) && !EmptyUtil.isEmpty(dataModel?.referrer_invite_code) && !EmptyUtil.isEmpty(dataModel?.referrer_username),
  104. replacement: _getInputCombWidget(),
  105. child: Padding(padding: const EdgeInsets.only(left: 10), child: _getDataWidget(dataModel)),
  106. ),
  107. ],
  108. ),
  109. );
  110. }
  111. /// 我的推荐人IconWidget(左上角的ICON)
  112. Widget _getLeftTopWidget() {
  113. return Transform.translate(
  114. offset: Offset(0, -4.5),
  115. child: Container(
  116. padding: const EdgeInsets.only(left: 10.5, right: 8, top: 4, bottom: 4.5),
  117. decoration: BoxDecoration(
  118. borderRadius: BorderRadius.circular(4),
  119. gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [
  120. HexColor.fromHex(widget?.styleModel?.headerReferrerTitleBgColor ?? '#FF5E5E'),
  121. HexColor.fromHex(widget?.styleModel?.headerReferrerTitleBgColorT ?? '#FF5252'),
  122. ])),
  123. child: Text(
  124. widget?.styleModel?.headerReferrerTitle ?? '我的推荐人',
  125. style: TextStyle(
  126. color: HexColor.fromHex(widget?.styleModel?.headerReferrerTitleColor ?? '#FFFFFF'),
  127. fontSize: 11,
  128. ),
  129. ),
  130. ));
  131. }
  132. /// 没邀请人的Widget
  133. Widget _getInputCombWidget() {
  134. return Container(
  135. margin: const EdgeInsets.only(left: 2.5, right: 2.5),
  136. width: double.infinity,
  137. child: Column(
  138. mainAxisAlignment: MainAxisAlignment.center,
  139. // crossAxisAlignment: CrossAxisAlignment.center,
  140. children: <Widget>[
  141. /// 输入框
  142. Container(
  143. height: 30,
  144. width: double.infinity,
  145. decoration: BoxDecoration(
  146. borderRadius: BorderRadius.circular(30),
  147. color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerInputBgColor ?? '#F7F7F7'),
  148. ),
  149. padding: const EdgeInsets.only(top: 3.5, bottom: 3.5, right: 3, left: 13),
  150. child: Row(
  151. children: <Widget>[
  152. Expanded(
  153. child: _getInputWidget(),
  154. ),
  155. /// 添加的按钮
  156. _getAddButtomWidget(),
  157. ],
  158. ),
  159. ),
  160. const SizedBox(height: 10.5),
  161. /// 文字提示
  162. Text(
  163. widget?.styleModel?.headerNoReferrerTipText ?? '还没有填写邀请人ID,填写后双方都可以获得奖励',
  164. style: TextStyle(color: HexColor.fromHex(widget?.styleModel.headerNoReferrerTipTextColor ?? '#909090'), fontSize: 11),
  165. ),
  166. ],
  167. ),
  168. );
  169. }
  170. /// 输入框的
  171. Widget _getInputWidget() {
  172. return TextField(
  173. controller: _textEditingController,
  174. focusNode: _focusNode,
  175. onSubmitted: (value) => _onClickListener(),
  176. style: TextStyle(color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerInputColor ?? '#000000'), fontSize: 12, textBaseline: TextBaseline.alphabetic),
  177. decoration: InputDecoration(
  178. border: InputBorder.none,
  179. enabledBorder: InputBorder.none,
  180. disabledBorder: InputBorder.none,
  181. errorBorder: InputBorder.none,
  182. focusedErrorBorder: InputBorder.none,
  183. focusedBorder: InputBorder.none,
  184. hintText: widget?.styleModel?.headerNoReferrerIntputText ?? '输入邀请人ID',
  185. isDense: true,
  186. filled: true,
  187. fillColor: Colors.transparent,
  188. contentPadding: EdgeInsets.zero,
  189. hintStyle: TextStyle(color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerIntputTextColor ?? '#909090'), fontSize: 12, textBaseline: TextBaseline.alphabetic),
  190. ),
  191. );
  192. }
  193. /// 添加的按钮
  194. Widget _getAddButtomWidget() {
  195. return Material(
  196. child: InkWell(
  197. onTap: _onClickListener,
  198. child: Container(
  199. padding: const EdgeInsets.only(left: 21, right: 21, top: 2.5, bottom: 2.5),
  200. decoration: BoxDecoration(borderRadius: BorderRadius.circular(30), color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerBtnBgColor ?? '#F94B47')),
  201. child: Text(
  202. widget?.styleModel?.headerNoReferrerBtnText ?? '添加',
  203. style: TextStyle(
  204. fontSize: 13,
  205. color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerBtnTextColor ?? '#FFFFFF'),
  206. ),
  207. ),
  208. ),
  209. ),
  210. );
  211. }
  212. /// 数据视图
  213. Widget _getDataWidget(TeamDataModel dataModel) {
  214. return Row(
  215. mainAxisAlignment: MainAxisAlignment.start,
  216. children: <Widget>[
  217. /// 头像widget
  218. _getAvatarWidget(dataModel),
  219. const SizedBox(width: 12),
  220. /// 数据
  221. _getDataRightWidget(dataModel),
  222. ],
  223. );
  224. }
  225. /// 头像widget
  226. Widget _getAvatarWidget(TeamDataModel dataModel) {
  227. return ClipRRect(
  228. borderRadius: BorderRadius.circular(55/2),
  229. child: Container(
  230. width: 55,
  231. height: 55,
  232. // color: Colors.red,
  233. child: CircleAvatar(
  234. backgroundImage: CachedNetworkImageProvider(
  235. dataModel?.referrerAvatar ?? '',
  236. ),
  237. ),
  238. ),
  239. );
  240. }
  241. /// 数据右边视图,头像右边的widget
  242. Widget _getDataRightWidget(TeamDataModel dataModel) {
  243. return SizedBox(
  244. height: 55,
  245. child: Column(
  246. crossAxisAlignment: CrossAxisAlignment.start,
  247. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  248. children: <Widget>[
  249. /// 昵称
  250. _getNickNameWidget(dataModel),
  251. /// 手机号
  252. _getPhoneNumberWidget(dataModel),
  253. /// 微信号
  254. _getWXWidget(dataModel)
  255. ],
  256. ),
  257. );
  258. }
  259. /// 昵称
  260. Widget _getNickNameWidget(TeamDataModel dataModel) {
  261. // return RichText(
  262. // text: TextSpan(text: '毛毛虫', style: TextStyle(fontSize: 14, color: HexColor.fromHex('#000000'), fontWeight: FontWeight.bold),
  263. // children: [
  264. // TextSpan(text: '邀请码:', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
  265. // TextSpan(text: '123456', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
  266. // ]
  267. // ),
  268. // );
  269. return Row(
  270. mainAxisAlignment: MainAxisAlignment.start,
  271. crossAxisAlignment: CrossAxisAlignment.center,
  272. children: <Widget>[
  273. /// 昵称
  274. Text(dataModel?.referrer_username ?? '',
  275. maxLines: 1,
  276. overflow: TextOverflow.ellipsis,
  277. style: TextStyle(
  278. fontSize: 14,
  279. color: HexColor.fromHex(widget?.styleModel?.headerReferrerUsernameColor ?? '#000000'),
  280. fontWeight: FontWeight.bold,
  281. )),
  282. const SizedBox(width: 6),
  283. Text(widget?.styleModel?.headerReferrerInvitecodeText ?? '邀请码:',
  284. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerInvitecodeColor ?? '#909090'))),
  285. Text(dataModel?.referrer_invite_code ?? '',
  286. style: TextStyle(
  287. fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerInvitecodeColor ?? '#909090'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  288. ],
  289. );
  290. }
  291. /// 手机号
  292. Widget _getPhoneNumberWidget(TeamDataModel dataModel) {
  293. return Row(
  294. children: <Widget>[
  295. Text(widget?.styleModel?.headerReferrerPhoneText ?? '手机号:',
  296. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerPhoneColor ?? '#AFAFAF'))),
  297. Text(dataModel?.referrer_phone ?? '',
  298. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerPhoneColor ?? '#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  299. const SizedBox(width: 6),
  300. /// 拷贝按钮
  301. _getCustomCopyWidget(dataModel?.referrer_phone),
  302. ],
  303. );
  304. }
  305. /// 微信号
  306. Widget _getWXWidget(TeamDataModel dataModel) {
  307. return Row(
  308. children: <Widget>[
  309. Text(widget?.styleModel?.headerReferrerWxText ?? '微信号:', style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerWxColor ?? '#AFAFAF'))),
  310. Text(dataModel?.referrer_wechat ?? '',
  311. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerWxColor ?? '#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  312. const SizedBox(width: 6),
  313. /// 拷贝按钮
  314. _getCustomCopyWidget(dataModel?.referrer_wechat),
  315. ],
  316. );
  317. }
  318. /// 自定义复制按钮的Widget
  319. Widget _getCustomCopyWidget(String text) {
  320. return GestureDetector(
  321. behavior: HitTestBehavior.opaque,
  322. onTap: () => _copyText(text),
  323. child: Container(
  324. padding: const EdgeInsets.only(left: 4, bottom: 2, top: 2, right: 6),
  325. decoration: BoxDecoration(
  326. color: HexColor.fromHex(widget?.styleModel?.headerReferrerCopyBtnBgColor ?? '#FFF2F2'),
  327. borderRadius: BorderRadius.circular(30),
  328. ),
  329. child: Row(
  330. crossAxisAlignment: CrossAxisAlignment.center,
  331. children: <Widget>[
  332. // Container(width: 11, child: CachedNetworkImage(),),
  333. CachedNetworkImage(
  334. imageUrl: widget?.styleModel?.headerReferrerCopyBtnIcon ?? '',
  335. width: 11,
  336. ),
  337. const SizedBox(width: 4.5),
  338. Text(widget?.styleModel?.headerReferrerCopyBtnText ?? '复制',
  339. style: TextStyle(fontSize: 8, color: HexColor.fromHex(widget?.styleModel?.headerReferrerCopyBtnTextColor ?? '#F94B47')))
  340. ],
  341. ),
  342. ),
  343. );
  344. }
  345. }