From d05eeebdb189e6299fcc5dd890a794bc75be44ef Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Mon, 1 Sep 2025 17:28:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B7=BB=E5=8A=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=8A=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  14 ++
 .../group-buying/platform/order-detail.vue    |  47 +++++
 .../group-buying/platform/order-list.vue      | 165 ++++++++++++++++++
 src/bundle/reserve-room/room.vue              |   6 +-
 src/components/PriceFormat.vue                | 121 +++++++------
 src/components/RechargeBtn.vue                |   5 +
 src/components/coupon/GroupCoupon.vue         |   5 +
 src/components/coupon/coupon.vue              |  57 +++---
 src/components/navbar.vue                     |   7 +-
 src/components/notice/Bill.vue                |   7 +-
 src/components/notice/Pay.vue                 |   5 +
 src/components/notice/Reserve.vue             |   5 +
 src/components/order/Combo.vue                |  88 ++++++++++
 src/components/order/ComboCard.vue            |  87 +++++++++
 src/components/reserve/RoomList.vue           |   5 +
 src/pages.json                                |  16 ++
 src/pages/my/my.vue                           | 129 +++++++++++++-
 src/utils/order.ts                            |  21 +++
 18 files changed, 695 insertions(+), 95 deletions(-)
 create mode 100644 src/bundle/group-buying/platform/order-detail.vue
 create mode 100644 src/bundle/group-buying/platform/order-list.vue
 create mode 100644 src/components/order/Combo.vue
 create mode 100644 src/components/order/ComboCard.vue
 create mode 100644 src/utils/order.ts

diff --git a/src/App.vue b/src/App.vue
index 7215a68..bef4050 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,4 +40,18 @@
 	.absolute-center {position: absolute !important;left: 50%;top: 50%;transform: translate(-50%, -50%);}
 	.line-1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
 	.line-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
+
+	/* 自定义wot-ui的tab样式 */
+	.tabs {
+        :deep() {
+            .wd-tabs__line {
+                bottom: 0 !important;
+                width: 60rpx !important;
+                height: 16rpx !important;
+                background-color: transparent !important;
+                background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
+                background-size: cover !important;
+            }
+        }
+    }
 </style>
