rewards_successful_page.dart 15 KB

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