结算界面

lib/pages/book_pay/controller.dart

+part of book_pay;
\ No newline at end of file

lib/pages/book_pay/index.dart

+library book_pay;
+
+
+import 'package:flutter/material.dart';
+import 'package:flutter_book/theme.dart';
+
+import '../book_shop/index.dart';
+
+part 'controller.dart';
+part 'view.dart';
\ No newline at end of file

lib/pages/book_pay/view.dart

+part of book_pay;
+
+enum PayType {
+  wechat(label: '微信',icon: ''),
+  alipay(label: '支付宝',icon: ''),
+  zijin(label: '紫荆币',icon: ''),;
+
+  final String label;
+  final String icon;
+
+  const PayType({
+    required this.label,
+    required this.icon
+  });
+}
+
+
+class BookPayPage extends StatefulWidget {
+  const BookPayPage({Key? key}) : super(key: key);
+
+  @override
+  State<BookPayPage> createState() => _BookPayPageState();
+}
+
+class _BookPayPageState extends State<BookPayPage> {
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('支付'),),
+      body: Column(
+        children: [
+          Expanded(
+            child: SingleChildScrollView(
+              child: Column(
+                children: [
+                  const BookCell(type: BookCellType.pay,),
+                  const SizedBox(height: 10,),
+                  Container(
+                    height: 100,
+                    color: Colors.lime,
+                  ),
+                  const SizedBox(height: 10,),
+                  Container(
+                    margin: EdgeInsets.symmetric(horizontal: 10),
+                    color: Colors.white,
+                    child: Column(
+                      children: [
+                        _creatPayItem(PayType.wechat),
+                        Container(margin: EdgeInsets.symmetric(horizontal: 10),color: Color(0xFFF0F0F0),height: 1,),
+                        _creatPayItem(PayType.alipay),
+                        Container(margin: EdgeInsets.symmetric(horizontal: 10),color: Color(0xFFF0F0F0),height: 1,),
+                        _creatPayItem(PayType.zijin)
+                      ],
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+          SafeArea(
+            child: _creatPayWidget()
+          )
+        ],
+      ),
+    );
+  }
+
+  /// 确认支付组件
+  Widget _creatPayWidget(){
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 15),
+      height: 50,
+      // color: Colors.cyan,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          const Row(
+            children: [
+              Text('应付：',style: TextStyle(fontSize:11,color: Color(0xFF333333) ),),
+              Text('￥98.9',style: TextStyle(fontSize:13,color:AppTheme.primary,fontWeight: FontWeight.w500 ),)
+            ],
+          ),
+          Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(15),
+              color: Colors.indigo
+            ),
+            padding: const EdgeInsets.symmetric(horizontal:13.5,vertical: 5),
+            child: const Text('确认支付',style: TextStyle(fontSize: 12,fontWeight: FontWeight.w500,color: Colors.white),),
+          )
+        ],
+      ),
+    );
+  }
+
+  /// 支付小组件
+  Widget _creatPayItem(PayType type){
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 14),
+        // color: Colors.red,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Container(
+              child: Row(
+                children: [
+                  Container(
+                    margin: EdgeInsets.symmetric(vertical: 10),
+                    color: Colors.cyan,
+                    width:20,
+                    height:20,
+                  ),
+                  SizedBox(width: 7,),
+                  Text('${type.label}',style: TextStyle(fontSize: 12,color: Color(0xFF333333)))
+                ],
+              ),
+            ),
+            Container(
+              color: Colors.cyan,
+              width:15,
+              height:15,
+            )
+          ],
+      )
+    );
+  }
+
+}

lib/pages/book_shop/index.dart

 library book_shop;
 
 import 'package:flutter/material.dart';
-import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:go_router/go_router.dart';
 
+import '../../routes/index.dart';
 import '../../theme.dart';
 
 

lib/pages/book_shop/view.dart

