rewards_transaction_page.dart 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  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_transaction_vm.dart';
  18. @RoutePage()
  19. class RewardsTransactionPage extends HookConsumerWidget {
  20. const RewardsTransactionPage({Key? key}) : super(key: key);
  21. //启动当前页面
  22. static void startInstance({BuildContext? context}) {
  23. if (context != null) {
  24. context.router.push(const RewardsTransactionPageRoute());
  25. } else {
  26. appRouter.push(const RewardsTransactionPageRoute());
  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 _buildDeal(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: 15),
  129. Text(
  130. '17 Mar 2020 until 15 Jul 2020',
  131. style: TextStyle(
  132. fontSize: 15.0,
  133. color: ColorUtils.string2Color('#000000'),
  134. fontWeight: FontWeight.w400),
  135. )
  136. ],
  137. ).marginOnly(bottom: 20),
  138. Row(
  139. // mainAxisSize: MainAxisSize.min,
  140. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  141. crossAxisAlignment: CrossAxisAlignment.center,
  142. children: [
  143. Row(
  144. children: [
  145. const MyAssetImage(
  146. Assets.rewardsRewardsIcon123,
  147. width: 25,
  148. height: 25,
  149. ).marginOnly(right: 15),
  150. Text(
  151. 'Verification Code',
  152. style: TextStyle(
  153. fontSize: 15.0,
  154. color: ColorUtils.string2Color('#000000'),
  155. fontWeight: FontWeight.w400),
  156. ),
  157. ],
  158. ),
  159. Text(
  160. '789654369',
  161. style: TextStyle(
  162. fontSize: 15.0,
  163. color: ColorUtils.string2Color('#4161D0'),
  164. fontWeight: FontWeight.w500),
  165. ),
  166. ],
  167. ),
  168. ],
  169. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  170. ),
  171. ],
  172. ).marginOnly(left: 15, bottom: 15, right: 15);
  173. }
  174. Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
  175. return Column(
  176. children: [
  177. Container(
  178. decoration: const BoxDecoration(
  179. color: Colors.white,
  180. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  181. boxShadow: [
  182. BoxShadow(
  183. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  184. ],
  185. ),
  186. width: MediaQuery.of(context).size.width - 30,
  187. child: Column(
  188. crossAxisAlignment: CrossAxisAlignment.start,
  189. children: [
  190. Row(
  191. mainAxisSize: MainAxisSize.min,
  192. mainAxisAlignment: MainAxisAlignment.start,
  193. crossAxisAlignment: CrossAxisAlignment.center,
  194. children: [
  195. Expanded(
  196. child: Text(
  197. 'If you have any issue when redeem the voucher,please contact 6604 6896',
  198. style: TextStyle(
  199. fontSize: 15.0,
  200. color: ColorUtils.string2Color('#000000'),
  201. fontWeight: FontWeight.w500),
  202. ),
  203. )
  204. ],
  205. ).marginOnly(bottom: 10, top: 10),
  206. ],
  207. ).paddingOnly(left: 15, right: 35, top: 12, bottom: 20),
  208. ),
  209. ],
  210. ).marginOnly(left: 15, bottom: 25, right: 15);
  211. }
  212. Widget _buildNotice(BuildContext context, WidgetRef ref, _vm) {
  213. return Column(
  214. children: [
  215. Container(
  216. decoration: const BoxDecoration(
  217. color: Colors.white,
  218. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  219. boxShadow: [
  220. BoxShadow(
  221. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  222. ],
  223. ),
  224. width: MediaQuery.of(context).size.width - 30,
  225. child: Column(
  226. crossAxisAlignment: CrossAxisAlignment.start,
  227. children: [
  228. Row(
  229. mainAxisSize: MainAxisSize.min,
  230. mainAxisAlignment: MainAxisAlignment.start,
  231. crossAxisAlignment: CrossAxisAlignment.center,
  232. children: [
  233. const MyAssetImage(
  234. Assets.rewardsRewardsIconFile,
  235. width: 25,
  236. height: 25,
  237. ).marginOnly(right: 10),
  238. Text(
  239. 'Transaction Details',
  240. style: TextStyle(
  241. fontSize: 15.0,
  242. color: ColorUtils.string2Color('#000000'),
  243. fontWeight: FontWeight.w500),
  244. )
  245. ],
  246. ).marginOnly(bottom: 12),
  247. Row(
  248. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  249. crossAxisAlignment: CrossAxisAlignment.center,
  250. children: [
  251. Text(
  252. 'Promotion ID :',
  253. style: TextStyle(
  254. fontSize: 15.0,
  255. color: ColorUtils.string2Color('#000000'),
  256. fontWeight: FontWeight.w400),
  257. ),
  258. Row(
  259. children: [
  260. Text(
  261. '4260575680',
  262. style: TextStyle(
  263. fontSize: 15.0,
  264. color: ColorUtils.string2Color('#000000'),
  265. fontWeight: FontWeight.w500),
  266. ),
  267. ],
  268. ),
  269. ],
  270. ).marginOnly(bottom: 25),
  271. Row(
  272. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  273. crossAxisAlignment: CrossAxisAlignment.center,
  274. children: [
  275. Text(
  276. 'Purchase Mobile No :',
  277. style: TextStyle(
  278. fontSize: 15.0,
  279. color: ColorUtils.string2Color('#000000'),
  280. fontWeight: FontWeight.w400),
  281. ),
  282. Row(
  283. children: [
  284. Text(
  285. '13601515270',
  286. style: TextStyle(
  287. fontSize: 15.0,
  288. color: ColorUtils.string2Color('#000000'),
  289. fontWeight: FontWeight.w500),
  290. ),
  291. ],
  292. ),
  293. ],
  294. ).marginOnly(bottom: 25),
  295. Row(
  296. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  297. crossAxisAlignment: CrossAxisAlignment.center,
  298. children: [
  299. Text(
  300. 'Purchase Date :',
  301. style: TextStyle(
  302. fontSize: 15.0,
  303. color: ColorUtils.string2Color('#000000'),
  304. fontWeight: FontWeight.w400),
  305. ),
  306. Row(
  307. children: [
  308. Text(
  309. '2 July 2020, 17:08',
  310. style: TextStyle(
  311. fontSize: 15.0,
  312. color: ColorUtils.string2Color('#000000'),
  313. fontWeight: FontWeight.w500),
  314. ),
  315. ],
  316. ),
  317. ],
  318. ).marginOnly(bottom: 25),
  319. Row(
  320. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  321. crossAxisAlignment: CrossAxisAlignment.center,
  322. children: [
  323. Text(
  324. 'Redeemed Date :',
  325. style: TextStyle(
  326. fontSize: 15.0,
  327. color: ColorUtils.string2Color('#000000'),
  328. fontWeight: FontWeight.w400),
  329. ),
  330. Row(
  331. children: [
  332. Text(
  333. '2 July 2020, 17:08',
  334. style: TextStyle(
  335. fontSize: 15.0,
  336. color: ColorUtils.string2Color('#000000'),
  337. fontWeight: FontWeight.w500),
  338. ),
  339. ],
  340. ),
  341. ],
  342. ).marginOnly(bottom: 25),
  343. Row(
  344. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  345. crossAxisAlignment: CrossAxisAlignment.center,
  346. children: [
  347. Text(
  348. 'Quantity :',
  349. style: TextStyle(
  350. fontSize: 15.0,
  351. color: ColorUtils.string2Color('#000000'),
  352. fontWeight: FontWeight.w400),
  353. ),
  354. Row(
  355. children: [
  356. Text(
  357. '1',
  358. style: TextStyle(
  359. fontSize: 15.0,
  360. color: ColorUtils.string2Color('#000000'),
  361. fontWeight: FontWeight.w500),
  362. ),
  363. ],
  364. ),
  365. ],
  366. ).marginOnly(bottom: 25),
  367. Row(
  368. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  369. crossAxisAlignment: CrossAxisAlignment.center,
  370. children: [
  371. Text(
  372. 'Points:',
  373. style: TextStyle(
  374. fontSize: 15.0,
  375. color: ColorUtils.string2Color('#333333'),
  376. fontWeight: FontWeight.w400),
  377. ),
  378. Row(
  379. children: [
  380. Text(
  381. '350',
  382. style: TextStyle(
  383. decoration: TextDecoration.lineThrough,
  384. decorationColor: ColorUtils.string2Color('#54638C'),
  385. decorationStyle: TextDecorationStyle.solid,
  386. fontSize: 14.0,
  387. color: ColorUtils.string2Color('#54638C'),
  388. fontWeight: FontWeight.w400),
  389. ),
  390. Text(
  391. '300',
  392. style: TextStyle(
  393. fontSize: 19.0,
  394. color: ColorUtils.string2Color('#333333'),
  395. fontWeight: FontWeight.w500),
  396. ).marginOnly(left: 10),
  397. ],
  398. ),
  399. ],
  400. ).marginOnly(bottom: 25),
  401. ],
  402. ).paddingOnly(left: 15, right: 15, top: 15, bottom: 5),
  403. ),
  404. ],
  405. ).marginOnly(left: 15, bottom: 15, right: 15);
  406. }
  407. @override
  408. Widget build(BuildContext context, WidgetRef ref) {
  409. final _vm = ref.read(rewardsTransactionVmProvider.notifier);
  410. final state = ref.watch(rewardsTransactionVmProvider);
  411. return Scaffold(
  412. appBar: MyAppBar.appBar(
  413. context,
  414. "Verification Transaction",
  415. backgroundColor: context.appColors.whiteBG,
  416. ),
  417. body: Column(
  418. children: [
  419. Expanded(
  420. child: SingleChildScrollView(
  421. scrollDirection: Axis.vertical,
  422. physics: const BouncingScrollPhysics(),
  423. clipBehavior: Clip.none,
  424. child: Column(
  425. children: [
  426. Container(
  427. color: ColorUtils.string2Color('#F2F3F6'),
  428. padding: const EdgeInsets.only(top: 15),
  429. child: Column(
  430. children: [
  431. _buildSaleItem(context, ref, _vm),
  432. _buildDeal(context, ref, _vm),
  433. _buildNotice(context, ref, _vm),
  434. _buildPackage(context, ref, _vm),
  435. ],
  436. )),
  437. ],
  438. ))),
  439. ],
  440. ),
  441. );
  442. }
  443. }