rewards_search_page.dart 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. import 'package:cs_resources/theme/app_colors_theme.dart';
  2. import 'package:cs_resources/theme/theme_config.dart';
  3. import 'package:flutter/cupertino.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:auto_route/auto_route.dart';
  6. import 'package:hooks_riverpod/hooks_riverpod.dart';
  7. import 'package:router/ext/auto_router_extensions.dart';
  8. import 'package:shared/utils/log_utils.dart';
  9. import 'package:shared/utils/color_utils.dart';
  10. import 'package:widgets/ext/ex_widget.dart';
  11. import 'package:widgets/my_appbar.dart';
  12. import 'package:widgets/my_load_image.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_search_vm.dart';
  18. @RoutePage()
  19. class RewardsSearchPage extends HookConsumerWidget {
  20. const RewardsSearchPage({Key? key}) : super(key: key);
  21. //启动当前页面
  22. static void startInstance({BuildContext? context}) {
  23. if (context != null) {
  24. context.router.push(const RewardsSearchPageRoute());
  25. } else {
  26. appRouter.push(const RewardsSearchPageRoute());
  27. }
  28. }
  29. Widget _buildItemLeftSection(BuildContext context, WidgetRef ref, item, _vm) {
  30. return Column(
  31. children: [
  32. Column(
  33. crossAxisAlignment: CrossAxisAlignment.center,
  34. mainAxisAlignment: MainAxisAlignment.center,
  35. children: [
  36. const Center(
  37. child: Text(
  38. 'SHOW THE VERIFICATION CODE TO YOUR MERCHANT',
  39. textAlign: TextAlign.center,
  40. style: TextStyle(
  41. fontSize: 20.0,
  42. color: Colors.black,
  43. fontWeight: FontWeight.w500),
  44. ),
  45. ),
  46. Text(
  47. 'VERIFICATION CODE',
  48. style: TextStyle(
  49. fontSize: 18.0,
  50. color: ColorUtils.string2Color('#54638C'),
  51. fontWeight: FontWeight.w500),
  52. ).marginOnly(top: 35, bottom: 20),
  53. Text(
  54. '778890',
  55. style: TextStyle(
  56. fontSize: 36.0,
  57. color: ColorUtils.string2Color('#4161D0'),
  58. fontWeight: FontWeight.w500),
  59. ),
  60. ],
  61. ),
  62. ],
  63. );
  64. }
  65. // listitem
  66. Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, _vm) {
  67. return Column(
  68. children: [
  69. Container(
  70. decoration: const BoxDecoration(
  71. color: Colors.white,
  72. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  73. boxShadow: [
  74. BoxShadow(
  75. color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  76. ],
  77. ),
  78. width: MediaQuery.of(context).size.width - 30,
  79. height: 250,
  80. // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
  81. child: Column(
  82. crossAxisAlignment: CrossAxisAlignment.start,
  83. mainAxisAlignment: MainAxisAlignment.start,
  84. children: [_buildItemLeftSection(context, ref, item, _vm)],
  85. ).paddingOnly(left: 26, right: 26, top: 40),
  86. ),
  87. ],
  88. ).marginOnly(left: 15, bottom: 15, right: 15);
  89. }
  90. // list
  91. Widget _buildSaleList(BuildContext context, WidgetRef ref, _vm) {
  92. List itemsList = _vm.state.list.toList();
  93. return _buildSaleItem(context, ref, itemsList[0], _vm);
  94. }
  95. // SearchOf
  96. Widget _buildSearchOf(BuildContext context, WidgetRef ref, _vm) {
  97. List itemsList = _vm.state.list.toList();
  98. return Column(
  99. crossAxisAlignment: CrossAxisAlignment.start,
  100. mainAxisAlignment: MainAxisAlignment.start,
  101. children: [
  102. _buildSearchRecent(context, ref, _vm),
  103. _buildSearchTrending(context, ref, _vm),
  104. _buildSearchRecently(context, ref, _vm),
  105. ],
  106. );
  107. }
  108. // Recent
  109. Widget _buildSearchRecent(BuildContext context, WidgetRef ref, _vm) {
  110. List itemsList = _vm.state.list.toList();
  111. return Column(
  112. crossAxisAlignment: CrossAxisAlignment.start,
  113. mainAxisAlignment: MainAxisAlignment.start,
  114. children: [
  115. Text(
  116. 'Recent Searches',
  117. style: TextStyle(
  118. fontSize: 16.0,
  119. color: ColorUtils.string2Color('#000000'),
  120. fontWeight: FontWeight.w500),
  121. ).marginOnly(bottom: 20),
  122. Wrap(
  123. direction: Axis.horizontal, // 水平方向排列
  124. spacing: 10.0, // 子组件之间的间距
  125. runSpacing: 15.0, // 子组件行与行之间的间距
  126. children: List.generate(4, (index) {
  127. return _buildSearchRecentItem(context, ref, _vm);
  128. }))
  129. ],
  130. ).marginOnly(bottom: 20);
  131. }
  132. Widget _buildSearchRecentItem(BuildContext context, WidgetRef ref, _vm) {
  133. return Container(
  134. decoration: const BoxDecoration(
  135. color: Colors.white,
  136. borderRadius: BorderRadius.all(Radius.circular(3.0)),
  137. ),
  138. padding: const EdgeInsets.all(10),
  139. child: Text(
  140. 'Dragon bowl',
  141. style: TextStyle(
  142. fontSize: 14.0,
  143. color: ColorUtils.string2Color('#969696'),
  144. fontWeight: FontWeight.w400),
  145. ),
  146. );
  147. }
  148. // Trending
  149. Widget _buildSearchTrending(BuildContext context, WidgetRef ref, _vm) {
  150. List itemsList = _vm.state.list.toList();
  151. return Column(
  152. crossAxisAlignment: CrossAxisAlignment.start,
  153. mainAxisAlignment: MainAxisAlignment.start,
  154. children: [
  155. Text(
  156. 'Trending Searches',
  157. style: TextStyle(
  158. fontSize: 16.0,
  159. color: ColorUtils.string2Color('#000000'),
  160. fontWeight: FontWeight.w500),
  161. ).marginOnly(bottom: 20),
  162. Wrap(
  163. direction: Axis.horizontal, // 水平方向排列
  164. spacing: 10.0, // 子组件之间的间距
  165. runSpacing: 15.0, // 子组件行与行之间的间距
  166. children: List.generate(4, (index) {
  167. return _buildSearchTrendingItem(context, ref, _vm);
  168. }))
  169. ],
  170. ).marginOnly(bottom: 20);
  171. }
  172. Widget _buildSearchTrendingItem(BuildContext context, WidgetRef ref, _vm) {
  173. return Container(
  174. decoration: const BoxDecoration(
  175. color: Colors.white,
  176. borderRadius: BorderRadius.all(Radius.circular(3.0)),
  177. ),
  178. padding: const EdgeInsets.all(10),
  179. child: Row(
  180. mainAxisSize: MainAxisSize.min,
  181. children: [
  182. const MyAssetImage(
  183. Assets.rewardsRewardsHost,
  184. width: 12,
  185. height: 14,
  186. ).marginOnly(right: 5),
  187. Text(
  188. 'Dragon bowl',
  189. style: TextStyle(
  190. fontSize: 14.0,
  191. color: ColorUtils.string2Color('#969696'),
  192. fontWeight: FontWeight.w400),
  193. ),
  194. ],
  195. ),
  196. );
  197. }
  198. // Recently
  199. Widget _buildSearchRecently(BuildContext context, WidgetRef ref, _vm) {
  200. List itemsList = _vm.state.list.toList();
  201. return Column(
  202. crossAxisAlignment: CrossAxisAlignment.start,
  203. mainAxisAlignment: MainAxisAlignment.start,
  204. children: [
  205. Text(
  206. 'Recently viewed',
  207. style: TextStyle(
  208. fontSize: 16.0,
  209. color: ColorUtils.string2Color('#000000'),
  210. fontWeight: FontWeight.w500),
  211. ).marginOnly(bottom: 18),
  212. Column(
  213. crossAxisAlignment: CrossAxisAlignment.center,
  214. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  215. children: List.generate(2, (index) {
  216. return _buildSearchItem(context, ref, _vm);
  217. }))
  218. ],
  219. );
  220. }
  221. Widget _buildSearchItem(BuildContext context, WidgetRef ref, _vm) {
  222. return Container(
  223. // width: MediaQuery.of(context).size.width / 2 - 25,
  224. // height: 240,
  225. padding: const EdgeInsets.only(bottom: 20),
  226. decoration: const BoxDecoration(
  227. color: Colors.white,
  228. borderRadius: BorderRadius.all(Radius.circular(6.0)),
  229. boxShadow: [
  230. BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
  231. ],
  232. ),
  233. child: Column(
  234. children: [
  235. const MyAssetImage(
  236. Assets.rewardsRewardsIndex1,
  237. // width: 110,
  238. height: 149,
  239. ),
  240. Column(
  241. crossAxisAlignment: CrossAxisAlignment.start,
  242. children: [
  243. const Text(
  244. maxLines: 1, // 设置最大行数为2
  245. overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
  246. 'Cute children multifunctional ……',
  247. style: TextStyle(
  248. fontSize: 15.0,
  249. color: Colors.black,
  250. fontWeight: FontWeight.w500),
  251. ),
  252. Text(
  253. maxLines: 1, // 设置最大行数为2
  254. overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
  255. 'Hong Ye Group Co., Ltd',
  256. style: TextStyle(
  257. fontSize: 13.0,
  258. color: ColorUtils.string2Color('#808DAF'),
  259. fontWeight: FontWeight.w400),
  260. ).marginOnly(bottom: 5),
  261. Row(
  262. children: [
  263. const Text(
  264. '300',
  265. style: TextStyle(
  266. fontSize: 18.0,
  267. color: Colors.black,
  268. fontWeight: FontWeight.w500),
  269. ),
  270. Text(
  271. '350',
  272. style: TextStyle(
  273. decoration: TextDecoration.lineThrough,
  274. decorationColor: ColorUtils.string2Color('#808DAF'),
  275. decorationStyle: TextDecorationStyle.solid,
  276. fontSize: 13.0,
  277. color: ColorUtils.string2Color('#808DAF'),
  278. fontWeight: FontWeight.w400),
  279. ).marginOnly(left: 5, right: 5),
  280. const Text(
  281. 'Points',
  282. style: TextStyle(
  283. fontSize: 13.0,
  284. color: Colors.black,
  285. fontWeight: FontWeight.w400),
  286. ),
  287. ],
  288. )
  289. ],
  290. ).paddingOnly(top: 12, left: 12, right: 12)
  291. ],
  292. )).marginOnly(bottom: 13);
  293. }
  294. @override
  295. Widget build(BuildContext context, WidgetRef ref) {
  296. final _vm = ref.read(rewardsSearchVmProvider.notifier);
  297. final state = ref.watch(rewardsSearchVmProvider);
  298. return Scaffold(
  299. appBar: MyAppBar.searchAppBar(context,
  300. backgroundColor: Colors.white,
  301. systemUiOverlayStyle:
  302. ThemeConfig.systemUiOverlayStyleLightThemeBlack),
  303. body: SingleChildScrollView(
  304. scrollDirection: Axis.vertical,
  305. physics: const BouncingScrollPhysics(),
  306. clipBehavior: Clip.none,
  307. child: Container(
  308. width: MediaQuery.of(context).size.width,
  309. color: ColorUtils.string2Color('#F2F3F6'),
  310. padding: const EdgeInsets.only(top: 20, left: 15, right: 15),
  311. child: _buildSearchOf(context, ref, _vm)),
  312. ),
  313. );
  314. }
  315. }