@@ -33,47 +33,50 @@ class _BookShopPageState extends State<BookShopPage> {
   Widget createCounter() {
     return Container(
       color: Colors.white,
-      padding: EdgeInsets.only(left: 20,right: 15),
+      padding: const EdgeInsets.only(left: 20,right: 15),
       child: Column(
         children: [
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Container(
-                child: Row(
+              Row(
                 children: [
                   Container(
                     height: 17,
                     width: 17,
                     color: Colors.yellow,
                   ),
-                    SizedBox(width: 11),
-                    Text('全选',style: TextStyle(color: Color(0xFF333333),fontSize: 12,fontWeight: FontWeight.w500)),
-                    SizedBox(width: 15,),
-                    Column(
+                  const SizedBox(width: 11),
+                  const Text('全选',style: TextStyle(color: Color(0xFF333333),fontSize: 12,fontWeight: FontWeight.w500)),
+                  const SizedBox(width: 15,),
+                  const Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text('合计 ￥98.9',style: TextStyle(color: AppTheme.primary,fontSize: 12,fontWeight: FontWeight.w500)),
-                        Text('已选 2 件',style: TextStyle(color: Color(0xFF9999999),fontSize: 10,))
+                      Text('已选 2 件',style: TextStyle(color: Color(0xFF999999),fontSize: 10,))
                     ],
                   )
                 ],
               ),
-              ),
-              Container(
-                margin: EdgeInsets.symmetric(vertical: 9),
+              GestureDetector(
+                onTap: (){
+                  context.pushNamed(Routes.bookPay);
+                },
+                child: Container(
+                  margin: const EdgeInsets.symmetric(vertical: 9),
                   decoration: BoxDecoration(
                     color: AppTheme.primary,
                     borderRadius: BorderRadius.circular(15),
                   ),
-                padding: EdgeInsets.symmetric(vertical: 5,horizontal: 18),
-                child: Text('结算(2)',style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),
+                  padding: const EdgeInsets.symmetric(vertical: 5,horizontal: 18),
+                  child: const Text('结算(2)',style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),
+                ),
               )
             ],
           ),
           Container(
             height: 1,
-            color: Color(0xFFF9F9F9),
+            color: const Color(0xFFF9F9F9),
           )
         ],
       ),

lib/pages/book_shop/widgets/book.dart

 part of book_shop;
 
+enum BookCellType {
+  normal,
+  pay,
+}
 
 class BookCell extends StatelessWidget {
-  const BookCell({Key? key}) : super(key: key);
+  final BookCellType? type;
+
+  const BookCell({
+    super.key,
+    this.type = BookCellType.normal,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -28,19 +37,13 @@ class BookCell extends StatelessWidget {
            margin: const EdgeInsets.only(left: 12,right: 11),
            child: Row(
              children: [
-               Container(
+               type == BookCellType.normal?Container(
                  height: 17,
                  width: 17,
                  color: Colors.cyan,
-               ),
-               const SizedBox(width: 12,),
+               ):const SizedBox(),
+               type == BookCellType.normal?const SizedBox(width: 12,):const SizedBox(),
                Container(
-                 child: Container(
-                   padding: EdgeInsets.all(2),
-                   child: Container(
-                     color: Colors.cyan,
-                   ),
-                 ),
                  decoration: BoxDecoration(
                      color: Colors.cyan,
                    borderRadius: BorderRadius.circular(3),
@@ -56,6 +59,12 @@ class BookCell extends StatelessWidget {
                  // color: Colors.white,
                  height: 86,
                  width: 72,
+                 child: Container(
+                   padding: EdgeInsets.all(2),
+                   child: Container(
+                     color: Colors.cyan,
+                   ),
+                 ),
 
                )
              ],

lib/routes/index.dart

@@ -4,6 +4,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_book/pages/about/index.dart';
 import 'package:flutter_book/pages/ad/index.dart';
+import 'package:flutter_book/pages/book_pay/index.dart';
 import 'package:flutter_book/pages/login/index.dart';
 import 'package:flutter_book/pages/main/index.dart';
 import 'package:flutter_book/pages/splash/index.dart';

lib/routes/routes.dart

@@ -10,6 +10,7 @@ abstract class Routes {
   static const login = 'login';
   static const web = 'web';
   static const about = 'about';
+  static const bookPay = 'book_pay';
 
 
   static final GoRouter config = GoRouter(
@@ -70,6 +71,15 @@ abstract class Routes {
                 key: state.pageKey,
                 child: const AboutPage()
             )
+        ),
+        GoRoute(
+            path: '/$bookPay',
+            name: bookPay,
+            pageBuilder: (context, state) =>CupertinoPage(
+                name: state.uri.toString(),
+                key: state.pageKey,
+                child: const BookPayPage()
+            )
         )
       ]
   );

lib/theme.dart

@@ -183,7 +183,7 @@ abstract class AppTheme {
       bottomNavigationBarTheme: BottomNavigationBarThemeData(
         type: BottomNavigationBarType.fixed,
         elevation: 0,
-        backgroundColor: scheme.background,
+        backgroundColor: Colors.white,
         unselectedItemColor: scheme.onBackground.withOpacity(0.5),
         selectedItemColor: scheme.primary,
         unselectedLabelStyle: TextStyle(fontSize: 10.w, height: 1.6),