YYHome/packages/cpt_rewards/lib/modules/rewards_detail/rewards_detail_page.dart

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:flutter_hooks/flutter_hooks.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/load_state_layout.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 {
  final int? id;
  const RewardsDetailPage(
      {Key? key,
      @PathParam('id') required this.id}) : super(key: key);

  //启动当前页面
  static void startInstance({
    BuildContext? context,
    int? id,
  }) {
    if (context != null) {
      context.router.push(RewardsDetailPageRoute(id: id));
    } else {
      appRouter.push(RewardsDetailPageRoute(id: id));
    }
  }

  // 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);
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => _vm.initPageData(id:id));
      return () {
        // 组件卸载时执行
        Log.d("property_news_page 组件卸载时执行");
      };
    }, []);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Verification Detail",
        backgroundColor: context.appColors.whiteBG,
      ),
      body:  LoadStateLayout(
          state: state.loadingState,
          errorMessage: state.errorMessage,
          errorRetry: () {
            _vm.retryRequest(id: id);
          },
          successWidget: 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();
                  }),
                ),
              ],
            ),
          )
        ],
      )),
    );
  }
}