add new free trial feature row

lib/module/store/discount/discount_view.dart

@@ -33,17 +33,59 @@ class DiscountPage extends BasePage<DiscountController> {
         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(
-                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
                 children: [
-                  _AppBar(),
-                  _DiscountHeader(),
-                  SizedBox(height: 26.h),
-                  // 创建一个1分钟的倒计时
-                  CountdownTimer(duration: const Duration(minutes: 1)),
-                  SizedBox(height: 40.h),
-                  _FeaturesPreview(),
                   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,
@@ -234,3 +276,159 @@ class _PurchaseSection extends StatelessWidget {
   }
 }
 
+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)
+                              )
+                            ],
+                          )
+                      ),
+                  ],
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+
+
+
+