feat: 1.考勤设置弹窗

src/components/BottomPop/BottomPop.vue

@@ -0,0 +1,80 @@
+<template>
+  <wd-popup
+    v-model="visible"
+    custom-style="border-top-left-radius: 0.3125rem;
+    border-top-right-radius: 0.3125rem;background-color:#f6f8fc"
+    position="bottom"
+    @close="handleClose"
+  >
+    <view class="box-border">
+      <view class="flex p-3 flex-justify-center">
+        <view class="font-bold text-4">{{ title }}</view>
+        <wd-icon
+          class="position-absolute right-3 top-4.5 color-gray"
+          name="close"
+          size="15"
+          @click="handleClose"
+        />
+      </view>
+      <view class="">
+        <slot name="child"></slot>
+      </view>
+      <wd-button
+        v-if="!noSure"
+        @click="
+          () => {
+            onSure()
+            handleClose()
+          }
+        "
+        class="mx-3 my-5"
+        block
+      >
+        确定
+      </wd-button>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 关闭回调
+    onclose: {
+      type: Function,
+      default: () => {},
+      required: true
+    },
+    // 是否显示
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    // 确定回调
+    onSure: {
+      type: Function,
+      default: () => {}
+    },
+    // 不要确定按钮
+    noSure: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const visible = ref(props.show)
+  watchEffect(() => {
+    visible.value = props.show
+  })
+  const handleClose = () => {
+    visible.value = false
+    props.onclose()
+  }
+</script>
+<style lang="scss" scoped>
+  //
+</style>

src/components/CommonItemItem/CommonItem.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="mx-2">
     <view class="flex flex-row items-center py-4">
-      <view class="color-red mr-0.5" v-if="isMust">*</view>
+      <view class="mr-0.5" :class="isMust ? 'color-transparent' : 'color-red'">*</view>
       <view>{{ text }}</view>
       <view v-if="$slots.child" class="flex-1 mx-2"><slot name="child" class="flex-1"></slot></view>
       <view v-if="!$slots.child" class="flex-1 flex flex-row flex-justify-end items-center">
@@ -21,30 +21,37 @@
 
 <script lang="ts" setup>
   const props = defineProps({
+    // 标题
     text: {
       type: String,
       default: ''
     },
+    // 是否必填
     isMust: {
       type: Boolean,
       default: false
     },
+    // 显示的值
     value: {
       type: String,
       default: ''
     },
+    // 是否显示下一步
     isNext: {
       type: Boolean,
       default: true
     },
+    // 没有下划线
     noLine: {
       type: Boolean,
       default: false
     },
+    // 无value时的提示
     hint: {
       type: String,
       default: '请选择'
     }
+    // 没有child时使用选择模版
   })
   //
 </script>

src/pages/attendance/attendance-add-group/attendance-add-group.vue

@@ -9,6 +9,77 @@
 
 <template>
   <TopNavigation title="添加考勤组"></TopNavigation>
