添加考勤打卡页面

lib/ui/home/application/applications_page.dart

@@ -1,4 +1,5 @@
 // Flutter imports:
+import 'package:aku_community_manager/ui/manage_pages/clock_in_out/clock_in_out_page.dart';
 import 'package:flutter/material.dart';
 
 // Package imports:
@@ -87,7 +88,8 @@ class _ApplicationPageState extends State<ApplicationPage>
     AppApplication('钥匙管理', R.ASSETS_HOME_KEY_PNG, () => KeyManagePage()),
     AppApplication('规程管理', R.ASSETS_HOME_RULES_PNG, () => RulesManagePage()),
     AppApplication(
-        '卫生管理', R.ASSETS_PLACEHOLDER_WEBP, () => HygienceManagePage())
+        '卫生管理', R.ASSETS_PLACEHOLDER_WEBP, () => HygienceManagePage()),
+    AppApplication('考勤管理', R.ASSETS_PLACEHOLDER_WEBP, () => ClockInOutPage())
   ];
 
   @override

lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart

@@ -0,0 +1,173 @@
+import 'dart:async';
+
+import 'package:aku_community_manager/style/app_style.dart';
+import 'package:aku_community_manager/utils/weekdays_to_chinese.dart';
+import 'package:common_utils/common_utils.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_easyrefresh/easy_refresh.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:velocity_x/velocity_x.dart';
+
+class ClockInOutMainPage extends StatefulWidget {
+  ClockInOutMainPage({Key key}) : super(key: key);
+
+  @override
+  _ClockInOutMainPageState createState() => _ClockInOutMainPageState();
+}
+
+class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
+  EasyRefreshController _refreshController;
+  Timer _clockSetState;
+  @override
+  void initState() {
+    super.initState();
+    _refreshController = EasyRefreshController();
+    _clockSetState = Timer.periodic(Duration(seconds: 1), (_timer) {
+      setState(() {});
+    });
+  }
+
+  @override
+  void dispose() {
+    _refreshController?.dispose();
+    _clockSetState?.cancel();
+    _clockSetState = null;
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return EasyRefresh(
+      firstRefresh: true,
+      header: MaterialHeader(),
+      controller: _refreshController,
+      onRefresh: () async {},
+      child: Container(
+        margin: EdgeInsets.all(32.w),
+        padding: EdgeInsets.all(32.w),
+        width: double.infinity,
+        child: Column(
+          children: [
+            DateUtil.formatDate(DateTime.now(), format: 'yyyy.MM.dd')
+                .text
+                .size(28.sp)
+                .color(kTextPrimaryColor)
+                .make(),
+            16.w.heightBox,
+            WeekDaysToChinese.fromString(DateUtil.getWeekday(DateTime.now()))
+                .text
+                .size(24.sp)
+                .color(kTextPrimaryColor)
+                .make(),
+            64.w.heightBox,
+            Row(
+              children: [
+                _buildCard(0),
+                Spacer(),
+                _buildCard(1)
+              ], //上班打卡为‘type’0.下班打卡为1
+            ),
+            150.w.heightBox,
+            _buildClock(),
+            65.w.heightBox,
+            '今日工时'.text.size(24.sp).bold.color(kTextSubColor).make(),
+            '共10小时13分钟'.text.size(24.sp).bold.color(kTextSubColor).make(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildClock() {
+    return Container(
+      width: 400.w,
+      height: 400.w,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(200.w),
+        gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [Color(0xFF50EAA0), Color(0xFF2EA9A2)]),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          '打卡'.text.size(56.sp).color(Colors.white).bold.make(),
+          20.w.heightBox,
+          DateUtil.formatDate(DateTime.now(), format: 'HH:mm:ss')
+              .text
+              .size(36.sp)
+              .color(Color(0x99FFFFFF))
+              .bold
+              .make()
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCard(int type, {String time}) {
+    return Container(
+      width: 296.w,
+      height: 131.w,
+      decoration: BoxDecoration(
+        color: Color(0x66666666),
+        borderRadius: BorderRadius.circular(8.w),
+      ),
+      padding: EdgeInsets.all(16.w),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          time.isEmptyOrNull
+              ? SizedBox()
+              : Container(
+                  width: 22.w,
+                  height: 22.w,
+                  decoration: BoxDecoration(
+                    color: Color(0x990257FB),
+                    borderRadius: BorderRadius.circular(11.w),
+                  ),
+                  child: Icon(
+                    CupertinoIcons.checkmark_alt,
+                    size: 18.w,
+                    color: Colors.white,
+                  ),
+                ),
+          12.w.widthBox,
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: time.isEmptyOrNull
+                  ? [
+                      Center(
+                          child: '未打卡'
+                              .text
+                              .size(32.sp)
+                              .bold
+                              .color(kTextPrimaryColor)
+                              .make()),
+                    ]
+                  : [
+                      (type == 0 ? '打卡上班' : '打卡下班')
+                          .text
+                          .size(28.sp)
+                          .bold
+                          .color(kTextSubColor)
+                          .make(),
+                      12.w.heightBox,
+                      DateUtil.formatDateStr(time, format: 'HH:mm:ss')
+                          .text
+                          .size(32.sp)
+                          .bold
+                          .color(kTextPrimaryColor)
+                          .make()
+                    ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/ui/manage_pages/clock_in_out/clock_in_out_page.dart

@@ -0,0 +1,54 @@
+import 'package:aku_community_manager/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart';
+import 'package:aku_community_manager/ui/manage_pages/clock_in_out/clock_in_out_view.dart';
+import 'package:aku_community_manager/ui/widgets/common/aku_scaffold.dart';
+import 'package:aku_community_manager/ui/widgets/inner/aku_tab_bar.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class ClockInOutPage extends StatefulWidget {
+  ClockInOutPage({Key key}) : super(key: key);
+
+  @override
+  _ClockInOutPageState createState() => _ClockInOutPageState();
+}
+
+class _ClockInOutPageState extends State<ClockInOutPage>
+    with TickerProviderStateMixin {
+  TabController _tabController;
+  List<String> _tabs = ['考勤打卡', '打卡记录', '申请情况'];
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: _tabs.length, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AkuScaffold(
+      title: '考勤管理',
+      appBarBottom: PreferredSize(
+        child: AkuTabBar(controller: _tabController, tabs: _tabs),
+        preferredSize: Size.fromHeight(88.w),
+      ),
+      body: TabBarView(
+        controller: _tabController,
+        children: List.generate(_tabs.length, (index) {
+         
+          if (index == 0) {
+            return ClockInOutMainPage();
+          } else {
+           return ClockInOutView(
+              index: index,
+            );
+          }
+        }),
+      ),
+    );
+  }
+}

lib/ui/manage_pages/clock_in_out/clock_in_out_view.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+class ClockInOutView extends StatefulWidget {
+  final int index;
+  ClockInOutView({Key key, this.index}) : super(key: key);
+
+  @override
+  _ClockInOutViewState createState() => _ClockInOutViewState();
+}
+
+class _ClockInOutViewState extends State<ClockInOutView> {
+  @override
+  Widget build(BuildContext context) {
+    return ListView();
+  }
+}

lib/utils/weekdays_to_chinese.dart

@@ -0,0 +1,22 @@
+class WeekDaysToChinese {
+  static String fromString(String weekday) {
+    switch (weekday) {
+      case 'Monday':
+        return '周一';
+      case 'Tuesday':
+        return '周二';
+      case 'Wednesday':
+        return '周三';
+      case 'Thursday':
+        return '周四';
+      case 'Friday':
+        return '周五';
+      case 'Saturday':
+        return '周六';
+      case 'Sunday':
+        return '周日';
+      default:
+        return '未知';
+    }
+  }
+}