考勤打卡UI界面

src/views/attendance/attendance.vue

@@ -10,20 +10,49 @@
       <!-- 顶部员工信息 -->
       <div class=" mx-4 bg-bg-deep rounded-md py-5 px-7 text-white relative mt-12">
           <p class="top align-baseline">
-            <span class="name text-xl mr-4">姓名</span> <span class="number text-sm">员工编号43</span>
+            <span class="name text-xl mr-4">{{name}}</span> <span class="number text-sm">员工编号{{memberid}}</span>
           </p>
-          <p class="team-name text-base mt-3">杭州复杂美科技有限公司</p>
+          <p class="team-name text-base mt-3">{{teamname}}</p>
       </div>    
       <!-- 考勤状态 -->
-      <p class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
-        今日考勤异常
+      <p  :class="{normal:(state==='正常')}"
+          class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
+         今日考勤{{state}}
       </p>
-      <!-- 打卡信息 -->
-      <div v-for="(punch,index) in list" :key="index">
-        <punch :punch="punch"/>
+      <!-- 打卡 -->
+      <div :last="last">
+        <!-- 上班打卡 -->
+        <div v-if="list.length==0">
+          <punch @attendance="record(arguments)" :last='true' @alert="toAlert">上班打卡</punch>
+        </div>
+        <!-- 打卡记录 -->
+        <div v-else>
+          <div v-for="(punch,index) in list" :key="index" >
+            <punch :punch="punch" @editNote="editNote"/>
+          </div>
+          <!-- 下班打卡 -->
+          <punch @attendance="record(arguments)" :last='true' @alert="toAlert" >下班打卡</punch>
+        </div>
       </div>
       <p class=" text-sm text-gray-400 pt-8 text-center pb-36">查看更多打卡记录请前往work.33.cn</p>
-
+      <!-- 打卡弹窗 -->
+      <van-dialog v-model="showPunch" 
+                  title="提示" show-cancel-button confirm-button-text="确认打卡" cancel-button-text="不打卡"
+                  @confirm="confirm">
+        <div>
+          <p><span class=" mr-2 text-gray-400">打卡时间:</span><span>{{time}}</span></p>
+          <div class="flex"><span class=" mr-2 text-gray-400">打卡地点:</span><span class=" w-48">{{location}}</span></div>
+        </div>
+      </van-dialog>
+      <!-- 编辑备注弹窗 -->
+      <van-dialog v-model="showNote" title="编辑备注" confirm-button-text="提交">
+        <div>
+          <p>0/20-500</p>
+          <div>
+            请填写 <br> 1.工作计划/完成情况 <br> 2.对接人及周期 <br> 3.遇到的问题
+          </div>
+        </div>
+      </van-dialog>
     </main-page>  
   </div>
 </template>
@@ -32,33 +61,68 @@
 <script lang="ts">
 import Vue,{ PropType } from 'vue';
 import { punchList,Punch } from '@/DTO'
+import { Toast } from 'vant';
 
 export default Vue.extend({
   name:'attendance',
   components:{
     'main-page': () => import('@/layout/main-page.vue'),
     'punch': () => import('@/views/attendance/components/punch.vue')
-
   },
   props:{
     punch:{
       type:Object as PropType<Punch>
+    },
+    state:{
+      type:String,
+      default:'正常'
+    },
+    last:{
+      type:Boolean,
+      default:false
     }
   },
   data(){
-    let list:Array<Punch> = punchList
+    let list:Array<Punch>=[]
+    list = punchList
     return{
-      list
+      list,
+      name:'姓名',
+      memberid:43,
+      teamname:'杭州复杂美科技有限公司',
+      showPunch:false,
+      showNote:false,
+      time:'',
+      location:''
     }
   },
   methods:{
     handleClickLeft() {
       console.log('click left')    
     },
+    record(msg:Array<string>){
+      this.time = msg[1]
+      this.location = msg[2]
+    },
+    toAlert(isShow:boolean){ 
+      this.showPunch = isShow
+    },
+    editNote(isShow:boolean){
+      this.showNote = isShow
+    },
+    confirm(){
+      Toast({
+        message:'上班打卡成功',
+        position:'bottom'
+      })
     }
+  },
 });
 </script>
 
 <style>
-
+.normal{
+  background-color:#E8F3FF;
+  color:#32B2F7;
+}
 </style>
\ No newline at end of file

src/views/attendance/components/punch.vue

 <template>
   <div class=" relative mt-4">
     <!-- 左侧圆形 -->