+  <BottomPop
+    :show="showType"
+    title="考勤类型"
+    :onclose="
+      () => {
+        showType = false
+        typeIndex = typeSelectIndex
+      }
+    "
+    :onSure="
+      () => {
+        typeSelectIndex = typeIndex
+      }
+    "
+  >
+    <template v-slot:child>
+      <view class="px-4">
+        <view
+          class="bg-white rounded-1 mt-2"
+          @click="typeIndex = index"
+          v-for="(item, index) in typeList"
+          :key="index"
+        >
+          <view class="flex flex-row items-center p-3 box-border">
+            <view class="flex flex-1 flex-col flex-justify-items-start">
+              <view class="">{{ item.title }}</view>
+              <view class="mt-1 text-3.3">{{ item.desc }}</view>
+              <view class="mt-1 text-2.8 color-gray">{{ item.desc2 }}</view>
+            </view>
+            <view v-show="typeIndex == index">
+              <wd-icon name="check" class="color-[#3372FA] mr-2"></wd-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </template>
+  </BottomPop>
+
+  <BottomPop
+    :show="showWay"
+    title="打卡方式选择"
+    :onclose="
+      () => {
+        showWay = false
+      }
+    "
+    :onSure="() => {}"
+    noSure
+  >
+    <template v-slot:child>
+      <view class="px-4">
+        <view class="bg-white rounded-1 mt-2">
+          <view
+            class="flex flex-row items-center p-3 box-border"
+            @click="wayIndex = index"
+            v-for="(item, index) in wayList"
+            :key="index"
+          >
+            <view class="flex flex-1 flex-col flex-justify-items-start">
+              <view class="">{{ item.title }}</view>
+              <view class="mt-1 text-2.8 color-gray">{{ item.desc }}</view>
+            </view>
+            <view v-show="wayIndex == index">
+              <wd-icon name="check" class="color-[#3372FA] mr-2"></wd-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </template>
+  </BottomPop>
+
   <view class="h-[calc(100vh-60px)] p-3 box-border">
     <view class="bg-white rounded-1.2 mt-2">
       <CommonItem text="考勤组名称" isMust value="有多少">
@@ -17,20 +88,37 @@
             class="text-right"
             v-model="name"
             placeholder="必填"
-            placeholder-class="input-placeholder"
+            placeholder-class="color-gray"
             @input="nameInput()"
             :maxlength="15"
           />
         </template>
       </CommonItem>
-      <CommonItem text="考勤类型" noLine value="固定班制"></CommonItem>
+      <CommonItem
+        @click="
+          () => {
+            showType = true
+          }
+        "
+        text="考勤类型"
+        noLine
+        :value="typeList[typeSelectIndex].title"
+      ></CommonItem>
     </view>
     <view class="bg-white rounded-1.2 mt-2">
       <CommonItem text="考勤人员" isMust value=""></CommonItem>
       <CommonItem text="考勤时间" noLine value="周一至周五,09:00-17:00"></CommonItem>
     </view>
     <view class="bg-white rounded-1.2 mt-2">
-      <CommonItem text="打卡方式" value="打卡设备"></CommonItem>
+      <CommonItem
+        @click="
+          () => {
+            showWay = true
+          }
+        "
+        text="打卡方式"
+        value="打卡设备"
+      ></CommonItem>
       <CommonItem text="打卡设备" isMust noLine value="" hint="未选择"></CommonItem>
     </view>
     <view class="bg-white rounded-1.2 mt-2">
@@ -43,12 +131,44 @@
 </template>
 
 <script lang="ts" setup>
+  import BottomPop from '@/components/BottomPop/BottomPop.vue'
   import CommonItem from '@/components/CommonItemItem/CommonItem.vue'
+  const showType = ref(false)
+  const typeIndex = ref(0)
+  const typeSelectIndex = ref(0)
+  const showWay = ref(false)
+  const wayIndex = ref(0)
   const name = ref('')
   const nameInput = () => {
     console.log(name.value)
   }
-  //
+  const typeList = [
+    {
+      title: '固定班制',
+      desc: '人员每周按照相同时间上下班',
+      desc2: '适用于办公室坐班,例如每周一至五上班,朝9晚5'
+    },
+    {
+      title: '自由班制',
+      desc: '无固定上下班时间，可随时打卡',
+      desc2: '适用于计时工种、灵活用工等'
+    },
+    {
+      title: '排班制',
+      desc: '排班制人员按每日所排班次上下班',
+      desc2: '适用于工厂、门店等，例如三班倒、做—休一'
+    }
+  ]
+  const wayList = [
+    {
+      title: '设备打卡',
+      desc: '适用于内勤打卡,有效避免打卡等作弊行为'
+    },
+    {
+      title: '设备+手机打卡',
+      desc: '选择后可开启外勤打卡'
+    }
+  ]
 </script>
 
 <style lang="scss" scoped>