diff --git a/src/pages/order/group-detail.vue b/src/pages/order/group-detail.vue
new file mode 100644
index 0000000..07af807
--- /dev/null
+++ b/src/pages/order/group-detail.vue
@@ -0,0 +1,201 @@
+<route lang="jsonc" type="page">
+{
+    "needLogin": true,
+    "layout": "default",
+    "style": {
+		"navigationStyle": "custom"
+    }
+}
+</route>
+
+<template>
+    <view class="pb-254rpx">
+        <!-- 取消订单 -->
+        <wd-message-box selector="wd-message-box-slot"></wd-message-box>
+
+        <view>
+            <navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
+        </view>
+
+        <!-- 适用门店 -->
+        <view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
+            <view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
+            <view class="mt-26rpx flex items-center">
+                <view class="mr-24rpx">
+                    <wd-img width="170rpx" height="170rpx" :src="order.teaStoreGroup.img"></wd-img>
+                </view>
+                <view class="flex-1 flex justify-between items-center relative">
+                    <view class="">
+                        <view class="text-[#303133] text-30rpx leading-40rpx line-2">{{ order.store_msg.name }}</view>
+                        <view class="flex items-center mt-14rpx">
+                            <view class="mr-8rpx">
+                                <wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
+                            </view>
+                            <view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ order.store_msg.address }}</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 订单信息 -->
+        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
+            <view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
+            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
+                <view>订单编号</view>
+                <view>
+                    <text>{{ order.order_sn }}</text>
+                    <wd-divider vertical />
+                    <text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
+                </view>
+            </view>
+            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
+                <view>交易方式</view>
+                <view>{{ order.pay_way_title }}</view>
+            </view>
+            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
+                <view>创建时间</view>
+                <view>{{ order.dtime }}</view>
+            </view>
+            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="order.update_dtime">
+                <view>付款时间</view>
+                <view>{{ order.update_dtime }}</view>
+            </view>  
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import { GroupComboOrderStatus, GroupComboOrderStatusTextValue } from '@/utils/order'
+    import { useMessage } from 'wot-design-uni'
+    import { copy } from '@/utils/tools'
+    import { getGroupComboOrderDetail } from '@/api/order'
+    import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks } from '@/hooks/useOrder'
+
+    const title = ref<string>('')
+    const OSS = inject('OSS')
+
+    // 取消订单弹窗
+    const message = useMessage('wd-message-box-slot')
+
+    // 订单
+    const orderId = ref<number>(0)
+    const order = ref({
+        order_status: 0,
+        order_sn: '',
+        store_name: '',
+        store_msg: {
+            name: '',
+            address: '',
+        },
+        teaStoreGroup: {
+            img: '',
+            title: '',
+        },
+        pay_way_title: '',
+        dtime: '',
+        update_dtime: '',
+    })
+
+    onLoad(async (args) => {
+        orderId.value = args.id
+        // 获取订单详情
+        OrderDetail.handleInit()
+    })
+
+    onUnload(() => {
+        uni.$off('refreshOrderDetail')
+    })
+
+    const OrderDetail = {
+        /**
+         * 获取订单详情
+         */
+        handleInit: async () => {
+            const res = await getGroupComboOrderDetail(orderId.value)
+            order.value = res.details
+            title.value = GroupComboOrderStatusTextValue[res.details.order_status].title || '订单详情'
+        },
+
+        /**
+         * 取消订单
+         */
+        handleCancelOrder: () => {
+            message.confirm({
+                title: '确定取消订单？',
+                msg: '取消订单后无法恢复，是否确定取消订单？',
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                cancelButtonProps: {
+                    customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
+                },
+                confirmButtonProps: {
+                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
+                }
+            }).then((res) => {
+                if (res.action == 'confirm') {
+                    uni.$on('refreshOrderList', () => {
+                        uni.$off('refreshOrderList')
+                        OrderDetail.handleInit()
+                    })
+                    handleCancelOrderHooks(orderId.value)
+                }
+            }).catch(() => {
+                // 点击取消按钮回调事件
+            })
+        },
+
+         /**
+         * 释放时间
+         */
+        handleReleaseOrder: () => {
+            message.confirm({
+                title: '释放时间',
+                msg: '释放预约时间后，包间可重新被预定',
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                cancelButtonProps: {
+                    customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
+                },
+                confirmButtonProps: {
+                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
+                }
+            }).then((res) => {
+                if (res.action == 'confirm') {
+                    uni.$on('refreshOrderList', () => {
+                        uni.$off('refreshOrderList')
+                        OrderDetail.handleInit()
+                    })
+                    handleReleaseTeaRoomOrderHookds(orderId.value)
+                }
+            }).catch(() => { })
+        },
+    }
+</script>
+
+
+<style lang="scss">
+    page {
+	    background-color: $cz-page-background;
+    }
+
+    .coupon-bg {
+        background-image: url(#{$OSS}images/order/order_image2.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .collapse {
+        :deep() {
+            .wd-collapse-item::after,
+            .wd-collapse-item__header.is-expanded::after {
+                background: none !important;
+            }
+
+            .wd-collapse-item__body  {
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+            }
+        }
+    }
+</style>