|
|
@@ -1,4 +1,5 @@
|
|
|
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';
|
|
|
@@ -150,18 +151,17 @@ class StorePage extends BasePage<StoreController> {
|
|
|
),
|
|
|
SizedBox(height: 14.h),
|
|
|
Expanded(
|
|
|
- child: ListView.builder(
|
|
|
- itemCount: 3,
|
|
|
- itemBuilder: (context, index) {
|
|
|
- return _buildSubscriptionOption(
|
|
|
- title: '3-DAY FREE TRIAL',
|
|
|
- price: '\$6.99/week',
|
|
|
- perDay: 'only \$0.64/day',
|
|
|
- isSelected: true,
|
|
|
- showTag: true,
|
|
|
- );
|
|
|
- },
|
|
|
- ),
|
|
|
+ child: Obx(() {
|
|
|
+ return ListView.builder(
|
|
|
+ itemCount: controller.storeItems.length,
|
|
|
+ itemBuilder: (context, index) {
|
|
|
+ var item = controller.storeItems[index];
|
|
|
+ return _buildSubscriptionOption(
|
|
|
+ item: item,
|
|
|
+ );
|
|
|
+ },
|
|
|
+ );
|
|
|
+ }),
|
|
|
),
|
|
|
Center(
|
|
|
child: Text(
|
|
|
@@ -200,7 +200,9 @@ class StorePage extends BasePage<StoreController> {
|
|
|
),
|
|
|
),
|
|
|
// // 底部链接
|
|
|
- SizedBox(height: 8.h,),
|
|
|
+ SizedBox(
|
|
|
+ height: 8.h,
|
|
|
+ ),
|
|
|
Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
children: [
|
|
|
@@ -233,91 +235,6 @@ class StorePage extends BasePage<StoreController> {
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
- //
|
|
|
- // // 订阅选项
|
|
|
- // _buildSubscriptionOption(
|
|
|
- // title: '3-DAY FREE TRIAL',
|
|
|
- // price: '\$6.99/week',
|
|
|
- // perDay: 'only \$0.64/day',
|
|
|
- // isSelected: true,
|
|
|
- // showTag: true,
|
|
|
- // ),
|
|
|
- //
|
|
|
- // _buildSubscriptionOption(
|
|
|
- // title: '1 Month',
|
|
|
- // price: '\$19.99',
|
|
|
- // perDay: 'only \$0.64/day',
|
|
|
- // ),
|
|
|
- //
|
|
|
- // _buildSubscriptionOption(
|
|
|
- // title: '1 Year',
|
|
|
- // price: '\$69.99',
|
|
|
- // perDay: 'only \$0.19/day',
|
|
|
- // ),
|
|
|
- //
|
|
|
- // // 底部文本
|
|
|
- // Padding(
|
|
|
- // padding: EdgeInsets.symmetric(vertical: 16.h),
|
|
|
- // child: Center(
|
|
|
- // child: Text(
|
|
|
- // 'Auto-renewable.Cancel anytime.',
|
|
|
- // style: TextStyle(
|
|
|
- // color: Colors.white54,
|
|
|
- // fontSize: 12.sp,
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- //
|
|
|
- // // 继续按钮
|
|
|
- // Padding(
|
|
|
- // padding: EdgeInsets.all(20.w),
|
|
|
- // child: ElevatedButton(
|
|
|
- // style: ElevatedButton.styleFrom(
|
|
|
- // backgroundColor: Colors.blue,
|
|
|
- // minimumSize: Size(double.infinity, 50.h),
|
|
|
- // shape: RoundedRectangleBorder(
|
|
|
- // borderRadius: BorderRadius.circular(25.r),
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- // child: Text(
|
|
|
- // 'CONTINUE',
|
|
|
- // style: TextStyle(
|
|
|
- // fontSize: 16.sp,
|
|
|
- // fontWeight: FontWeight.bold,
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- // onPressed: () {},
|
|
|
- // ),
|
|
|
- // ),
|
|
|
- //
|
|
|
- // // 底部链接
|
|
|
- // Padding(
|
|
|
- // padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
|
- // child: Row(
|
|
|
- // mainAxisAlignment: MainAxisAlignment.center,
|
|
|
- // children: [
|
|
|
- // TextButton(
|
|
|
- // child: Text(
|
|
|
- // 'Privacy Policy',
|
|
|
- // style: TextStyle(color: Colors.white54),
|
|
|
- // ),
|
|
|
- // onPressed: () {},
|
|
|
- // ),
|
|
|
- // Text(
|
|
|
- // ' | ',
|
|
|
- // style: TextStyle(color: Colors.white54),
|
|
|
- // ),
|
|
|
- // TextButton(
|
|
|
- // child: Text(
|
|
|
- // 'User Agreement',
|
|
|
- // style: TextStyle(color: Colors.white54),
|
|
|
- // ),
|
|
|
- // onPressed: () {},
|
|
|
- // ),
|
|
|
- // ],
|
|
|
- // ),
|
|
|
- // ),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
@@ -348,84 +265,145 @@ class StorePage extends BasePage<StoreController> {
|
|
|
}
|
|
|
|
|
|
Widget _buildSubscriptionOption({
|
|
|
- required String title,
|
|
|
- required String price,
|
|
|
- required String perDay,
|
|
|
- bool isSelected = false,
|
|
|
- bool showTag = false,
|
|
|
+ required StoreItem item,
|
|
|
}) {
|
|
|
- return Container(
|
|
|
- margin: EdgeInsets.symmetric(horizontal: 20.w, vertical: 5.h),
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: Colors.white.withOpacity(0.06),
|
|
|
- borderRadius: BorderRadius.circular(14.r),
|
|
|
- border: isSelected ? Border.all(color: Colors.blue, width: 2.w) : null,
|
|
|
- ),
|
|
|
- child: Stack(
|
|
|
- children: [
|
|
|
- Padding(
|
|
|
- padding: EdgeInsets.all(16.w),
|
|
|
- child: Row(
|
|
|
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
- children: [
|
|
|
- Column(
|
|
|
- crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
- children: [
|
|
|
- Text(
|
|
|
- title,
|
|
|
- style: TextStyle(
|
|
|
- color: Colors.white,
|
|
|
- fontSize: 16.sp,
|
|
|
- fontWeight: FontWeight.bold,
|
|
|
- ),
|
|
|
- ),
|
|
|
- Text(
|
|
|
- perDay,
|
|
|
- style: TextStyle(
|
|
|
- color: Colors.white54,
|
|
|
- fontSize: 12.sp,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- Text(
|
|
|
- price,
|
|
|
- style: TextStyle(
|
|
|
- color: Colors.white,
|
|
|
- fontSize: 18.sp,
|
|
|
- fontWeight: FontWeight.bold,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
- if (showTag)
|
|
|
- Positioned(
|
|
|
- right: 0,
|
|
|
- top: 0,
|
|
|
+ bool isSelected = controller.currentSelectedStoreItem.value?.id == item.id;
|
|
|
+ return Obx(() {
|
|
|
+ return Container(
|
|
|
+ height: 80.h,
|
|
|
+ margin: EdgeInsets.symmetric(horizontal: 20.w),
|
|
|
+ child: Stack(
|
|
|
+ children: [
|
|
|
+ GestureDetector(
|
|
|
+ onTap: () {
|
|
|
+ controller.currentSelectedStoreItem.value = item;
|
|
|
+ },
|
|
|
child: Container(
|
|
|
- padding: EdgeInsets.symmetric(
|
|
|
- horizontal: 8.w,
|
|
|
- vertical: 4.h,
|
|
|
- ),
|
|
|
+ margin: EdgeInsets.only(top: 12.h),
|
|
|
+ height: 74.h,
|
|
|
decoration: BoxDecoration(
|
|
|
- color: Colors.red,
|
|
|
- borderRadius: BorderRadius.only(
|
|
|
- topRight: Radius.circular(12.r),
|
|
|
- bottomLeft: Radius.circular(12.r),
|
|
|
- ),
|
|
|
+ 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: Text(
|
|
|
- 'No payment now!',
|
|
|
- style: TextStyle(
|
|
|
- color: Colors.white,
|
|
|
- fontSize: 12.sp,
|
|
|
+ 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(
|
|
|
+ item.name,
|
|
|
+ style: TextStyle(
|
|
|
+ color: Colors.white60,
|
|
|
+ fontSize: 12.sp,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ Text(
|
|
|
+ item.priceDesc,
|
|
|
+ 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),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ });
|
|
|
}
|
|
|
}
|