diff --git a/src/pages/boxes/apply-list.vue b/src/pages/boxes/apply-list.vue
index be1056c..52eb4e2 100644
--- a/src/pages/boxes/apply-list.vue
+++ b/src/pages/boxes/apply-list.vue
@@ -46,11 +46,34 @@ const doCard = (v: any) => {
     router.jump('/pages/boxes/detail', { id: v.id })
 }
 
+const doCancelApply = async (v: any) => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定取消预约',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            try {
+                uni.showLoading({ title: '取消预约中...', mask: true });
+                const _pa = { id: v.id }
+                const { data, code }: any = await boxesApi.cancel(_pa)
+                if (code != 0) throw new Error()
+                pageRef.value.reload(true)
+                uni.hideLoading()
+                uni.showToast({ title: '取消预约成功', icon: "none" });
+            } catch (error) {
+                console.error(error);
+                uni.hideLoading()
+            }
+        }
+    })
+}
+
 </script>
 
 
 <template>
-    <crud-layout title="订单详情" bg="/static/page/blue-bg.png">
+    <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">
@@ -60,8 +83,34 @@ const doCard = (v: any) => {
                 </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 class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="doCard(v)">
+                <view>
+                    <view class="flex-row items-center justify-between">
+                        <view class="main-text-28">{{ v.boxesName }}</view>
+                        <view>
+                            <tm-tag v-if="v.status == 0" color="success" size="xs">预约成功</tm-tag>
+                            <tm-tag v-if="v.status == 1" color="error" size="xs">预约失败</tm-tag>
+                            <tm-tag v-if="v.status == 2" color="info" size="xs">取消预约</tm-tag>
+                        </view>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>预约时间</text>
+                        <text class="m-l-5rpx">
+                            {{ v.bookingDate }} {{ hooks.useTime(v.startTime, "{h}:{i}") }} ~ {{
+                                hooks.useTime(v.endTime, "{h}:{i}")
+                            }}
+                        </text>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>提交时间</text>
+                        <text class="m-l-5rpx">
+                            {{ hooks.useTime(v.createTime, "") }}
+                        </text>
+                    </view>
+                </view>
+                <view class="flex-row items-center justify-end p-t-10rpx">
+                    <view class="botder_btn" @tap.stop="doCancelApply(v)">取消预约</view>
+                </view>
             </view>
         </z-paging>
     </crud-layout>
diff --git a/src/pages/merchant/components/product-row.vue b/src/pages/merchant/components/product-row.vue
index 23630a5..32eaef0 100644
--- a/src/pages/merchant/components/product-row.vue
+++ b/src/pages/merchant/components/product-row.vue
@@ -65,7 +65,8 @@ const remove = () => {
 
 
 <template>
-    <view class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
+    <view :class="[props.mode == 'car' ? 'car_border' : '']"
+        class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
         @tap="props.productId && router.jump('/pages/merchant/product-detail', { id: props.productId })">
         <image v-if="props.mode == 'default'" class=" size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
         <image v-if="props.mode == 'car'" class=" size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
@@ -101,4 +102,8 @@ const remove = () => {
     </view>
 </template>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.car_border {
+    border: 1px solid #f2f2f2;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index d5bbf3d..41e5422 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -148,7 +148,7 @@ const doVisibleCar = async () => {
     state.showCarDialog = true
 }
 
-const doPay = async () => {
+const submitPay = async () => {
     try {
         if (isEmpty(state.carList)) {
             uni.showToast({ title: '请至少购买一件商品', icon: "none" })
@@ -170,6 +170,18 @@ const doPay = async () => {
     }
 }
 
+const doPay = async () => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定购买',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            submitPay()
+        }
+    })
+}
+
 const getHeight = () => {
     const rpx = 480
     return `calc(100vh - ${uni.upx2px(rpx)}px)`
diff --git a/src/pages/tabbar/my.vue b/src/pages/tabbar/my.vue
index d7b1b6a..2206265 100644
--- a/src/pages/tabbar/my.vue
+++ b/src/pages/tabbar/my.vue
@@ -9,6 +9,7 @@ import { merchantApi, userApi, walletApi } from "@@/api"
 const data = {
     serviceList: [
         { text: '钱包管理', icon: '/static/icon/service_3.png', router: '/pages/wallet/list' },
+        { text: '包厢预定', icon: '/static/icon/service_4.png', router: '/pages/boxes/apply-list' },
         // { text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
         { text: '外来人员就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/foreign-list' },
         { text: '跨单位就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/stride-list' },
diff --git a/src/pages/tabbar/order.vue b/src/pages/tabbar/order.vue
index aa25474..bdd91f1 100644
--- a/src/pages/tabbar/order.vue
+++ b/src/pages/tabbar/order.vue
@@ -70,7 +70,7 @@ const doRefund = (v: any) => {
                 uni.hideLoading()
             }
         }
-    });
+    })
 }
 
 </script>
diff --git a/src/static/icon/service_4.png b/src/static/icon/service_4.png
new file mode 100644
index 0000000..6c56e39
Binary files /dev/null and b/src/static/icon/service_4.png differ