diff --git a/lib/ui/home/application/applications_page.dart b/lib/ui/home/application/applications_page.dart index f76ca6f..f74acd3 100644 --- a/lib/ui/home/application/applications_page.dart +++ b/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 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 diff --git a/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart b/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart new file mode 100644 index 0000000..8af87fe --- /dev/null +++ b/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 { + 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() + ], + ), + ) + ], + ), + ); + } +} diff --git a/lib/ui/manage_pages/clock_in_out/clock_in_out_page.dart b/lib/ui/manage_pages/clock_in_out/clock_in_out_page.dart new file mode 100644 index 0000000..fbba5e9 --- /dev/null +++ b/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 + with TickerProviderStateMixin { + TabController _tabController; + List _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, + ); + } + }), + ), + ); + } +} diff --git a/lib/ui/manage_pages/clock_in_out/clock_in_out_view.dart b/lib/ui/manage_pages/clock_in_out/clock_in_out_view.dart new file mode 100644 index 0000000..36a52dc --- /dev/null +++ b/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 { + @override + Widget build(BuildContext context) { + return ListView(); + } +} diff --git a/lib/utils/weekdays_to_chinese.dart b/lib/utils/weekdays_to_chinese.dart new file mode 100644 index 0000000..55339e4 --- /dev/null +++ b/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 '未知'; + } + } +}