import 'dart:ffi'; import 'package:cpt_rewards/modules/rewards_address/rewards_address_page.dart'; import 'package:cpt_rewards/modules/rewards_code/rewards_code_page.dart'; import 'package:cpt_rewards/modules/rewards_history/rewards_history_page.dart'; import 'package:cpt_rewards/modules/rewards_home/rewards_home_page.dart'; import 'package:cpt_rewards/modules/rewards_list/rewards_list_page.dart'; import 'package:cpt_rewards/modules/rewards_my/rewards_my_page.dart'; import 'package:cs_resources/generated/assets.dart'; import 'package:cs_resources/generated/l10n.dart'; import 'package:cs_resources/theme/app_colors_theme.dart'; import 'package:cs_resources/theme/theme_config.dart'; import 'package:domain/entity/rewards_index_entity.dart'; import 'package:flutter/material.dart'; import 'package:auto_route/auto_route.dart'; import 'package:flutter/services.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:plugin_basic/modules/global_web_page.dart'; import 'package:plugin_platform/engine/image/image_nine_grid.dart'; import 'package:router/ext/auto_router_extensions.dart'; import 'package:shared/utils/color_utils.dart'; import 'package:shared/utils/log_utils.dart'; import 'package:widgets/ext/ex_widget.dart'; import 'package:widgets/load_state_layout.dart'; import 'package:widgets/my_appbar.dart'; import 'package:widgets/my_load_image.dart'; import 'package:widgets/widget_export.dart'; import 'package:intl/intl.dart'; import '../../../router/page/rewards_page_router.dart'; import './rewards_vm.dart'; @RoutePage() class RewardsPage extends HookConsumerWidget { const RewardsPage({Key? key}) : super(key: key); //启动当前页面 static void startInstance({BuildContext? context}) { if (context != null) { context.router.push(const RewardsPageRoute()); } else { appRouter.push(const RewardsPageRoute()); } } @override Widget build(BuildContext context, WidgetRef ref) { final _vm = ref.read(rewardsVmProvider.notifier); final state = ref.watch(rewardsVmProvider); RewardsIndexEntity? list = state.list; useEffect(() { // 组件挂载时执行 - 执行接口请求 Future.microtask(() => _vm.initPageData()); return () { // 组件卸载时执行 Log.d("property_news_page 组件卸载时执行"); }; }, []); return Scaffold( appBar: MyAppBar.appBar(context, S.current.daily_login, backIconPath: Assets.rewardsRewardsBack, backIconWidth: 32.0, backIconHeight: 32.0, titleColor: Colors.white, titleDarkColor: Colors.white, showBackButton: true, backgroundColor: context.appColors.btnBgDefault, systemUiOverlayStyle: MediaQuery.of(context).platformBrightness == Brightness.dark ? ThemeConfig.systemUiOverlayStyleDarkTheme : ThemeConfig.systemUiOverlayStyleLightThemeWhite, actions: [ const MyAssetImage( Assets.rewardsRewardsIconWen, width: 20, height: 20, ).marginOnly(right: 15).onTap(() { // 去详情 // _vm.launchURL(url); GlobalWebPage.startInstance(context: context, title: S.current.how_do_i_earn_points, url: 'https://yyjobs.sg/terms/PointsRules.html'); }) ]), body: Column(children: [ Expanded( child: LoadStateLayout( state: state.loadingState, errorMessage: state.errorMessage, errorRetry: () { _vm.retryRequest(); }, successWidget: SingleChildScrollView( scrollDirection: Axis.vertical, physics: const BouncingScrollPhysics(), clipBehavior: Clip.none, child: Column( children: [ _buildTop(context, ref, _vm, list), Container( transform: Matrix4.translationValues(0.0, -45.0, 0.0), child: Column( children: [ _buildSearch(context, ref, _vm, list), _buildSwiper(context, ref, _vm, list), list?.points != 0 ? _buildList(context, ref, _vm, list) : const SizedBox.shrink(), _buildHistory(context, ref, _vm, list), ], ), // 使用负数margin ).paddingOnly(left: 15, right: 15), ], )), ), ), ]).backgroundColor(ColorUtils.string2Color('#F2F3F6')), ); } Widget _buildTop(BuildContext context, WidgetRef ref, _vm, RewardsIndexEntity? list) { int points = list?.points ?? 0; return Container( decoration: BoxDecoration( border: Border( bottom: BorderSide( color: ColorUtils.string2Color('#4161D0'), // 设置bottom边框的颜色 width: 45.0, // 设置bottom边框的宽度 )), borderRadius: const BorderRadius.only( topLeft: Radius.circular(0.0), topRight: Radius.circular(0.0), bottomLeft: Radius.circular(30.0), bottomRight: Radius.circular(30.0), ), // 圆角 ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( S.current.available_points, style: const TextStyle(fontSize: 17.0, color: Colors.white, fontWeight: FontWeight.w500), // 设置字体大小 ), Container( decoration: BoxDecoration( border: Border.all(color: Colors.white, width: 1), // 边框 borderRadius: BorderRadius.circular(8), // 圆角 ), child: Row( children: [ const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ).marginOnly(right: 5), Text( '$points', style: const TextStyle(fontSize: 15.0, color: Colors.white, fontWeight: FontWeight.w400), // 设置字体大小 ), ], ).paddingOnly(left: 10, top: 7, bottom: 7, right: 10), ), ], ).paddingOnly(left: 10, top: 0, bottom: 18), ], ) .paddingOnly(top: 15, left: 5, right: 15, bottom: 0) .border(bottom: 0, color: ColorUtils.string2Color('#4161D0')) .backgroundColor(ColorUtils.string2Color('#4161D0'))); } Widget _buildSearch(BuildContext context, WidgetRef ref, _vm, RewardsIndexEntity? list) { final dateFormat = DateFormat('yyyy-MM-dd'); final now = DateFormat('yyyy-MM-dd').format(DateTime.now()); // final date = list.continuous.currentWeekCheckin[0] ?? now; final date = now; final date0 = DateFormat('MM-dd').format(dateFormat.parse(date).subtract(const Duration(days: 1))); final date1 = DateFormat('MM-dd').format(dateFormat.parse(date).add(const Duration(days: 1))); final date2 = DateFormat('MM-dd').format(dateFormat.parse(date).add(const Duration(days: 2))); final date3 = DateFormat('MM-dd').format(dateFormat.parse(date).add(const Duration(days: 3))); final date4 = DateFormat('MM-dd').format(dateFormat.parse(date).add(const Duration(days: 4))); final date5 = DateFormat('MM-dd').format(dateFormat.parse(date).add(const Duration(days: 5))); // final nextDate = date.add(Duration(days: 1)); return Container( width: MediaQuery.of(context).size.width - 30, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( S.current.continuous_login_8_day, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), Flex( direction: Axis.horizontal, children: [ Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#4161D0'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date0', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), const SizedBox(width: 15.0), Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#4161D0'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#4161D0'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Today', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#ffffff'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#ffffff'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), const SizedBox(width: 15.0), Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#F2F3F6'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date1', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), const SizedBox(width: 15.0), Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#F2F3F6'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date2', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), ], ).marginOnly(top: 13, bottom: 13), Flex( direction: Axis.horizontal, children: [ Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#F2F3F6'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date3', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), const SizedBox(width: 15.0), Expanded( flex: 1, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#F2F3F6'), width: 1), ), height: 78, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date4', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w400), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 23, height: 23, ), Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ), ), const SizedBox(width: 15.0), Expanded( flex: 2, child: Container( decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: BorderRadius.circular(10), border: Border.all(color: ColorUtils.string2Color('#F2F3F6'), width: 1), ), height: 78, child: Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.center, // mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$date5', style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w400), // 设置字体大小 ), Text( '+ More', style: TextStyle(fontSize: 12.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), const MyAssetImage( Assets.rewardsRewardsIconYdjb, width: 67, height: 57, ).paddingOnly(top: 7), ], ).paddingOnly(top: 8, left: 13, right: 4), ), ), ], ), ], ).paddingOnly(left: 15, right: 15, top: 15, bottom: 15), ); } Widget _buildSwiper(BuildContext context, WidgetRef ref, _vm, RewardsIndexEntity? list) { int points = list?.points ?? 0; return Container( // color: Colors.white, height: 55, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)], ), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( S.current.how_to_get_rewards, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), Container( padding: const EdgeInsets.only(top: 10, bottom: 10, left: 17, right: 17), decoration: BoxDecoration( color: ColorUtils.string2Color('#4161D0'), borderRadius: BorderRadius.circular(5), ), child: Text( S.current.rewards, style: TextStyle(fontSize: 14.0, color: ColorUtils.string2Color('#ffffff'), fontWeight: FontWeight.w400), // 设置字体大小 ).onTap(() { RewardsHomePage.startInstance(points: points); }), ), ], ).paddingOnly(left: 15, right: 15), ).marginOnly(top: 12, bottom: 12); } Widget _buildList(BuildContext context, WidgetRef ref, _vm, RewardsIndexEntity? list) { bool newsFeed = list?.tasks?.newsFeedPost ?? false; int giveLikes = list?.tasks?.give10Likes ?? 0; return Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)], ), child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( padding: const EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, // 底边边框的宽度 color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色 ))), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Container( padding: const EdgeInsets.only(top: 10, bottom: 10, left: 17, right: 17), decoration: BoxDecoration( color: ColorUtils.string2Color('#f2f3f6'), borderRadius: BorderRadius.circular(5), ), child: const MyAssetImage( Assets.rewardsRewardsIconIm, width: 29, height: 24, ), ).marginOnly(right: 12), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( S.current.daily_login, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ).marginOnly(bottom: 6), Row( children: [ Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 14, height: 14, ).marginOnly(left: 3) ], ) ], ) ], ), Container( width: 86, height: 30, decoration: BoxDecoration( color: ColorUtils.string2Color('#ffffff'), borderRadius: BorderRadius.circular(5), border: Border.all(color: ColorUtils.string2Color('#4161D0'), width: 1), ), child: Center( child: Text( S.current.check_in, style: TextStyle(fontSize: 14.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w400), // 设置字体大小 ), ), ), ], ), ), Container( padding: const EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, // 底边边框的宽度 color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色 ))), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Container( padding: const EdgeInsets.only(top: 10, bottom: 10, left: 17, right: 17), decoration: BoxDecoration( color: ColorUtils.string2Color('#f2f3f6'), borderRadius: BorderRadius.circular(5), ), child: const MyAssetImage( Assets.rewardsRewardsIconIm, width: 29, height: 24, ), ).marginOnly(right: 12), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( S.current.news_feed_post, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ).marginOnly(bottom: 6), Row( children: [ Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 14, height: 14, ).marginOnly(left: 3) ], ) ], ) ], ), Container( width: 86, height: 30, decoration: BoxDecoration( color: ColorUtils.string2Color('#ffffff'), borderRadius: BorderRadius.circular(5), border: Border.all(color: ColorUtils.string2Color('#4161D0'), width: 1), ), child: Center( child: Text( newsFeed == true ? S.current.completed : S.current.incomplete, style: TextStyle(fontSize: 14.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w400), // 设置字体大小 ), ), ), ], ), ), Container( padding: const EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, // 底边边框的宽度 color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色 ))), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Container( padding: const EdgeInsets.only(top: 10, bottom: 10, left: 17, right: 17), decoration: BoxDecoration( color: ColorUtils.string2Color('#f2f3f6'), borderRadius: BorderRadius.circular(5), ), child: const MyAssetImage( Assets.rewardsRewardsIconIm, width: 29, height: 24, ), ).marginOnly(right: 12), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( S.current.give_10_likes, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ).marginOnly(bottom: 6), Row( children: [ Text( '+2', style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconJb, width: 14, height: 14, ).marginOnly(left: 3) ], ) ], ) ], ), Container( width: 86, height: 30, decoration: BoxDecoration( color: ColorUtils.string2Color('#ffffff'), borderRadius: BorderRadius.circular(5), border: Border.all(color: ColorUtils.string2Color('#4161D0'), width: 1), ), child: Center( child: Text( giveLikes == 10 ? S.current.completed : '$giveLikes/10', style: TextStyle(fontSize: 14.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w400), // 设置字体大小 ), ), ), ], ), ) ], ), ).marginOnly(bottom: 12); } Widget _buildHistory(BuildContext context, WidgetRef ref, _vm, RewardsIndexEntity? list) { List latest = list?.latest ?? []; Log.d("list是空吗? $list 最近的信息:$latest"); return Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)], ), child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Row(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( S.current.points_history, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), Text( S.current.more_arrow, style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), // 设置字体大小 ).onTap(() { RewardsHistoryPage.startInstance(); }) ]).paddingOnly(left: 15, right: 15, top: 15, bottom: 5), Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: List.generate(latest.length, (index) { int point = latest[index]['point']; return Container( padding: const EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, // 底边边框的宽度 color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色 ))), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( latest[index]['short_description'], style: TextStyle(fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ).marginOnly(bottom: 6), Text( latest[index]['created_at'], style: TextStyle(fontSize: 13.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), // 设置字体大小 ), ], ), Text( "$point", style: TextStyle(fontSize: 20.0, color: ColorUtils.string2Color('#FDB429'), fontWeight: FontWeight.w500), // 设置字体大小 ), ], ), ); })) ], ), ).marginOnly(bottom: 12); } }