diff --git a/lib/const/api.dart b/lib/const/api.dart
index b29df28..98e1200 100644
--- a/lib/const/api.dart
+++ b/lib/const/api.dart
@@ -197,6 +197,21 @@ class _Manage {
 
   ///管家app 规程管理：查询所有的规程管理信息
   String get rulesManageList => '/user/regulationManage/list';
+
+  ///管家app钥匙管理：查询所有的钥匙信息
+  String get getAllkeyList => '/user/key/list';
+
+  ///管家app钥匙管理：查询所有的未归还钥匙信息
+  String get getNOReturnList => '/user/key/noReturnList';
+
+  ///管家app钥匙管理：申请钥匙
+  String get applyKey => '/user/key/apply';
+
+  ///管家app钥匙管理：归还钥匙
+  String get returnKey => '/user/key/returnKey';
+
+  ///管家app钥匙管理：查询所有的申请记录（包含条件搜索）
+  String get keyRecordList => '/user/key/record';
 }
 
 class _Upload {
diff --git a/lib/models/manager/key_manage/key_manage_all_key_model.dart b/lib/models/manager/key_manage/key_manage_all_key_model.dart
new file mode 100644
index 0000000..14c9e8e
--- /dev/null
+++ b/lib/models/manager/key_manage/key_manage_all_key_model.dart
@@ -0,0 +1,48 @@
+class KeyMangeAllKeyModel {
+  int id;
+  String code;
+  String facilityName;
+  int totalNum;
+  int loanableNum;
+  String correspondingPosition;
+  String storageLocation;
+  int status;
+  String createDate;
+
+  KeyMangeAllKeyModel(
+      {this.id,
+      this.code,
+      this.facilityName,
+      this.totalNum,
+      this.loanableNum,
+      this.correspondingPosition,
+      this.storageLocation,
+      this.status,
+      this.createDate});
+
+  KeyMangeAllKeyModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    code = json['code'];
+    facilityName = json['facilityName'];
+    totalNum = json['totalNum'];
+    loanableNum = json['loanableNum'];
+    correspondingPosition = json['correspondingPosition'];
+    storageLocation = json['storageLocation'];
+    status = json['status'];
+    createDate = json['createDate'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['code'] = this.code;
+    data['facilityName'] = this.facilityName;
+    data['totalNum'] = this.totalNum;
+    data['loanableNum'] = this.loanableNum;
+    data['correspondingPosition'] = this.correspondingPosition;
+    data['storageLocation'] = this.storageLocation;
+    data['status'] = this.status;
+    data['createDate'] = this.createDate;
+    return data;
+  }
+}
diff --git a/lib/models/manager/key_manage/key_manage_record_list_model.dart b/lib/models/manager/key_manage/key_manage_record_list_model.dart
new file mode 100644
index 0000000..c3bcafd
--- /dev/null
+++ b/lib/models/manager/key_manage/key_manage_record_list_model.dart
@@ -0,0 +1,48 @@
+import 'package:common_utils/common_utils.dart';
+
+class KeyManageRecordListModel {
+  int id;
+  String code;
+  int status;
+  String facilityName;
+  String correspondingPosition;
+  String storageLocation;
+  String auditDate;
+  String reason;
+
+  KeyManageRecordListModel(
+      {this.id,
+      this.code,
+      this.status,
+      this.facilityName,
+      this.correspondingPosition,
+      this.storageLocation,
+      this.auditDate,
+      this.reason});
+
+  KeyManageRecordListModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    code = json['code'];
+    status = json['status'];
+    facilityName = json['facilityName'];
+    correspondingPosition = json['correspondingPosition'];
+    storageLocation = json['storageLocation'];
+    auditDate = json['auditDate'];
+    reason = json['reason'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['id'] = this.id;
+    data['code'] = this.code;
+    data['status'] = this.status;
+    data['facilityName'] = this.facilityName;
+    data['correspondingPosition'] = this.correspondingPosition;
+    data['storageLocation'] = this.storageLocation;
+    data['auditDate'] = this.auditDate;
+    data['reason'] = this.reason;
+    return data;
+  }
+
+   String get auditDateString => DateUtil.formatDateStr(this.auditDate,format: 'yyyy-MM-dd HH:mm');
+}
diff --git a/lib/ui/manage_pages/key_manage/key_apply_record_card.dart b/lib/ui/manage_pages/key_manage/key_apply_record_card.dart
index 7f9f48b..d4be1f9 100644
--- a/lib/ui/manage_pages/key_manage/key_apply_record_card.dart
+++ b/lib/ui/manage_pages/key_manage/key_apply_record_card.dart
@@ -1,4 +1,9 @@
 // Flutter imports:
+import 'package:aku_community_manager/const/api.dart';
+import 'package:aku_community_manager/models/manager/key_manage/key_manage_record_list_model.dart';
+import 'package:aku_community_manager/utils/network/base_model.dart';
+import 'package:aku_community_manager/utils/network/net_util.dart';
+import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/material.dart';
 
 // Package imports:
@@ -13,7 +18,9 @@ import 'package:aku_community_manager/ui/manage_pages/key_manage/key_manage_map.
 
 class KeyApplyRecordCard extends StatefulWidget {
   final int index;
-  KeyApplyRecordCard({Key key, this.index}) : super(key: key);
+  final KeyManageRecordListModel model;
+  final VoidCallback callRefresh;
+  KeyApplyRecordCard({Key key, this.index, this.model, this.callRefresh}) : super(key: key);
 
   @override
   _KeyApplyRecordCardState createState() => _KeyApplyRecordCardState();
@@ -32,17 +39,16 @@ class _KeyApplyRecordCardState extends State<KeyApplyRecordCard> {
         children: [
           Row(
             children: [
-              '3-1-203配电箱'
-                  .text
+              widget.model.facilityName.text
                   .size(32.sp)
                   .color(kTextPrimaryColor)
                   .bold
                   .make(),
               Spacer(),
-              KeyManageMap.keyStatus[2].text
+              KeyManageMap.keyRecordStatus[widget.model.status].text
                   .size(28.sp)
                   .bold
-                  .color(KeyManageMap.keyStatusColor[2])
+                  .color(KeyManageMap.keyRecordStatusColor[widget.model.status])
                   .make()
             ],
           ),
@@ -50,12 +56,27 @@ class _KeyApplyRecordCardState extends State<KeyApplyRecordCard> {
           AkuDivider.horizontal(),
           24.w.heightBox,
           ...<Widget>[
-            _rowTile(R.ASSETS_MANAGE_KEY_PNG, '可申请钥匙数/钥匙总数',
-                '2/5'.text.size(24.sp).color(kTextSubColor).make()),
-            _rowTile(R.ASSETS_MANAGE_LOCK_PNG, '对应设备位置',
-                '2栋1楼2-3'.text.size(24.sp).color(kTextSubColor).make()),
-            _rowTile(R.ASSETS_OUTDOOR_IC_ADDRESS_PNG, '存放地址',
-                '物业管理处2号柜'.text.size(24.sp).color(kTextSubColor).make()),
+            _rowTile(
+                R.ASSETS_MANAGE_LOCK_PNG,
+                '对应设备位置',
+                widget.model.correspondingPosition.text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make()),
+            _rowTile(
+                R.ASSETS_OUTDOOR_IC_ADDRESS_PNG,
+                '存放地址',
+                widget.model.storageLocation.text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make()),
+            _rowTile(
+                R.ASSETS_MANAGE_IC_TIME_PNG,
+                '审核时间',
+                widget.model.auditDateString.text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make()),
           ].sepWidget(separate: 12.w.heightBox),
           _getBottomButtons(2),
         ],
@@ -67,22 +88,21 @@ class _KeyApplyRecordCardState extends State<KeyApplyRecordCard> {
     MaterialButton button;
     switch (status) {
       case 1:
-        button = _bottomButton('申请钥匙', () {}, Color(0xFFFFC40C), Colors.black);
+        // button = _bottomButton('申请钥匙', () {}, Color(0xFFFFC40C), Colors.black);
         break;
       case 2:
         break;
       case 3:
-        button = _bottomButton('确认领取', () {}, Color(0xFFFFC40C), Colors.black);
+        button = _bottomButton('重新申请', () async {
+          BaseModel baseModel = await NetUtil()
+              .post(API.manage.applyKey, params: {"keyId": widget.model.id});
+          BotToast.showText(text: baseModel.message);
+          widget.callRefresh();
+        }, Colors.white, Colors.black);
         break;
       case 4:
-        button = _bottomButton('归还钥匙', () {}, Colors.black, Colors.white);
-        break;
-      case 5:
-        button = _bottomButton('重新提交', () {}, Colors.white, Colors.black);
-        break;
-      case 6:
-        button = _bottomButton('联系物业', () {}, Colors.white, Colors.black);
         break;
+
       default:
     }
     return button == null
diff --git a/lib/ui/manage_pages/key_manage/key_apply_record_page.dart b/lib/ui/manage_pages/key_manage/key_apply_record_page.dart
index 1fc085d..ea7191c 100644
--- a/lib/ui/manage_pages/key_manage/key_apply_record_page.dart
+++ b/lib/ui/manage_pages/key_manage/key_apply_record_page.dart
@@ -6,9 +6,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 // Project imports:
 import 'package:aku_community_manager/ui/manage_pages/key_manage/key_apply_record_view.dart';
-import 'package:aku_community_manager/ui/manage_pages/key_manage/select_place_page.dart';
 import 'package:aku_community_manager/ui/widgets/common/aku_scaffold.dart';
-import 'package:aku_community_manager/ui/widgets/inner/aku_bottom_button.dart';
 import 'package:aku_community_manager/ui/widgets/inner/aku_tab_bar.dart';
 
 class KeyApplyRecordPage extends StatefulWidget {
@@ -20,7 +18,7 @@ class KeyApplyRecordPage extends StatefulWidget {
 
 class _KeyApplyRecordPageState extends State<KeyApplyRecordPage>
     with TickerProviderStateMixin {
-  List<String> _tabs = ['全部', '审核中', '已通过', '已驳回'];
+  List<String> _tabs = [ '审核中', '已通过', '已驳回','已归还'];
   TabController _tabController;
   @override
   void initState() {
@@ -37,7 +35,7 @@ class _KeyApplyRecordPageState extends State<KeyApplyRecordPage>
   @override
   Widget build(BuildContext context) {
     return AkuScaffold(
-      title: '钥匙管理',
+      title: '申请记录',
       appBarBottom: PreferredSize(
         child: AkuTabBar(controller: _tabController, tabs: _tabs),
         preferredSize: Size.fromHeight(88.w),
@@ -50,12 +48,12 @@ class _KeyApplyRecordPageState extends State<KeyApplyRecordPage>
                   index: index,
                 )),
       ),
-      bottom: AkuBottomButton(
-        title: '立即申请',
-        onTap: () {
-          SelectPlacePage();
-        },
-      ),
+      // bottom: AkuBottomButton(
+      //   title: '立即申请',
+      //   onTap: () {
+      //     SelectPlacePage();
+      //   },
+      // ),
     );
   }
 }
diff --git a/lib/ui/manage_pages/key_manage/key_apply_record_view.dart b/lib/ui/manage_pages/key_manage/key_apply_record_view.dart
index d11a32e..5026b1f 100644
--- a/lib/ui/manage_pages/key_manage/key_apply_record_view.dart
+++ b/lib/ui/manage_pages/key_manage/key_apply_record_view.dart
@@ -1,11 +1,16 @@
 // Flutter imports:
+import 'package:aku_community_manager/const/api.dart';
+import 'package:aku_community_manager/models/manager/key_manage/key_manage_record_list_model.dart';
+import 'package:aku_community_manager/ui/widgets/common/bee_list_view.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_easyrefresh/easy_refresh.dart';
 
 // Package imports:
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 // Project imports:
 import 'package:aku_community_manager/ui/manage_pages/key_manage/key_apply_record_card.dart';
+import 'package:velocity_x/velocity_x.dart';
 
 class KeyApplyRecordView extends StatefulWidget {
   final int index;
@@ -15,16 +20,47 @@ class KeyApplyRecordView extends StatefulWidget {
   _KeyApplyRecordViewState createState() => _KeyApplyRecordViewState();
 }
 
-class _KeyApplyRecordViewState extends State<KeyApplyRecordView> {
+class _KeyApplyRecordViewState extends State<KeyApplyRecordView>
+    with TickerProviderStateMixin {
+  EasyRefreshController _refreshController;
+  @override
+  void initState() {
+    super.initState();
+    _refreshController = EasyRefreshController();
+  }
+
+  @override
+  void dispose() {
+    _refreshController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      padding: EdgeInsets.symmetric(vertical: 24.w, horizontal: 32.w),
-      children: [
-        KeyApplyRecordCard(
-          index: widget.index,
-        )
-      ],
-    );
+    return BeeListView(
+        path: API.manage.keyRecordList,
+        controller: _refreshController,
+        convert: (models) {
+          return models.tableList
+              .map((e) => KeyManageRecordListModel.fromJson(e))
+              .toList();
+        },
+        builder: (items) {
+          return ListView.separated(
+            padding: EdgeInsets.all(24.w),
+              itemBuilder: (context, index) {
+                return KeyApplyRecordCard(
+                  index: widget.index,
+                  model: items[index],
+                  callRefresh: () {
+                    _refreshController.callRefresh();
+                  },
+                );
+              },
+              separatorBuilder: (_, __) {
+                return 24.w.heightBox;
+              },
+              itemCount: items.length);
+        });
   }
 }
diff --git a/lib/ui/manage_pages/key_manage/key_manage_card.dart b/lib/ui/manage_pages/key_manage/key_manage_card.dart
index 84daa3f..afd9875 100644
--- a/lib/ui/manage_pages/key_manage/key_manage_card.dart
+++ b/lib/ui/manage_pages/key_manage/key_manage_card.dart
@@ -1,8 +1,14 @@
 // Flutter imports:
+import 'package:aku_community_manager/const/api.dart';
+import 'package:aku_community_manager/models/manager/key_manage/key_manage_all_key_model.dart';
+import 'package:aku_community_manager/utils/network/base_model.dart';
+import 'package:aku_community_manager/utils/network/net_util.dart';
+import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/material.dart';
 
 // Package imports:
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:url_launcher/url_launcher.dart';
 import 'package:velocity_x/velocity_x.dart';
 
 // Project imports:
@@ -13,7 +19,10 @@ import 'package:aku_community_manager/ui/manage_pages/key_manage/key_manage_map.
 
 class KeyManageCard extends StatefulWidget {
   final int index;
-  KeyManageCard({Key key, this.index}) : super(key: key);
+  final KeyMangeAllKeyModel model;
+  final VoidCallback callRefresh;
+  KeyManageCard({Key key, this.index, this.model, this.callRefresh})
+      : super(key: key);
 
   @override
   _KeyManageCardState createState() => _KeyManageCardState();
@@ -32,17 +41,16 @@ class _KeyManageCardState extends State<KeyManageCard> {
         children: [
           Row(
             children: [
-              '3-1-203配电箱'
-                  .text
+              widget.model.facilityName.text
                   .size(32.sp)
                   .color(kTextPrimaryColor)
                   .bold
                   .make(),
               Spacer(),
-              KeyManageMap.keyStatus[1].text
+              KeyManageMap.keyStatus[widget.model.status].text
                   .size(28.sp)
                   .bold
-                  .color(KeyManageMap.keyStatusColor[1])
+                  .color(KeyManageMap.keyStatusColor[widget.model.status])
                   .make()
             ],
           ),
@@ -50,14 +58,30 @@ class _KeyManageCardState extends State<KeyManageCard> {
           AkuDivider.horizontal(),
           24.w.heightBox,
           ...<Widget>[
-            _rowTile(R.ASSETS_MANAGE_KEY_PNG, '可申请钥匙数/钥匙总数',
-                '2/5'.text.size(24.sp).color(kTextSubColor).make()),
-            _rowTile(R.ASSETS_MANAGE_LOCK_PNG, '对应设备位置',
-                '2栋1楼2-3'.text.size(24.sp).color(kTextSubColor).make()),
-            _rowTile(R.ASSETS_OUTDOOR_IC_ADDRESS_PNG, '存放地址',
-                '物业管理处2号柜'.text.size(24.sp).color(kTextSubColor).make())
+            _rowTile(
+                R.ASSETS_MANAGE_KEY_PNG,
+                '可申请钥匙/钥匙总数',
+                '${widget.model.loanableNum}/${widget.model.totalNum}'
+                    .text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make()),
+            _rowTile(
+                R.ASSETS_MANAGE_LOCK_PNG,
+                '对应设备位置',
+                widget.model.correspondingPosition.text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make()),
+            _rowTile(
+                R.ASSETS_OUTDOOR_IC_ADDRESS_PNG,
+                '存放地址',
+                widget.model.storageLocation.text
+                    .size(24.sp)
+                    .color(kTextSubColor)
+                    .make())
           ].sepWidget(separate: 12.w.heightBox),
-          _getBottomButtons(1),
+          _getBottomButtons(widget.model.status),
         ],
       ),
     );
@@ -67,22 +91,35 @@ class _KeyManageCardState extends State<KeyManageCard> {
     MaterialButton button;
     switch (status) {
       case 1:
-        button = _bottomButton('申请钥匙', () {}, Color(0xFFFFC40C), Colors.black);
+        button = _bottomButton('申请钥匙', () async {
+          BaseModel baseModel = await NetUtil()
+              .post(API.manage.applyKey, params: {"keyId": widget.model.id});
+          BotToast.showText(text: baseModel.message);
+          widget.callRefresh();
+        }, Color(0xFFFFC40C), Colors.black);
         break;
       case 2:
+        button = _bottomButton('归还钥匙', () async {
+          BaseModel baseModel = await NetUtil()
+              .post(API.manage.returnKey, params: {"keyId": widget.model.id});
+          BotToast.showText(text: baseModel.message);
+          widget.callRefresh();
+        }, Color(0xFFFFC40C), Colors.black);
         break;
       case 3:
-        button = _bottomButton('确认领取', () {}, Color(0xFFFFC40C), Colors.black);
-        break;
-      case 4:
-        button = _bottomButton('归还钥匙', () {}, Colors.black, Colors.white);
-        break;
-      case 5:
-        button = _bottomButton('重新提交', () {}, Colors.white, Colors.black);
-        break;
-      case 6:
-        button = _bottomButton('联系物业', () {}, Colors.white, Colors.black);
+        button = _bottomButton('联系物业', () async {
+          await launch('tel:057-87760023');
+        }, Colors.white, Colors.black, hasBorder: true);
         break;
+      // case 4:
+      //   button = _bottomButton('归还钥匙', () {}, Colors.black, Colors.white);
+      //   break;
+      // case 5:
+      //   button = _bottomButton('重新提交', () {}, Colors.white, Colors.black);
+      //   break;
+      // case 6:
+      //   button = _bottomButton('联系物业', () {}, Colors.white, Colors.black);
+      //   break;
       default:
     }
     return button == null
@@ -99,11 +136,15 @@ class _KeyManageCardState extends State<KeyManageCard> {
   }
 
   Widget _bottomButton(
-      String title, Function onPressed, Color color, Color textColor) {
+      String title, Function onPressed, Color color, Color textColor,
+      {bool hasBorder = false}) {
     return MaterialButton(
       height: 52.w,
       padding: EdgeInsets.symmetric(vertical: 8.w, horizontal: 24.w),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(74.w)),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(74.w),
+        side: !hasBorder ? BorderSide.none : BorderSide(color: Colors.black),
+      ),
       color: color,
       onPressed: onPressed,
       elevation: 0,
diff --git a/lib/ui/manage_pages/key_manage/key_manage_map.dart b/lib/ui/manage_pages/key_manage/key_manage_map.dart
index d2c6e35..30d3d68 100644
--- a/lib/ui/manage_pages/key_manage/key_manage_map.dart
+++ b/lib/ui/manage_pages/key_manage/key_manage_map.dart
@@ -4,18 +4,36 @@ import 'package:flutter/material.dart';
 class KeyManageMap {
   static Map<int, String> keyStatus = {
     1: '可申请',
-    2: '审核中',
-    3: '已通过',
-    4: '使用中',
-    5: '已驳回',
-    6: '钥匙已空'
+    2: '使用中',
+    3: '钥匙已空',
+    4: '',
+    5: '',
+    6: ''
   };
   static Map<int, Color> keyStatusColor = {
     1: Color(0xFF2576E5),
     2: Color(0xFFFFC40C),
     3: Color(0xFF333333),
-    4: Color(0xFFFFC40C),
-    5: Color(0xFFE60E0E),
+    4: Color(0xFF999999),
+    5: Color(0xFF999999),
+    6: Color(0xFF999999),
+  };
+
+ static Map<int, String> keyRecordStatus = {
+    1: '待审核',
+    2: '已通过',
+    3: '已驳回',
+    4: '已归还',
+    5: '',
+    6: ''
+  };
+
+  static Map<int, Color> keyRecordStatusColor = {
+    1: Color(0xFF333333),
+    2: Color(0xFFFF8200),
+    3: Color(0xFFE60E0E),
+    4: Color(0xFF999999),
+    5: Color(0xFF999999),
     6: Color(0xFF999999),
   };
 }
diff --git a/lib/ui/manage_pages/key_manage/key_manage_page.dart b/lib/ui/manage_pages/key_manage/key_manage_page.dart
index 55f70e0..4b36efd 100644
--- a/lib/ui/manage_pages/key_manage/key_manage_page.dart
+++ b/lib/ui/manage_pages/key_manage/key_manage_page.dart
@@ -10,9 +10,7 @@ import 'package:velocity_x/velocity_x.dart';
 import 'package:aku_community_manager/style/app_style.dart';
 import 'package:aku_community_manager/ui/manage_pages/key_manage/key_apply_record_page.dart';
 import 'package:aku_community_manager/ui/manage_pages/key_manage/key_manage_view.dart';
-import 'package:aku_community_manager/ui/manage_pages/key_manage/select_place_page.dart';
 import 'package:aku_community_manager/ui/widgets/common/aku_scaffold.dart';
-import 'package:aku_community_manager/ui/widgets/inner/aku_bottom_button.dart';
 import 'package:aku_community_manager/ui/widgets/inner/aku_tab_bar.dart';
 
 class KeyManagePage extends StatefulWidget {
@@ -65,12 +63,12 @@ class _KeyManagePageState extends State<KeyManagePage>
                   index: index,
                 )),
       ),
-      bottom: AkuBottomButton(
-        title: '立即申请',
-        onTap: () {
-          Get.to(() => SelectPlacePage());
-        },
-      ),
+      // bottom: AkuBottomButton(
+      //   title: '立即申请',
+      //   onTap: () {
+      //     Get.to(() => SelectPlacePage());
+      //   },
+      // ),
     );
   }
 }
diff --git a/lib/ui/manage_pages/key_manage/key_manage_view.dart b/lib/ui/manage_pages/key_manage/key_manage_view.dart
index 28ca0d6..cc24b9f 100644
--- a/lib/ui/manage_pages/key_manage/key_manage_view.dart
+++ b/lib/ui/manage_pages/key_manage/key_manage_view.dart
@@ -1,11 +1,16 @@
 // Flutter imports:
+import 'package:aku_community_manager/const/api.dart';
+import 'package:aku_community_manager/models/manager/key_manage/key_manage_all_key_model.dart';
+import 'package:aku_community_manager/ui/widgets/common/bee_list_view.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_easyrefresh/easy_refresh.dart';
 
 // Package imports:
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 // Project imports:
 import 'package:aku_community_manager/ui/manage_pages/key_manage/key_manage_card.dart';
+import 'package:velocity_x/velocity_x.dart';
 
 class KeyManageView extends StatefulWidget {
   final int index;
@@ -16,15 +21,48 @@ class KeyManageView extends StatefulWidget {
 }
 
 class _KeyManageViewState extends State<KeyManageView> {
+  EasyRefreshController _refreshController;
+
+  @override
+  void initState() {
+    super.initState();
+    _refreshController = EasyRefreshController();
+  }
+
+  @override
+  void dispose() {
+    _refreshController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      padding: EdgeInsets.all(32.w),
-      children: [
-        KeyManageCard(
-          index: widget.index,
-        )
-      ],
-    );
+    return BeeListView(
+        path: widget.index == 0
+            ? API.manage.getAllkeyList
+            : API.manage.getNOReturnList,
+        controller: _refreshController,
+        convert: (models) {
+          return models.tableList
+              .map((e) => KeyMangeAllKeyModel.fromJson(e))
+              .toList();
+        },
+        builder: (items) {
+          return ListView.separated(
+            padding: EdgeInsets.all(24.w),
+              itemBuilder: (context, index) {
+                return KeyManageCard(
+                  index: widget.index,
+                  model: items[index],
+                  callRefresh: () {
+                    _refreshController.callRefresh();
+                  },
+                );
+              },
+              separatorBuilder: (_, __) {
+                return 24.w.heightBox;
+              },
+              itemCount: items.length);
+        });
   }
 }