微信小程序打卡的详细日期及状态页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 记录页 -->
<view class="record-page">
    
    <!-- 切换菜单 -->
    <view class="t-menu">
        <view class="t-menu-btn {{tabIndex ? '' : 'selected'}}" bindtap="changeTab" id="all">
            <text>全体</text>
        </view>
        <view class="t-menu-btn {{tabIndex ? 'selected' : ''}}" bindtap="changeTab" id="single">
            <text>个人</text>
        </view>
    </view>

    <!-- 记录分类 -->
    <view class="t-inner">
        <view class="t-content-wrap">

            <!-- 全体记录 -->
            <view class="t-content {{tabIndex ? '' : 't-content-show'}}">
                <scroll-view scroll-y="true" style="height: 1000rpx;">
                    <view class="inner">
                        <text class="a-tit">最新打卡情况 【{{currentTime}}】</text>
                        
                        <!-- 统计 -->
                        <view class="total mt20">
                            <view class="c-item">
                                <text class="num">{{aontime}}</text>
                                <text class="txt">打卡</text>
                            </view>
                            <view class="pipe"></view>
                            <view class="c-item">
                                <text class="num">{{alate}}</text>
                                <text class="txt">迟到</text>
                            </view>
                            <view class="pipe"></view>
                            <view class="c-item">
                                <text class="num">{{absent}}</text>
                                <text class="txt">未打卡</text>
                            </view>
                            <view class="pipe"></view>
                            <view class="c-item">
                                <text class="num">{{aleave}}</text>
                                <text class="txt">请假</text>
                            </view>
                        </view>

                        <!-- 人员记录 -->
                        <view class="record-list mt20">
                            <view class="t-time mt20">
                                <view class="start">
                                    <text class="key">起始</text>
                                    <picker mode="date" value="{{aStartDay}}" start="{{taskStartDate}}" end="{{taskEndDate}}"  bindchange="aStartDateChange">
                                        <view class="date">{{aStartDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                                    </picker>
                                </view>
                                <view class="pipe"></view>
                                <view class="end">
                                    <text class="key">截止</text>
                                    <picker mode="date" value="{{aEndDay}}" start="{{taskStartDate}}" end="{{taskEndDate}}" bindchange="aEndDateChange">
                                        <view class="date">{{aEndDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                                    </picker>
                                </view>
                            </view>

                            <view class="thead">
                                <view class="th th0">
                                    <text>成员</text>
                                </view>
                                <view class="th">
                                    <text>打卡</text><text class="unit">(天)</text>
                                </view>
                                <view class="th">
                                    <text>迟到</text><text class="unit">(天)</text>
                                </view>
                                <view class="th">
                                    <text>未打卡</text><text class="unit">(天)</text>
                                </view>
                                <view class="th">
                                    <text>请假</text><text class="unit">(天)</text>
                                </view>
                            </view>

                            <view class="tbody">

                                <block wx:for="{{aRecordList}}">
                                    <view class="tr">
                                        <view class="td td0">
                                            <text>{{item.nickName}}</text>
                                        </view>
                                        <view class="td">
                                            <text>{{item.ontime}}</text>
                                        </view>
                                        <view class="td">
                                            <text>{{item.late}}</text>
                                        </view>
                                        <view class="td">
                                            <text>{{item.absent}}</text>
                                        </view>
                                        <view class="td">
                                            <text>{{item.leave}}</text>
                                        </view>
                                    </view>
                                </block>
                                

                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 个人记录 -->
            <view class="t-content {{tabIndex ? 't-content-show' : ''}}">

                <view class="t-time mt20">
                    <view class="start">
                        <text class="key">起始</text>
                        <picker mode="date" value="{{sStartDay}}" start="{{taskStartDate}}" end="{{taskEndDate}}"  bindchange="sStartDateChange">
                            <view class="date">{{sStartDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                        </picker>
                    </view>
                    <view class="pipe"></view>
                    <view class="end">
                        <text class="key">截止</text>
                        <picker mode="date" value="{{sEndDay}}" start="{{taskStartDate}}" end="{{taskEndDate}}" bindchange="sEndDateChange">
                            <view class="date">{{sEndDay}}<image class="arrow-d" src="../../image/arrow-d-0.png"></image></view>
                        </picker>
                    </view>
                </view>

                <!-- 统计 -->
                <view class="total mt20">
                    <view class="c-item">
                        <text class="num">{{sontime}}</text>
                        <text class="txt">打卡</text>
                    </view>
                    <view class="pipe"></view>
                    <view class="c-item">
                        <text class="num">{{slate}}</text>
                        <text class="txt">迟到</text>
                    </view>
                    <view class="pipe"></view>
                    <view class="c-item">
                        <text class="num">{{sbsent}}</text>
                        <text class="txt">未打卡</text>
                    </view>
                    <view class="pipe"></view>
                    <view class="c-item">
                        <text class="num">{{sleave}}</text>
                        <text class="txt">请假</text>
                    </view>
                </view>

                <view class="s-menu mt20">
                    <view id="late" bindtap="changeSTab" class="s-menu-btn {{sMenuIndex == 0 ? 'active' : ''}}">
                        <text>迟到</text>
                    </view>
                    <view id="leave" bindtap="changeSTab" class="s-menu-btn {{sMenuIndex == 1 ? 'active' : ''}}">
                        <text>请假</text>
                    </view>
                    <view id="absent" bindtap="changeSTab" class="s-menu-btn {{sMenuIndex == 2 ? 'active' : ''}}">
                        <text>未打卡</text>
                    </view>
                    <view id="ontime" bindtap="changeSTab" class="s-menu-btn {{sMenuIndex == 3 ? 'active' : ''}}">
                        <text>已打卡</text>
                    </view>
                </view>

                <scroll-view scroll-y="true" style="height: 900rpx;">

                    <view class="s-menu-content {{sMenuIndex == 0 ? 's-menu-show' : ''}}">
                        <view class="record-list late-list">
                            <view class="thead">
                                <view class="th">
                                    <text>日期</text>
                                </view>
                                <view class="th">
                                    <text>打卡时间</text>
                                </view>
                                <view class="th">
                                    <text>迟到时长</text>
                                </view>
                                <view class="th">
                                    <text>当前出勤比</text>
                                </view>
                            </view>

                            <view class="tbody">
                            
                                <block wx:if="{{sLateList.length == 0}}">
                                    <view class="empty-tips">
                                        <text>当前没有记录</text>    
                                    </view>
                                </block>
                                <block wx:else>
                                    <block wx:for="{{sLateList}}">
                                        <view class="tr">
                                            <view class="td">
                                                <text>{{item.date}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.signTime}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.duration}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.ratio}}</text>
                                            </view>
                                        </view>
                                    </block>
                                </block>
                                
                            </view>
                        </view>
                    </view>
                    <view class="s-menu-content {{sMenuIndex == 1 ? 's-menu-show' : ''}}">
                        <view class="record-list leave-list">
                            <view class="thead">
                                <view class="th">
                                    <text>日期</text>
                                </view>
                                <view class="th">
                                    <text>请假事由</text>
                                </view>
                                <view class="th">
                                    <text>当前出勤比</text>
                                </view>
                            </view>

                            <view class="tbody">

                                <block wx:if="{{sLeaveList.length == 0}}">
                                    <view class="empty-tips">
                                        <text>当前没有记录</text>    
                                    </view>
                                </block>
                                <block wx:else>
                                    <block wx:for="{{sLeaveList}}">
                                        <view class="tr">
                                            <view class="td">
                                                <text>{{item.date}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.reason}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.ratio}}</text>
                                            </view>
                                        </view>
                                    </block>
                                </block>
                                
                            </view>
                        </view>
                    </view>
                    <view class="s-menu-content {{sMenuIndex == 2 ? 's-menu-show' : ''}}">
                        <view class="record-list absent-list">
                            <view class="thead">
                                <view class="th">
                                    <text>日期</text>
                                </view>
                                <view class="th">
                                    <text>备注</text>
                                </view>
                                <view class="th">
                                    <text>当前出勤比</text>
                                </view>
                            </view>

                            <view class="tbody">

                                <block wx:if="{{sAbsentList.length == 0}}">
                                    <view class="empty-tips">
                                        <text>当前没有记录</text>    
                                    </view>
                                </block>
                                <block wx:else>
                                    <block wx:for="{{sAbsentList}}">
                                        <view class="tr">
                                            <view class="td">
                                                <text>{{item.date}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.notes}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.ratio}}</text>
                                            </view>
                                        </view>
                                    </block>
                                </block>
                            </view>
                        </view>
                    </view>
                    <view class="s-menu-content {{sMenuIndex == 3 ? 's-menu-show' : ''}}">
                        <view class="record-list absent-list">
                            <view class="thead">
                                <view class="th">
                                    <text>日期</text>
                                </view>
                                <view class="th">
                                    <text>打卡名次</text>
                                </view>
                                <view class="th">
                                    <text>当前出勤比</text>
                                </view>
                            </view>

                            <view class="tbody">

                                <block wx:if="{{sOntimeList.length == 0}}">
                                    <view class="empty-tips">
                                        <text>当前没有记录</text>    
                                    </view>
                                </block>
                                <block wx:else>
                                    <block wx:for="{{sOntimeList}}">
                                        <view class="tr">
                                            <view class="td">
                                                <text>{{item.date}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.position}}</text>
                                            </view>
                                            <view class="td">
                                                <text>{{item.ratio}}</text>
                                            </view>
                                        </view>
                                    </block>
                                </block>
                                
                            </view>
                        </view>
                    </view>

                </scroll-view>
            </view>
        </view>
    </view>

