'银行卡页面90%'

lib/models/entities/Bank.dart

@@ -0,0 +1,32 @@
+class Bank {
+  String? bankId;
+  String? bankCode;
+  String? name;
+  String? logo;
+  String? color1;
+  String? color2;
+  int? status;
+  int? sortNo;
+
+  Bank();
+
+  Bank.fromJson(Map<String, dynamic> json)
+      : bankId = json['bankId'],
+        bankCode = json['bankCode'],
+        name = json['name'],
+        logo = json['logo'],
+        color1 = json['color1'],
+        color2 = json['color2'],
+        status = json['status'],
+        sortNo = json['sortNo'];
+  Map<String, dynamic> toJson() => {
+        'bankId': bankId,
+        'bankCode': bankCode,
+        'name': name,
+        'logo': logo,
+        'color1': color1,
+        'color2': color2,
+        'status': status,
+        'sortNo': sortNo,
+      };
+}

lib/models/entities/BankCard.dart

@@ -0,0 +1,41 @@
+class BankCardModel {
+  String? cardId;
+  String cardNo='';
+  String? createDate;
+  String? owerName;
+  String? ownerBank;
+  String? personId;
+  String? phone;
+  int? status;
+  String? color1;
+  String? color2;
+  String? bankCode;
+
+  BankCardModel();
+
+  BankCardModel.fromJson(Map<String, dynamic> json)
+      : cardId = json["cardId"],
+        cardNo = json["cardNo"],
+        personId = json["personId"],
+        owerName = json["owerName"],
+        phone = json["phone"],
+        ownerBank = json["ownerBank"],
+        status = json["status"],
+        color1 = json["color1"],
+        color2 = json["color2"],
+        bankCode = json["bankCode"],
+        createDate = json["createDate"];
+  Map<String, dynamic> toJson() => {
+        'cardId': cardId,
+        'cardNo': cardNo,
+        'personId': personId,
+        'owerName': owerName,
+        'color1': color1,
+        'color2': color2,
+        'bankCode': bankCode,
+        'phone': phone,
+        'ownerBank': ownerBank,
+        'status': status,
+        'createDate': createDate,
+      };
+}

lib/pages/bankList/index.dart

@@ -1,72 +1,131 @@
 import 'package:dotted_border/dotted_border.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 import 'package:get/get.dart';
+import 'package:worker_client/models/entities/Bank.dart';
+import 'package:worker_client/models/entities/BankCard.dart';
 import 'package:worker_client/pages/bankList/widget/BankCard.dart';