-    <div  
-          class=" w-4 h-4 bg-white border-2 border-color-primary rounded-full absolute top-11 left-4.5"></div>
-    <div class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-4">
+    <div  :class="{outside:(!isLocal&&punch!=null),lastNode:last}" 
+          class=" w-4 h-4 bg-color-primary rounded-full absolute top-11 left-4.5"></div>
+    <!-- 右侧信息 -->
+    <div  :class="{notLocal:(!isLocal&&punch!=null)}" 
+          class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-6">
       <!-- 打卡日期 -->
-      <p class="date text-gray-500 text-sm pt-4">{{punch.date}}</p>
+      <p  class="date text-gray-500 text-sm pt-4"><span>{{date}}</span><span class=" ml-1" v-if="last">再次打卡将覆盖上一条记录</span></p>
       <!-- 打卡 -->
-      <div  v-if="punch.location ==null"
-            class="round w-40 mx-auto relative">
+      <div  v-if="punch == null"
+            class="round w-40 mx-auto relative"
+            @click="check">
         <img src="../../../assets/oval.png" alt="" srcset="">
         <div class=" absolute top-14 left-0 right-0 mx-auto text-center text-white">
-          <p class=" text-xl tracking-wide">上班打卡</p>
+          <p class=" text-xl tracking-wide"><slot></slot></p>
           <p class=" text-base tracking-wider">{{time}}</p>
         </div>
       </div>
-      <p v-else class="text-base my-1.5">
-        <span class="text-text-primary mr-4">打卡时间{{punch.time}}</span>
-        <span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded px-1">异地</span>
+      <p v-else class=" my-1.5 flex items-start">
+        <span class="text-base text-text-primary mr-3">打卡时间{{punch.time}}</span>
+        <span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded tracking-wider text-sm">异地</span>
       </p>
       <!-- 定位信息 -->
       <div class=" flex text-sm">
         <img src="../../../assets/icons/location.png" alt="" class="w-4 h-5 mr-1 inline-block">
-        <div>
-          <span class="text-gray-500">{{punch.location}}</span>
+        <div class=" pt-1">
+          <span class="text-gray-500">{{location}}</span>
           <!-- 异地备注 -->
-          <div  v-if="punch.isLocal ==false"
+          <div  v-if="punch != null && punch.isLocal ==false"
               class=" pt-1">
             <p class=" text-gray-400">备注：{{punch.note}}</p>
-            <span class=" text-color-primary px-5 py-2 pt-5">编辑备注</span>
-            <span class=" text-color-primary px-5 py-2">撤回申请</span>
+            <div class=" mt-3 text-color-primary">
+              <span class="px-5 py-2 " @click="edit">编辑备注</span>
+              <span class="px-5 py-2" @click="cancel">撤回申请</span>
+            </div>  
           </div>
         </div>
       </div>
 
       <!-- 刷新定位 -->
-      <p  v-if="punch.location ==null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" >刷新定位</p>
+      <p  v-if="punch == null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" @click="reload" >刷新定位</p>
     </div>
   </div>
 </template>
@@ -49,13 +54,28 @@ export default Vue.extend({
   props:{
     punch:{
       type:Object as PropType<Punch>
+    },
+    last:{
+      type:Boolean,
+      default:false
     }
   },
   data(){
+    let isLocal,location,date,time
+    if(this.punch!=null){
+      isLocal = this.punch.isLocal
+      location = this.punch.location
+      date = this.punch.date
+      time = this.punch.time
+    }else{
+      location ='这里是当前定位可手动刷新'
+    }
     return{
-      date:'',
-      time:'',
+      date,
+      time,
       timer:0,
+      isLocal,
+      location
     }
   },
   methods:{
@@ -72,12 +92,28 @@ export default Vue.extend({
     },
     currentTime(){
       this.timer = setInterval(this.getTime,1000)
+    },
+    check(){
+      let isShow = true
+      this.$emit('attendance',this.date,this.time,this.location)
+      this.$emit('alert',isShow)
+      console.log('submit');
+    },
+    reload(){
+      console.log('刷新定位');
+    },
+    edit(){
+      let isShow = true
+      this.$emit('editNote',isShow)
+    },
+    cancel(){
+      console.log("撤回申请"); 
     }
   },
   mounted(){
     this.getTime()
     this.currentTime()   
-    console.log(this.punch);
+    console.log(this.last);
     
   },
   beforeDestroy(){
@@ -90,5 +126,16 @@ export default Vue.extend({
 </script>
 
 <style lang="less">
-
+  .notLocal{
+    background-color: #FFFBF8F3;
+    box-shadow: #DFDEDD 0 0 12px;
+  }
+  .outside{
+    background-color:#E99D1A;
+    border: none;
+  }
+  .lastNode{
+   background-color:rgb(250, 250, 250);
+   border: 2px solid #32B2F7 ;
+  }
 </style>
\ No newline at end of file