</view>

二、wxss样式文件代码如下：

.record-page{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.t-menu{
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  height: 80rpx;
}
.t-menu-btn{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  font-size: 32rpx;
}
.selected{
  color: #2fcc85;
  border-bottom: 1px solid #2fcc85;
}
.t-inner{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  height: 100%;
  padding: 0 26rpx;
}
.t-content-wrap{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.t-content{
  width: 100%;
  display: none;
}
.t-content-show{
  display: block;
}
.t-content .inner{
  padding: 20rpx 0;
}
.a-tit{
  font-size: 32rpx;
  color: #b2b2b2;
}
.total{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  height: 158rpx;
  border: 1px solid #f0f0f0;
  border-radius: 10rpx; 
}
.c-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 168rpx;
}
.total .pipe{
  height: 80rpx;
  border-left: 1px solid #f0f0f0;
}
.c-item .num{
  font-size: 80rpx;
  color: #2fcc85;
}
.c-item .txt{
  color: #888;
}
.mod-a{
  display: flex;
  height: 124rpx;
  border: 1px solid #f0f0f0;
  align-items: center;
  border-radius: 10rpx;
  background-color: #fff;
  padding-left: 40rpx;
  color: #b2b2b2;
  font-size: 28rpx;
}
.mod-a .head{
  margin-right: 20rpx;
}
.mod-a .head image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.nickName{
  font-size: 32rpx;
  color: #676767;
  margin-right: 10rpx;
}
.flag{
  color: #2fcc85;
}

.t-time{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  align-items: center;
  height:90rpx;
  padding:0 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 10rpx;
  color: #2fcc85;
  font-size: 28rpx;
}
.start, .end{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.pipe{
  height: 48rpx;
  border-left: 1px solid #f0f0f0;
}
.arrow-d{
  width: 17rpx;
  height: 9rpx;
  margin-left: 10rpx;
}
.t-time .key{
  margin-right: 10rpx;
}
.t-time .date{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  align-items: center;
  font-size: 36rpx;
}

.record-list{
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10rpx;
  font-size: 32rpx;
}

.thead{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 70rpx;
  color: #b2b2b2;
}
.thead .tr{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.thead .th{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  width: 20%;
}
.thead .th .unit{
  font-size: 18rpx;
}
.tbody{
  color: #676767;
  padding: 0 15rpx;
}
.tbody .tr{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 60rpx;
  line-height: 60rpx;
  border-top: 1px solid #f0f0f0
}
.tbody .td{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 20%;
  height: 60rpx;
  overflow: hidden;
}
.tbody .td0{
  justify-content:flex-start;
}
.tbody .td0 text{
  padding-left: 20rpx;
}
.s-menu{
  display: flex;
  flex-direction: row;
  margin-left: 1px;
}
.s-menu-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 160rpx;
  height: 68rpx;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-bottom: none;
  margin-left: -1px;
  border-radius: 10rpx 10rpx 0 0;
  font-size: 32rpx;
  color: #b2b2b2;
}
.active{
  background-color: #2fcc85;
  color: #fff;
}
.s-menu-content{
  display: none;
  font-size: 28rpx;
}
.s-menu-show{
  display: block;
}
.late-list .th,.late-list .td{
  width: 25%;
} 
.leave-list .th,.leave-list .td,.absent-list .th,.absent-list .td, .ontime-list .th, .ontime-list .td{
  width: 33%;
}
.empty-tips{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  border-top: 1px solid #f0f0f0

}

三、js页面代码如下：

var util = require('../../utils/util.js');

Page({
  data: {
    openId: '',     
    taskID: '',       //任务ID
    taskName: '',     //任务名称
    taskStartDate: '',
    taskEndDate: '',
    currentTime: '',  //设置当前时间

    tabIndex: 0,      //页卡索引

    aontime: 0,       //全员准时签到的人数
    alate: 0,         //全员到签到的人数
    aleave: 0,        //全员请假的人数
    absent: 0,        //全员未打卡的人数
    aStartDay: '2016-12-01',     //任务开始时间
    aEndDay: '2017-12-01',       //任务结束时间
    aRecordList: [],

    sontime: 0,       //个人准时签到的人数
    slate: 0,         //个人到签到的人数
    sleave: 0,        //个人请假的人数
    sbsent: 0,        //个人未打卡的人数
    sStartDay: '2016-12-01',     //个人开始时间
    sEndDay: '2017-12-01',       //个人结束时间
    sLateList: [],
    sLeaveList: [],
    sAbsentList: [],
    sOntimeList: [],

    sMenuIndex: 0
  },

  // 切换
  changeTab: function (e) {
    var id = e.currentTarget.id;
    var now = new Date();
    var d = this.data;
    var that = this;

    // 点击全体页卡时
    if (id == 'all') {
      this.setData({
        tabIndex: 0
      })

       // 请求当天全体统计记录
      this.getAllTotal(d.taskID, util.getYMD(now), util.getYMD(now));

      // 请求当天全体详细记录
      this.getAllRecord(d.taskID, d.aStartDay, d.aEndDay)
    }

    // 点击个人页卡时
    if (id == 'single') {
      this.setData({
        tabIndex: 1
      })

      // 加载数据
      this.getSingleTotal(d.openId, d.taskID, d.aStartDay, d.aEndDay);
      this.getSingleRecord(d.openId, d.taskID, d.aStartDay, d.aEndDay, ['late', 'leave', 'absent', 'ontime'][d.sMenuIndex]);
    }
  },

  // 切换
  changeSTab: function (e) {
    var id = e.currentTarget.id;
    var d = this.data;
    var that = this;

    // 点击迟到
    if (id == 'late') {
      this.setData({
        sMenuIndex: 0
      })
    }

    // 点击请假
    if (id == 'leave') {
      this.setData({
        sMenuIndex: 1
      })
    }

    // 点击未打卡
    if (id == 'absent') {
      this.setData({
        sMenuIndex: 2
      })
    }

    // 点击已打卡
    if (id == 'ontime') {
      this.setData({
        sMenuIndex: 3
      })
    }

    this.getSingleRecord(d.openId, d.taskID, d.aStartDay, d.aEndDay, id);

  },

  // 全体查询开始日期
  aStartDateChange: function (e) {
    var d = this.data;

    this.setData({
      aStartDay: e.detail.value
    })

    this.getAllRecord(d.taskID, d.aStartDay, d.aEndDay);
  },

  // 全体查询结束日期
  aEndDateChange: function (e) {
    var d = this.data;

    this.setData({
      aEndDay: e.detail.value
    })
    this.getAllRecord(d.taskID, d.aStartDay, d.aEndDay);
  }, 

  // 全体查询统计数
  getAllTotal: function (taskID, startDay, endDay) {
    var that = this;

    wx.request({
      url: 'https://www.cpcsign.com/api/sign?type=daily&taskID=' + taskID + '&startDate=' + startDay + '&endDate='+ endDay,
      method: 'GET',
      success: function(res){
        // success
        var d = res.data.data;
        console.log(res);
        that.setData({
          'aontime': d.ontime,
          'alate': d.late,
          'aleave': d.leave,
          'absent': d.absent
        })
      },
      fail: function() {
        // fail
        wx.showToast({
          title: '请输入有效日期',
          icon: 'loading',
          duration: 2000
        })
      },
      complete: function() {
        // complete
      }
    })

  },

  // 全体查询详细
  getAllRecord: function (taskID, startDay, endDay) {
    var that = this;
    
     wx.request({
      url: 'https://www.cpcsign.com/api/sign?type=all&taskID=' + taskID + '&startDate=' + startDay + '&endDate='+ endDay,
      method: 'GET', 
      success: function(res){
        // success
        console.log(1111);
        console.log(res)
      
        that.setData({
          aRecordList: res.data.data
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
    
  },

  // 个人查询开始日期
  sStartDateChange: function (e) {
    var d = this.data;

    this.setData({
      sStartDay: e.detail.value
    })

    this.getSingleTotal(d.openId, d.taskID, d.sStartDay, d.sEndDay);
    this.getSingleRecord(d.openId, d.taskID, d.sStartDay, d.sEndDay, ['late', 'leave', 'absent', 'ontime'][d.sMenuIndex]);
  },

  // 个人查询结束日期
  sEndDateChange: function (e) {
    var d = this.data;

    this.setData({
      sEndDay: e.detail.value
    })
    this.getSingleRecord(d.openId, d.taskID, d.sStartDay, d.sEndDay);
    this.getSingleRecord(d.openId, d.taskID, d.sStartDay, d.sEndDay, ['late', 'leave', 'absent', 'ontime'][d.sMenuIndex]);
  },

  // 个人查询统计
  getSingleTotal: function (openId, taskID, startDay, endDay) {
    var that = this;

    wx.request({
      url: 'https://www.cpcsign.com/api/sign?type=individual&detail=simple&openId=' + openId + '&taskID=' + taskID + '&startDate=' + startDay + '&endDate='+ endDay,
      method: 'GET',
      success: function(res){
        // success
        var d = res.data.data;
        console.log(res);
        that.setData({
          'sontime': d.ontime,
          'slate': d.late,
          'sleave': d.leave,
          'sbsent': d.absent
        })
      },
      fail: function() {
        // fail
        wx.showToast({
          title: '请输入有效日期',
          icon: 'loading',
          duration: 2000
        })
      },
      complete: function() {
        // complete
      }
    })
  },

  // 个人查询详细
  getSingleRecord: function (openId, taskID, startDay, endDay, detail) {
    var that = this;

    wx.request({
      url: 'https://www.cpcsign.com/api/sign?type=individual&openId=' + openId + '&taskID=' + taskID + '&startDate=' + startDay + '&endDate='+ endDay + '&detail=' + detail,
      method: 'GET',
      success: function(res){
        // success
        var d = res.data.data;
        console.log(d);
        
        switch (detail) {
          case 'late':
            that.setData({
              sLateList: d
            })
            break;
          case 'leave':
            that.setData({
              sLeaveList: d  
            })
            break;
          case 'absent':
            that.setData({
              sAbsentList: d
            })
            break;
          case 'ontime':
            that.setData({
              sOntimeList: d
            })
            break;
        }

      },
      fail: function() {

      },
      complete: function() {
        // complete
      }
    })
  },

  // onShow: function () {
  //   wx.setNavigationBarTitle({
  //     title: this.data.taskName
  //   })
  // },

  onLoad: function (options) {
    var that = this;
    var now = new Date();
    var d = this.data;
    
    console.log(options);
    
    //保存taskID,taskName，并设置当前时间currentTime
    this.setData({
      openId: wx.getStorageSync('openId'),
      taskID: options.taskID,
      taskName: options.taskName,
      taskStartDate: options.taskStart,
      taskEndDate: options.taskEnd,
      currentTime: util.getYMD(now) + ' ' + util.getHM(now) + ' ' + util.getW(now),

      sStartDay: options.taskStart,
      sEndDay: options.taskEnd

    })

    // 初始化全体统计日期
    this.setData({
      aStartDay: util.getYMD(now),
      aEndDay: util.getYMD(now)
    })

    //设置任务名称
    wx.setNavigationBarTitle({
      title: options.taskName
    })

    // 请求当天全体统计记录
    this.getAllTotal(options.taskID, util.getYMD(now), util.getYMD(now));

    // 请求当天全体详细记录
    this.getAllRecord(options.taskID, d.aStartDay, d.aEndDay)


  }
})

模板简介：该模板名称为【微信小程序打卡的详细日期及状态页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。