更新考勤时间动态显示

src/layout/user/punchBtn.vue

@@ -17,13 +17,13 @@
         <el-col :span="24">
           <h2>当前打卡时间</h2>
           <el-col :span="24" class="round">
-            <!-- <p>打卡</p>
-            <p>2020-03-03-80:30</p> -->
-            <ul>
+            <p>打卡</p>
+            <p>{{ time }}</p>
+            <!-- <ul>
               <li></li>
               <li></li>
               <li></li>
-            </ul>
+            </ul> -->
           </el-col>
         </el-col>
         <div style="margin: 16px;">
@@ -42,6 +42,7 @@ export default {
   props: {
     show: null,
     stuInfo: null,
+    time: null,
   },
   components: {},
   data: () => ({}),
@@ -70,5 +71,10 @@ p {
   margin: 15px 60px;
   border-radius: 360px;
   border: 10px solid #d5e3fe;
+  color: #ffffff;
+}
+.round p {
+  margin: 27px 0 0 0;
+  font-size: 22px;
 }
 </style>

src/views/index.vue

@@ -93,6 +93,7 @@ export default {
       this.$set(this, `dates`, this.value);
       var str = '星期' + '日一二三四五六'.charAt(new Date().getDay());
       this.$set(this, `week`, str);
+      console.log(str);
     },
   },
 };

src/views/user/checkWork.vue

@@ -9,7 +9,7 @@
         <el-col :span="24" class="main">
           <el-col :span="24" class="leaveBtn">
             <!-- <van-button round type="info" icon="smile" @click="onClickRight()">考勤打卡</van-button> -->
-            <punchBtn :show="show" :stuInfo="stuInfo" @openClick="openClick" @onSubmit="onSubmit"></punchBtn>
+            <punchBtn :show="show" :time="time" :stuInfo="stuInfo" @openClick="openClick" @onSubmit="onSubmit"></punchBtn>
           </el-col>
           <el-col :span="24" class="leaveList">
             <checkList :checkWorkList="checkWorkList"></checkList>
@@ -35,6 +35,7 @@ export default {
     punchBtn, //考勤打卡
   },
   data: () => ({
+    time: '',
     checkWorkList: [
       {
         studentid: '流域',
@@ -64,9 +65,12 @@ export default {
     transitionName: 'fade',
     navShow: true,
   }),
+
   created() {
     this.searchInfo();
+    this.getDate();
   },
+
   computed: {},
   mounted() {
     this.title = this.$route.meta.title;
@@ -84,6 +88,20 @@ export default {
       let site = JSON.parse(sessionStorage.getItem('site'));
       this.$set(this, `stuInfo`, site);
     },
+
+    getDate() {
+      this.timer = setInterval(() => {
+        var adate = new Date();
+        this.value = adate.getHours() + ':' + adate.getMinutes() + adate.getSeconds();
+        let str = adate.getHours() > 9 ? adate.getHours() : '0' + adate.getHours();
+        let tt = adate.getMinutes() > 9 ? adate.getMinutes() : '0' + adate.getMinutes();
+        let ss = adate.getSeconds() > 9 ? adate.getSeconds() : '0' + adate.getSeconds();
+        let tim = str + ':' + tt + ':' + ss;
+        console.log(this.time);
+        this.$set(this, `time`, tim);
+      }, 1000);
+    },
+
     openClick() {
       this.show = true;
     },