starwork-uniapp/src/pages/attendance/attendance.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <TopNavigation :title="titleTab[curIndex]"></TopNavigation>
  <scroll-view class="h-[calc(100vh-50px-60px)]" scroll-y>
    <view v-for="(item, index) in pages" :key="index" v-show="curIndex == index">
      <component :is="item"></component>
    </view>
  </scroll-view>
  <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
</template>

<script lang="ts" setup>
  import AttendanceClockIn from './AttendanceClockIn.vue'
  import AttendanceStatistics from './AttendanceStatistics.vue'
  import AttendanceSet from './AttendanceSet.vue'
  const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
  const titleTab = ['考勤打卡', '考勤统计', '设置']
  const list = ref<Array<TabBarItem>>([
    {
      title: '打卡',
      icon: 'home'
    },
    {
      title: '统计',
      icon: 'notification'
    },
    {
      title: '设置',
      icon: 'setting'
    }
  ])
  const curIndex = ref(0)
  const change = (data: { value: number }) => {
    curIndex.value = data.value
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f6f8fc;
  }
</style>