import 'package:cpt_rewards/modules/rewards_address/rewards_address_page.dart'; import 'package:cpt_rewards/modules/rewards_my/rewards_my_page.dart'; import 'package:cs_resources/theme/app_colors_theme.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:auto_route/auto_route.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:router/ext/auto_router_extensions.dart'; import 'package:shared/utils/log_utils.dart'; import 'package:shared/utils/color_utils.dart'; import 'package:widgets/ext/ex_widget.dart'; import 'package:widgets/my_appbar.dart'; import 'package:widgets/my_load_image.dart'; import 'package:widgets/my_text_view.dart'; import 'package:widgets/shatter/picker_container.dart'; import 'package:widgets/widget_export.dart'; import 'package:cs_resources/generated/assets.dart'; import '../../../router/page/rewards_page_router.dart'; import './rewards_successful_vm.dart'; @RoutePage() class RewardsSuccessfulPage extends HookConsumerWidget { const RewardsSuccessfulPage({Key? key}) : super(key: key); //启动当前页面 static void startInstance({BuildContext? context}) { if (context != null) { context.router.push(const RewardsSuccessfulPageRoute()); } else { appRouter.push(const RewardsSuccessfulPageRoute()); } } // listitem Widget _buildSaleItem(BuildContext context, WidgetRef ref, _vm) { return Column( children: [ Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(6.0)), boxShadow: [ BoxShadow( color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6) ], ), width: MediaQuery.of(context).size.width - 30, // height: 420, // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ const MyAssetImage( Assets.rewardsRewardsIndex1, // width: 110, height: 150, ), const Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'Cute children multifunctional umbrella', style: TextStyle( fontSize: 17.0, color: Colors.black, fontWeight: FontWeight.w500), ), ], ).paddingOnly(left: 15, right: 15, top: 10, bottom: 30), ], )), ], ).marginOnly(left: 15, bottom: 15, right: 15); } Widget _buildDeal(BuildContext context, WidgetRef ref, _vm) { return Column( children: [ Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(6.0)), boxShadow: [ BoxShadow( color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6) ], ), width: MediaQuery.of(context).size.width - 30, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsDetailDeal, width: 25, height: 25, ).marginOnly(right: 5), Text( 'Redeem Deal At', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( 'Also redeemable in 1 more location', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), ], ).marginOnly(top: 10, bottom: 15), Container( height: 40, decoration: BoxDecoration( color: Colors.white, borderRadius: const BorderRadius.all(Radius.circular(6.0)), border: Border.all( color: ColorUtils.string2Color('#4161D0'), width: 1.0), ), child: Center( child: Text( 'See More Locations', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), ), ).onTap(() { // 去详情 RewardsAddressPage.startInstance(); }), ), ], ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20), ), ], ).marginOnly(left: 15, bottom: 15, right: 15); } Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) { return Column( children: [ Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(6.0)), boxShadow: [ BoxShadow( color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6) ], ), width: MediaQuery.of(context).size.width - 30, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsIconDatd, width: 15, height: 15, ).marginOnly(right: 10), Text( 'Redeem From', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ).marginOnly(bottom: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '17 Mar 2020 until 15 Jul 2020', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), ], ), ], ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20), ), ], ).marginOnly(left: 15, bottom: 15, right: 15); } Widget _buildNotice(BuildContext context, WidgetRef ref, _vm) { return Column( children: [ Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(6.0)), boxShadow: [ BoxShadow( color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6) ], ), width: MediaQuery.of(context).size.width - 30, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( 'Date & Time:', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#333333'), fontWeight: FontWeight.w400), ), Row( children: [ Text( '21 Jun 2021 20:18', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), ], ), ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( 'Transaction ID:', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#333333'), fontWeight: FontWeight.w400), ), Row( children: [ Text( 'PR00021837HY', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), ], ), ], ).marginOnly(top: 30, bottom: 10), ], ).paddingOnly(left: 15, right: 15, top: 30, bottom: 30), ), ], ).marginOnly(left: 15, bottom: 15, right: 15); } Widget _buildTop(BuildContext context, WidgetRef ref, _vm) { return Container( width: MediaQuery.of(context).size.width, color: ColorUtils.string2Color('#FFFFFF'), padding: const EdgeInsets.only(top: 15, bottom: 30), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsSuccess, width: 54, height: 54, ), Text( 'You Have Paid Points', style: TextStyle( fontSize: 18.0, color: ColorUtils.string2Color('#4161D0'), fontWeight: FontWeight.w500), ).marginOnly(top: 12, bottom: 15), Text( '600', style: TextStyle( fontSize: 30.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ), ], )); } @override Widget build(BuildContext context, WidgetRef ref) { final _vm = ref.read(rewardsSuccessfulVmProvider.notifier); final state = ref.watch(rewardsSuccessfulVmProvider); return Scaffold( appBar: MyAppBar.appBar( context, "Payment Successful", backgroundColor: context.appColors.whiteBG, ), body: Column( children: [ Expanded( child: SingleChildScrollView( scrollDirection: Axis.vertical, physics: const BouncingScrollPhysics(), clipBehavior: Clip.none, child: Column( children: [ _buildTop(context, ref, _vm), Container( color: ColorUtils.string2Color('#F2F3F6'), padding: const EdgeInsets.only(top: 15), child: Column( children: [ _buildSaleItem(context, ref, _vm), _buildDeal(context, ref, _vm), _buildPackage(context, ref, _vm), _buildNotice(context, ref, _vm), ], )), ], ))), Container( height: 50, color: ColorUtils.string2Color('#4161D0'), child: Flex( direction: Axis.horizontal, children: [ Expanded( flex: 1, child: Container( color: ColorUtils.string2Color('#4161D0'), height: 100, child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ MyTextView( "Check My Rewards", fontSize: 16, textColor: Colors.white, isFontMedium: true, ), ], ), ).onTap(() { // 去详情 RewardsMyPage.startInstance(); }), ), ], ), ) ], ), ); } }