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

team_recommend_widget.dart 13 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  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: CachedNetworkImage(
  234. imageUrl: dataModel?.referrerAvatar ?? '',
  235. ),
  236. ),
  237. );
  238. }
  239. /// 数据右边视图,头像右边的widget
  240. Widget _getDataRightWidget(TeamDataModel dataModel) {
  241. return SizedBox(
  242. height: 55,
  243. child: Column(
  244. crossAxisAlignment: CrossAxisAlignment.start,
  245. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  246. children: <Widget>[
  247. /// 昵称
  248. _getNickNameWidget(dataModel),
  249. /// 手机号
  250. _getPhoneNumberWidget(dataModel),
  251. /// 微信号
  252. _getWXWidget(dataModel)
  253. ],
  254. ),
  255. );
  256. }
  257. /// 昵称
  258. Widget _getNickNameWidget(TeamDataModel dataModel) {
  259. // return RichText(
  260. // text: TextSpan(text: '毛毛虫', style: TextStyle(fontSize: 14, color: HexColor.fromHex('#000000'), fontWeight: FontWeight.bold),
  261. // children: [
  262. // TextSpan(text: '邀请码:', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
  263. // TextSpan(text: '123456', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
  264. // ]
  265. // ),
  266. // );
  267. return Row(
  268. mainAxisAlignment: MainAxisAlignment.start,
  269. crossAxisAlignment: CrossAxisAlignment.center,
  270. children: <Widget>[
  271. /// 昵称
  272. Text(dataModel?.referrer_username ?? '',
  273. maxLines: 1,
  274. overflow: TextOverflow.ellipsis,
  275. style: TextStyle(
  276. fontSize: 14,
  277. color: HexColor.fromHex(widget?.styleModel?.headerReferrerUsernameColor ?? '#000000'),
  278. fontWeight: FontWeight.bold,
  279. )),
  280. const SizedBox(width: 6),
  281. Text(widget?.styleModel?.headerReferrerInvitecodeText ?? '邀请码:',
  282. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerInvitecodeColor ?? '#909090'))),
  283. Text(dataModel?.referrer_invite_code ?? '',
  284. style: TextStyle(
  285. fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerInvitecodeColor ?? '#909090'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  286. ],
  287. );
  288. }
  289. /// 手机号
  290. Widget _getPhoneNumberWidget(TeamDataModel dataModel) {
  291. return Row(
  292. children: <Widget>[
  293. Text(widget?.styleModel?.headerReferrerPhoneText ?? '手机号:',
  294. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerPhoneColor ?? '#AFAFAF'))),
  295. Text(dataModel?.referrer_phone ?? '',
  296. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerPhoneColor ?? '#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  297. const SizedBox(width: 6),
  298. /// 拷贝按钮
  299. _getCustomCopyWidget(dataModel?.referrer_phone),
  300. ],
  301. );
  302. }
  303. /// 微信号
  304. Widget _getWXWidget(TeamDataModel dataModel) {
  305. return Row(
  306. children: <Widget>[
  307. Text(widget?.styleModel?.headerReferrerWxText ?? '微信号:', style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerWxColor ?? '#AFAFAF'))),
  308. Text(dataModel?.referrer_wechat ?? '',
  309. style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerReferrerWxColor ?? '#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
  310. const SizedBox(width: 6),
  311. /// 拷贝按钮
  312. _getCustomCopyWidget(dataModel?.referrer_wechat),
  313. ],
  314. );
  315. }
  316. /// 自定义复制按钮的Widget
  317. Widget _getCustomCopyWidget(String text) {
  318. return GestureDetector(
  319. behavior: HitTestBehavior.opaque,
  320. onTap: () => _copyText(text),
  321. child: Container(
  322. padding: const EdgeInsets.only(left: 4, bottom: 2, top: 2, right: 6),
  323. decoration: BoxDecoration(
  324. color: HexColor.fromHex(widget?.styleModel?.headerReferrerCopyBtnBgColor ?? '#FFF2F2'),
  325. borderRadius: BorderRadius.circular(30),
  326. ),
  327. child: Row(
  328. crossAxisAlignment: CrossAxisAlignment.center,
  329. children: <Widget>[
  330. // Container(width: 11, child: CachedNetworkImage(),),
  331. CachedNetworkImage(
  332. imageUrl: widget?.styleModel?.headerReferrerCopyBtnIcon ?? '',
  333. width: 11,
  334. ),
  335. const SizedBox(width: 4.5),
  336. Text(widget?.styleModel?.headerReferrerCopyBtnText ?? '复制',
  337. style: TextStyle(fontSize: 8, color: HexColor.fromHex(widget?.styleModel?.headerReferrerCopyBtnTextColor ?? '#F94B47')))
  338. ],
  339. ),
  340. ),
  341. );
  342. }
  343. }