打卡定位

pages/tabs/clock.vue

@@ -6,14 +6,15 @@
     <view v-else class="body">
       <view class="day">
         <text class="date">{{ dateLabel }}</text>
-        <text class="shift">班次 {{ rules.workStart }}–{{ rules.workEnd }}</text>
+        <text class="shift">弹性 09:00–09:30 / 18:00–18:30</text>
       </view>
+      <view class="lieu">多出工时记调休 {{ lieuText }}</view>
 
       <view class="slots">
         <view class="slot">
           <view class="dot" :class="{ on: inRec }" />
           <view class="slot-m">
-            <text class="lab">上班 {{ rules.workStart }}</text>
+            <text class="lab">上班 09:00–09:30</text>
             <text class="val" :class="{ ok: inRec }">{{ inRec ? (inRec.time || '') + ' 已打卡' : '未打卡' }}</text>
           </view>
           <text class="tiny">{{ inRec ? (inRec.status || '正常') : '' }}</text>
@@ -21,7 +22,7 @@
         <view class="slot">
           <view class="dot" :class="{ on: outRec }" />
           <view class="slot-m">
-            <text class="lab">下班 {{ rules.workEnd }}</text>
+            <text class="lab">下班 18:00–18:30</text>
             <text class="val" :class="{ ok: outRec }">{{ outRec ? (outRec.time || '') + ' 已打卡' : '未打卡' }}</text>
           </view>
           <text class="tiny">{{ outRec ? (outRec.status || '正常') : '' }}</text>
@@ -80,7 +81,7 @@
 import FyHeader from '../../components/fy-header.vue'
 import FyScroll from '../../components/fy-scroll.vue'
 import { store } from '../../utils/store.js'
-import { clockText, toast } from '../../utils/format.js'
+import { clockText, flexCreditMinutes, flexCreditText, toast } from '../../utils/format.js'
 
 export default {
   components: { FyHeader, FyScroll },
@@ -111,6 +112,11 @@ export default {
     },
     outRec() {
       return this.records.find((r) => /下班|out/i.test(String(r.title || r.kind || r.type || '')))
+    },
+    lieuText() {
+      const inn = this.inRec && (this.inRec.time || this.inRec.punchTime)
+      const out = this.outRec && (this.outRec.time || this.outRec.punchTime)
+      return flexCreditText(flexCreditMinutes(inn, out))
     }
   },
   onShow() {
@@ -150,6 +156,7 @@ export default {
 .day { display: flex; justify-content: space-between; align-items: baseline; padding: 8rpx 8rpx 20rpx; }
 .date { font-size: 32rpx; font-weight: 650; color: #111827; }
 .shift { font-size: 24rpx; color: #6B7280; }
+.lieu { margin: 0 8rpx 16rpx; font-size: 24rpx; color: #1677FF; }
 .slots { background: #fff; border-radius: 20rpx; padding: 8rpx 8rpx; border: 1rpx solid rgba(17,24,39,0.06); }
 .slot { display: flex; align-items: center; padding: 22rpx 20rpx; }
 .slot + .slot { border-top: 1rpx solid #F0F2F5; }