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:domain/entity/rewards_index_entity.dart'; import 'package:flutter/material.dart'; import 'package:auto_route/auto_route.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.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()); } } Widget _buildTop(BuildContext context, WidgetRef ref, _vm, 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: [ const MyAssetImage( Assets.rewardsRewardsBack, width: 44, height: 44, ).onTap(() { // backCallback Navigator.pop(context); }), const Text( 'Daily Login', style: TextStyle( fontSize: 18.0, color: Colors.white, fontWeight: FontWeight.w500), // 设置字体大小 ), const MyAssetImage( Assets.rewardsRewardsIconWen, width: 20, height: 20, ) ], ), // const Text( // '1526 Available Points', // style: TextStyle( // fontSize: 18.0, // color: Colors.white, // fontWeight: FontWeight.w500), // 设置字体大小 // ).paddingOnly(left: 10, top: 20, bottom: 18), Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Text( 'Available Points', style: 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: 20, 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, 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( '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, 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( '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( '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, list) { bool newsFeed = list.tasks.newsFeedPost; int giveLikes = list.tasks.give10Likes; 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( '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( '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( '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 ? 'Completed' : '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( '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 ? '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, list) { List latest = 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( 'Points History', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), // 设置字体大小 ), Text( 'More >', 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); } @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, // "Daily Login", // backgroundColor: ColorUtils.string2Color('#4161D0'), // ), 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) .paddingOnly(top: MediaQuery.of(context).padding.top), 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')), ); } }