支付界面布局

lib/models/shop.dart

+class PayModel {
+  PayModel({
+    required this.type,
+    required this.name,
+    required this.icon,
+    required this.selected
+  });
+
+
+  int type;
+  String name;
+  String icon;
+  bool selected;
+
+}
\ No newline at end of file

lib/pages/book_pay/controller.dart

 part of book_pay;
+
+class BookPayController extends GetxController {
+  List<PayModel> pays = [
+    PayModel(type: 1, name: '微信', icon: 'assets/images/pay_wechat.png', selected: true),
+    PayModel(type: 2, name: '支付宝', icon: 'assets/images/pay_ali.png', selected: false),
+    PayModel(type: 3, name: '紫荆币', icon: 'assets/images/pay_coin.png', selected: false),
+  ];
+
+
+  // 支付方式
+  late PayModel _payModel;
+  PayModel get payModel => _payModel;
+
+  void setPayModel(PayModel payModel){
+    for (PayModel model in pays) {
+      if (model.type == payModel.type){
+        model.selected = true;
+        _payModel = model;
+      }
+      else{
+        model.selected = false;
+      }
+    }
+    print('--------------------------------${_payModel.name}');
+    update();
+  }
+
+}
\ No newline at end of file

lib/pages/book_pay/index.dart

@@ -4,11 +4,15 @@ library book_pay;
 import 'package:flutter/material.dart';
 import 'package:flutter_book/theme.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
+import 'package:get/get.dart';
 
 import '../../models/index.dart';
+import '../../models/shop.dart';
 import '../../utils/index.dart';
 import '../book_shop/index.dart';
 
 part 'controller.dart';
 part 'view.dart';
 part 'widgets/item.dart';
+part 'widgets/pay_way.dart';
+part 'widgets/pay_count.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);
 
@@ -26,105 +11,141 @@ class _BookPayPageState extends State<BookPayPage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return GetBuilder<BookPayController>(
+      init: BookPayController(),
+      builder: (controller) => Scaffold(
+        backgroundColor: Colours.cF9,
         appBar: AppBar(title: const Text('支付'),),
-      body: Column(
-        children: [
-          Expanded(
-            child: SingleChildScrollView(
+        body: SingleChildScrollView(
           child: Column(
             children: [
-                  const BuildItem(),
-                  const SizedBox(height: 10,),
-                  Container(
-                    height: 100,
-                    color: Colors.lime,
+              ListView.builder(
+                physics: const NeverScrollableScrollPhysics(),
+                shrinkWrap:true,
+                itemBuilder: (BuildContext context, int index){
+                  return const BuildItem();
+                },
+                itemCount: 2,
               ),
+
               const SizedBox(height: 10,),
               Container(
-                    margin: EdgeInsets.symmetric(horizontal: 10),
+                margin: const EdgeInsets.only(left: 10,right: 10),
+                decoration: BoxDecoration(
+                    borderRadius:BorderRadius.circular(8),
                     color: Colors.white,
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colours.cC7.withOpacity(0.5),
+                        spreadRadius: 2,
+                        blurRadius: 5,
+                        offset: const Offset(3, 0), // changes the position of the shadow
+                      ),
+                    ]
+                ),
                 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)
+                    _buildPointWidget(),
+                    Container(height: 0.5,color: Colours.cF0,margin: const EdgeInsets.only(left: 10),),
+                    _buildCouponWidget()
                   ],
                 ),
-                  )
-                ],
               ),
+              Container(
+                margin: const EdgeInsets.only(left: 10,right: 10,top: 10),
+                decoration: BoxDecoration(
+                    borderRadius:BorderRadius.circular(8),
+                    color: Colors.white,
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colours.cC7.withOpacity(0.5),
+                        spreadRadius: 2,
+                        blurRadius: 5,
+                        offset: const Offset(3, 0), // changes the position of the shadow
+                      ),
+                    ]
+                ),
+                child: ListView.builder(
+                  physics: const NeverScrollableScrollPhysics(),
+                  padding: const EdgeInsets.symmetric(horizontal: 10),
+                  shrinkWrap:true,
+                  itemBuilder: (BuildContext context, int index){
+                    PayModel model = controller.pays[index];
+                    return GestureDetector(
+                      onTap: (){
+                        controller.setPayModel(model);
+                      },
+                        child: BuildPayWay(model:model,));
+                  },
+                  itemCount: controller.pays.length,
                 ),
               ),
-          SafeArea(
-            child: _creatPayWidget()
-          )
             ],
           ),
+        ),
+        bottomNavigationBar: SafeArea(child: BuildPayCount()),
+      ),
     );
   }
 
