diff --git a/src/pages.json b/src/pages.json
index 18c0653..c34947e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -227,6 +227,52 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/business",
+      "pages": [
+        {
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "出差报备"
+          }
+        },
+        {
+          "path": "create",
+          "style": {
+            "navigationBarTitleText": "出差报备"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "出差详情"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/overtime",
+      "pages": [
+        {
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "加班报备"
+          }
+        },
+        {
+          "path": "create",
+          "style": {
+            "navigationBarTitleText": "加班报备"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "加班详情"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {
diff --git a/src/pages/ask-leave/create.vue b/src/pages/ask-leave/create.vue
index 1b687c6..df5c4fb 100644
--- a/src/pages/ask-leave/create.vue
+++ b/src/pages/ask-leave/create.vue
@@ -50,12 +50,19 @@
     <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
     <uv-datetime-picker
       placeholder="请选择日期"
+      v-model="startValue"
       ref="dateStartPicker"
       mode="datetime"
       @confirm="confirmStartDatePicker"
     >
     </uv-datetime-picker>
-    <uv-datetime-picker placeholder="请选择日期" ref="dateEndPicker" mode="datetime" @confirm="confirmEndDatePicker">
+    <uv-datetime-picker
+      v-model="endValue"
+      placeholder="请选择日期"
+      ref="dateEndPicker"
+      mode="datetime"
+      @confirm="confirmEndDatePicker"
+    >
     </uv-datetime-picker>
     <uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
   </view>
@@ -73,7 +80,8 @@ const dateStartPicker = ref(null)
 const dateEndPicker = ref(null)
 const pickerRef = ref(null)
 const modalRef = ref(null)
-// const value = ref(Number(new Date())
+const startValue = ref(Number(new Date()))
+const endValue = ref(Number(new Date()))
 const id = ref(0)
 const loading = ref(false)
 const form = reactive({
@@ -131,6 +139,8 @@ onLoad(options => {
         }
       })
       .then(res => {
+        startValue.value = res.start_at * 1000
+        endValue.value = res.end_at * 1000
         form.start_at = timeFormat(res.start_at, "yyyy-mm-dd hh:MM:ss")
         form.end_at = timeFormat(res.end_at, "yyyy-mm-dd hh:MM:ss")
         form.reason = res.reason
diff --git a/src/pages/ask-leave/detail.vue b/src/pages/ask-leave/detail.vue
index 6cb4ac5..cbe9046 100644
--- a/src/pages/ask-leave/detail.vue
+++ b/src/pages/ask-leave/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="px-base" v-if="detail">
-    <CuNavbar title="补卡审核">
+    <CuNavbar title="请假详情">
       <template v-if="!isEdit" #right>
         <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
       </template>
@@ -95,7 +95,6 @@ const onSubmit = async () => {
       title: "删除成功",
       icon: "none"
     })
-    formRef.value.resetFields()
     uni.navigateBack()
   } catch (error) {
     console.log(error)
diff --git a/src/pages/business/components/item.vue b/src/pages/business/components/item.vue
new file mode 100644
index 0000000..84f106c
--- /dev/null
+++ b/src/pages/business/components/item.vue
@@ -0,0 +1,36 @@
+<template>
+  <view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx" @click="goPath">
+    <view class="text-30rpx">出差报备</view>
+    <view class="text-24rpx text-hex-999999 flex">
+      <view class="text-24rpx w-120rpx text-right mr-20rpx">目的地：</view>
+      <view class="">{{ item.address }}</view>
+    </view>
+    <view class="text-24rpx text-hex-999999 flex">
+      <view class="text-24rpx w-140rpx">出差事由：</view>
+      <view class="">{{ item.reason }}</view>
+    </view>
+    <view class="flex items-center text-hex-999999 flex">
+      <view class="text-24rpx w-140rpx"> 申请时间：</view>
+      <view class="text-24rpx">{{ timeFormat(item.created_at, "yyyy-mm-dd hh:MM:ss") }}</view>
+    </view>
+    <view
+      :style="{
+        color: statusFun(item.workflow_check.check_status, 'workflow_check', 'color')
+      }"
+      class="text-24rpx"
+      >{{ statusFun(item.workflow_check.check_status, "workflow_check", "name") }}</view
+    >
+  </view>
+</template>
+<script setup>
+import statusFun from "@/utils/status"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const props = defineProps({
+  item: Object
+})
+const goPath = () => {
+  uni.navigateTo({
+    url: `/pages/business/detail?id=${props.item.id}`
+  })
+}
+</script>
diff --git a/src/pages/business/create.vue b/src/pages/business/create.vue
new file mode 100644
index 0000000..7c7a51a
--- /dev/null
+++ b/src/pages/business/create.vue
@@ -0,0 +1,174 @@
+<template>
+  <view>
+    <CuNavbar title="出差申请">
+      <template #right>
+        <view class="text-24rpx text-white" @click="submit">提交</view>
+      </template>
+    </CuNavbar>
+    <view class="card-shadow px-base">
+      <uv-form labelPosition="left" :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="250rpx">
+        <uv-form-item required label="目的地" prop="address">
+          <uv-input placeholder="请选择" @click="openPicker" inputAlign="right" :border="`none`" v-model="form.address">
+          </uv-input>
+        </uv-form-item>
+        <uv-line color="#f5f5f5"></uv-line>
+        <uv-form-item required label="出差开始时间" prop="start_at">
+          <uv-input
+            placeholder="请选择日期"
+            readonly
+            @click="openStartDatePicker"
+            inputAlign="right"
+            :border="`none`"
+            v-model="form.start_at"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-form-item required label="出差结束时间" prop="end_at">
+          <uv-input
+            placeholder="请选择日期"
+            readonly
+            @click="openEndDatePicker"
+            inputAlign="right"
+            :border="`none`"
+            v-model="form.end_at"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-line color="#f5f5f5"></uv-line>
+        <uv-form-item required label="出差事由" prop="reason" labelPosition="top">
+          <uv-textarea v-model="form.reason" count placeholder="请输入" :border="`none`" :maxlength="200"></uv-textarea>
+        </uv-form-item>
+      </uv-form>
+    </view>
+    <uv-datetime-picker
+      placeholder="请选择日期"
+      v-model="startValue"
+      ref="dateStartPicker"
+      mode="datetime"
+      @confirm="confirmStartDatePicker"
+    >
+    </uv-datetime-picker>
+    <uv-datetime-picker
+      v-model="endValue"
+      placeholder="请选择日期"
+      ref="dateEndPicker"
+      mode="datetime"
+      @confirm="confirmEndDatePicker"
+    >
+    </uv-datetime-picker>
+    <uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { ref, reactive, computed } from "vue"
+import { onLoad } from "@dcloudio/uni-app"
+import { http } from "@/utils/request"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const columns = ref([])
+const pickerData = ref([])
+const formRef = ref(null)
+const dateStartPicker = ref(null)
+const dateEndPicker = ref(null)
+const modalRef = ref(null)
+const startValue = ref(Number(new Date()))
+const endValue = ref(Number(new Date()))
+const id = ref(0)
+const loading = ref(false)
+const form = reactive({
+  start_at: "",
+  end_at: "",
+  reason: "",
+  address: ""
+})
+const openStartDatePicker = () => {
+  dateStartPicker.value.open()
+}
+const openEndDatePicker = () => {
+  dateEndPicker.value.open()
+}
+const confirmStartDatePicker = e => {
+  form.start_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
+}
+const confirmEndDatePicker = e => {
+  form.end_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
+}
+const rules = reactive({
+  start_at: [{ required: true, message: "请选择时间" }],
+  end_at: [{ required: true, message: "请选择时间" }],
+  reason: [{ required: true, message: "请输入出差理由" }],
+  address: [{ required: true, message: "请输入目的地" }]
+})
+onLoad(options => {
+  http
+    .request({
+      url: `/keywords?parent_key=holiday_type`,
+      method: "GET",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    .then(res => {
+      let names = res.map(item => item.name)
+      columns.value = [names]
+      pickerData.value = res
+    })
+  id.value = options.id
+  if (id.value) {
+    http
+      .request({
+        url: `/hr/offical-bussiness/${options.id}`,
+        method: "GET",
+        header: {
+          Accept: "application/json"
+        }
+      })
+      .then(res => {
+        startValue.value = res.start_at * 1000
+        endValue.value = res.end_at * 1000
+        form.start_at = timeFormat(res.start_at, "yyyy-mm-dd hh:MM:ss")
+        form.end_at = timeFormat(res.end_at, "yyyy-mm-dd hh:MM:ss")
+        form.reason = res.reason
+        form.address = res.address
+      })
+  }
+})
+
+const submit = () => {
+  formRef.value.validate().then(res => {
+    modalRef.value.open()
+  })
+}
+
+const onSubmit = async () => {
+  if (loading.value) return
+  loading.value = true
+  try {
+    let url = id.value ? `/hr/offical-bussiness/${id.value}` : "/hr/offical-bussiness"
+    let method = id.value ? "PUT" : "POST"
+    await http.request({
+      url: url,
+      method: method,
+      header: {
+        Accept: "application/json"
+      },
+      data: {
+        start_at: form.start_at,
+        address: form.address,
+        reason: form.reason,
+        end_at: form.end_at
+      }
+    })
+    uni.showToast({
+      title: "提交成功",
+      icon: "none"
+    })
+    formRef.value.resetFields()
+    uni.navigateBack()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/pages/business/detail.vue b/src/pages/business/detail.vue
new file mode 100644
index 0000000..84769cd
--- /dev/null
+++ b/src/pages/business/detail.vue
@@ -0,0 +1,119 @@
+<template>
+  <view class="px-base" v-if="detail">
+    <CuNavbar title="出差详情">
+      <template v-if="!isEdit" #right>
+        <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
+      </template>
+    </CuNavbar>
+    <view class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx">
+      <view class="py-20rpx flex items-center justify-between">
+        <view>申请人</view>
+        <view class="text-hex-999999">{{ detail.employee.name }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>所属门店</view>
+        <view class="text-hex-999999">{{ detail.store.title }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>电话号码</view>
+        <view class="text-hex-999999">{{ detail.employee.phone }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>申请时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-mm-dd hh:MM") }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>目的地</view>
+        <view class="text-hex-999999">{{ detail.address }}</view>
+      </view>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>出差开始时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.start_at, "yyyy-mm-dd hh:MM") }}</view>
+      </view>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>出差结束时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.end_at, "yyyy-mm-dd hh:MM") }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx">
+        <view>出差原因</view>
+        <view class="text-hex-999999 mt-20rpx">{{ detail.reason }}</view>
+      </view>
+    </view>
+    <view class="h-100rpx">
+      <view class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx">
+        <view class="flex-1">
+          <uv-button color="#999999" shape="circle" plain block> 拒绝 </uv-button>
+        </view>
+        <view class="flex-1">
+          <uv-button type="primary" shape="circle" block> 通过 </uv-button>
+        </view>
+      </view>
+    </view>
+    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
+    <uv-modal ref="modalRef" title="提示" content="确定删除吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { http } from "@/utils/request"
+import { onLoad } from "@dcloudio/uni-app"
+import { ref } from "vue"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const modalRef = ref(null)
+const columns = [["修改", "删除"]]
+const detail = ref()
+const pickerRef = ref(null)
+const id = ref(0)
+const open = () => {
+  pickerRef.value.open()
+}
+const confirmPicker = e => {
+  console.log(e)
+  if (e.value[0] === "删除") {
+    modalRef.value.open()
+  } else {
+    uni.navigateTo({
+      url: `/pages/business/create?id=${id.value}`
+    })
+  }
+}
+const onSubmit = async () => {
+  try {
+    await http.request({
+      url: `/hr/offical-bussiness/${id.value}`,
+      method: "DELETE",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    uni.showToast({
+      title: "删除成功",
+      icon: "none"
+    })
+    uni.navigateBack()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+onLoad(options => {
+  id.value = options.id
+  http
+    .request({
+      url: `/hr/offical-bussiness/${options.id}`,
+      method: "GET",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    .then(res => {
+      detail.value = res
+    })
+})
+</script>
diff --git a/src/pages/business/list.vue b/src/pages/business/list.vue
new file mode 100644
index 0000000..137d77e
--- /dev/null
+++ b/src/pages/business/list.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <CuNavbar title="出差申请">
+      <template #right>
+        <view @click="goPath('/pages/business/create')" class="text-24rpx text-white">申请</view>
+      </template>
+    </CuNavbar>
+    <uv-sticky bgColor="#fff">
+      <uv-tabs
+        :activeStyle="{ color: '#ee2c37' }"
+        :scrollable="false"
+        lineColor="#ee2c37"
+        :list="tabList"
+        @change="tabChange"
+      ></uv-tabs>
+    </uv-sticky>
+    <MescrollItem ref="mescrollItem0" :top="88" :i="0" :index="tabIndex" :apiUrl="tabList[0].apiUrl">
+      <template v-slot="{ list }">
+        <view class="space-y-15rpx p-base">
+          <view v-for="(item, i) in list" :key="i">
+            <Item :item="item"></Item>
+          </view>
+        </view>
+      </template>
+    </MescrollItem>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { ref } from "vue"
+import { onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app"
+import useMescrollMore from "@/uni_modules/mescroll-uni/hooks/useMescrollMore.js"
+import MescrollItem from "@/components/mescroll-api/more.vue"
+import Item from "./components/item.vue"
+const tabList = ref([
+  {
+    name: "我的请假",
+    apiUrl: "/hr/offical-bussiness"
+  },
+  {
+    name: "请假审核"
+  }
+])
+const mescrollItem0 = ref(null)
+const mescrollItem1 = ref(null)
+
+const mescrollItems = [mescrollItem0, mescrollItem1]
+const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom)
+const goPath = url => {
+  uni.navigateTo({
+    url
+  })
+}
+const tabChange = ({ index }) => {
+  tabIndex.value = index
+  scrollToLastY()
+}
+</script>
diff --git a/src/pages/make-card/create.vue b/src/pages/make-card/create.vue
index 6158a6d..ae437ca 100644
--- a/src/pages/make-card/create.vue
+++ b/src/pages/make-card/create.vue
@@ -52,7 +52,13 @@
       </uv-form>
     </view>
     <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
-    <uv-datetime-picker placeholder="请选择日期" ref="datetimePicker" mode="datetime" @confirm="confirmDatePicker">
+    <uv-datetime-picker
+      v-model="value"
+      placeholder="请选择日期"
+      ref="datetimePicker"
+      mode="datetime"
+      @confirm="confirmDatePicker"
+    >
     </uv-datetime-picker>
     <uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
   </view>
@@ -108,7 +114,7 @@ onLoad(options => {
         }
       })
       .then(res => {
-        value.value = res.date
+        value.value = res.date * 1000
         form.date = timeFormat(res.date, "yyyy-mm-dd hh:MM")
         form.reason = res.reason
         form.isOutSide = res.sign_type == 1 ? false : true
diff --git a/src/pages/make-card/detail.vue b/src/pages/make-card/detail.vue
index e3fc00a..98c40a4 100644
--- a/src/pages/make-card/detail.vue
+++ b/src/pages/make-card/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="px-base" v-if="detail">
-    <CuNavbar title="补卡审核">
+    <CuNavbar title="加班审核">
       <template v-if="!isEdit" #right>
         <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
       </template>
@@ -101,7 +101,6 @@ const onSubmit = async () => {
       title: "删除成功",
       icon: "none"
     })
-    formRef.value.resetFields()
     uni.navigateBack()
   } catch (error) {
     console.log(error)
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index 7664590..4252e64 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -77,12 +77,12 @@ const opList = [
       {
         icon: "setting-fill",
         title: "出差报备",
-        url: ""
+        url: "/pages/business/list"
       },
       {
         icon: "server-man",
         title: "加班报备",
-        url: ""
+        url: "/pages/overtime/list"
       },
       {
         icon: "camera",
diff --git a/src/pages/overtime/components/item.vue b/src/pages/overtime/components/item.vue
new file mode 100644
index 0000000..4a90414
--- /dev/null
+++ b/src/pages/overtime/components/item.vue
@@ -0,0 +1,39 @@
+<template>
+  <view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx" @click="goPath">
+    <view class="text-30rpx">加班报备</view>
+    <view class="text-24rpx text-hex-999999 flex">
+      <view class="text-24rpx w-140rpx">加班日期：</view>
+      <view class="">{{ timeFormat(item.date, "yyyy-mm-dd") }}</view>
+    </view>
+    <view class="flex items-center text-hex-999999 flex">
+      <view class="text-24rpx w-140rpx"> 加班时间：</view>
+      <view class="text-24rpx"
+        >{{ timeFormat(item.start_at, "yyyy-mm-dd hh:MM").substring(10) }} -
+        {{ timeFormat(item.end_at, "yyyy-mm-dd hh:MM").substring(10) }}</view
+      >
+    </view>
+    <view class="text-24rpx text-hex-999999 flex">
+      <view class="text-24rpx w-140rpx">加班事由：</view>
+      <view class="">{{ item.reason }}</view>
+    </view>
+    <view
+      :style="{
+        color: statusFun(item.workflow_check.check_status, 'workflow_check', 'color')
+      }"
+      class="text-24rpx"
+      >{{ statusFun(item.workflow_check.check_status, "workflow_check", "name") }}</view
+    >
+  </view>
+</template>
+<script setup>
+import statusFun from "@/utils/status"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const props = defineProps({
+  item: Object
+})
+const goPath = () => {
+  uni.navigateTo({
+    url: `/pages/overtime/detail?id=${props.item.id}`
+  })
+}
+</script>
diff --git a/src/pages/overtime/create.vue b/src/pages/overtime/create.vue
new file mode 100644
index 0000000..2abf80f
--- /dev/null
+++ b/src/pages/overtime/create.vue
@@ -0,0 +1,186 @@
+<template>
+  <view>
+    <CuNavbar title="加班申请">
+      <template #right>
+        <view class="text-24rpx text-white" @click="submit">提交</view>
+      </template>
+    </CuNavbar>
+    <view class="card-shadow px-base">
+      <uv-form labelPosition="left" :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="250rpx">
+        <uv-form-item required label="日期" prop="date">
+          <uv-input
+            placeholder="请选择"
+            readonly
+            @click="openDate"
+            inputAlign="right"
+            :border="`none`"
+            v-model="form.date"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-line color="#f5f5f5"></uv-line>
+        <uv-form-item required label="加班开始时间" prop="start_at">
+          <uv-input
+            placeholder="请选择时间"
+            readonly
+            @click="openStartDatePicker"
+            inputAlign="right"
+            :border="`none`"
+            v-model="form.start_at"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-form-item required label="加班结束时间" prop="end_at">
+          <uv-input
+            placeholder="请选择时间"
+            readonly
+            @click="openEndDatePicker"
+            inputAlign="right"
+            :border="`none`"
+            v-model="form.end_at"
+          >
+          </uv-input>
+        </uv-form-item>
+        <uv-line color="#f5f5f5"></uv-line>
+        <uv-form-item required label="出差事由" prop="reason" labelPosition="top">
+          <uv-textarea v-model="form.reason" count placeholder="请输入" :border="`none`" :maxlength="200"></uv-textarea>
+        </uv-form-item>
+      </uv-form>
+    </view>
+    <uv-datetime-picker
+      placeholder="请选择日期"
+      v-model="dateValue"
+      ref="datePicker"
+      mode="date"
+      @confirm="confirmDatePicker"
+    >
+    </uv-datetime-picker>
+    <uv-datetime-picker
+      placeholder="请选择时间"
+      v-model="startValue"
+      ref="dateStartPicker"
+      mode="datetime"
+      @confirm="confirmStartDatePicker"
+    >
+    </uv-datetime-picker>
+    <uv-datetime-picker
+      v-model="endValue"
+      placeholder="请选择时间"
+      ref="dateEndPicker"
+      mode="datetime"
+      @confirm="confirmEndDatePicker"
+    >
+    </uv-datetime-picker>
+    <uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { ref, reactive, computed } from "vue"
+import { onLoad } from "@dcloudio/uni-app"
+import { http } from "@/utils/request"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const columns = ref([])
+const pickerData = ref([])
+const formRef = ref(null)
+const dateStartPicker = ref(null)
+const datePicker = ref(null)
+const dateEndPicker = ref(null)
+const modalRef = ref(null)
+const startValue = ref(Number(new Date()))
+const dateValue = ref(Number(new Date()))
+const endValue = ref(Number(new Date()))
+const id = ref(0)
+const loading = ref(false)
+const form = reactive({
+  start_at: "",
+  end_at: "",
+  reason: "",
+  date: ""
+})
+const openDate = () => {
+  datePicker.value.open()
+}
+const openStartDatePicker = () => {
+  dateStartPicker.value.open()
+}
+const openEndDatePicker = () => {
+  dateEndPicker.value.open()
+}
+const confirmDatePicker = e => {
+  form.date = timeFormat(e.value, "yyyy-mm-dd")
+}
+const confirmStartDatePicker = e => {
+  form.start_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
+}
+const confirmEndDatePicker = e => {
+  form.end_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
+}
+const rules = reactive({
+  start_at: [{ required: true, message: "请选择时间" }],
+  end_at: [{ required: true, message: "请选择时间" }],
+  reason: [{ required: true, message: "请输入加班理由" }],
+  date: [{ required: true, message: "请选择日期" }]
+})
+onLoad(options => {
+  id.value = options.id
+  if (id.value) {
+    http
+      .request({
+        url: `/hr/overtimes/${options.id}`,
+        method: "GET",
+        header: {
+          Accept: "application/json"
+        }
+      })
+      .then(res => {
+        startValue.value = res.start_at * 1000
+        endValue.value = res.end_at * 1000
+        dateValue.value = res.date * 1000
+        form.start_at = timeFormat(res.start_at, "yyyy-mm-dd hh:MM:ss")
+        form.end_at = timeFormat(res.end_at, "yyyy-mm-dd hh:MM:ss")
+        form.date = timeFormat(res.date, "yyyy-mm-dd")
+        form.reason = res.reason
+        form.address = res.address
+      })
+  }
+})
+
+const submit = () => {
+  formRef.value.validate().then(res => {
+    modalRef.value.open()
+  })
+}
+
+const onSubmit = async () => {
+  if (loading.value) return
+  loading.value = true
+  try {
+    let url = id.value ? `/hr/overtimes/${id.value}` : "/hr/overtimes"
+    let method = id.value ? "PUT" : "POST"
+    await http.request({
+      url: url,
+      method: method,
+      header: {
+        Accept: "application/json"
+      },
+      data: {
+        start_at: form.start_at,
+        date: form.date,
+        reason: form.reason,
+        end_at: form.end_at
+      }
+    })
+    uni.showToast({
+      title: "提交成功",
+      icon: "none"
+    })
+    formRef.value.resetFields()
+    uni.navigateBack()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/pages/overtime/detail.vue b/src/pages/overtime/detail.vue
new file mode 100644
index 0000000..55f5405
--- /dev/null
+++ b/src/pages/overtime/detail.vue
@@ -0,0 +1,119 @@
+<template>
+  <view class="px-base" v-if="detail">
+    <CuNavbar title="加班审核">
+      <template v-if="!isEdit" #right>
+        <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
+      </template>
+    </CuNavbar>
+    <view class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx">
+      <view class="py-20rpx flex items-center justify-between">
+        <view>申请人</view>
+        <view class="text-hex-999999">{{ detail.employee.name }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>所属门店</view>
+        <view class="text-hex-999999">{{ detail.store.title }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>电话号码</view>
+        <view class="text-hex-999999">{{ detail.employee.phone }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>申请时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-mm-dd hh:MM") }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>加班日期</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.date, "yyyy-mm-dd") }}</view>
+      </view>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>开始时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.start_at, "yyyy-mm-dd hh:MM").substring(10) }}</view>
+      </view>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>结束时间</view>
+        <view class="text-hex-999999">{{ timeFormat(detail.end_at, "yyyy-mm-dd hh:MM").substring(10) }}</view>
+      </view>
+      <uv-line></uv-line>
+      <view class="py-20rpx">
+        <view>加班原因</view>
+        <view class="text-hex-999999 mt-20rpx">{{ detail.reason }}</view>
+      </view>
+    </view>
+    <view class="h-100rpx">
+      <view class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx">
+        <view class="flex-1">
+          <uv-button color="#999999" shape="circle" plain block> 拒绝 </uv-button>
+        </view>
+        <view class="flex-1">
+          <uv-button type="primary" shape="circle" block> 通过 </uv-button>
+        </view>
+      </view>
+    </view>
+    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
+    <uv-modal ref="modalRef" title="提示" content="确定删除吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { http } from "@/utils/request"
+import { onLoad } from "@dcloudio/uni-app"
+import { ref } from "vue"
+import { timeFormat } from "@climblee/uv-ui/libs/function/index"
+const modalRef = ref(null)
+const columns = [["修改", "删除"]]
+const detail = ref()
+const pickerRef = ref(null)
+const id = ref(0)
+const open = () => {
+  pickerRef.value.open()
+}
+const confirmPicker = e => {
+  console.log(e)
+  if (e.value[0] === "删除") {
+    modalRef.value.open()
+  } else {
+    uni.navigateTo({
+      url: `/pages/overtime/create?id=${id.value}`
+    })
+  }
+}
+const onSubmit = async () => {
+  try {
+    await http.request({
+      url: `/hr/overtimes/${id.value}`,
+      method: "DELETE",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    uni.showToast({
+      title: "删除成功",
+      icon: "none"
+    })
+    uni.navigateBack()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+onLoad(options => {
+  id.value = options.id
+  http
+    .request({
+      url: `/hr/overtimes/${options.id}`,
+      method: "GET",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    .then(res => {
+      detail.value = res
+    })
+})
+</script>
diff --git a/src/pages/overtime/list.vue b/src/pages/overtime/list.vue
new file mode 100644
index 0000000..b6efb44
--- /dev/null
+++ b/src/pages/overtime/list.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <CuNavbar title="加班申请">
+      <template #right>
+        <view @click="goPath('/pages/overtime/create')" class="text-24rpx text-white">申请</view>
+      </template>
+    </CuNavbar>
+    <uv-sticky bgColor="#fff">
+      <uv-tabs
+        :activeStyle="{ color: '#ee2c37' }"
+        :scrollable="false"
+        lineColor="#ee2c37"
+        :list="tabList"
+        @change="tabChange"
+      ></uv-tabs>
+    </uv-sticky>
+    <MescrollItem ref="mescrollItem0" :top="88" :i="0" :index="tabIndex" :apiUrl="tabList[0].apiUrl">
+      <template v-slot="{ list }">
+        <view class="space-y-15rpx p-base">
+          <view v-for="(item, i) in list" :key="i">
+            <Item :item="item"></Item>
+          </view>
+        </view>
+      </template>
+    </MescrollItem>
+  </view>
+</template>
+<script setup>
+import CuNavbar from "@/components/cu-navbar/index"
+import { ref } from "vue"
+import { onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app"
+import useMescrollMore from "@/uni_modules/mescroll-uni/hooks/useMescrollMore.js"
+import MescrollItem from "@/components/mescroll-api/more.vue"
+import Item from "./components/item.vue"
+const tabList = ref([
+  {
+    name: "我的加班",
+    apiUrl: "/hr/overtimes"
+  },
+  {
+    name: "加班审核"
+  }
+])
+const mescrollItem0 = ref(null)
+const mescrollItem1 = ref(null)
+
+const mescrollItems = [mescrollItem0, mescrollItem1]
+const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom)
+const goPath = url => {
+  uni.navigateTo({
+    url
+  })
+}
+const tabChange = ({ index }) => {
+  tabIndex.value = index
+  scrollToLastY()
+}
+</script>