diff --git a/src/pages.json b/src/pages.json
index c34947e..4d23f86 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -273,6 +273,29 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/contract",
+      "pages": [
+        {
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "加班报备"
+          }
+        },
+        {
+          "path": "create",
+          "style": {
+            "navigationBarTitleText": "加班报备"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "加班详情"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {
diff --git a/src/pages/contract/components/item.vue b/src/pages/contract/components/item.vue
new file mode 100644
index 0000000..fcb3687
--- /dev/null
+++ b/src/pages/contract/components/item.vue
@@ -0,0 +1,32 @@
+<template>
+  <view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx" @click.stop="onClick">
+    <view class="flex items-center justify-between">
+      <view class="text-30rpx">{{ item.name }}</view>
+    </view>
+    <uv-scroll-list>
+      <view v-for="(item, index) in item.images" :key="index">
+        <image :src="item" mode="heightFix" class="mr-20rpx" style="height: 200rpx"></image>
+      </view>
+    </uv-scroll-list>
+    <view
+      :style="{
+        color: statusFun(item.workflow_check.status, 'workflow_check', 'color')
+      }"
+      class="text-24rpx"
+      >{{ statusFun(item.workflow_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 onClick = () => {
+  uni.navigateTo({
+    url: `/pages/contract/detail?id=${props.item.id}`
+  })
+}
+</script>
diff --git a/src/pages/contract/create.vue b/src/pages/contract/create.vue
new file mode 100644
index 0000000..05705d5
--- /dev/null
+++ b/src/pages/contract/create.vue
@@ -0,0 +1,153 @@
+<template>
+  <view class="">
+    <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="150rpx">
+        <uv-form-item required label="合同名称" prop="name">
+          <uv-input placeholder="请输入合同名称" inputAlign="right" :border="`none`" v-model="form.name"> </uv-input>
+        </uv-form-item>
+        <uv-line color="#f5f5f5"></uv-line>
+        <uv-form-item label="合同照片" labelPosition="top" prop="images" required>
+          <view class="w-full mt-15rpx">
+            <uv-upload
+              :maxCount="9"
+              multiple
+              :fileList="form.images"
+              @afterRead="afterRead"
+              @delete="deletePic"
+              name="images"
+            ></uv-upload>
+          </view>
+        </uv-form-item>
+      </uv-form>
+    </view>
+    <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"
+const formRef = ref(null)
+const modalRef = ref(null)
+const id = ref(0)
+const loading = ref(false)
+const form = reactive({
+  name: "",
+  images: []
+})
+const rules = reactive({
+  name: [{ required: true, message: "请输入清洁范围" }],
+  images: {
+    type: "array",
+    required: true,
+    message: "请上传报销凭证"
+  }
+})
+onLoad(options => {
+  id.value = options.id
+  if (id.value) {
+    http
+      .request({
+        url: `/agreements/${options.id}`,
+        method: "GET",
+        header: {
+          Accept: "application/json"
+        }
+      })
+      .then(res => {
+        form.name = res.name
+        form.images = res.images
+      })
+  }
+})
+
+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 ? `/agreements/${id.value}` : "/agreements"
+    let method = id.value ? "PUT" : "POST"
+    await http.request({
+      url: url,
+      method: method,
+      header: {
+        Accept: "application/json"
+      },
+      data: {
+        name: form.name,
+        images: form.images.map(item => item.url)
+      }
+    })
+    uni.showToast({
+      title: "提交成功",
+      icon: "none"
+    })
+    formRef.value.resetFields()
+    uni.$emit("task:submit", resData)
+    uni.navigateBack()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const afterRead = async event => {
+  let lists = [].concat(event.file)
+  let fileListLen = form[event.name].length
+
+  lists.map(item => {
+    form[event.name].push({
+      ...item,
+      status: "uploading",
+      message: "上传中"
+    })
+  })
+  for (let i = 0; i < lists.length; i++) {
+    const result = await uploadFilePromise(lists[i].url)
+    let item = form[event.name][fileListLen]
+    form[event.name].splice(
+      fileListLen,
+      1,
+      Object.assign(item, {
+        status: "success",
+        message: "",
+        url: result
+      })
+    )
+    fileListLen++
+  }
+}
+
+const uploadFilePromise = url => {
+  return new Promise((resolve, reject) => {
+    http
+      .upload("/fileupload", {
+        filePath: url,
+        name: "file"
+      })
+      .then(res => {
+        resolve(res.url)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+const deletePic = event => {
+  form[event.name].splice(event.index, 1)
+}
+</script>
diff --git a/src/pages/contract/detail.vue b/src/pages/contract/detail.vue
new file mode 100644
index 0000000..e8cff63
--- /dev/null
+++ b/src/pages/contract/detail.vue
@@ -0,0 +1,114 @@
+<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.name }}</view>
+      </view>
+      <view class="py-20rpx flex items-center justify-between">
+        <view>合同内容</view>
+      </view>
+      <uv-scroll-list>
+        <view v-for="(item, index) in detail.images" :key="index">
+          <image :src="item" mode="heightFix" class="mr-20rpx" style="height: 200rpx"></image>
+        </view>
+      </uv-scroll-list>
+    </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/contract/create?id=${id.value}`
+    })
+  }
+}
+const onSubmit = async () => {
+  try {
+    await http.request({
+      url: `/agreements/${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: `/agreements/${options.id}`,
+      method: "GET",
+      header: {
+        Accept: "application/json"
+      }
+    })
+    .then(res => {
+      detail.value = res
+    })
+})
+</script>
diff --git a/src/pages/contract/list.vue b/src/pages/contract/list.vue
new file mode 100644
index 0000000..ec2a80a
--- /dev/null
+++ b/src/pages/contract/list.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <CuNavbar title="我的合同">
+      <template #right>
+        <view @click="goPath('/pages/contract/create')" class="text-24rpx text-white">上传</view>
+      </template>
+    </CuNavbar>
+    <uv-sticky bgColor="#fff">
+      <uv-tabs
+        height="44"
+        :activeStyle="{ color: '#ee2c37' }"
+        :scrollable="false"
+        :current="tabIndex"
+        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 { computed, reactive, ref } from "vue"
+import Item from "./components/item.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"
+
+const mescrollItem0 = ref(null)
+const mescrollItem1 = ref(null)
+
+const mescrollItems = [mescrollItem0, mescrollItem1]
+const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(mescrollItems, onPageScroll, onReachBottom)
+const tabList = ref([
+  {
+    name: "我的合同",
+    apiUrl: "/agreements"
+  },
+  {
+    name: "合同审核",
+    apiUrl: "",
+    params: {
+      // aaa:111
+    }
+  }
+])
+const goPath = url => {
+  uni.navigateTo({
+    url
+  })
+}
+const tabChange = ({ index }) => {
+  tabIndex.value = index
+  scrollToLastY()
+}
+</script>
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index 4252e64..ad259db 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -87,7 +87,7 @@ const opList = [
       {
         icon: "camera",
         title: "合同管理",
-        url: ""
+        url: "/pages/contract/list"
       }
     ]
   },