-  /// 确认支付组件
-  Widget _creatPayWidget(){
+
+  Widget _buildPointWidget(){
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 15),
-      height: 50,
-      // color: Colors.cyan,
+      margin: EdgeInsets.only(left: 13,right: 13),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          const Row(
+          Row(
             children: [
-              Text('应付：',style: TextStyle(fontSize:11,color: Color(0xFF333333) ),),
-              Text('￥98.9',style: TextStyle(fontSize:13,color:AppTheme.primary,fontWeight: FontWeight.w500 ),)
+              Container(
+                margin: const EdgeInsets.symmetric(vertical: 12),
+                // color: Colors.cyan,
+                width:20,
+                height:20,
+                child: Image.asset('assets/images/pay_coupon.png'),
+              ),
+              const SizedBox(width: 7,),
+              const Text('优惠券',style:  TextStyle(fontSize: 14,color: Colours.c3,height: 1.1)),
             ],
           ),
           Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(15),
-              color: Colors.indigo
+            // color: Colors.cyan,
+            width:5,
+            height:8,
+            child: Image.asset('assets/images/right_arrow.png'),
           ),
-            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){
+  Widget _buildCouponWidget(){
     return Container(
-      padding: EdgeInsets.symmetric(horizontal: 14),
-        // color: Colors.red,
+      margin: EdgeInsets.only(left: 13,right: 13),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-            Container(
-              child: Row(
+          Row(
             children: [
               Container(
-                    margin: EdgeInsets.symmetric(vertical: 10),
-                    color: Colors.cyan,
+                margin: const EdgeInsets.symmetric(vertical: 12),
+                // color: Colors.cyan,
                 width:20,
                 height:20,
+                child: Image.asset('assets/images/pay_point.png'),
               ),
-                  SizedBox(width: 7,),
-                  Text('${type.label}',style: TextStyle(fontSize: 12,color: Color(0xFF333333)))
+              const SizedBox(width: 7,),
+              const Text('积分抵扣',style:  TextStyle(fontSize: 14,color: Colours.c3,height: 1.1)),
             ],
           ),
-            ),
           Container(
-              color: Colors.cyan,
-              width:15,
-              height:15,
-            )
+            // color: Colors.cyan,
+            width:5,
+            height:8,
+            child: Image.asset('assets/images/right_arrow.png'),
+          ),
         ],
-      )
+      ),
     );
   }
-
 }

lib/pages/book_pay/widgets/item.dart

@@ -31,12 +31,6 @@ class BuildItem extends StatelessWidget {
               margin: const EdgeInsets.only(left: 12,right: 11),
               child: Row(
                 children: [
-                  Container(
-                    height: 17,
-                    width: 17,
-                    color: Colors.cyan,
-                  ),
-                  const SizedBox(width: 12,),
                   Container(
                     decoration: BoxDecoration(
                         color: Colors.cyan,

lib/pages/book_pay/widgets/pay_count.dart

+part of book_pay;
+
+class BuildPayCount extends StatelessWidget {
+  const BuildPayCount({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 15),
+      height: 55,
+      color: Colors.white,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          const Row(
+            children: [
+              Text('应付：',style: TextStyle(fontSize:14,color: Colours.c3 ,height: 1.1),),
+              Text('￥98.9',style: TextStyle(fontSize:15,color:AppTheme.primary,fontWeight: Fonts.medium ,height: 1.1),)
+            ],
+          ),
+          Container(
+            decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(15),
+                color: AppTheme.primary
+            ),
+            padding: const EdgeInsets.symmetric(horizontal:13.5,vertical: 8),
+            child: const Text('确认支付',style: TextStyle(fontSize: 14,fontWeight: Fonts.medium,color: Colors.white),),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/book_pay/widgets/pay_way.dart

+part of book_pay;
+
+class BuildPayWay extends StatelessWidget {
+  final PayModel model;
+  const BuildPayWay({
+    Key? key,
+    required this.model
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 4),
+          color: Colors.white,
+          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(model.icon),
+                  ),
+                  const SizedBox(width: 7,),
+                  Text(model.name,style: const TextStyle(fontSize: 14,color: Colours.c3,height: 1.1)),
+                ],
+              ),
+              SizedBox(
+                // color: Colors.cyan,
+                width:15,
+                height:15,
+                child: Image.asset(model.selected?'assets/images/pay_check.png':'assets/images/pay_uncheck.png'),
+              )
+            ],
+          ),
+        ),
+        Container(
+          margin: const EdgeInsets.symmetric(horizontal:10),
+          height: 0.5,
+          color: Colours.cF0,
+        )
+      ],
+    );
+  }
+}

lib/pages/book_shop/controller.dart

@@ -41,6 +41,7 @@ class BookshopController extends GetxController {
     );
     // 如果是刷新 清理数据
     if (isRefresh) carts.clear();
+    carts.addAll(_test());
     carts.addAll(result);
     _page ++;
     _noMore = result.length < _limit;