Clean/lib/module/store/discount/discount_view.dart

import 'dart:async';

import 'package:clean/base/base_page.dart';
import 'package:clean/module/store/discount/discount_controller.dart';
import 'package:clean/utils/expand.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../resource/assets.gen.dart';
import 'count_down_timer.dart';
import 'func_page_view.dart';

class DiscountPage extends BasePage<DiscountController> {
  const DiscountPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() => false;

  @override
  Widget buildBody(BuildContext context) {
    return Obx(() {
      bool isFreeItem =
      (controller.currentSelectedStoreItem.value?.freeTrialName != null);
      bool isShowFree = isFreeItem && controller.isFree.value;
      return Scaffold(
        backgroundColor: "#05050D".color,
        body: Stack(
          children: [
            SafeArea(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    _AppBar(),
                    _DiscountHeader(),
                    SizedBox(height: 26.h),
                    // 创建一个1分钟的倒计时
                    CountdownTimer(duration: const Duration(minutes: 1)),
                    SizedBox(height: 40.h),
                    _DiscountFreeTrialSpecialRow(
                      title: '3-DAY FREE TRIAL',
                      desc: 'Then \$6.99/week only \$0.54/day',
                      isSelected: isFreeItem,
                      onSelect: (title) {
                        if (isFreeItem) {
                          controller.currentSelectedStoreItem.value = null;
                        } else {
                          controller.currentSelectedStoreItem.value = controller.storeItems.firstWhere((element) => element.freeTrialName != "");
                        }
                      },
                    ),
                    SizedBox(height: 40.h),
                    _FeaturesPreview(),
                    SizedBox(height: 40.h),
                    _MorePlansSection(),
                    SizedBox(height: 40.h),

                    // 撑高
                    SizedBox(height: 100.h),
                  ],
                ),
              ),
            ),
            SafeArea(
              top: false,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Spacer(),
                  Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          "#05050D".color.withOpacity(0),
                          "#05050D".color,
                        ],
                      ),
                    ),
                    height: 20.h,
                  ),
                  _PurchaseSection(
                    isShowFree: isShowFree,
                    controller: controller,
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }
}

class _AppBar extends StatelessWidget {
  const _AppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          margin: EdgeInsets.only(left: 16.w, top: 14.h),
          child: GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Assets.images.iconStoreClose
                .image(width: 28.w, height: 28.w),
          ),
        ),
      ],
    );
  }
}

