Clean/lib/module/store/store_view.dart

import 'package:clean/base/base_page.dart';
import 'package:clean/data/bean/store_item.dart';
import 'package:clean/module/store/store_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 'package:intl/intl.dart';

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

class StorePage extends BasePage<StoreController> {
  const StorePage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() => false;

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          IgnorePointer(
            child: Assets.images.bgStore.image(
              width: 360.w,
            ),
          ),
          SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 16.w, top: 14.h),
                      child: GestureDetector(
                        onTap: () {
                          Get.back();
                        },
                        child: Assets.images.iconCommonBack
                            .image(width: 28.w, height: 28.w),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: 16.w, top: 17.h),
                      child: GestureDetector(
                        onTap: () {
                          // controller.onRestoreClick();
                        },
                        child: Text(
                          'Restore',
                          style: TextStyle(
                            color: Colors.white70,
                            fontSize: 14.sp,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 30.h,
                ),
                // 标题
                Center(
                  child: RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'CLEAN ',
                          style: TextStyle(
                            color: "#FFDD55".color,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'PRO ',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'FREE ',
                          style: TextStyle(
                            color: "#FFDD55".color,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: 'UP STORAGE',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 20.h,
                ),
                Center(
                  child: Container(
                    width: 328.w,
                    height: 203.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: Assets.images.bgStoreFunc.provider(),
                        fit: BoxFit.fill,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreSimilar
                              .image(width: 30.w, height: 30.w),
                          title: 'One-click Remove Similar Photos',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreAi
                              .image(width: 30.w, height: 30.w),
                          title: 'Detect Blurry and Junk Photos',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStoreContacts
                              .image(width: 30.w, height: 30.w),
                          title: 'Merge Duplicate Contacts',
                        ),
                        _buildFeatureItem(
                          icon: Assets.images.iconStorePremium
                              .image(width: 30.w, height: 30.w),
                          title: 'Premium Unlimited',
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 14.h),
                Expanded(
                  child: Obx(() {
                    return ListView.builder(
                      itemCount: controller.storeItems.length,
                      itemBuilder: (context, index) {
                        var item = controller.storeItems[index];
                        return _buildSubscriptionOption(
                          item: item,
                        );
                      },
                    );
                  }),
                ),
                Center(
                  child: Text(
                    'Auto-renewable.Cancel anytime.',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.8),
                      fontSize: 12.sp,
                    ),
                  ),
                ),
                SizedBox(
                  height: 5.h,
                ),
                Center(
                  child: Container(
                    width: 312.w,
                    height: 48.h,
                    decoration: BoxDecoration(
                      color: "#0279FB".color,
                      borderRadius: BorderRadius.all(
                        Radius.circular(24.r),
                      ),
                    ),
                    child: GestureDetector(
                      onTap: () {
                        controller.onBuyClick();
                      },
                      child: Center(
                        child: Text(
                          "CONTINUE",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 16.sp,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                // // 底部链接
                SizedBox(
                  height: 8.h,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      child: Text(
                        'Privacy Policy',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 12.sp,
                        ),
                      ),
                      onTap: () {},
                    ),
                    Text(
                      ' | ',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.8),
                        fontSize: 12.sp,
                      ),
                    ),
                    GestureDetector(
                      child: Text(
                        'User Agreement',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 12.sp,
                        ),
                      ),
                      onTap: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeatureItem({
    required Image icon,
    required String title,
  }) {
    return Row(
      children: [
        SizedBox(width: 15.w),
        icon,
        SizedBox(width: 8.w),
        Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  Widget _buildSubscriptionOption({
    required StoreItem item,
  }) {
    bool isSelected = controller.currentSelectedStoreItem.value?.id == item.id;
    final formatter = NumberFormat.currency(
      symbol: '\$',
      decimalDigits: 2,
    );
    var amount = formatter.format(item.amount / 100);

    var content = "{totalPrice}, only {dailyPrice} per day";
    content = content.replaceAll("{totalPrice}", "\$${item.amount / 100}");
    content = content.replaceAll("{dailyPrice}", "\$${(item.amount / 100 / item.coefficient).toStringAsFixed(2)}");
    return Obx(() {
      return Container(
        height: 80.h,
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        child: Stack(
          children: [
            GestureDetector(
              onTap: () {
                controller.currentSelectedStoreItem.value = item;
              },
              child: Container(
                margin: EdgeInsets.only(top: 12.h),
                height: 74.h,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(14.r),
                  gradient:
                      controller.currentSelectedStoreItem.value?.id == item.id
                          ? LinearGradient(
                              begin: Alignment.centerRight,
                              end: Alignment.centerLeft,
                              colors: [
                                '#63CEFF'.color,
                                '#0279FB'.color,
                                "#047AFB".color
                              ],
                            )
                          : null,
                  border:
                      controller.currentSelectedStoreItem.value?.id == item.id
                          ? Border.all(color: Colors.transparent, width: 0.w)
                          : Border.all(
                              color: Colors.white.withOpacity(0.2),
                              width: 2.w,
                            ),
                ),
                child: Container(
                  margin:
                      controller.currentSelectedStoreItem.value?.id == item.id
                          ? EdgeInsets.all(2.w)
                          : null,
                  decoration: BoxDecoration(
                    color: "#05050D".color,
                    borderRadius: BorderRadius.circular(13.r),
                  ),
                  child: Container(
                    color: Colors.white.withOpacity(0.06),
                    child: Stack(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                              left: 12.w, top: 10.h, bottom: 12.h, right: 20.w),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    item.name,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Text(
                                    content,
                                    style: TextStyle(
                                      color: Colors.white60,
                                      fontSize: 12.sp,
                                    ),
                                  ),
                                ],
                              ),
                              Text(
                                amount,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                        if (isSelected)
                          Positioned(
                            right: 0,
                            top: 0,
                            child: Container(
                              padding: EdgeInsets.only(
                                left: 8.w,
                                right: 8.w,
                                top: 2.h,
                                bottom: 5.h,
                              ),
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  begin: Alignment.centerRight,
                                  end: Alignment.centerLeft,
                                  colors: ['#63CEFF'.color, '#0279FB'.color],
                                ),
                                borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(14.r),
                                  bottomLeft: Radius.circular(14.r),
                                ),
                                // border: Border.all(color: Colors.transparent, width: 2.w),
                              ),
                              child: Text(
                                'No payment now!',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 11.sp,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            if (false)
              Positioned(
                right: 120.w,
                top: 0.h,
                child: Assets.images.iconStoreFree
                    .image(width: 30.w, height: 28.h),
              ),
          ],
        ),
      );
    });
  }
}