rewards_confirm_page.dart 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  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_confirm_vm.dart';
  18. @RoutePage()
  19. class RewardsConfirmPage extends HookConsumerWidget {
  20. const RewardsConfirmPage({Key? key}) : super(key: key);
  21. //启动当前页面
  22. static void startInstance({BuildContext? context}) {
  23. if (context != null) {
  24. context.router.push(const RewardsConfirmPageRoute());
  25. } else {
  26. appRouter.push(const RewardsConfirmPageRoute());
  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. const Column(
  55. crossAxisAlignment: CrossAxisAlignment.start,
  56. mainAxisAlignment: MainAxisAlignment.start,
  57. children: [
  58. 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. ),
  67. ],
  68. ).paddingOnly(left: 15, right: 15, top: 10, bottom: 30),
  69. ],
  70. )),
  71. ],
  72. ).marginOnly(left: 15, bottom: 15, right: 15);
  73. }
  74. Widget _buildDeal(BuildContext context, WidgetRef ref, _vm) {
  75. return Column(
  76. children: [
  77. Container(
  78. decoration: const BoxDecoration(
  79. color: Colors.white,
  80. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  81. boxShadow: [
  82. BoxShadow(
  83. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  84. ],
  85. ),
  86. width: MediaQuery.of(context).size.width - 30,
  87. child: Column(
  88. crossAxisAlignment: CrossAxisAlignment.start,
  89. children: [
  90. Row(
  91. mainAxisSize: MainAxisSize.min,
  92. mainAxisAlignment: MainAxisAlignment.start,
  93. crossAxisAlignment: CrossAxisAlignment.center,
  94. children: [
  95. const MyAssetImage(
  96. Assets.rewardsRewardsDetailDeal,
  97. width: 25,
  98. height: 25,
  99. ).marginOnly(right: 5),
  100. Text(
  101. 'Redeem Deal At',
  102. style: TextStyle(
  103. fontSize: 15.0,
  104. color: ColorUtils.string2Color('#000000'),
  105. fontWeight: FontWeight.w500),
  106. )
  107. ],
  108. ),
  109. Row(
  110. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  111. crossAxisAlignment: CrossAxisAlignment.center,
  112. children: [
  113. Text(
  114. 'Also redeemable in 1 more location',
  115. style: TextStyle(
  116. fontSize: 15.0,
  117. color: ColorUtils.string2Color('#54638C'),
  118. fontWeight: FontWeight.w400),
  119. ),
  120. ],
  121. ).marginOnly(top: 10, bottom: 15),
  122. Container(
  123. height: 40,
  124. decoration: BoxDecoration(
  125. color: Colors.white,
  126. borderRadius: const BorderRadius.all(Radius.circular(6.0)),
  127. border: Border.all(
  128. color: ColorUtils.string2Color('#4161D0'), width: 1.0),
  129. ),
  130. child: Center(
  131. child: Text(
  132. 'See More Locations',
  133. style: TextStyle(
  134. fontSize: 15.0,
  135. color: ColorUtils.string2Color('#4161D0'),
  136. fontWeight: FontWeight.w500),
  137. ),
  138. ),
  139. ),
  140. ],
  141. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  142. ),
  143. ],
  144. ).marginOnly(left: 15, bottom: 15, right: 15);
  145. }
  146. Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
  147. return Column(
  148. children: [
  149. Container(
  150. decoration: const BoxDecoration(
  151. color: Colors.white,
  152. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  153. boxShadow: [
  154. BoxShadow(
  155. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  156. ],
  157. ),
  158. width: MediaQuery.of(context).size.width - 30,
  159. child: Column(
  160. crossAxisAlignment: CrossAxisAlignment.start,
  161. children: [
  162. Row(
  163. mainAxisSize: MainAxisSize.min,
  164. mainAxisAlignment: MainAxisAlignment.start,
  165. crossAxisAlignment: CrossAxisAlignment.center,
  166. children: [
  167. const MyAssetImage(
  168. Assets.rewardsRewardsIconDatd,
  169. width: 15,
  170. height: 15,
  171. ).marginOnly(right: 10),
  172. Text(
  173. 'Redeem From',
  174. style: TextStyle(
  175. fontSize: 15.0,
  176. color: ColorUtils.string2Color('#000000'),
  177. fontWeight: FontWeight.w500),
  178. )
  179. ],
  180. ).marginOnly(bottom: 10),
  181. Column(
  182. crossAxisAlignment: CrossAxisAlignment.start,
  183. children: [
  184. Text(
  185. '17 Mar 2020 until 15 Jul 2020',
  186. style: TextStyle(
  187. fontSize: 15.0,
  188. color: ColorUtils.string2Color('#54638C'),
  189. fontWeight: FontWeight.w400),
  190. ),
  191. ],
  192. ),
  193. ],
  194. ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
  195. ),
  196. ],
  197. ).marginOnly(left: 15, bottom: 15, right: 15);
  198. }
  199. Widget _buildNotice(BuildContext context, WidgetRef ref, _vm) {
  200. return Column(
  201. children: [
  202. Container(
  203. decoration: const BoxDecoration(
  204. color: Colors.white,
  205. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  206. boxShadow: [
  207. BoxShadow(
  208. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  209. ],
  210. ),
  211. width: MediaQuery.of(context).size.width - 30,
  212. child: Column(
  213. crossAxisAlignment: CrossAxisAlignment.start,
  214. children: [
  215. Row(
  216. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  217. crossAxisAlignment: CrossAxisAlignment.center,
  218. children: [
  219. Text(
  220. 'Quantity:',
  221. style: TextStyle(
  222. fontSize: 15.0,
  223. color: ColorUtils.string2Color('#333333'),
  224. fontWeight: FontWeight.w400),
  225. ),
  226. Row(
  227. children: [
  228. const MyAssetImage(
  229. Assets.rewardsRewardsJian,
  230. width: 21,
  231. height: 21,
  232. ),
  233. Text(
  234. '2',
  235. style: TextStyle(
  236. fontSize: 19.0,
  237. color: ColorUtils.string2Color('#333333'),
  238. fontWeight: FontWeight.w500),
  239. ).marginOnly(left: 15, right: 15),
  240. const MyAssetImage(
  241. Assets.rewardsRewardsJia,
  242. width: 21,
  243. height: 21,
  244. ),
  245. ],
  246. ),
  247. ],
  248. ),
  249. Row(
  250. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  251. crossAxisAlignment: CrossAxisAlignment.center,
  252. children: [
  253. Text(
  254. 'Points:',
  255. style: TextStyle(
  256. fontSize: 15.0,
  257. color: ColorUtils.string2Color('#333333'),
  258. fontWeight: FontWeight.w400),
  259. ),
  260. Row(
  261. children: [
  262. Text(
  263. '350',
  264. style: TextStyle(
  265. decoration: TextDecoration.lineThrough,
  266. decorationColor: ColorUtils.string2Color('#54638C'),
  267. decorationStyle: TextDecorationStyle.solid,
  268. fontSize: 14.0,
  269. color: ColorUtils.string2Color('#54638C'),
  270. fontWeight: FontWeight.w400),
  271. ),
  272. Text(
  273. '300',
  274. style: TextStyle(
  275. fontSize: 19.0,
  276. color: ColorUtils.string2Color('#333333'),
  277. fontWeight: FontWeight.w500),
  278. ).marginOnly(left: 10),
  279. ],
  280. ),
  281. ],
  282. ).marginOnly(top: 30, bottom: 30),
  283. Row(
  284. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  285. crossAxisAlignment: CrossAxisAlignment.center,
  286. children: [
  287. Text(
  288. 'Amount:',
  289. style: TextStyle(
  290. fontSize: 15.0,
  291. color: ColorUtils.string2Color('#333333'),
  292. fontWeight: FontWeight.w400),
  293. ),
  294. Row(
  295. children: [
  296. Text(
  297. '600',
  298. style: TextStyle(
  299. fontSize: 19.0,
  300. color: ColorUtils.string2Color('#4161D0'),
  301. fontWeight: FontWeight.w500),
  302. ),
  303. ],
  304. ),
  305. ],
  306. ),
  307. ],
  308. ).paddingOnly(left: 15, right: 15, top: 30, bottom: 30),
  309. ),
  310. ],
  311. ).marginOnly(left: 15, bottom: 15, right: 15);
  312. }
  313. @override
  314. Widget build(BuildContext context, WidgetRef ref) {
  315. final _vm = ref.read(rewardsConfirmVmProvider.notifier);
  316. final state = ref.watch(rewardsConfirmVmProvider);
  317. return Scaffold(
  318. appBar: MyAppBar.appBar(
  319. context,
  320. "Verification Confirm",
  321. backgroundColor: context.appColors.whiteBG,
  322. ),
  323. body: Column(
  324. children: [
  325. Expanded(
  326. child: SingleChildScrollView(
  327. scrollDirection: Axis.vertical,
  328. physics: const BouncingScrollPhysics(),
  329. clipBehavior: Clip.none,
  330. child: Column(
  331. children: [
  332. Container(
  333. color: ColorUtils.string2Color('#F2F3F6'),
  334. padding: const EdgeInsets.only(top: 15),
  335. child: Column(
  336. children: [
  337. _buildSaleItem(context, ref, _vm),
  338. _buildDeal(context, ref, _vm),
  339. _buildPackage(context, ref, _vm),
  340. _buildNotice(context, ref, _vm),
  341. ],
  342. )),
  343. ],
  344. ))),
  345. Container(
  346. height: 50,
  347. color: ColorUtils.string2Color('#4161D0'),
  348. child: Flex(
  349. direction: Axis.horizontal,
  350. children: [
  351. Expanded(
  352. flex: 1,
  353. child: Container(
  354. color: ColorUtils.string2Color('#4161D0'),
  355. height: 100,
  356. child: Row(
  357. mainAxisAlignment: MainAxisAlignment.center,
  358. crossAxisAlignment: CrossAxisAlignment.center,
  359. children: [
  360. MyTextView(
  361. "Redeem",
  362. fontSize: 16,
  363. textColor: Colors.white,
  364. isFontMedium: true,
  365. ),
  366. ],
  367. ),
  368. ).onTap(() {
  369. // 去详情
  370. _vm.doDeleteAccount();
  371. }),
  372. ),
  373. ],
  374. ),
  375. )
  376. ],
  377. ),
  378. );
  379. }
  380. }