class _DiscountHeader extends StatelessWidget {
  const _DiscountHeader({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Assets.images.iconDiscountTitle
            .image(width: 259.w, height: 55.h),
        SizedBox(height: 20.h),
        Assets.images.iconDiscountPercent
            .image(width: 195.w, height: 86.h),
        SizedBox(height: 13.h),
        Container(
          width: 197.w,
          height: 32.h,
          padding: EdgeInsets.all(1.w),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                '#CF9EFD'.color,
                '#4DCFFF'.color.withOpacity(0.5),
              ],
            ),
            borderRadius: BorderRadius.all(Radius.circular(18.r)),
          ),
          child: Container(
            decoration: BoxDecoration(
              color: "#05050D".color,
              borderRadius: BorderRadius.all(Radius.circular(18.r)),
            ),
            child: Center(
              child: Text(
                "Get CleanPro Premium",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _FeaturesPreview extends StatelessWidget {
  const _FeaturesPreview({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InfinitePreviewPageView(
      height: 98.h,
      autoPlay: true,
      autoPlayDuration: const Duration(seconds: 5),
      items: [
        PreviewItem(
          title: 'One-click Remove Similar Photos',
          icon: Assets.images.iconStoreSimilar.image(),
        ),
        PreviewItem(
          title: 'Detect Blurry and Junk Photos',
          icon: Assets.images.iconStoreAi.image(),
        ),
        PreviewItem(
          title: 'Merge Duplicate Contacts',
          icon: Assets.images.iconStoreContacts.image(),
        ),
        PreviewItem(
          title: 'Premium Unlimited',
          icon: Assets.images.iconStorePremium.image(),
        ),
      ],
    );
  }
}

class _PurchaseSection extends StatelessWidget {
  final bool isShowFree;
  final DiscountController controller;

  const _PurchaseSection({
    Key? key,
    required this.isShowFree,
    required this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          isShowFree
              ? controller.currentSelectedStoreItem.value?.freeTrialName ?? ""
              : controller.currentSelectedStoreItem.value?.name ?? "",
          style: TextStyle(
            color: Colors.white,
            fontSize: 16.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        Text(
          isShowFree
              ? controller.currentSelectedStoreItem.value?.freeTrialPriceDesc ?? ""
              : controller.currentSelectedStoreItem.value?.priceDesc ?? "",
          style: TextStyle(
            color: Colors.white,
            fontSize: 13.sp,
          ),
        ),
        SizedBox(height: 14.h),
        GestureDetector(
          onTap: () {
            controller.onBuyClick();
          },
          child: Container(
            width: 312.w,
            height: 48.h,
            decoration: BoxDecoration(
              color: "#0279FB".color,
              borderRadius: BorderRadius.all(
                Radius.circular(24.r),
              ),
            ),
            child: Center(
              child: Text(
                isShowFree ? "START FREE TRIAL" : "START NOW",
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                  fontSize: 16.sp,
                ),
              ),
            ),
          ),
        ),
        SizedBox(height: 5.h),
        Text(
          isShowFree ? "No payment now!" : "Cancel anytime",
          style: TextStyle(
            color: isShowFree ? "#57C87A".color : Colors.white,
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
}

class _MorePlansSection extends StatelessWidget {
  const _MorePlansSection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Assets.images.iconStoreMoreArrow.image(width: 8.w, height: 8.w),
          SizedBox(width: 5.w),
          Text("More Plans", style: TextStyle(color: 'ffffff'.color.withOpacity(0.7), fontSize: 12.sp, fontWeight: FontWeight.w400)),
          SizedBox(width: 5.w),
          Assets.images.iconStoreMoreArrow.image(width: 8.w, height: 8.w),
        ],
      ),
    );
  }
}

class _DiscountFreeTrialSpecialRow extends StatelessWidget {
  final String title;
  final String desc;
  final bool isSelected;
  final Function(String) onSelect;

  const _DiscountFreeTrialSpecialRow({Key? key, required this.title, required this.desc, required this.isSelected, required this.onSelect}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 15.w),
      child: GestureDetector(
        onTap: () {
          onSelect(title);
        },
        child: Stack(
          alignment: Alignment.bottomRight,
          clipBehavior: Clip.none,
          children: [
            Positioned(
              bottom: -18.h,
              child: Container(
                  alignment: Alignment.bottomCenter,
                  height: 43.h,
                  decoration: BoxDecoration(
                    color: '#1B2231'.color,
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Padding(
                    padding: EdgeInsets.only(top: 14.h, left: 7.w, right: 9.w, bottom: 2.h),
                    child: Text(desc, style: TextStyle(color: '#ffffff'.color.withOpacity(0.7), fontSize: 12, fontWeight: FontWeight.w400)),
                  )
              ),
            ),
            Container(
              padding: EdgeInsets.all(2),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: isSelected ? [
                      '#D2A3FF'.color,
                      '#419CFF'.color,
                      '#01D0FF'.color,
                    ] : [
                      '#33FFFFFF'.color,
                      '#33FFFFFF'.color,
                      '#33FFFFFF'.color,
                    ]
                ),
                borderRadius: BorderRadius.circular(20.r),
              ),
              child: Container(
                height: 74.w,
                decoration: BoxDecoration(
                  color: isSelected ? '#111f4b'.color : '000000'.color,
                  borderRadius: BorderRadius.circular(18.r),
                ),
                child: Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      child: SizedBox(
                        width: double.infinity,
                        height: double.infinity,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              title,
                              style: TextStyle(
                                color: isSelected ? '#FFe168'.color : '#ffffff'.color,
                                fontSize: 22.sp,
                                fontWeight: FontWeight.w900,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    // 右上角FREE标签
                    if (isSelected)
                      Positioned(
                          top: -14,
                          right: 10,
                          child:Stack(
                            clipBehavior: Clip.none,
                            alignment: Alignment.centerLeft,
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
                                decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      begin: Alignment.centerLeft,
                                      end: Alignment.centerRight,
                                      colors: [
                                        '#53CDFE'.color,
                                        '#0279FB'.color,
                                      ],
                                    ),
                                    borderRadius: BorderRadius.all(Radius.circular(20.w))
                                ),
                                child: Text(
                                  'No payment now!',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 12.sp,
                                  ),
                                ),
                              ),
                              Positioned(
                                  left: -22,
                                  child: Assets.images.iconStoreFree.image(width: 30.w, height: 30.w)
                              )
                            ],
                          )
                      ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}