feat: 1.弹性打卡设置

src/pages/attendance/classes-add.vue

@@ -39,13 +39,12 @@
         <CommonItem text="上班" value="09:00"></CommonItem>
         <CommonItem text="下班" value="17:00"></CommonItem>
         <view
+          @click="times.push({ start: '09:00', end: '17:00' })"
           v-show="index == times.length - 1 && times.length < 3"
           class="flex flex-justify-center items-center flex-row py-4 box-border"
         >
           <wd-icon name="add-circle mr-2" class="color-[#3372FA]" size="17"></wd-icon>
-          <view @click="times.push({ start: '09:00', end: '17:00' })" class="color-[#3372FA]">
+          <view class="color-[#3372FA]">添加时段</view>
-            添加时段
-          </view>
         </view>
       </view>
     </view>
@@ -53,7 +52,7 @@
       <CommonItem text="允许打卡时间" value="" hint=""></CommonItem>
     </view>
     <view class="bg-white rounded-1.2 mt-2">
-      <CommonItem text="弹性打卡" value="" hint="不设置"></CommonItem>
+      <CommonItem @click="goFlexblePunching" text="弹性打卡" value="" hint="不设置"></CommonItem>
     </view>
     <view v-show="times.length == 1" class="bg-white rounded-1.2 mt-2">
       <CommonItem value="" :noLine="haveRest ? false : true">
@@ -89,6 +88,11 @@
       end: '17:00'
     }
   ])
+  const goFlexblePunching = () => {
+    uni.navigateTo({
+      url: '/pages/attendance/flexible-punching'
+    })
+  }
   //
 </script>
 

src/pages/attendance/flexible-punching.vue

@@ -9,13 +9,72 @@
 
 <template>
   <TopNavigation title="弹性打卡"></TopNavigation>
-  <view class=""></view>
+  <view class="bg-white rounded-1.2 mt-2">
+    <CommonItem
+      @click="selectIndex = index"
+      v-for="(item, index) in setList"
+      :key="index"
+      :text="item.title"
+      value=""
+      hint=""
+      :isNext="false"
+    >
+      <template v-slot:child>
+        <view class="ml-a px-3 rounded-3 bg-[#F6F7FB] text-center">
+          <wd-icon
+            name="check"
+            class="color-[#3372FA]"
+            :class="selectIndex == index ? '' : 'invisible'"
+          ></wd-icon>
+        </view>
+      </template>
+    </CommonItem>
+  </view>
+  <view class="bg-white rounded-1.2 mt-1.5">
+    <CommonItem v-show="selectIndex == 1" text="" value="10分钟" hint="">
+      <template v-slot:leftChild>
+        <view>
+          <view>上班最多可晚到</view>
+          <view class="color-gray mt-1 text-3">晚到10分钟内不算迟到</view>
+        </view>
+      </template>
+    </CommonItem>
+    <CommonItem v-show="selectIndex == 1" text="" value="10分钟" hint="">
+      <template v-slot:leftChild>
+        <view>
+          <view>上班最多可早走</view>
+          <view class="color-gray mt-1 text-3">早走10分钟内不算迟到</view>
+        </view>
+      </template>
+    </CommonItem>
+    <CommonItem v-show="selectIndex == 2" text="最多晚到晚走" value="10分钟" hint=""></CommonItem>
+    <CommonItem v-show="selectIndex == 2" text="最多早到早走" value="10分钟" hint=""></CommonItem>
+    <view
+      class="fixed bottom-0 left-0 w-full p-3 box-border border-solid border-0 border-t-1 border-gray-200"
+    >
+      <wd-button block>确定</wd-button>
+    </view>
+  </view>
 </template>
 
 <script lang="ts" setup>
+  import CommonItem from '@/components/CommonItemItem/CommonItem.vue'
+  const setList = [
+    {
+      title: '不设置',
+      isSelect: false
+    },
+    {
+      title: '晚到、早走几分钟不记为异常',
+      isSelect: false
+    },
+    {
+      title: '允许晚到晚走、早到早走',
+      isSelect: false
+    }
+  ]
+  const selectIndex = ref(-1)
   //
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-  //
-</style>