diff --git a/src/bundle/group-buying/platform/order-detail.vue b/src/bundle/group-buying/platform/order-detail.vue
new file mode 100644
index 0000000..6b9ccaf
--- /dev/null
+++ b/src/bundle/group-buying/platform/order-detail.vue
@@ -0,0 +1,47 @@
+<route lang="jsonc" type="page">
+{
+    "layout": "default",
+    "style": {
+		"navigationStyle": "custom"
+    }
+}
+</route>
+
+<template>
+    <view class="">
+        <view>
+            <navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
+        </view>
+
+        <view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
+            <text class="" v-if="orderType === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
+            <text class="" v-if="orderType === OrderStatus.Finished">感谢购买，期待再次光临！</text>
+            <text class="" v-if="orderType === OrderStatus.AfterSaleApply">请耐心等待，我们会尽快处理您的请求</text>
+        </view>
+        <view class="mx-30rpx">
+            <combo :type="'GroupBuying'" :order-type="orderType"></combo>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import Combo from '@/components/order/Combo.vue'
+    import { OrderStatus, OrderStatusText } from '@/utils/order'
+
+    const title = ref<string>('')
+    const type = ref<string>('') // 订单类型：团购、抖音等
+    const orderType = ref<string>('') // 订单状态：待使用、退款等
+
+    onLoad((args) => {
+        title.value = OrderStatusText[args.orderType]
+        type.value = args.type
+        orderType.value = args.orderType
+    })
+</script>
+
+
+<style lang="scss" scoped>
+    page {
+	    background-color: $cz-page-background;
+    }
+</style>
diff --git a/src/bundle/group-buying/platform/order-list.vue b/src/bundle/group-buying/platform/order-list.vue
new file mode 100644
index 0000000..227002e
--- /dev/null
+++ b/src/bundle/group-buying/platform/order-list.vue
@@ -0,0 +1,165 @@
+<route lang="jsonc" type="page">{
+    "layout": "default",
+    "style": {
+		"navigationStyle": "custom"
+    }
+}</route>
+
+<template>
+    <view class="">
+        <view class="order-list">
+            <navbar layoutLeft>
+                <template #left>
+                    <view class="flex items-center ml-24rpx">
+                        <view @click.stop="orderList.handleChangeMenu(item.type)" class="mr-28rpx" :class="item.type == currentType ? 'text-36rpx text-[#303133] leading-50rpx' : 'text-32rpx text-[#606266] leading-44rpx font-400'" v-for="(item, index) in menuList" :key="index"> 
+                            {{ item.title }}
+                        </view>
+                    </view>
+                </template>
+            </navbar>
+            <view class="bg-white pb-20rpx">
+                <wd-search v-model="keywords" placeholder="搜索订单信息" hide-cancel placeholder-left custom-class="!h-72rpx"/>
+            </view>
+        </view>
+
+        <view class="tabs">
+            <wd-tabs v-model="tab" swipeable slidable="always" @change="orderList.handleChangeTab" :lazy="false">
+                <wd-tab title="全部">
+                    <view class="content mx-30rpx mt-34rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
+                            <view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
+                                <combo-card></combo-card>
+                            </view>
+                        </mescroll-body>
+                    </view>
+                </wd-tab>
+                <wd-tab title="待使用">
+                    <view class="content mx-30rpx mt-34rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
+                        </mescroll-body>
+                    </view>
+                </wd-tab>
+                <wd-tab title="已使用">
+                    <view class="content mx-30rpx mt-34rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
+                        </mescroll-body>
+                    </view>
+                </wd-tab>
+            </wd-tabs>
+        </view>
+    </view>
+</template>
+
+
+<script lang="ts" setup>
+    import ComboCard from '@/components/order/ComboCard.vue'
+	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
+
+    /* mescroll */
+	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+
+    // 菜单
+    const currentType = ref<number>(1)
+    const menuList = reactive<{}> ([
+        {
+            type: 1,
+            title: '直营店',
+        },
+        {
+            type: 2,
+            title: '加盟店',
+        }
+    ])
+
+    // 搜索
+    const keywords = ref<string>('')
+
+    // tab
+    const tab = ref<number>(0)
+
+
+    const orderList = {
+        // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
+		upCallback: (mescroll) => {
+			// 需要留一下数据为空的时候显示的空数据图标内容
+            // list({
+            //     page: mescroll.num,
+            //     size: mescroll.size
+            // }).then((res: { list: Array<any>, totalPages: Number }) => {
+            //     const curPageData = res.list || [] // 当前页数据
+            //     if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
+			// 	goods.value = goods.value.concat(curPageData); //追加新数据
+
+            //     console.log("🚀 ~ goods:", goods)
+
+            //     mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
+                
+            // }).catch(() => {
+            //     mescroll.endErr(); // 请求失败, 结束加载
+            // })
+			// apiGoods(mescroll.num, mescroll.size).then(res=>{
+			// 	const curPageData = res.list || [] // 当前页数据
+			// 	if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
+			// 	goods.value = goods.value.concat(curPageData); //追加新数据
+			// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+			// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
+
+			// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+			// 	//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
+
+			// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+			// 	//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
+
+			// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
+			// 	//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
+
+			// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
+			// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
+			// }).catch(()=>{
+			mescroll.endErr(); // 请求失败, 结束加载
+			// })
+		},
+
+        // 切换菜单
+        handleChangeMenu: (type: number) => {
+            currentType.value = type
+            console.log("🚀 ~ currentType.value:", currentType.value)
+        },
+
+        // 切换tab
+        handleChangeTab: (e: any) => {
+            tab.value = e.index
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+	    background-color: $cz-page-background;
+    }
+
+    .tabs {
+        :deep() {
+            .wd-tabs,
+            .wd-tabs__nav  {
+                background-color: transparent !important;
+            }
+
+            .wd-tabs__nav-item {
+                font-weight: 400 !important;
+                font-size: 28rpx !important;
+                color: #606266 !important;
+                line-height: 40rpx !important;
+                padding: 0 30rpx !important;
+            }
+
+            .wd-tabs__nav-item.is-active {
+                font-weight: 500 !important;
+                color: #303133 !important;
+                font-size: 32rpx !important;
+                line-height: 44rpx !important;
+            }
+        }
+    }
+</style>
diff --git a/src/bundle/reserve-room/room.vue b/src/bundle/reserve-room/room.vue
index e8a07c8..558ec18 100644
--- a/src/bundle/reserve-room/room.vue
+++ b/src/bundle/reserve-room/room.vue
@@ -77,7 +77,7 @@
             <wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
         </view>
         <view class="tabs">
-            <wd-tabs v-model="tab" swipeable slidable="always" @change="room.tabIndex" :lazy="false">
+            <wd-tabs v-model="tab" swipeable slidable="always" @change="room.handleChangeTab" :lazy="false">
                 <wd-tab title="茶室预定" v-if="storeType != 2">
                     <view class="content mx-30rpx mt-34rpx">
                         <mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
@@ -125,7 +125,9 @@
     ])
 	const current = ref<number>(0)
     const rate = ref<number>(4)
