import 'package:cpt_rewards/modules/rewards_confirm/rewards_confirm_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_detail_vm.dart'; @RoutePage() class RewardsDetailPage extends HookConsumerWidget { const RewardsDetailPage({Key? key}) : super(key: key); //启动当前页面 static void startInstance({BuildContext? context}) { if (context != null) { context.router.push(const RewardsDetailPageRoute()); } else { appRouter.push(const RewardsDetailPageRoute()); } } // 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( children: [ const MyAssetImage( Assets.rewardsRewardsIndex1, // width: 110, height: 150, ), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ const Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'Cute children multifunctional ……', style: TextStyle( fontSize: 16.0, color: Colors.black, fontWeight: FontWeight.w500), ), Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'Hong Ye Group Co., Ltd', style: TextStyle( fontSize: 13.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), ).marginOnly(bottom: 5), Row( children: [ const Text( '300', style: TextStyle( fontSize: 19.0, color: Colors.black, fontWeight: FontWeight.w500), ), Text( '350', style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: ColorUtils.string2Color('#808DAF'), decorationStyle: TextDecorationStyle.solid, fontSize: 12.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), ).marginOnly(left: 5, right: 5), const Text( 'Points', style: TextStyle( fontSize: 13.0, color: Colors.black, fontWeight: FontWeight.w400), ), ], ), Text( 'Cute children multifunctional umbrella, at a favorable price and versatile, is a must-have product for home travel, easy to carry and easy to use', style: TextStyle( fontSize: 13.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), ).marginOnly(bottom: 10, top: 10), Container( height: 28, decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: const BorderRadius.all(Radius.circular(6.0)), ), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsDetailDay, width: 25, height: 25, ).marginOnly(right: 5), Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'Redeem. From today until 15 Apr 2021', style: TextStyle( fontSize: 14.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), ) ], ).paddingOnly(left: 7, right: 12)), Container( height: 28, decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: const BorderRadius.all(Radius.circular(6.0)), ), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsDetailRequired, width: 25, height: 25, ).marginOnly(right: 5), Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'No Reservation Required', style: TextStyle( fontSize: 14.0, color: ColorUtils.string2Color('#808DAF'), fontWeight: FontWeight.w400), ) ], ).paddingOnly(left: 7, right: 12)) .marginOnly(top: 8, bottom: 25) ], ).paddingOnly(left: 15, right: 15, top: 10), ], )), ], ).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: 10), Text( 'Redeem Deal At', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ), Container( height: 77, decoration: BoxDecoration( color: ColorUtils.string2Color('#F2F3F6'), borderRadius: const BorderRadius.all(Radius.circular(6.0)), ), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsIndex1, width: 60, height: 60, ).marginOnly(right: 15), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 'Delibowl Group', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w500), ).marginOnly(bottom: 8), Text( maxLines: 1, // 设置最大行数为2 overflow: TextOverflow.ellipsis, // 超出部分用省略号表示 '#01-136, SingPost Center, 408600', style: TextStyle( fontSize: 14.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ) ], ).paddingOnly( top: 5, ) ], ).paddingOnly(left: 12, right: 12, bottom: 9, top: 9)) .marginOnly(top: 12, bottom: 12), 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), ), const MyAssetImage( Assets.rewardsRewardsRight, width: 12, height: 16, ), ], ), ], ).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.rewardsRewardsDetailPackage, width: 25, height: 25, ).marginOnly(right: 10), Text( 'What’s In The Package', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ).marginOnly(bottom: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Cute children umbrella X1', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Cute children umbrella X1', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Cute children umbrella X1', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Cute children umbrella X1', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Cute children umbrella X1', 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( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const MyAssetImage( Assets.rewardsRewardsDetailNotice, width: 25, height: 25, ).marginOnly(right: 10), Text( 'Redemption Notice', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ).marginOnly(bottom: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'S1.50 booking fee is applicable for online bookingsThe voucher can be redeemed in any of Cathay Outlet inSingapore both online and offline.lf digital movie voucher is redeemed for a rated movie,Cathay Cineplexes reserves the right to restrict entry toany person who is not in compliance with the relevantrating set by lnfocommunications Media DevelopmentAuthority of Singapore (IMDA).Cathay Outlets: https://www.cathaycineplexes.com.sg/cinemas/Redemption of YY Circle Points.Mondays onlyTime: 9am to 12pm / 2pm to 6pmLocation: 60 Paya Lebar Rd, #05-43 Paya Lebar Square, Singapore 409051Phone: 6604 6896**Redemption must be made personally with physical Identification Card (NRIC) and Logged-in to the YY Circle Account**Only Local registered numbers are allowed for redemption.**Screen shot of redemption code is NOT acceptable.', 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 _buildInstructions(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.rewardsRewardsDetailInstructions, width: 25, height: 25, ).marginOnly(right: 10), Text( 'Redemption Instructions', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ).marginOnly(bottom: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Reservation not required.Present your YY Circle Voucher (it’s under “Me”tab)At the outlet.', 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 _buildRedeemable(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.rewardsRewardsDetailNotice, width: 25, height: 25, ).marginOnly(right: 10), Text( 'Redeemable On', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#000000'), fontWeight: FontWeight.w500), ) ], ).marginOnly(bottom: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Sunday: 10:00 - 22:00', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Monday: 10:00 - 22:00', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Tuesday: 10:00 - 22:00', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Wednesday: 10:00 - 22:00', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Thursday: 10:00 - 22:00', style: TextStyle( fontSize: 15.0, color: ColorUtils.string2Color('#54638C'), fontWeight: FontWeight.w400), ), Text( 'Friday: 10:00 - 22:00', 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); } @override Widget build(BuildContext context, WidgetRef ref) { final _vm = ref.read(rewardsDetailVmProvider.notifier); final state = ref.watch(rewardsDetailVmProvider); return Scaffold( appBar: MyAppBar.appBar( context, "Verification Detail", backgroundColor: context.appColors.whiteBG, ), body: Column( children: [ Expanded( child: SingleChildScrollView( scrollDirection: Axis.vertical, physics: const BouncingScrollPhysics(), clipBehavior: Clip.none, child: Column( children: [ 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), _buildInstructions(context, ref, _vm), _buildRedeemable(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( "Redeem", fontSize: 16, textColor: Colors.white, isFontMedium: true, ), ], ), ).onTap(() { RewardsConfirmPage.startInstance(); }), ), ], ), ) ], ), ); } }