diff --git a/src/App.vue b/src/App.vue
index d9ad0b8..aa74039 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,8 +16,10 @@ onHide(() => {
 @import "@/sheep/scss/global.scss";
 @import url(@/uni_modules/tm-ui/css/remixicon.min.css);
 
+
 $theme-green: #06be36;
 $theme-blue: #0094ff;
+$theme-gray: #999;
 
 .botder_btn {
   border: 1px solid #999;
diff --git a/src/pages.json b/src/pages.json
index 75b5cfc..10ad755 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -110,6 +110,13 @@
 						"navigationBarTitleText": "",
 						"disableScroll": true
 					}
+				},
+				{
+					"path": "apply-list",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
 				}
 			]
 		},
diff --git a/src/pages/boxes/apply-list.vue b/src/pages/boxes/apply-list.vue
new file mode 100644
index 0000000..be1056c
--- /dev/null
+++ b/src/pages/boxes/apply-list.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
+
+const data = {
+    tabs: [
+        { id: null, name: '全部', disabled: false },
+        { id: "0", name: '预约成功', disabled: false },
+        { id: "1", name: '预约失败', disabled: false },
+        { id: "2", name: '取消预约', disabled: false },
+    ],
+}
+const state = reactive<any>({
+    pa: {
+        status: data.tabs[0].id,
+    },
+})
+
+onLoad(() => {
+
+});
+onShow(() => {
+    if (pageRef.value) {
+        pageRef.value.reload(false)
+    }
+})
+
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, boxesApi.MyBookingPage, null, 'data.list')
+const query = (page: number, pagesize: number) => {
+    pageHook.startPage(page, pagesize, false, state.pa);
+}
+
+const doTab = (e: any) => {
+    const target = data.tabs[e];
+    state.pa.status = target.id
+    pageRef.value.reload(true)
+}
+
+const doCard = (v: any) => {
+    router.jump('/pages/boxes/detail', { id: v.id })
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="订单详情" bg="/static/page/blue-bg.png">
+        <z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="5"
+            safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
+            :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
+            <template #top>
+                <view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
+                    <z-tabs :list="data.tabs" @change="doTab" />
+                </view>
+            </template>
+            <view class="h-20rpx" />
+            <view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="doCard(v)">
+
+            </view>
+        </z-paging>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/boxes/apply.vue b/src/pages/boxes/apply.vue
index 8ff1f90..bddeac2 100644
--- a/src/pages/boxes/apply.vue
+++ b/src/pages/boxes/apply.vue
@@ -4,7 +4,7 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
 import { isEmpty, max, min } from "radash"
 import dayjs from "dayjs"
 
-import { hooks } from "@@/index"
+import { hooks, router } from "@@/index"
 import { boxesApi } from "@@/api"
 
 const data = {
@@ -104,8 +104,30 @@ const doTimeItem = (v: any) => {
     state.selectRechargeIdList = state.selectRechargeList.map(v => v.id)
 }
 
+const applyFormRef = ref<any>(null)
 const doSubmit = async () => {
-
+    applyFormRef.value.submit()
+    const { isPass } = applyFormRef.value.validate()
+    if (!isPass) return
+    try {
+        const { hour: hourMax } = max(state.selectRechargeList, (i: any) => i.timestamp)
+        const { hour: hourMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+        const _pa = {
+            boxesId: state.detailId,
+            startTime: hourMin,
+            endTime: hourMax,
+            bxDate: applyForm.bxDate,
+        }
+        const { data, code }: any = await boxesApi.apply(_pa)
+        if (code != 0) throw new Error()
+        uni.showLoading({ title: '预定中...', mask: false })
+        uni.hideLoading()
+        uni.showToast({ title: '申请成功', icon: "none" })
+        router.jump("/pages/boxes/apply-list")
+    } catch (error) {
+        console.error(error);
+        uni.hideLoading()
+    }
 }
 
 </script>
@@ -134,7 +156,8 @@ const doSubmit = async () => {
         </view>
         <view class="prefix_title m-t-35rpx">时间段</view>
         <view class="recharge p-30rpx bg-white rounded-20rpx m-t-20rpx shadow-main">
-            <view :class="[state.selectRechargeIdList.includes(v.id) ? 'recharge_item_active' : '']"
+            <view
+                :class="[state.selectRechargeIdList.includes(v.id) ? 'recharge_item_active' : '', v.status == 1 ? 'recharge_item_disabled' : '']"
                 class="recharge_item" v-for="(v, i) in state.rechargeList" :key="i" @tap="doTimeItem(v)">
                 <text class="sub-text-24 text-center">{{ v.bxDate }}</text>
                 <text class="sub-text-24 text-center">{{ v.hour }}</text>
@@ -166,6 +189,15 @@ const doSubmit = async () => {
     }
 }
 
+.recharge_item_disabled {
+    background: #999;
+    border: 1px solid #999 !important;
+
+    &>text {
+        color: white !important;
+    }
+}
+
 .recharge {
     display: grid;
     grid-template-columns: repeat(3, 1fr);