Skip to content

B
book-app
提交 47cdef08 authored 作者: yueweilu's avatar yueweilu
浏览文件
操作

积分界面布局修正

上级 93fc8b4a
隐藏空白字符变更
内嵌 并排
正在显示 包含 148 行增加 和 143 行删除
lib/pages/book_pay/index.dart
浏览文件 @ 47cdef08
...@@ -7,9 +7,11 @@ import 'package:flutter_book/theme.dart'; ...@@ -7,9 +7,11 @@ import 'package:flutter_book/theme.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_slidable/flutter_slidable.dart'; import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:go_router/go_router.dart';
import '../../models/index.dart'; import '../../models/index.dart';
import '../../models/shop.dart'; import '../../models/shop.dart';
import '../../routes/index.dart';
import '../../utils/index.dart'; import '../../utils/index.dart';
import '../../widgets/index.dart'; import '../../widgets/index.dart';
import '../book_shop/index.dart'; import '../book_shop/index.dart';
......
lib/pages/book_pay/view.dart
浏览文件 @ 47cdef08
...@@ -41,30 +41,40 @@ class _BookPayPageState extends State<BookPayPage> { ...@@ -41,30 +41,40 @@ class _BookPayPageState extends State<BookPayPage> {
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colours.cC7.withOpacity(0.5), color: Colours.cC7.withOpacity(0.5),
spreadRadius: 2, spreadRadius: 2.w,
blurRadius: 5, blurRadius: 5.w,
offset: Offset(3.w, 0), // changes the position of the shadow offset: Offset(3.w, 0), // changes the position of the shadow
), ),
] ]
), ),
child: Column( child: Column(
children: [ children: [
_buildPointWidget(), GestureDetector(
child: _buildWidget(title: '优惠券',icon: 'assets/images/pay_coupon.png',),
onTap: (){
context.pushNamed(Routes.payCoupon);
},
),
Container(height: 0.5.w,color: Colours.cF0,margin: EdgeInsets.only(left: 10.w),), Container(height: 0.5.w,color: Colours.cF0,margin: EdgeInsets.only(left: 10.w),),
_buildCouponWidget() GestureDetector(
child: _buildWidget(title: '积分抵扣',icon: 'assets/images/pay_point.png',),
onTap: (){
context.pushNamed(Routes.creditPoints);
},
),
], ],
), ),
), ),
Container( Container(
margin: const EdgeInsets.only(left: 10,right: 10,top: 10), margin: EdgeInsets.only(left: 10.w,right: 10.w,top: 10.w),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius:BorderRadius.circular(8), borderRadius:BorderRadius.circular(8.w),
color: Colors.white, color: Colors.white,
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colours.cC7.withOpacity(0.5), color: Colours.cC7.withOpacity(0.5),
spreadRadius: 2, spreadRadius: 2.w,
blurRadius: 5, blurRadius: 5.w,
offset: const Offset(3, 0), // changes the position of the shadow offset: const Offset(3, 0), // changes the position of the shadow
), ),
] ]
...@@ -93,29 +103,33 @@ class _BookPayPageState extends State<BookPayPage> { ...@@ -93,29 +103,33 @@ class _BookPayPageState extends State<BookPayPage> {
} }
Widget _buildPointWidget(){ Widget _buildWidget({
required String title,
required String icon,
}){
return Container( return Container(
margin: EdgeInsets.only(left: 13,right: 13), margin: EdgeInsets.only(left: 13.w,right: 13.w),
color: Colors.white,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Row( Row(
children: [ children: [
Container( Container(
margin: const EdgeInsets.symmetric(vertical: 12), margin: EdgeInsets.symmetric(vertical: 12.w),
// color: Colors.cyan, // color: Colors.cyan,
width:20, width:20.w,
height:20, height:20.w,
child: Image.asset('assets/images/pay_coupon.png'), child: Image.asset(icon),
), ),
const SizedBox(width: 7,), SizedBox(width: 7.w,),
const Text('优惠券',style: TextStyle(fontSize: 14,color: Colours.c3,height: 1.1)), Text(title,style: TextStyle(fontSize: 14.w,color: Colours.c3,height: 1.1)),
], ],
), ),
Container( SizedBox(
// color: Colors.cyan, // color: Colors.cyan,
width:5, width:5.w,
height:8, height:8.w,
child: Image.asset('assets/images/right_arrow.png'), child: Image.asset('assets/images/right_arrow.png'),
), ),
], ],
...@@ -123,33 +137,4 @@ class _BookPayPageState extends State<BookPayPage> { ...@@ -123,33 +137,4 @@ class _BookPayPageState extends State<BookPayPage> {
); );
} }
Widget _buildCouponWidget(){
return Container(
margin: EdgeInsets.only(left: 13,right: 13),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
margin: const EdgeInsets.symmetric(vertical: 12),
// color: Colors.cyan,
width:20,
height:20,
child: Image.asset('assets/images/pay_point.png'),
),
const SizedBox(width: 7,),
const Text('积分抵扣',style: TextStyle(fontSize: 14,color: Colours.c3,height: 1.1)),
],
),
Container(
// color: Colors.cyan,
width:5,
height:8,
child: Image.asset('assets/images/right_arrow.png'),
),
],
),
);
}
} }
lib/pages/credit_points/view.dart
浏览文件 @ 47cdef08
...@@ -11,117 +11,124 @@ class CreditPointsPage extends StatelessWidget { ...@@ -11,117 +11,124 @@ class CreditPointsPage extends StatelessWidget {
return false; return false;
}, },
child: Scaffold( child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar( appBar: AppBar(
centerTitle: true, centerTitle: true,
title: const Text('积分'), title: const Text('积分'),
backgroundColor: Colors.transparent,
), ),
body: Column( body:Stack(
children: [ children: [
// 积分卡片 Image.asset(
Container( 'assets/images/point_bg.png',
color: AppTheme.primary.withOpacity(0.02), fit: BoxFit.contain,
padding: EdgeInsets.all(10.w), width: double.infinity,
child: Container( ),
padding: EdgeInsets.only(left: 17.w,top: 18.w,bottom: 24.w,right: 17.w), SafeArea(
decoration: BoxDecoration( top: true,
color: Colors.white, child: Column(
boxShadow: [ children: [
BoxShadow( // 积分卡片
color: Colours.cC7.withOpacity(0.5), Container(
offset: Offset(0, 3.w), padding: EdgeInsets.symmetric(horizontal: 10.w),
blurRadius: 4.w, child: Container(
spreadRadius: 0, padding: EdgeInsets.only(left: 17.w,top: 18.w,bottom: 24.w,right: 17.w),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.58),
borderRadius: BorderRadius.circular(8.w),
border: Border.all(width: 2.w,color: Colors.white)
), ),
], height: 175.w,
borderRadius: BorderRadius.circular(8) child: Column(
), mainAxisAlignment: MainAxisAlignment.spaceBetween,
height: 175.w, crossAxisAlignment: CrossAxisAlignment.start,
child: Column( children: [
mainAxisAlignment: MainAxisAlignment.spaceBetween, Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Column( Text('可用积分',style: TextStyle(fontSize: 16.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
Gaps.vGaps13,
Text('999',style: TextStyle(fontSize: 25.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
],
),
Row(
children: [
Expanded(
child: Container(
height: 0.5.w,
color: Colours.cE7,
),
),
Gaps.hGaps15,
Text('积分支付不能超过每笔订单的20%',style: TextStyle(fontSize: 12.w,height: 1.4,color: Colours.c9),),
Gaps.hGaps15,
Expanded(
child: Container(
height: 0.5.w,
color: Colours.cE7,
),
),
],
)
],
),
),
),
// 使用积分
Container(
// height: 105,
margin: EdgeInsets.symmetric(horizontal: 10.w),
padding: EdgeInsets.all(20.w),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: Offset(3.w, 0.w),
blurRadius: 4.w,
spreadRadius: 0,
),
],
borderRadius: BorderRadius.circular(8.w)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text('可用积分',style: TextStyle(fontSize: 16.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),), Text('可用积分',style: TextStyle(fontSize: 16.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
Gaps.vGaps13, Gaps.vGaps10,
Text('999',style: TextStyle(fontSize: 25.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),), Container(
], height: 0.5.w,
), color: Colours.cE7,
Row( // color: Colors.red,
children: [
Expanded(
child: Container(
height: 0.5.w,
color: Colours.cE7,
),
),
Gaps.hGaps15,
Text('积分支付不能超过每笔订单的20%',style: TextStyle(fontSize: 12.w,height: 1.4,color: Colours.c9),),
Gaps.hGaps15,
Expanded(
child: Container(
height: 0.5.w,
color: Colours.cE7,
),
), ),
Gaps.vGaps15,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(text: TextSpan(
children: [
TextSpan(text: '抵扣',style: TextStyle(color: Colours.c9,fontSize: 13.w,height: 1.4)),
TextSpan(text: '￥9.90',style: TextStyle(color: AppTheme.primary,fontSize: 13.w,height: 1.4,fontWeight: Fonts.medium)),
TextSpan(text: '使用9900积分',style: TextStyle(color: Colours.c9,fontSize: 13.w,height: 1.4)),
]
)),
SizedBox(
width: 15.w,
height: 15.w,
child: Image.asset(
'assets/images/uncheck.png',
),
)
],
)
], ],
)
],
),
),
),
// 使用积分
Container(
// height: 105,
padding: EdgeInsets.all(20.w),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: Offset(0, 3.w),
blurRadius: 4.w,
spreadRadius: 0,
), ),
],
borderRadius: BorderRadius.circular(8.w)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('可用积分',style: TextStyle(fontSize: 16.w,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
Gaps.vGaps10,
Container(
height: 0.5.w,
color: Colours.cE7,
// color: Colors.red,
),
Gaps.vGaps15,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(text: TextSpan(
children: [
TextSpan(text: '抵扣',style: TextStyle(color: Colours.c9,fontSize: 13.w,height: 1.4)),
TextSpan(text: '￥9.90',style: TextStyle(color: AppTheme.primary,fontSize: 13.w,height: 1.4,fontWeight: Fonts.medium)),
TextSpan(text: '使用9900积分',style: TextStyle(color: Colours.c9,fontSize: 13.w,height: 1.4)),
]
)),
SizedBox(
width: 15.w,
height: 15.w,
child: Image.asset(
'assets/images/uncheck.png',
),
)
],
) )
], ],
), ),
) ),
], ],
), )
), ),
); );
} }
......
lib/routes/index.dart
浏览文件 @ 47cdef08
...@@ -40,6 +40,7 @@ import 'package:go_router/go_router.dart'; ...@@ -40,6 +40,7 @@ import 'package:go_router/go_router.dart';
import '../models/index.dart'; import '../models/index.dart';
import '../pages/order_evaluate/index.dart'; import '../pages/order_evaluate/index.dart';
import '../pages/pay_coupon/index.dart';
import '../pages/user_about/index.dart'; import '../pages/user_about/index.dart';
import '../pages/user_terms/index.dart'; import '../pages/user_terms/index.dart';
import '../pages/version/index.dart'; import '../pages/version/index.dart';
......
lib/routes/routes.dart
浏览文件 @ 47cdef08
...@@ -42,6 +42,7 @@ abstract class Routes { ...@@ -42,6 +42,7 @@ abstract class Routes {
/// 书架模块 /// 书架模块
static const creditPoints = 'credit_points'; static const creditPoints = 'credit_points';
static const shop = 'shop'; static const shop = 'shop';
static const payCoupon = 'pay_coupon';
...@@ -274,6 +275,15 @@ abstract class Routes { ...@@ -274,6 +275,15 @@ abstract class Routes {
child: const CreditPointsPage() child: const CreditPointsPage()
) )
), ),
GoRoute(
path: '/$payCoupon',
name: payCoupon,
pageBuilder: (context, state) =>CupertinoPage(
name: state.uri.toString(),
key: state.pageKey,
child: const PayCouponPage()
)
),
GoRoute( GoRoute(
path: '/$search', path: '/$search',
name: search, name: search,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论