考勤打卡UI界面

src/views/attendance/attendance.vue

@@ -15,14 +15,14 @@
           <p class="team-name text-base mt-3">{{teamname}}</p>
       </div>    
       <!-- 考勤状态 -->
-      <p  :class="{normal:(state==='正常')}"
+      <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 :last="last">
         <!-- 上班打卡 -->
-        <div v-if="list.length==0">
+        <div v-if="list.length==0"> 
           <punch @attendance="record(arguments)" :last='true' @alert="toAlert">上班打卡</punch>
         </div>
         <!-- 打卡记录 -->
@@ -31,26 +31,26 @@
             <punch :punch="punch" @editNote="editNote"/>
           </div>
           <!-- 下班打卡 -->
-          <punch @attendance="record(arguments)" :last='true' @alert="toAlert" >下班打卡</punch>
+          <punch @attendance="record(arguments)" :last='true' @alert="toAlert(true,true)">下班打卡</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">
+      <van-dialog title="提示" show-cancel-button confirm-button-text="确认打卡" cancel-button-text="不打卡" 
+                  v-model="showPunch" @confirm="confirm(checkin)">
         <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="提交">
+      <van-dialog v-model="showNote" title="编辑备注" confirm-button-text="提交" :before-close="onBeforeClose">
         <div>
-          <p>0/20-500</p>
-          <div>
-            请填写 <br> 1.工作计划/完成情况 <br> 2.对接人及周期 <br> 3.遇到的问题
-          </div>
+          <p class=" text-right text-gray-400 text-sm">{{value.length}}/{{min}}-{{max}}</p>
+          <textarea type="text" v-model="value" :placeholder="hint"
+                    class=" w-72 h-56 bg-gray-100 mx-auto mt-1 block box-border text-base text-text-primary"
+                    @input="handleInput">
+          </textarea>
         </div>
       </van-dialog>
     </main-page>  
@@ -80,6 +80,18 @@ export default Vue.extend({
     last:{
       type:Boolean,
       default:false
+    },
+    hint:{
+      type:String,
+      default:'请填写\n1.工作计划/完成情况\n2.对接人及周期\n3.遇到的问题'
+    },
+    min:{
+      type:Number,
+      default:20
+    },
+    max:{
+      type:Number,
+      default:500
     }
   },
   data(){
@@ -93,7 +105,10 @@ export default Vue.extend({
       showPunch:false,
       showNote:false,
       time:'',
-      location:''
+      location:'',
+      value:'',
+      close:false,
+      checkin:true
     }
   },
   methods:{
@@ -104,19 +119,51 @@ export default Vue.extend({
       this.time = msg[1]
       this.location = msg[2]
     },
-    toAlert(isShow:boolean){ 
-      this.showPunch = isShow
+    toAlert(isShow:boolean,change?:boolean){ 
+      this.showPunch = isShow 
+      if(change){
+        this.checkin = false
+      }
     },
     editNote(isShow:boolean){
       this.showNote = isShow
     },
-    confirm(){
+    confirm(checkin:boolean){
+      let type:string=''
+      if(checkin == true){
+        type='上班'
+      }else{
+        type='下班'
+      } 
       Toast({
-        message:'上班打卡成功',
+        message:type+'打卡成功',
         position:'bottom'
       })
+    },
+    handleInput() { 
+      // this.value = ''
+      if (this.max > 0 && this.value.length >= this.max) {
+        this.value = this.value.slice(0,this.max)
+      } else if( this.value.length>=this.min) {
+        this.close = true
+      } 
+      else if( this.value.length == 0){
+        this.value='请填写\n1.工作计划/完成情况\n2.对接人及周期\n3.遇到的问题'
+      }
+    },
+    onBeforeClose(action:string,done:Function){
+      if(action==='confirm'){
+        console.log('close',this.close);
+        if(this.close){
+          this.value = ''
+          this.close = false
+          return done()
+        }else{
+          return done(false)
+        }
+      }
     }
-  },
+  }
 });
 </script>
 
@@ -125,4 +172,18 @@ export default Vue.extend({
   background-color:#E8F3FF;
   color:#32B2F7;
 }
+::-webkit-input-placeholder {
+color: transparent;
+
+}
+
+::-webkit-input-placeholder:before {
+display: block;
+
+color: #999;
+
+content: "第一行请输入提示内容 \A 第二行请输入提示内容";
+
+}
+
 </style>
\ No newline at end of file

src/views/attendance/components/punch.vue

@@ -10,7 +10,7 @@
       <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 == null"
-            class="round w-40 mx-auto relative"
+            class="round w-40 mx-auto relative mt-2"
             @click="check">
         <img src="../../../assets/oval.png" alt="" srcset="">
         <div class=" absolute top-14 left-0 right-0 mx-auto text-center text-white">
@@ -22,17 +22,19 @@
         <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 class=" pt-1">
-          <span class="text-gray-500">{{location}}</span>
+      <div class="text-sm">
+        <!-- 定位信息 -->
+        <div class="flex" :class="{center:last}" >
+          <img src="../../../assets/icons/location.png" alt="" class="w-4 h-5 mr-1 inline-block">
+          <p class="text-gray-500 mt-1">{{location}}</p>
+        </div>
+        <div class=" pt-1 ml-5">
           <!-- 异地备注 -->
           <div  v-if="punch != null && punch.isLocal ==false"
               class=" pt-1">
             <p class=" text-gray-400">备注：{{punch.note}}</p>
             <div class=" mt-3 text-color-primary">
-              <span class="px-5 py-2 " @click="edit">编辑备注</span>
+              <span class="pr-5 py-2" @click="edit">编辑备注</span>
               <span class="px-5 py-2" @click="cancel">撤回申请</span>
             </div>  
           </div>
@@ -40,7 +42,7 @@
       </div>
 
       <!-- 刷新定位 -->
-      <p  v-if="punch == null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" @click="reload" >刷新定位</p>
+      <p  v-if="punch == null" class=" text-color-primary text-sm bg-white px-5 py-2 text-center" @click="reload" >刷新定位</p>
     </div>
   </div>
 </template>
@@ -113,8 +115,6 @@ export default Vue.extend({
   mounted(){
     this.getTime()
     this.currentTime()   
-    console.log(this.last);
-    
   },
   beforeDestroy(){
     if(this.timer){
@@ -138,4 +138,7 @@ export default Vue.extend({
    background-color:rgb(250, 250, 250);
    border: 2px solid #32B2F7 ;
   }
+  .center{
+    justify-content: center;
+  }
 </style>
\ No newline at end of file