rewards_redeem_page.dart 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. import 'package:cs_resources/theme/app_colors_theme.dart';
  2. import 'package:flutter/cupertino.dart';
  3. import 'package:flutter/material.dart';
  4. import 'package:auto_route/auto_route.dart';
  5. import 'package:hooks_riverpod/hooks_riverpod.dart';
  6. import 'package:router/ext/auto_router_extensions.dart';
  7. import 'package:shared/utils/log_utils.dart';
  8. import 'package:shared/utils/color_utils.dart';
  9. import 'package:widgets/ext/ex_widget.dart';
  10. import 'package:widgets/my_appbar.dart';
  11. import 'package:widgets/my_load_image.dart';
  12. import 'package:widgets/my_text_view.dart';
  13. import 'package:widgets/shatter/picker_container.dart';
  14. import 'package:widgets/widget_export.dart';
  15. import 'package:cs_resources/generated/assets.dart';
  16. import '../../../router/page/rewards_page_router.dart';
  17. import './rewards_redeem_vm.dart';
  18. @RoutePage()
  19. class RewardsRedeemPage extends HookConsumerWidget {
  20. const RewardsRedeemPage({Key? key}) : super(key: key);
  21. //启动当前页面
  22. static void startInstance({BuildContext? context}) {
  23. if (context != null) {
  24. context.router.push(const RewardsRedeemPageRoute());
  25. } else {
  26. appRouter.push(const RewardsRedeemPageRoute());
  27. }
  28. }
  29. // listitem
  30. Widget _buildSaleItem(BuildContext context, WidgetRef ref, _vm) {
  31. return Column(
  32. children: [
  33. Container(
  34. decoration: const BoxDecoration(
  35. color: Colors.white,
  36. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  37. boxShadow: [
  38. BoxShadow(
  39. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  40. ],
  41. ),
  42. width: MediaQuery.of(context).size.width - 30,
  43. // height: 420,
  44. // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
  45. child: Column(
  46. crossAxisAlignment: CrossAxisAlignment.start,
  47. mainAxisAlignment: MainAxisAlignment.start,
  48. children: [
  49. const MyAssetImage(
  50. Assets.rewardsRewardsIndex1,
  51. // width: 110,
  52. height: 150,
  53. ),
  54. Column(
  55. crossAxisAlignment: CrossAxisAlignment.start,
  56. mainAxisAlignment: MainAxisAlignment.start,
  57. children: [
  58. const Text(
  59. maxLines: 1, // 设置最大行数为2
  60. overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
  61. 'Cute children multifunctional umbrella',
  62. style: TextStyle(
  63. fontSize: 17.0,
  64. color: Colors.black,
  65. fontWeight: FontWeight.w500),
  66. ).marginOnly(bottom: 5),
  67. Row(
  68. children: [
  69. const Text(
  70. '300',
  71. style: TextStyle(
  72. fontSize: 19.0,
  73. color: Colors.black,
  74. fontWeight: FontWeight.w500),
  75. ),
  76. Text(
  77. '350',
  78. style: TextStyle(
  79. decoration: TextDecoration.lineThrough,
  80. decorationColor:
  81. ColorUtils.string2Color('#808DAF'),
  82. decorationStyle: TextDecorationStyle.solid,
  83. fontSize: 12.0,
  84. color: ColorUtils.string2Color('#808DAF'),
  85. fontWeight: FontWeight.w400),
  86. ).marginOnly(left: 5, right: 5),
  87. const Text(
  88. 'Points',
  89. style: TextStyle(
  90. fontSize: 13.0,
  91. color: Colors.black,
  92. fontWeight: FontWeight.w400),
  93. ),
  94. ],
  95. ),
  96. ],
  97. ).paddingOnly(left: 15, right: 15, top: 10, bottom: 20),
  98. ],
  99. )),
  100. ],
  101. ).marginOnly(left: 15, bottom: 15, right: 15);
  102. }
  103. Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
  104. return Column(
  105. children: [
  106. Container(
  107. decoration: const BoxDecoration(
  108. color: Colors.white,
  109. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  110. boxShadow: [
  111. BoxShadow(
  112. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  113. ],
  114. ),
  115. width: MediaQuery.of(context).size.width - 30,
  116. child: Column(
  117. crossAxisAlignment: CrossAxisAlignment.start,
  118. children: [
  119. Row(
  120. mainAxisSize: MainAxisSize.min,
  121. mainAxisAlignment: MainAxisAlignment.start,
  122. crossAxisAlignment: CrossAxisAlignment.center,
  123. children: [
  124. const MyAssetImage(
  125. Assets.rewardsRewardsIconDatd,
  126. width: 25,
  127. height: 25,
  128. ).marginOnly(right: 10),
  129. Text(
  130. 'Redeem Date',
  131. style: TextStyle(
  132. fontSize: 15.0,
  133. color: ColorUtils.string2Color('#000000'),
  134. fontWeight: FontWeight.w500),
  135. )
  136. ],
  137. ).marginOnly(bottom: 10),
  138. Column(
  139. crossAxisAlignment: CrossAxisAlignment.start,
  140. children: [
  141. Text(
  142. '21 Jun 2024, 20:18',
  143. style: TextStyle(
  144. fontSize: 15.0,
  145. color: ColorUtils.string2Color('#54638C'),
  146. fontWeight: FontWeight.w400),
  147. ),
  148. ],
  149. ),
  150. ],
  151. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  152. ),
  153. ],
  154. ).marginOnly(left: 15, bottom: 15, right: 15);
  155. }
  156. Widget _buildFrom(BuildContext context, WidgetRef ref, _vm) {
  157. return Column(
  158. children: [
  159. Container(
  160. decoration: const BoxDecoration(
  161. color: Colors.white,
  162. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  163. boxShadow: [
  164. BoxShadow(
  165. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  166. ],
  167. ),
  168. width: MediaQuery.of(context).size.width - 30,
  169. child: Column(
  170. crossAxisAlignment: CrossAxisAlignment.start,
  171. children: [
  172. Row(
  173. mainAxisSize: MainAxisSize.min,
  174. mainAxisAlignment: MainAxisAlignment.start,
  175. crossAxisAlignment: CrossAxisAlignment.center,
  176. children: [
  177. const MyAssetImage(
  178. Assets.rewardsRewardsIconDate,
  179. width: 25,
  180. height: 25,
  181. ).marginOnly(right: 10),
  182. Text(
  183. 'Redeem From',
  184. style: TextStyle(
  185. fontSize: 15.0,
  186. color: ColorUtils.string2Color('#000000'),
  187. fontWeight: FontWeight.w500),
  188. )
  189. ],
  190. ).marginOnly(bottom: 10),
  191. Column(
  192. crossAxisAlignment: CrossAxisAlignment.start,
  193. children: [
  194. Text(
  195. '17 Mar 2020 until 15 Jul 2020',
  196. style: TextStyle(
  197. fontSize: 15.0,
  198. color: ColorUtils.string2Color('#54638C'),
  199. fontWeight: FontWeight.w400),
  200. ),
  201. ],
  202. ),
  203. ],
  204. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  205. ),
  206. ],
  207. ).marginOnly(left: 15, bottom: 15, right: 15);
  208. }
  209. Widget _buildRedeemed(BuildContext context, WidgetRef ref, _vm) {
  210. return Column(
  211. children: [
  212. Container(
  213. decoration: const BoxDecoration(
  214. color: Colors.white,
  215. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  216. boxShadow: [
  217. BoxShadow(
  218. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  219. ],
  220. ),
  221. width: MediaQuery.of(context).size.width - 30,
  222. child: Column(
  223. crossAxisAlignment: CrossAxisAlignment.start,
  224. children: [
  225. Row(
  226. mainAxisSize: MainAxisSize.max,
  227. mainAxisAlignment: MainAxisAlignment.start,
  228. crossAxisAlignment: CrossAxisAlignment.center,
  229. children: [
  230. const MyAssetImage(
  231. Assets.rewardsRewardsSuccess,
  232. width: 17,
  233. height: 17,
  234. ).marginOnly(right: 12),
  235. Expanded(
  236. child: Text(
  237. 'You’ve redeemed the following promotion.',
  238. style: TextStyle(
  239. fontSize: 15.0,
  240. color: ColorUtils.string2Color('#4161D0'),
  241. fontWeight: FontWeight.w500),
  242. ),
  243. )
  244. ],
  245. )
  246. ],
  247. ).paddingOnly(left: 15, right: 75, top: 22, bottom: 20),
  248. ),
  249. ],
  250. ).marginOnly(left: 15, bottom: 15, right: 15);
  251. }
  252. Widget _buildTop(BuildContext context, WidgetRef ref, _vm) {
  253. return Container(
  254. width: MediaQuery.of(context).size.width,
  255. color: ColorUtils.string2Color('#FFFFFF'),
  256. padding: const EdgeInsets.only(top: 15, bottom: 30),
  257. child: Column(
  258. mainAxisAlignment: MainAxisAlignment.center,
  259. crossAxisAlignment: CrossAxisAlignment.center,
  260. children: [
  261. const MyAssetImage(
  262. Assets.rewardsRewardsSuccess,
  263. width: 54,
  264. height: 54,
  265. ),
  266. Text(
  267. 'Congratulations!',
  268. style: TextStyle(
  269. fontSize: 18.0,
  270. color: ColorUtils.string2Color('#4161D0'),
  271. fontWeight: FontWeight.w500),
  272. ).marginOnly(top: 12, bottom: 15),
  273. ],
  274. ));
  275. }
  276. @override
  277. Widget build(BuildContext context, WidgetRef ref) {
  278. final _vm = ref.read(rewardsRedeemVmProvider.notifier);
  279. final state = ref.watch(rewardsRedeemVmProvider);
  280. return Scaffold(
  281. appBar: MyAppBar.appBar(
  282. context,
  283. "My Rewards Details",
  284. backgroundColor: context.appColors.whiteBG,
  285. ),
  286. body: Column(
  287. children: [
  288. Expanded(
  289. child: SingleChildScrollView(
  290. scrollDirection: Axis.vertical,
  291. physics: const BouncingScrollPhysics(),
  292. clipBehavior: Clip.none,
  293. child: Column(
  294. children: [
  295. _buildTop(context, ref, _vm),
  296. Container(
  297. color: ColorUtils.string2Color('#F2F3F6'),
  298. padding: const EdgeInsets.only(top: 15),
  299. child: Column(
  300. children: [
  301. _buildPackage(context, ref, _vm),
  302. _buildRedeemed(context, ref, _vm),
  303. _buildSaleItem(context, ref, _vm),
  304. _buildFrom(context, ref, _vm),
  305. ],
  306. )),
  307. ],
  308. ))),
  309. ],
  310. ),
  311. );
  312. }
  313. }