ebiz-h5/src/views/ebiz/attendance/Attendance.vue

<template>
    <div>
        <div class='border-gb  header mh-auto  h50 flex align-items-c  bg-white'>
            <van-button  round @click="goDetail(order)" size="small" class="ml15" type="danger" v-no-more-click="1000">当月</van-button>
             <div @click="timePopup" class="fs12 red ml15">2019-05
                <img src="@/assets/images/u79.png" alt="" class="absolute mt2 ml5">
            </div>
            <van-popup v-model="dateShow" position="bottom">
                <van-datetime-picker
                    v-model="currentDate" 
                    type="year-month"
                    title="选择年月日"
                    :min-date="minDate"
                    :max-date="maxDate" 
                    @cancel="handleCancel"
                    @confirm="handleEndDateConfirm"
                />
            </van-popup>
       </div>
       <div class="mt10 bg-white">
           <div class="flex h70 align-items-c border-gb">
              <img src="@/assets/images/u1203.png" alt="" class="h40 w40 ml15"/>
              <span class="ml10 fs14">王昭君</span>
              <div class="absolute right20 flex" @click="month">
                <div class="mt10">
                    <img src="@/assets/images/u1188.png" alt="" class="" />
                </div>
                <div class="fs14 red mt10">打卡月历</div>
              </div>
             
           </div>
           <div class="flex h50 border-gb ml15 align-items-c">
               <div>应出勤天数</div>
               <div class='absolute right30'>20天</div>
           </div>
           <div class="flex h50 border-gb ml15 align-items-c">
               <div>实际出勤天数</div>
               <div class='absolute right30'>20天</div>
           </div>
           <div class="flex h50 border-gb ml15 align-items-c">
               <div>实时出勤率</div>
               <div class='absolute right30'>20%</div>
           </div>
           <div class="flex h50 border-gb ml15 align-items-c fwb">
               <div>迟到</div>
               <div class='absolute right30 c-gray-base '>0次</div>
           </div>
           <div class="flex h50 border-gb ml15 align-items-c fwb">
               <div>早退</div>
               <div class='absolute right30 red'>1次，共307分钟</div>
           </div>
           <div class="flex h50 border-gb ml15 align-items-c fwb">
               <div>缺卡</div>
               <div class='absolute right30 red'>1次</div>
           </div>
           <div class="flex h50 ml15 align-items-c fwb">
               <div>旷工</div>
               <div class='absolute right30 red'>1天</div>
           </div>
       </div>
       <div class="fs13 red mt10 ml15">
           注：本出勤率只统计工作日出勤情况
       </div>
    </div>
</template>
<script>
    import {  Popup,DatetimePicker } from 'vant';
    export default {
        name: 'attendance',
        components: {
            [Popup.name]: Popup,
            [DatetimePicker.name]: DatetimePicker,
        },
        data() {
            return {
                currentDate: new Date(),
                dateShow: false,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
            }
        },
        created() {

        },
        methods:{
            timePopup(){
                this.dateShow = true;
            },
            handleCancel () {
                this.dateShow = false;
            },
            //开始时间
            handleEndDateConfirm (e) {
                this.dateShow = false;
                console.log(e)
                // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
            },
            month(){
                this.$jump({
                    flag: 'h5',
                    extra: {
                    url: location.origin + `/#/attendance/Monthly`
                    },
                    routerInfo: {
                    path: `/attendance/Monthly`
                    }
                })
            }
        }
    }
</script>
<style  scoped>

</style>