-import '../../widgets/layout/BasicPage.dart';
-
+import 'package:worker_client/services/bank.dart';
+import 'package:worker_client/widgets/NullCard.dart';
+import 'package:worker_client/widgets/layout/BasicPage.dart';
 
 class BankListPages extends BasicPage {
   BankListPages({Key? key}) : super(key: key) {
     naviTitle = '我的银行卡';
   }
+  final bankCardList = Rx<List<BankCardModel>>([]);
 
-void goAddBank(){
+  @override
+  void beforeShow() {
+    // TODO: implement beforeShow
+    super.beforeShow();
+    getList();
+  }
+
+  void goAddBank() {
     Get.toNamed('/addBankCard');
-}
+  }
+
+  void getList() {
+    getBankCardList({'pageSize': 500}).then((res) {
+      getBankList({'pageSize': 500}).then((res2) {
+        var list1 = <BankCardModel>[];
+        var bankcardlist = <BankCardModel>[];
+        var banklist = <Bank>[];
+        var current;
+        res['records'].forEach((item) {
+          bankcardlist.add(BankCardModel.fromJson(item));
+        });
+        res2['records'].forEach((item) {
+          banklist.add(Bank.fromJson(item));
+        });
+        for (var item in bankcardlist) {
+          for (var v in banklist) {
+            if (item.ownerBank == v.name) {
+              current = v;
+            }
+          }
+          item.color1 = current.color1;
+          item.color2 = current.color2;
+          item.bankCode = current.bankCode;
+          list1.add(item);
+        }
+        bankCardList(list1);
+      });
+    });
+  }
+
+  void unBind(id) {
+    // 弹窗
+    unbindBankCard(id).then((value) {
+      Fluttertoast.showToast(msg: '解绑成功');
+      getList();
+    });
+  }
 
   @override
   Widget builder(BuildContext context) {
     return Container(
-      alignment: Alignment.center,
-
+      padding: EdgeInsets.all(15.w),
       child: Column(
         children: [
-          BankCard(),
-          BankCard(),
-          BankCard(),
-      Container(
-        height: 120.w,
-        alignment: Alignment.bottomCenter,
-        child:       GestureDetector(
-          onTap: () {
-            goAddBank();
-          },
-          child:DottedBorder(
-            borderType: BorderType.RRect,
-            color: Color(0xffBFBFBF),
-            radius: Radius.circular(20),
-            dashPattern: [3, 3 ,3, 3],
-            child: ClipRRect(
-              child: Container(
-                alignment: Alignment.center,
-                width: 345.w,
-                height: 45.w,
-                // color: Colors.amber,
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-
-                  children: [
-                    Padding(padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
-
-                      child: Icon(Icons.add_circle_outline),
+          Expanded(
+            child: Obx(
+              () => bankCardList.value.isNotEmpty
+                  ? ListView(
+                      children: bankCardList.value.map((item) {
+                      return BankCard(
+                        item: item,
+                        unBind: () {
+                          unBind(item.cardId);
+                        },
+                      );
+                    }).toList())
+                  : const NullCard(text: '暂未绑定银行卡'),
+            ),
+          ),
+          Container(
+            margin: EdgeInsets.only(bottom: 25.h),
+            child: GestureDetector(
+              onTap: () {
+                goAddBank();
+              },
+              child: DottedBorder(
+                borderType: BorderType.RRect,
+                color: const Color(0xffBFBFBF),
+                radius: Radius.circular(20.w),
+                dashPattern: const [3, 3, 3, 3],
+                child: ClipRRect(
+                  child: SizedBox(
+                    height: 45.w,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Padding(
+                          padding: EdgeInsets.fromLTRB(0, 0, 10.w, 0),
+                          child: Image.asset(
+                            'images/bank/addBank.png',
+                            width: 18.w,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Text(
+                          '添加银行卡',
+                          style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 16.sp,
+                              color: const Color(0xff323232)),
+                        ),
+                      ],
                     ),
-                    Text('添加银行卡',style: TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 19.sp,
-
-                    ),)
-                  ],
+                  ),
                 ),
               ),
             ),
-          ),
-        ),
-      )
-
+          )
         ],
       ),
-
     );
   }
 }

lib/pages/bankList/widget/BankCard.dart

@@ -1,96 +1,79 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:worker_client/models/entities/BankCard.dart';
 
 class BankCard extends StatelessWidget {
-  const BankCard({Key? key}) : super(key: key);
+  const BankCard({Key? key, required this.item, required this.unBind})
+      : super(key: key);
+  final BankCardModel item;
+  final GestureTapCallback unBind;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      alignment: Alignment.center,
-      padding: EdgeInsets.fromLTRB(20.w, 20.w, 20.w, 20.w),
-      margin: EdgeInsets.fromLTRB(0, 7, 0, 7),
-      width: 345.w,
-      height: 120.w,
+      padding: EdgeInsets.all(15.w),
+      margin: EdgeInsets.only(bottom: 15.h),
+      height: 112.5.w,
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: BorderRadius.circular(10.w),
         gradient: LinearGradient(
           begin: Alignment.topLeft,
           end: Alignment.bottomRight,
           colors: [
-            Color(0xffE7B820),
-            Color(0xff0069B7),
+            Color(int.parse('0xff' + item.color2.toString())),
+            Color(int.parse('0xff' + item.color1.toString()))
           ],
         ),
-
-        // border: Border.all(
-        //   color: Colors.blue,
-        //   width: 2,
-        // ),
       ),
-      child: Column(
+      child: Stack(
         children: [
           Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Row(
-                children: [
-                  Container(
-                    width: 32.w,
-                    height: 32.w,
-                    alignment: Alignment.center,
-                    // margin: EdgeInsets.fromLTRB(20.w, 20.w, 0, 0),
-                    padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
-                    decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(100),
-                        color: Colors.white),
-                    child: Image(
-                      image: NetworkImage(
-                          'https://yz-offical.oss-accelerate.aliyuncs.com/bank-logo/3.png'),
-                      width: 20.w,
-                      height: 20.w,
-                    ),
+              Container(
+                  width: 30.w,
+                  height: 30.w,
+                  alignment: Alignment.center,
+                  margin: EdgeInsets.only(right: 15.w),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(15.w),
+                      color: Colors.white),
+                  child: Image.network(
+                    item.bankCode.toString(),
+                    width: 20.w,
+                    fit: BoxFit.cover,
+                  )),
+              Expanded(
+                flex: 1,
+                child: Text(
+                  item.ownerBank.toString(),
+                  style: const TextStyle(
+                    color: Colors.white,
                   ),
-                  Container(
-                    margin: EdgeInsets.fromLTRB(15.w,0, 0, 0),
-                    padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
-                    child: Text('中国瑞士军刀银行', style: TextStyle(
-                      color: Colors.white,
-                    ),),
-                  )
-                ],
+                ),
               ),
-              Container(
-                padding: EdgeInsets.fromLTRB(0, 0, 0, 15),
-                child: Text('**** 8888', style: TextStyle(
-                  fontSize: 18.sp,
+              Text(
+                '**** ' +
+                    item.cardNo
+                        .substring(item.cardNo.length - 4, item.cardNo.length),
+                style: const TextStyle(
                   color: Colors.white,
-                ),),
-              )
-
+                ),
+              ),
             ],
           ),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.end,
-            children: [
-              Container(
-                height: 45.w,
-                alignment: Alignment.bottomRight,
-                child:  GestureDetector(
-                  onTap: () {
-                    print('点我接触绑定');
-                  },
-                  child: Text(
-                    '解除绑定',
-                    style: TextStyle(
-                      color: Colors.white,
-                    ),
-                  ),
+          Positioned(
+            bottom: 0,
+            right: 0,
+            child: GestureDetector(
+              onTap: unBind,
+              child: const Text(
+                '解除绑定',
+                style: TextStyle(
+                  color: Colors.white,
                 ),
               ),
-
-            ],
+            ),
           ),
         ],
       ),

lib/services/bank.dart

@@ -0,0 +1,55 @@
+import 'package:dio/dio.dart';
+import '../utils/Request.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+
+/// 银行列表
+/// @param {*} data
+/// @returns
+Future getBankList(params) async {
+  return request('/bank',
+      options: Options(method: 'GET'), queryParameters: params)
+      .catchError((error) =>
+  {Fluttertoast.showToast(msg: error.error.toString()), print(error)});
+}
+/// 银行卡列表
+/// @param {*} data
+/// @returns
+Future getBankCardList(params) async {
+  return request('/bankcard',
+      options: Options(method: 'GET'), queryParameters: params)
+      .catchError((error) =>
+  {Fluttertoast.showToast(msg: error.error.toString()), print(error)});
+}
+/// 银行卡详情
+/// @param {*} data
+/// @returns
+Future getBankCardDetail(String id) async {
+  return request('/bankcard/$id', options: Options(method: 'GET'))
+      .catchError((error) => {
+    Fluttertoast.showToast(msg: error.error['message']),
+  });
+}
+
+/// 添加银行卡
+/// @param {*} data
+/// @returns
+Future addBankCard(data) async {
+  return request(
+    '/bankcard',
+    options: Options(method: 'POST'),
+    data: data,
+  ).catchError((error) => {
+    Fluttertoast.showToast(msg: error.error['message']),
+  });
+}
+
+/// 解绑银行卡
+/// @param {*}
+/// @returns
+Future unbindBankCard(String id) async {
+  return request('/bankcard/$id/pause',
+      options: Options(method: 'DELETE'))
+      .catchError((error) => {
+    Fluttertoast.showToast(msg: error.error['message']),
+  });
+}

pubspec.yaml

@@ -77,6 +77,7 @@ flutter:
     - images/index/
     - images/main/
     - images/machinery/
+    - images/bank/
   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg