人脸签到考勤

需求分析

1. 首先对客户的需求进行了初步的分析

2. 将其主要功能也分为了以下几个部分
   
   这几个部分是前后端都要完成的。

项目开发

1. 在我们理顺事件的逻辑顺序，操作流程之后，我们前端3人小组，首先进行了简单的页面设计，将图中所有功能所涉及的页面大致设计了出来，并按照草图进行了类似美术底稿的本次项目的首次前端开发。

   设计图具见：https://lanhuapp.com/web/#/item/project/board?pid=55e8c5cc-b3f4-48c0-b6a6-3849fa9dfe68&notify_member_xd=true

   因为是三人小组，所以是各自负责一部分的页面开发，我是负责其中教师激活签到的那四个页面，以及页面之间的跳转。

2. 疑问
   教师发起签到的页面该如何设计？
   因为签到环节存在三种方式：上课签到，下课签到，全部
   其所对应的时间要求该如何设计

   
   或者直接设置课程的时间段.

   例如 9:00-11:00，上课签到教师绑定的激活只有在 8:45-10:00时间段之间激活，而下课签到绑定的激活按钮只有在 10:00-11:15 之间激活

3. 难点

   已签到和未签到tab的设计
   
   
   
   具体wxml代码：

   <!-- tab栏 -->
   <view class="swiper-tab">
   	<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">已签到</view>
   	<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">未签到</view>
   </view>
   
   <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" class="swiper">
   	<!-- 对应第一个tab -->
   	<swiper-item>
   		<view class="item_box">
   			<view class="user_item" wx:for="{{ userList }}" wx:key="user" wx:for-item="item" wx:for-index="index">
   				<view class="img">
   					<image src="{{item.userpic}}"></image>
   				</view>
   				<view class="info">
   					<view class="title">{{item.name}}</view>
   					<view class="time">{{item.time}}</view>
   				</view>
   			</view>
   		</view>
   	</swiper-item>
   
   	<!-- 对应第二个tab -->
   	<swiper-item>
   		<view>
   			<view class="user_item" wx:for="{{ unsignUserList }}" wx:key="user" wx:for-item="item" wx:for-index="index">
   				<view class="img">
   					<image src="{{item.userpic}}"></image>
   				</view>
   				<view class="info">
   					<view class="title">{{item.name}}</view>
   					<view class="time">{{item.time}}</view>
   				</view>
   			</view>
   		</view>
   	</swiper-item>
   </swiper>
   

   具体wxss代码：

   .swiper-tab {
     width: 100%;
     border-bottom: 2rpx solid #ccc;
     text-align: center;
     height: 88rpx;
     line-height: 88rpx;
     display: flex;
     flex-flow: row;
     justify-content: space-between;
   }
   
   .swiper-tab-item {
     width: 30%;
     color: #434343;
   }
   
   .active {
     color: #F65959;
     border-bottom: 4rpx solid #F65959;
   }
   
   .swiper {
     height: 100%;
   }
   
   
   .user_item {
     /* width: 100%; */
     padding: 30rpx;
     display: flex;
     
   }
   
   .img {
     width: 200rpx;
     height: 200rpx;
     border-radius: 10upx;
     /* overflow: hidden; */
     flex-shrink: 0;
     margin-right: 20upx;
     box-shadow: border-box;
   }
   
   .img image {
     width: 200rpx;
     height: 200rpx;
   }
   
   .info {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   .title {
     padding-left: 20rpx;
   }
   
   .time {
     display: flex;
     justify-content: flex-end;
   }
   	```
   
   

4. 查找资料

   除此之外，为了项目之后的进展，我罗列了下我认为的此项目存在的难点

   难点
   人脸录入
   人脸检验
   二维码生成
   二维码实时更新
   文件导出

   我抽出时间对二维码进行了一些了解，将生成二维码此功能单独提出，进行试验与操作，最后实现了在前端自行生成二维码，现在还没嵌入该系统中
   主要参考以下资料：
   https://www.jianshu.com/p/e6021798cd40
   https://www.jianshu.com/p/413c5831ddd6
   https://github.com/dillonlfy/weapp-qrcode

具体实现下一篇文章细讲