+    // tab
     const tab = ref<number>(0)
+
     const goods = ref<Array<any>[]>([])
     const showAction = ref<boolean>(false)
     const sheetMenu = ref([])
@@ -258,7 +260,7 @@
         },
 
         // tab切换获取index
-        tabIndex: (item: { index: number }) => {
+        handleChangeTab: (item: { index: number }) => {
             // tabIndexs.value = item.index
             // scrollToLastY()
         },
diff --git a/src/components/PriceFormat.vue b/src/components/PriceFormat.vue
index a08cdb3..05ee2dd 100644
--- a/src/components/PriceFormat.vue
+++ b/src/components/PriceFormat.vue
@@ -7,72 +7,77 @@
 </template>
 
 <script lang="ts" setup name="PriceFormat">
-import { ref, onMounted, watch } from 'vue'
+	/**
+	 * PriceFormat 金额格式化
+	 * @description 列表或者详情页价格格式化展示
+     */
 
-const props = defineProps({
-    price: {
-        type: [String, Number],
-        default: '0.00'
-    },
-    firstSize: {
-        type: [String, Number],
-        default: 36
-    },
-    secondSize: {
-        type: [String, Number],
-        default: 24
-    },
-    subscriptSize: {
-        type: [String, Number],
-        default: 24
-    },
-    color: {
-        type: String,
-        default: '#E54444'
-    },
-    weight: {
-        type: String,
-        default: 'bold'
-    },
-    lineThrough: {
-        type: Boolean,
-        default: false
-    },
-    showSubscript: {
-        type: Boolean,
-        default: true
-    }
-})
+    import { ref, onMounted, watch } from 'vue'
 
-const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
+    const props = defineProps({
+        price: {
+            type: [String, Number],
+            default: '0.00'
+        },
+        firstSize: {
+            type: [String, Number],
+            default: 36
+        },
+        secondSize: {
+            type: [String, Number],
+            default: 24
+        },
+        subscriptSize: {
+            type: [String, Number],
+            default: 24
+        },
+        color: {
+            type: String,
+            default: '#E54444'
+        },
+        weight: {
+            type: String,
+            default: 'bold'
+        },
+        lineThrough: {
+            type: Boolean,
+            default: false
+        },
+        showSubscript: {
+            type: Boolean,
+            default: true
+        }
+    })
 
-onMounted(() => {
-    priceFormat.format()
-})
+    const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
 
-const priceFormat = {
-    format: () => {
-        let price = props.price
-        let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
-        if(price !== null && price !== '' && price !== undefined) {
-            price = parseFloat(price);
-            // 保留两位小数
-            const priceStr = price.toFixed(2);
-            const priceArr = priceStr.split('.');
-            formattedPrice.first = priceArr[0];
-            formattedPrice.second = priceArr[1];
-            priceSlice.value = formattedPrice
-        }else {
-            priceSlice.value = {
-                first: 0
+    onMounted(() => {
+        priceFormat.format()
+    })
+
+    const priceFormat = {
+        format: () => {
+            let price = props.price
+            let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
+            if(price !== null && price !== '' && price !== undefined) {
+                price = parseFloat(price);
+                // 保留两位小数
+                const priceStr = price.toFixed(2);
+                const priceArr = priceStr.split('.');
+                formattedPrice.first = priceArr[0];
+                formattedPrice.second = priceArr[1];
+                priceSlice.value = formattedPrice
+            }else {
+                priceSlice.value = {
+                    first: 0
+                }
             }
         }
     }
-}
 
-watch(() => props.price, () => {
-    priceFormat.format()
-})
+    watch(() => props.price, () => {
+        priceFormat.format()
+    })
 </script>
 
 <script lang="ts">
diff --git a/src/components/RechargeBtn.vue b/src/components/RechargeBtn.vue
index 65a8dea..94aec39 100644
--- a/src/components/RechargeBtn.vue
+++ b/src/components/RechargeBtn.vue
@@ -6,6 +6,11 @@
 </template>
 
 <script lang="ts" setup name="RechargeBtn">
+	/**
+	 * RechargeBtn 充值按钮
+	 * @description 用于展示对应页面按钮
+     */
+
 	defineProps({
         name: {
             type: String,
diff --git a/src/components/coupon/GroupCoupon.vue b/src/components/coupon/GroupCoupon.vue
index 873b072..4774bb6 100644
--- a/src/components/coupon/GroupCoupon.vue
+++ b/src/components/coupon/GroupCoupon.vue
@@ -21,6 +21,11 @@
 </template>
 
 <script lang="ts" setup name="GroupCoupon">
+    /**
+	 * GroupCoupon 团购券组件
+	 * @description 展示团购券信息
+     */
+
 	const OSS = inject('OSS')
     defineProps<{
         coupon: {
diff --git a/src/components/coupon/coupon.vue b/src/components/coupon/coupon.vue
index 9012df1..f8bee09 100644
--- a/src/components/coupon/coupon.vue
+++ b/src/components/coupon/coupon.vue
@@ -22,6 +22,11 @@
 </template>
 
 <script lang="ts" setup name="Coupon">
+    /**
+	 * Coupon 优惠券组件
+	 * @description 展示优惠券信息
+     */
+
     defineProps<{
         coupon: {
             id: number
@@ -40,33 +45,33 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-.coupon {
-	position: relative;
-	border-radius: 8px;
-	margin-right: 22rpx;
-	height: 100px;
-}
+    .coupon {
+        position: relative;
+        border-radius: 8px;
+        margin-right: 22rpx;
+        height: 100px;
+    }
 
-.coupon::before,
-.coupon::after {
-	content: "";
-	position: absolute;
-	top: 50%;
-	width: 32rpx;
-	/* 控制凹口大小 */
-	height: 32rpx;
-    background: #F6F7F9;
-	/* 与页面背景色一致 */
-	border-radius: 50%;
-	transform: translateY(-50%);
-	z-index: 2;
-}
+    .coupon::before,
+    .coupon::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        width: 32rpx;
+        /* 控制凹口大小 */
+        height: 32rpx;
+        background: #F6F7F9;
+        /* 与页面背景色一致 */
+        border-radius: 50%;
+        transform: translateY(-50%);
+        z-index: 2;
+    }
 
-.coupon::before {
-	left: -16rpx;
-}
+    .coupon::before {
+        left: -16rpx;
+    }
 
-.coupon::after {
-	right: -16rpx;
-}
+    .coupon::after {
+        right: -16rpx;
+    }
 </style>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index b7361ff..ba9ed7f 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -22,6 +22,11 @@
 </template>
 
 <script lang="ts" setup name="Navbar">
+	/**
+	 * Navbar 导航栏
+	 * @description 对wd-navbar进行二次封装，满足不同页面的需求
+     */
+
 	import { ref, inject } from 'vue'
 	import { getNavBarHeight } from '@/utils/index'
 
@@ -60,7 +65,7 @@
         // z-index 层级
         zIndex: {
             type: Number,
-            default: 1
+            default: 10
         }
     })
 
diff --git a/src/components/notice/Bill.vue b/src/components/notice/Bill.vue
index 32bc530..7fee10c 100644
--- a/src/components/notice/Bill.vue
+++ b/src/components/notice/Bill.vue
@@ -30,7 +30,12 @@
 </template>
 
 
-<script lang="ts" setup name="PayNotice">
+<script lang="ts" setup name="BillNotice">
+	/**
+	 * BillNotice 账单提示组件
+	 * @description 展示充值、退款、返现等账单信息
+     */
+
     const OSS = inject('OSS')
 
     const props = defineProps({
diff --git a/src/components/notice/Pay.vue b/src/components/notice/Pay.vue
index ad007ab..e9e9dff 100644
--- a/src/components/notice/Pay.vue
+++ b/src/components/notice/Pay.vue
@@ -15,6 +15,11 @@
 
 
 <script lang="ts" setup name="PayNotice">
+	/**
+	 * PayNotice 支付提示组件
+	 * @description 提示支付成功
+     */
+
     const OSS = inject('OSS')
 
     const props = defineProps({
diff --git a/src/components/notice/Reserve.vue b/src/components/notice/Reserve.vue
index 1071021..f16d970 100644
--- a/src/components/notice/Reserve.vue
+++ b/src/components/notice/Reserve.vue
@@ -15,6 +15,11 @@
 
 
 <script lang="ts" setup name="ReserveNotice">
+    /**
+	 * ReserveNotice 预约提示组件
+	 * @description 提示预约信息
+     */
+
     const OSS = inject('OSS')
 
     const props = defineProps({
diff --git a/src/components/order/Combo.vue b/src/components/order/Combo.vue
new file mode 100644
index 0000000..20eee78
--- /dev/null
+++ b/src/components/order/Combo.vue
@@ -0,0 +1,88 @@
+<template>
+    <view>
+        <view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.ToUse">
+            <view class="">
+                <view class="flex items-center" @click="combo.handleToStore">
+                    <view class="w-190rpx h-190rpx mr-30rpx">
+                        <wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
+                    </view>
+                    <view class="flex-1">
+                        <view class="flex justify-between items-center" @click="combo.handleToStore">
+                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">团购套餐的可以点击跳转 </view>
+                            <wd-icon name="chevron-right" size="32rpx" v-if="type === 'GroupBuying'"></wd-icon>
+                            <view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">￥324</view>
+                        </view>
+                        <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
+                            <view class="">3小时</view>
+                            <view v-if="type === 'GroupBuying'">x1</view>
+                        </view>
+                        <view class="text-[#606266] text-right mt-26rpx" v-if="type === 'GroupBuying'">
+                            <text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
+                            <text class="tetx-32rpx leading-36rpx">￥29.32</text>
+                            <wd-icon name="chevron-right" size="32rpx"></wd-icon>
+                        </view>
+                        <view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
+                            适用包间：青茶、红茶、绿茶
+                        </view>
+                    </view>
+                </view>
+
+                <view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'GroupBuying'">
+                    <view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view>
+                    <view class="text-28rpx text-[#303133] mt-18rpx">
+                        <text class="mr-20rpx">券码 1052 4258 5654 125</text>
+                        <text class="text-[#4C9F44]">复制</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup name="Combo">
+    import { OrderStatus, OrderStatusText } from '@/utils/order'
+
+	/**
+	 * Combo 套餐组件
+	 * @description 订单详情页下的套餐卡片详情
+     */
+
+	const OSS = inject('OSS')
+
+	defineProps({
+        /**
+         * 订单类型：团购、抖音等
+        */
+        type: {
+            type: String,
+            default: ''
+        },
+        /**
+         * 订单类型：待使用、退款等
+        */
+        orderType: {
+            type: String,
+            default: ''
+        }
+    })
+
+    const combo = {
+        // 跳转到对饮茶室的详情页
+        handleToStore: () => {
+            uni.navigateTo({
+                url: '/pages/store/store-detail/store-detail'
+            })
+        },
+
+        // 跳转到团购订单详情页
+        handleToGroupBuyingDetail: () => {
+            uni.navigateTo({
+                url: `/bundle/group-buying/platform/order-detail?type=${OrderStatus.ToUse}`
+            })
+        }
+    }
+</script>
+
+<script lang="ts">
+    export default {}
+</script>
\ No newline at end of file
diff --git a/src/components/order/ComboCard.vue b/src/components/order/ComboCard.vue
new file mode 100644
index 0000000..073389e
--- /dev/null
+++ b/src/components/order/ComboCard.vue
@@ -0,0 +1,87 @@
+<template>
+    <view class="">
+        <!-- 团购和抖音团购 -->
+        <view v-if="type === 'GroupBuying'" class="bg-white rounded-10rpx p-30rpx">
+            <view class="flex justify-between items-center">
+                <view class="flex items-center">
+                    <view class="w-40rpx h-40rpx mr-10rpx">
+                        <wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
+                    </view>
+                    <view class="flex items-center" @click="comboCard.handleToStore">
+                        <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
+                        <wd-icon name="chevron-right" size="32rpx"></wd-icon>
+                    </view>
+                </view>
+                <view class="font-400 text-28rpx leading-40rpx mt-12rpx">
+                    <text class="text-[#4C9F44]">待使用</text>
+                    <!-- <text class="text-[#606266]">已使用</text>
+                    <text class="text-[#C9C9C9]">已退款</text> -->
+                </view>
+            </view>
+            <view class="mt-22rpx">
+                <view class="flex">
+                    <view class="w-200rpx h-200rpx mr-28rpx">
+                        <wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
+                    </view>
+                    <view class="flex-1">
+                        <view @click="comboCard.handleToGroupBuyingDetail">
+                            <view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
+                            <view>
+                                <wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
+                            </view>
+                            <view class="font-400 leading-36rpx text-26rpx text-[#606266]">
+                                <!-- TODO 除了直营店其它的都没有这个描述信息： 适用包间  青茶、红茶、绿茶 -->
+                                <view class="mt-12rpx">适用包间  青茶、红茶、绿茶</view>
+                                <view class="mt-10rpx">有效期至2025-03-23</view>
+                            </view>
+                        </view>
+       
+                        <!-- TODO 直营店有申请退款和立即预定按钮，加盟店只有申请退款按钮，抖音只有立即预定按钮 -->
+                        <view class="text-center flex items-center text-28rpx mt-28rpx" v-if="type === 'GroupBuying' ? 'justify-start' : 'justify-end'">
+                            <view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
+                            <view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup name="ComboCard">
+    import { OrderStatus, OrderStatusText } from '@/utils/order'
+
+	/**
+	 * ComboCard 套餐卡片组件
+	 * @description 展示订单列表套餐卡片信息
+     */
+
+	const OSS = inject('OSS')
+
+	const props = defineProps({
+        type: {
+            type: String,
+            default: 'GroupBuying'
+        }
+    })
+
+    const comboCard = {
+        // 跳转到对饮茶室的详情页
+        handleToStore: () => {
+            uni.navigateTo({
+                url: '/pages/store/store-detail/store-detail'
+            })
+        },
+
+        // 跳转到团购订单详情页
+        handleToGroupBuyingDetail: () => {
+            uni.navigateTo({
+                url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
+            })
+        }
+    }
+</script>
+
+<script lang="ts">
+    export default {}
+</script>
\ No newline at end of file
diff --git a/src/components/reserve/RoomList.vue b/src/components/reserve/RoomList.vue
index d843251..fba9ad1 100644
--- a/src/components/reserve/RoomList.vue
+++ b/src/components/reserve/RoomList.vue
@@ -66,6 +66,11 @@
 </template>
 
 <script lang="ts" setup name="RoomList">
+	/**
+	 * RoomList 房间列表
+	 * @description 茶室预定房间列表展示
+     */
+
     import PriceFormat from '@/components/PriceFormat.vue'
 
     const OSS = inject('OSS')
diff --git a/src/pages.json b/src/pages.json
index b04b904..765677f 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -201,6 +201,22 @@
           "style": {
             "navigationStyle": "custom"
           }
+        },
+        {
+          "path": "group-buying/platform/order-detail",
+          "type": "page",
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "group-buying/platform/order-list",
+          "type": "page",
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
         }
       ]
     }
diff --git a/src/pages/my/my.vue b/src/pages/my/my.vue
index a44f1a5..fef0367 100644
--- a/src/pages/my/my.vue
+++ b/src/pages/my/my.vue
@@ -17,7 +17,7 @@
 			</wd-navbar>
 		</view>
 
-		<view :style="{ paddingTop: navbarHeight + 'px' }">
+		<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
 			<!-- 账号昵称显示 -->
 			<view class="ml-60rpx flex items-center">
 				<view class="">
@@ -63,8 +63,8 @@
 					<view class="w-300rpx h-148rpx">
 						<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
 					</view>
-					<view class="text-[#303133] absolute bottom-12rpx left-24rpx">
-						<view class="text-30rpx leading-36rpx fon-bold">￥2106.3623</view>
+					<view class="text-[#303133] absolute bottom-12rpx left-24rpx text-center">
+						<view class="text-30rpx leading-36rpx fon-bold">{{ isLogin ? '￥2106.3623' : '- -' }}</view>
 						<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
 					</view>
 				</view>
@@ -128,6 +128,79 @@
 					</view>
 				</view>
 			</view>
+		
+			<!-- 团购 -->
+			<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
+				<view class="flex items-center" @click="my.handleToDouYinGroupBuying">
+					<view class="w-40rpx h-40rpx ">
+						<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
+					</view>
+					<view class="ml-20rpx">
+						<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">抖音团购</text>
+						<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
+					</view>
+				</view>
+				<view>
+					<wd-divider vertical />
+				</view>
+				<view class="flex items-center" @click="my.handleToPlatformGroupBuying">
+					<view class="w-40rpx h-40rpx ">
+						<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_platform.png`"></wd-img>
+					</view>
+					<view class="ml-20rpx">
+						<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">平台团购</text>
+						<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
+					</view>
+				</view>
+			</view>
+
+			<!-- 茶室订单 -->
+			<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
+				<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
+				<view class="flex relative px-30rpx">
+					<view v-for="(item, index) in roomMenuList" :key="index">
+						<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
+							<view class="w-36rpx h-36rpx flex items-center justify-center">
+								<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
+							</view>
+							<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 茶艺师订单 -->
+			<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
+				<view class="px-30rpx pt-30rpx py-24rpx">茶艺室订单</view>
+				<view class="flex relative px-30rpx">
+					<view v-for="(item, index) in teaReserveMenuList" :key="index">
+						<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
+							<view class="w-36rpx h-36rpx flex items-center justify-center">
+								<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
+							</view>
+							<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 更多服务 -->
+			<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
+				<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
+				<view class="flex px-30rpx">
+					<view v-for="(item, index) in serviceMenuList" :key="index">
+						<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
+							<view class="w-60rpx h-60rpx flex items-center justify-center">
+								<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
+							</view>
+							<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
+							<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
+								{{item.badge}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -142,17 +215,55 @@
 	const isLogin = ref<boolean>(false)
 	const isVip = ref<boolean>(true)
 
+
+	// 茶室订单
+	const roomMenuList = reactive([
+		{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', url: '' },
+		{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', url: '' },
+		{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', url: '' },
+		{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', url: '' },
+	])
+
+	// 茶艺师订单
+	const teaReserveMenuList = reactive([
+		{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', url: '' },
+		{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', url: '' },
+		{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', url: '' },
+		{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', url: '' },
+		{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', url: '' },
+	])
+
+	// 更多服务
+	const serviceMenuList = reactive([
+		{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '' },
+		{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '' },
+		{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
+	])
+
+	onLoad(() => {
+		
+	})
+
+
 	const my = {
+		// 跳转抖音团购
+		handleToDouYinGroupBuying() {
+
+		},
+
+		// 跳转平台团购
+		handleToPlatformGroupBuying() {
+			uni.navigateTo({
+				url: '/bundle/group-buying/platform/order-list'
+			})
+		},
+
 		handleToService: () => {
 			uni.navigateTo({
 				url: '/src/pages/my/service/service'
 			})
 		}
 	}
-
-	onLoad(() => {
-		
-	})
 </script>
 
 <style lang="scss">
@@ -186,4 +297,8 @@
 		background: url(#{$OSS}images/my/my_image6.png) 0 0 no-repeat;
 		background-size: 180rpx;
 	}
+
+	.service-badge {
+		background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
+	}
 </style>
diff --git a/src/utils/order.ts b/src/utils/order.ts
new file mode 100644
index 0000000..2f3dc1d
--- /dev/null
+++ b/src/utils/order.ts
@@ -0,0 +1,21 @@
+export enum OrderStatus {
+    All = 'all',             // 全部订单
+    Pending = 'pending',     // 待付款
+    Reserved = 'reserved',   // 预约单
+    Confirm = 'Reserved',    // 待确认
+    Finished = 'finished',   // 已完结
+    ToUse = 'toUse',         // 待使用
+    AfterSaleApply = 'afterSaleApply',   // 申请售后
+    AfterSaleFinished = 'afterSaleFinished' // 售后完成
+}
+
+export const OrderStatusText: Record<OrderStatus, string> = {
+    [OrderStatus.All]: '全部订单',
+    [OrderStatus.Pending]: '待付款',
+    [OrderStatus.Reserved]: '预约单',
+    [OrderStatus.Confirm]: '待确认',
+    [OrderStatus.Finished]: '已完结',
+    [OrderStatus.ToUse]: '待使用',
+    [OrderStatus.AfterSaleApply]: '申请售后',
+    [OrderStatus.AfterSaleFinished]: '售后完成'
+}
\ No newline at end of file