rewards_successful_page.dart 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. import 'package:cpt_rewards/modules/rewards_address/rewards_address_page.dart';
  2. import 'package:cpt_rewards/modules/rewards_my/rewards_my_page.dart';
  3. import 'package:cs_resources/theme/app_colors_theme.dart';
  4. import 'package:flutter/cupertino.dart';
  5. import 'package:flutter/material.dart';
  6. import 'package:auto_route/auto_route.dart';
  7. import 'package:hooks_riverpod/hooks_riverpod.dart';
  8. import 'package:router/ext/auto_router_extensions.dart';
  9. import 'package:shared/utils/log_utils.dart';
  10. import 'package:shared/utils/color_utils.dart';
  11. import 'package:widgets/ext/ex_widget.dart';
  12. import 'package:widgets/my_appbar.dart';
  13. import 'package:widgets/my_load_image.dart';
  14. import 'package:widgets/my_text_view.dart';
  15. import 'package:widgets/shatter/picker_container.dart';
  16. import 'package:widgets/widget_export.dart';
  17. import 'package:cs_resources/generated/assets.dart';
  18. import '../../../router/page/rewards_page_router.dart';
  19. import './rewards_successful_vm.dart';
  20. @RoutePage()
  21. class RewardsSuccessfulPage extends HookConsumerWidget {
  22. const RewardsSuccessfulPage({Key? key}) : super(key: key);
  23. //启动当前页面
  24. static void startInstance({BuildContext? context}) {
  25. if (context != null) {
  26. context.router.push(const RewardsSuccessfulPageRoute());
  27. } else {
  28. appRouter.push(const RewardsSuccessfulPageRoute());
  29. }
  30. }
  31. // listitem
  32. Widget _buildSaleItem(BuildContext context, WidgetRef ref, _vm) {
  33. return Column(
  34. children: [
  35. Container(
  36. decoration: const BoxDecoration(
  37. color: Colors.white,
  38. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  39. boxShadow: [
  40. BoxShadow(
  41. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  42. ],
  43. ),
  44. width: MediaQuery.of(context).size.width - 30,
  45. // height: 420,
  46. // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
  47. child: Column(
  48. crossAxisAlignment: CrossAxisAlignment.start,
  49. mainAxisAlignment: MainAxisAlignment.start,
  50. children: [
  51. const MyAssetImage(
  52. Assets.rewardsRewardsIndex1,
  53. // width: 110,
  54. height: 150,
  55. ),
  56. const Column(
  57. crossAxisAlignment: CrossAxisAlignment.start,
  58. mainAxisAlignment: MainAxisAlignment.start,
  59. children: [
  60. Text(
  61. maxLines: 1, // 设置最大行数为2
  62. overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
  63. 'Cute children multifunctional umbrella',
  64. style: TextStyle(
  65. fontSize: 17.0,
  66. color: Colors.black,
  67. fontWeight: FontWeight.w500),
  68. ),
  69. ],
  70. ).paddingOnly(left: 15, right: 15, top: 10, bottom: 30),
  71. ],
  72. )),
  73. ],
  74. ).marginOnly(left: 15, bottom: 15, right: 15);
  75. }
  76. Widget _buildDeal(BuildContext context, WidgetRef ref, _vm) {
  77. return Column(
  78. children: [
  79. Container(
  80. decoration: const BoxDecoration(
  81. color: Colors.white,
  82. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  83. boxShadow: [
  84. BoxShadow(
  85. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  86. ],
  87. ),
  88. width: MediaQuery.of(context).size.width - 30,
  89. child: Column(
  90. crossAxisAlignment: CrossAxisAlignment.start,
  91. children: [
  92. Row(
  93. mainAxisSize: MainAxisSize.min,
  94. mainAxisAlignment: MainAxisAlignment.start,
  95. crossAxisAlignment: CrossAxisAlignment.center,
  96. children: [
  97. const MyAssetImage(
  98. Assets.rewardsRewardsDetailDeal,
  99. width: 25,
  100. height: 25,
  101. ).marginOnly(right: 5),
  102. Text(
  103. 'Redeem Deal At',
  104. style: TextStyle(
  105. fontSize: 15.0,
  106. color: ColorUtils.string2Color('#000000'),
  107. fontWeight: FontWeight.w500),
  108. )
  109. ],
  110. ),
  111. Row(
  112. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  113. crossAxisAlignment: CrossAxisAlignment.center,
  114. children: [
  115. Text(
  116. 'Also redeemable in 1 more location',
  117. style: TextStyle(
  118. fontSize: 15.0,
  119. color: ColorUtils.string2Color('#54638C'),
  120. fontWeight: FontWeight.w400),
  121. ),
  122. ],
  123. ).marginOnly(top: 10, bottom: 15),
  124. Container(
  125. height: 40,
  126. decoration: BoxDecoration(
  127. color: Colors.white,
  128. borderRadius: const BorderRadius.all(Radius.circular(6.0)),
  129. border: Border.all(
  130. color: ColorUtils.string2Color('#4161D0'), width: 1.0),
  131. ),
  132. child: Center(
  133. child: Text(
  134. 'See More Locations',
  135. style: TextStyle(
  136. fontSize: 15.0,
  137. color: ColorUtils.string2Color('#4161D0'),
  138. fontWeight: FontWeight.w500),
  139. ),
  140. ).onTap(() {
  141. // 去详情
  142. RewardsAddressPage.startInstance();
  143. }),
  144. ),
  145. ],
  146. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  147. ),
  148. ],
  149. ).marginOnly(left: 15, bottom: 15, right: 15);
  150. }
  151. Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
  152. return Column(
  153. children: [
  154. Container(
  155. decoration: const BoxDecoration(
  156. color: Colors.white,
  157. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  158. boxShadow: [
  159. BoxShadow(
  160. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  161. ],
  162. ),
  163. width: MediaQuery.of(context).size.width - 30,
  164. child: Column(
  165. crossAxisAlignment: CrossAxisAlignment.start,
  166. children: [
  167. Row(
  168. mainAxisSize: MainAxisSize.min,
  169. mainAxisAlignment: MainAxisAlignment.start,
  170. crossAxisAlignment: CrossAxisAlignment.center,
  171. children: [
  172. const MyAssetImage(
  173. Assets.rewardsRewardsIconDatd,
  174. width: 15,
  175. height: 15,
  176. ).marginOnly(right: 10),
  177. Text(
  178. 'Redeem From',
  179. style: TextStyle(
  180. fontSize: 15.0,
  181. color: ColorUtils.string2Color('#000000'),
  182. fontWeight: FontWeight.w500),
  183. )
  184. ],
  185. ).marginOnly(bottom: 10),
  186. Column(
  187. crossAxisAlignment: CrossAxisAlignment.start,
  188. children: [
  189. Text(
  190. '17 Mar 2020 until 15 Jul 2020',
  191. style: TextStyle(
  192. fontSize: 15.0,
  193. color: ColorUtils.string2Color('#54638C'),
  194. fontWeight: FontWeight.w400),
  195. ),
  196. ],
  197. ),
  198. ],
  199. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  200. ),
  201. ],
  202. ).marginOnly(left: 15, bottom: 15, right: 15);
  203. }
  204. Widget _buildNotice(BuildContext context, WidgetRef ref, _vm) {
  205. return Column(
  206. children: [
  207. Container(
  208. decoration: const BoxDecoration(
  209. color: Colors.white,
  210. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  211. boxShadow: [
  212. BoxShadow(
  213. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  214. ],
  215. ),
  216. width: MediaQuery.of(context).size.width - 30,
  217. child: Column(
  218. crossAxisAlignment: CrossAxisAlignment.start,
  219. children: [
  220. Row(
  221. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  222. crossAxisAlignment: CrossAxisAlignment.center,
  223. children: [
  224. Text(
  225. 'Date & Time:',
  226. style: TextStyle(
  227. fontSize: 15.0,
  228. color: ColorUtils.string2Color('#333333'),
  229. fontWeight: FontWeight.w400),
  230. ),
  231. Row(
  232. children: [
  233. Text(
  234. '21 Jun 2021 20:18',
  235. style: TextStyle(
  236. fontSize: 15.0,
  237. color: ColorUtils.string2Color('#54638C'),
  238. fontWeight: FontWeight.w400),
  239. ),
  240. ],
  241. ),
  242. ],
  243. ),
  244. Row(
  245. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  246. crossAxisAlignment: CrossAxisAlignment.center,
  247. children: [
  248. Text(
  249. 'Transaction ID:',
  250. style: TextStyle(
  251. fontSize: 15.0,
  252. color: ColorUtils.string2Color('#333333'),
  253. fontWeight: FontWeight.w400),
  254. ),
  255. Row(
  256. children: [
  257. Text(
  258. 'PR00021837HY',
  259. style: TextStyle(
  260. fontSize: 15.0,
  261. color: ColorUtils.string2Color('#54638C'),
  262. fontWeight: FontWeight.w400),
  263. ),
  264. ],
  265. ),
  266. ],
  267. ).marginOnly(top: 30, bottom: 10),
  268. ],
  269. ).paddingOnly(left: 15, right: 15, top: 30, bottom: 30),
  270. ),
  271. ],
  272. ).marginOnly(left: 15, bottom: 15, right: 15);
  273. }
  274. Widget _buildTop(BuildContext context, WidgetRef ref, _vm) {
  275. return Container(
  276. width: MediaQuery.of(context).size.width,
  277. color: ColorUtils.string2Color('#FFFFFF'),
  278. padding: const EdgeInsets.only(top: 15, bottom: 30),
  279. child: Column(
  280. mainAxisAlignment: MainAxisAlignment.center,
  281. crossAxisAlignment: CrossAxisAlignment.center,
  282. children: [
  283. const MyAssetImage(
  284. Assets.rewardsRewardsSuccess,
  285. width: 54,
  286. height: 54,
  287. ),
  288. Text(
  289. 'You Have Paid Points',
  290. style: TextStyle(
  291. fontSize: 18.0,
  292. color: ColorUtils.string2Color('#4161D0'),
  293. fontWeight: FontWeight.w500),
  294. ).marginOnly(top: 12, bottom: 15),
  295. Text(
  296. '600',
  297. style: TextStyle(
  298. fontSize: 30.0,
  299. color: ColorUtils.string2Color('#000000'),
  300. fontWeight: FontWeight.w500),
  301. ),
  302. ],
  303. ));
  304. }
  305. @override
  306. Widget build(BuildContext context, WidgetRef ref) {
  307. final _vm = ref.read(rewardsSuccessfulVmProvider.notifier);
  308. final state = ref.watch(rewardsSuccessfulVmProvider);
  309. return Scaffold(
  310. appBar: MyAppBar.appBar(
  311. context,
  312. "Payment Successful",
  313. backgroundColor: context.appColors.whiteBG,
  314. ),
  315. body: Column(
  316. children: [
  317. Expanded(
  318. child: SingleChildScrollView(
  319. scrollDirection: Axis.vertical,
  320. physics: const BouncingScrollPhysics(),
  321. clipBehavior: Clip.none,
  322. child: Column(
  323. children: [
  324. _buildTop(context, ref, _vm),
  325. Container(
  326. color: ColorUtils.string2Color('#F2F3F6'),
  327. padding: const EdgeInsets.only(top: 15),
  328. child: Column(
  329. children: [
  330. _buildSaleItem(context, ref, _vm),
  331. _buildDeal(context, ref, _vm),
  332. _buildPackage(context, ref, _vm),
  333. _buildNotice(context, ref, _vm),
  334. ],
  335. )),
  336. ],
  337. ))),
  338. Container(
  339. height: 50,
  340. color: ColorUtils.string2Color('#4161D0'),
  341. child: Flex(
  342. direction: Axis.horizontal,
  343. children: [
  344. Expanded(
  345. flex: 1,
  346. child: Container(
  347. color: ColorUtils.string2Color('#4161D0'),
  348. height: 100,
  349. child: Row(
  350. mainAxisAlignment: MainAxisAlignment.center,
  351. crossAxisAlignment: CrossAxisAlignment.center,
  352. children: [
  353. MyTextView(
  354. "Check My Rewards",
  355. fontSize: 16,
  356. textColor: Colors.white,
  357. isFontMedium: true,
  358. ),
  359. ],
  360. ),
  361. ).onTap(() {
  362. // 去详情
  363. RewardsMyPage.startInstance();
  364. }),
  365. ),
  366. ],
  367. ),
  368. )
  369. ],
  370. ),
  371. );
  372. }
  373. }