From 69b0dce2bd019b336680e54bc3670ef6cb91f51a Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Tue, 24 Mar 2026 18:50:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=8C=B6=E8=89=BA=E5=B8=88?=
 =?UTF-8?q?=E5=A5=97=E9=A4=90=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/types/user.ts                         |    2 +
 src/bundle/package/detail.vue                 |  355 +-----
 src/bundle/package/reserve.vue                | 1067 +++++++++++++++++
 src/bundle/package/service.vue                |  285 +++++
 src/bundle/package/tea-specialist.vue         |  197 +++
 src/bundle/reserve-group/reserve-group.vue    |    7 +-
 src/bundle_b/pages/tea-specialist/reserve.vue |    2 +-
 src/pages.json                                |   27 +
 src/pages/index/index.vue                     |    3 +-
 src/pages/notice/reserve.vue                  |    9 +
 src/utils/order.ts                            |    1 +
 11 files changed, 1609 insertions(+), 346 deletions(-)
 create mode 100644 src/bundle/package/reserve.vue
 create mode 100644 src/bundle/package/service.vue
 create mode 100644 src/bundle/package/tea-specialist.vue

diff --git a/src/api/types/user.ts b/src/api/types/user.ts
index 8797905..d9f35c2 100644
--- a/src/api/types/user.ts
+++ b/src/api/types/user.ts
@@ -32,6 +32,8 @@ export interface IUserAddressListResult {
     district_id: number
     address: string
     is_default: number
+    latitude?: number
+    longitude?: number
 }
 
 /**
diff --git a/src/bundle/package/detail.vue b/src/bundle/package/detail.vue
index ff1c237..8ac9b74 100644
--- a/src/bundle/package/detail.vue
+++ b/src/bundle/package/detail.vue
@@ -152,7 +152,7 @@
 
             <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center" :style="{ height: '140rpx' }">
                 <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
-                    <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预约</view>
+                    <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="Detail.handleReserve">立即预约</view>
                 </view>
             </view>
         </view>
@@ -161,371 +161,44 @@
 
 <script lang="ts" setup>
 import { toast } from '@/utils/toast'
-import { ReserveServiceCategory, OrderType } from '@/utils/order'
-import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
-import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder } from '@/api/tea-room'
-import { CouponType } from '@/utils/coupon'
-import { router, randomLabelColor, previewImage, replaceNewLine } from '@/utils/tools'
-import type { IUserInfoVo } from '@/api/types/login'
-import { useUserStore } from '@/store'
-import { getTeaRoomDetail, createTeaRoomPackageOrder, getTeaRoomPackageDetail, calculateTeaRoomPrice } from '@/api/tea-room'
+import { router, previewImage, replaceNewLine } from '@/utils/tools'
+
 import PriceFormat from '@/components/PriceFormat.vue'
-import BookingTime from '@/components/BookingTime.vue'
-import { getUserInfo } from '@/api/user'
-import { getTeaRoomGroupCouponList } from '@/api/tea-room'
+
 
 const OSS = inject('OSS')
 
-// 获取当前年月日，格式：YYYY-MM-DD
-const now = new Date();
-const year = now.getFullYear();
-const month = String(now.getMonth() + 1).padStart(2, '0');
-const day = String(now.getDate()).padStart(2, '0');
-const currentDate = `${year}-${month}-${day}`;
-
-// 用户信息
-const userInfo = ref<IUserInfoVo>(null)
 
 const swiperList = ref<string[]>([])
 const current = ref<number>(0)
-const html: string = '<p>这里是富文本内容，需要后台传递</p>'
-const isGroupBuying = ref<boolean>(false)// 是否是团购套餐
 
-// 选择预定时间
-const showBookTimePopup = ref<boolean>(false)
-const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
-    minimum_time: 0,
-    time: []
+const teaRoomPackage = reactive({
+    introduce: '',
+    hour: 0,
+    pl_number: 0,
+    returd_details: ''
 })
-const reserveTime = ref<Array<any>>([])
-const timeSlots = ref<Array<string>>([]) // 连续选择的预约时间
-const dayTitle = ref<string>('') // 周三03/18
-const dayTime = ref<string>('') // 2024-03-18
-const dayHours = ref<string>('') // 预定时长00:00,00:30
-
-// 计算费用明细 service(服务费) coupon(优惠券) discount(会员优惠) totalDiscount(总优惠) total(总费用) groupCoupon(团购券)
-const bill = ref<{ service: any, discount: number, totalDiscount: number, coupon: number, groupCoupon: number, total: number }>({
-    service: {
-        total: 0,
-        unitPrice: 0,
-        num: 0,
-        startTime: 0,
-        endTime: 0,
-        dayTime: '',
-        startHour: '',
-        endHour: ''
-    },
-    discount: 0,
-    totalDiscount: 0,
-    coupon: 0,
-    groupCoupon: 0,
-    total: 0
-})
-
-// 费用明细相关
-const showCostPopup = ref<boolean>(false) // 费用明细popup
-const showPayPopup = ref<boolean>(false) // 支付popup
-
-// 包间内容
-const storeId = ref<number>(0) // 门店ID 
-const id = ref<number>(0) // id
-const teaRoom = ref<any>({
-    order: {
-        hours: 0
-    },
-    room: {
-        title: ''
-    }
-})
-const teaRoomPrice = ref<number>(0)
-
-// 门店余额
-const storeMoney = ref<number>(0)
-
-// 选择的优惠券
-const selectedCoupon = ref<{ id: number, name: string }>({ id: 0, name: '' })
-const selectedGroupCoupon = ref<{ id: number, name: string }>({ id: 0, name: '' })
-const selectCouponId = ref<number>(0)
-const selectGroupCouponId = ref<number>(0)
-
-// 用户信息
-const user = ref<any>(null)
-
-// 套餐
-const teaRoomPackage = ref<any>({})
-
-// 页面类型
-const pageType = ref<string>('')
-
-// 防止重复提交
-const isSubmitting = ref(false)
-
-// 团购套餐列表
-const groupCouponList = ref<Array<any>>([])
-
 onLoad((args) => {
-    storeId.value = Number(args.storeId)
-    id.value = Number(args.id) // 在茶室下这个id是包间ID，在团购下是套餐ID
-    teaRoomPrice.value = Number(args.price) || 0
-    pageType.value = args.type || ''
-    console.log("🚀 ~ pageType.value:", pageType.value)
-
-    if (args.type == ReserveServiceCategory.GroupBuying) {
-        isGroupBuying.value = true
-        Detail.handleInitGroupBuying()
-    }
-    Detail.handleInitReserveRoom()
-
-    // 获取用户需求详
-    getUserInfo().then(res => {
-        user.value = res
-    })
+    Detail.handleInit(args)
 })
 
 
 // 防止重复提交
-
 const Detail = {
     /**
      *  初始包间详情
      */
-    handleInitReserveRoom: async () => {
+    handleInit: async (args) => {
         // 包间详情
-        const userStore = useUserStore()
-        userInfo.value = userStore.userInfo
-
-        const res = await getTeaRoomDetail({
-            id: storeId.value,
-            latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
-            longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
-            user_id: userInfo.value.id || 0,
-            room_id: id.value
-        })
-        teaRoom.value = res.details
-
-        // 处理使用说明的换行问题
-        if (teaRoom.value.room.other_describe) {
-            teaRoom.value.room.other_describe = replaceNewLine(teaRoom.value.room.other_describe)
-        }
-
-        if (pageType.value == ReserveServiceCategory.ReserveRoom) {
-            swiperList.value = teaRoom.value.room.room_arr
-
-            // 预定时间
-            const next7 = await getNext7Days(id.value, currentDate)
-            // disabled = 0 可预约 1不可逾越
-            Object.assign(sevenDay, next7.data)
-            Object.assign(sevenDay, { minimum_time: teaRoom.value.room.hours })
-        }
-
-        // 获取门店余额
-        const balance = await getTeaRoomBalance({ store_id: storeId.value })
-        storeMoney.value = balance.data.money || 0
-
-        // 获取团购券
-        const group = await getTeaRoomGroupCouponList({ store_id: storeId.value, room_id: id.value })
-        groupCouponList.value = group.list
+      
     },
 
-    /*
-     * 初始化套餐详情
-     */
-    handleInitGroupBuying: async () => {
-        const res = await getTeaRoomPackageDetail({ id: id.value })
-        teaRoomPackage.value = res.details
-
-        // 处理使用说明的换行问题
-        if (teaRoomPackage.value.introduce) {
-            teaRoom.value.introduce = replaceNewLine(teaRoom.value.introduce)
-        }
-
-        if (teaRoomPackage.value.rests_introduce) {
-            teaRoom.value.rests_introduce = replaceNewLine(teaRoom.value.rests_introduce)
-        }
-
-        if (teaRoomPackage.value.room_name) {
-            teaRoom.value.room_name = replaceNewLine(teaRoom.value.room_name)
-        }
-
-        if (teaRoomPackage.value.returd_details) {
-            teaRoom.value.returd_details = replaceNewLine(teaRoom.value.returd_details)
-        }
-
-        if (pageType.value == ReserveServiceCategory.GroupBuying) {
-            swiperList.value = teaRoomPackage.value.img
-        }
-    },
-
-    /**
-     * 选中预定时间
-     */
-    handleChooseReserveTime: (params: any) => {
-        reserveTime.value = params
-        console.log("🚀 ~ params:", params)
-
-        timeSlots.value = params.selectedTimestamps
-        dayTitle.value = params.dayTitle
-        dayTime.value = params.dayTime
-        const times = params.selectedTime.map(item => {
-            return item.time
-        }).join(',')
-        dayHours.value = times
-
-        bill.value.service = {
-            total: 0,
-            unitPrice: 0,
-            num: params.countSelectedTime,
-            startHour: params.selectedTime[0].time,
-            endHour: params.selectedTime[params.selectedTime.length - 1].time
-        }
-
-        Detail.handleCalculateTeaRoomPrice()
-    },
-
-    /**
-     * 跳转优惠券页面
-     */
-    handleToCoupon(type) {
-        if (reserveTime.value.length == 0) {
-            toast.info('请选择预定时间')
-            return
-        }
-
-        // 在选择优惠券之前需要先选择团购券
-        if (type === CouponType.Discount && groupCouponList.value.length > 0 && selectedGroupCoupon.value.id == 0) {
-            toast.info('请先选择团购券')
-            return
-        }
-
-        // 如果选择优惠券之前订单金额已经是0的话则不用再选择优惠券
-        if (type === CouponType.Discount && selectedGroupCoupon.value.id > 0 && bill.value.total <= 0) {
-            toast.info('当前订单金额已为0，无需选择优惠券')
-            return
-        }
-
-
-        uni.$off('chooseCoupon');
-        uni.$on('chooseCoupon', params => {
-            console.log("🚀 ~ params:", params)
-            uni.$off('chooseCoupon')
-            if (params.coupon) {
-                if (type === CouponType.Discount) {
-                    selectedCoupon.value = { id: params.coupon.id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
-                    bill.value.coupon = params.coupon.coupon_price
-                    selectCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
-                } else {
-                    selectedGroupCoupon.value = { id: params.coupon.id, name: `团购券-${params.coupon?.title}` }
-                    bill.value.groupCoupon = params.coupon.coupon_price
-                    selectGroupCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
-                }
-            } else {
-                // 清空选择
-                if (type === CouponType.Discount) {
-                    selectedCoupon.value = { id: 0, name: '' }
-                    bill.value.coupon = 0
-                    selectCouponId.value = 0
-                } else {
-                    selectedGroupCoupon.value = { id: 0, name: '' }
-                    bill.value.groupCoupon = 0
-                    selectGroupCouponId.value = 0
-                }
-            }
-            Detail.handleCalculateTeaRoomPrice()
-        })
-
-        // 获取预定了几个小时
-        const count = bill.value.service.num
-
-        router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&price=${bill.value.total}&numbers=${count}&type=${type}&storeId=${storeId.value}&couponId=${selectCouponId.value}&groupCouponId=${selectGroupCouponId.value}`)
-    },
 
     /**
      * 提交订单
      */
-    handleSubmitOrder: async () => {
-        if (isSubmitting.value) return
-        // 只有预定茶室才会选择时间
-        if (!isGroupBuying.value && bill.value.service.num == 0) {
-            toast.info('请选择预定时间')
-            return
-        }
-
-        isSubmitting.value = true
-        try {
-            let res: any = null
-            if (isGroupBuying.value) {
-                // 团购套餐ID
-                res = await createTeaRoomPackageOrder({
-                    group_id: id.value,
-                    room_id: 0
-                })
-            } else {
-                const params = {
-                    store_id: storeId.value,
-                    room_id: id.value,
-                    day_title: dayTitle.value,
-                    day_time: dayTime.value,
-                    start_time: bill.value.service.startHour,
-                    end_time: bill.value.service.endHour,
-                    user_coupon_id: selectedCoupon.value.id || 0,
-                    hours: bill.value.service.num,
-                    group_coupon_id: selectedGroupCoupon.value.id || 0,
-                    timeslot: timeSlots.value.join(',')
-                }
-                res = await createTeaRoomOrder(params)
-            }
-            // uni.hideLoading()
-
-            // 支付后的处理
-            uni.$on('payment', params => {
-                setTimeout(() => {
-                    uni.$off("payment")
-                    isSubmitting.value = false
-                    if (params.result) {
-                        //支付成功提示
-                        uni.redirectTo({
-                            url: `/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=${isGroupBuying.value ? 1 : 0}&storeId=${storeId.value}&storeType=${teaRoom.value.operation_type}`
-                        })
-                    } else {
-                        // 支付失败跳转订单列表
-                        if (!isGroupBuying.value) {
-                            router.redirectTo(`/bundle/order/tea-room/order-list?isGroupBuying=${isGroupBuying.value ? 1 : 0}`)
-                        }
-                    }
-                }, 1000)
-            })
-
-            setTimeout(() => {
-                const name = isGroupBuying.value ? teaRoomPackage.value.title : teaRoom.value.name
-                const money = isGroupBuying.value ? res.order_amount : 0 // 团购套餐支付金额会在创建订单的时候返回
-
-                router.navigateTo(
-                    `/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&name=${name}&storeId=${storeId.value}&isGroupBuying=${isGroupBuying.value ? 1 : 0}&cmoboId=${id.value || 0}&money=${money}`
-                )
-            }, 500)
-        } catch (error) {
-            isSubmitting.value = false
-            return
-        }
-        // 正常流程下，isSubmitting.value 会在支付回调中重置
-    },
-
-    /**
-     * 计算茶室价格
-     */
-    handleCalculateTeaRoomPrice: async () => {
-        const res = await calculateTeaRoomPrice({
-            room_id: id.value,
-            coupon_id: selectedCoupon.value.id || 0,
-            group_coupon_id: selectedGroupCoupon.value.id || 0,
-            nums: bill.value.service.num,
-        })
-
-        bill.value.service.total = res.details.room_price // 茶室价格
-        bill.value.discount = res.details.discount_room_price // 茶室总价
-        bill.value.totalDiscount = res.details.discount_all_price // 总优惠
-        bill.value.groupCoupon = res.details.group_price // 团购优惠
-        bill.value.total = res.details.order_amount // 订单金额
+    handleReserve: async () => {
+        router.navigateTo('/bundle/package/service')
     },
 
     /**
diff --git a/src/bundle/package/reserve.vue b/src/bundle/package/reserve.vue
new file mode 100644
index 0000000..7f14cff
--- /dev/null
+++ b/src/bundle/package/reserve.vue
@@ -0,0 +1,1067 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+    "layout": "tabbar",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}</route>
+<template>
+    <view class="pb-180rpx">
+        <!-- 消息提示框 -->
+        <wd-message-box selector="wd-message-box-slot" />
+
+        <!-- 上门服务-预定时间 -->
+        <wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
+            position="bottom">
+            <view class="relative">
+                <view class="absolute top-18rpx right-30rpx" @click="showReservePopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
+                <view class="w-[100%] h-100rpx flex justify-between items-center">
+                    <view class="w-[50%] h-[100%]  flex flex-col items-center justify-center rounded-l-[8rpx]"
+                        :class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
+                        @click="currentTimePicker = 'start'">
+                        <view class="text-28rpx leading-40rpx">开始时间</view>
+                        <view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
+                    </view>
+                    <view class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
+                        :class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
+                        @click="currentTimePicker = 'end'">
+                        <view class="text-28rpx leading-40rpx">结束时间</view>
+                        <view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
+                    </view>
+                </view>
+
+                <view class="date-picker">
+                    <view class="" v-if="currentTimePicker == 'start'">
+                        <wd-datetime-picker-view :minDate='minTimestamp' :maxDate='maxTimestamp' type="datetime"
+                            v-model="startTimeValue" :formatter="Door.handleFormatTime"
+                            @change="Door.handleStartTimePicker" />
+                    </view>
+                    <view class="" v-if="currentTimePicker == 'end'">
+                        <wd-datetime-picker-view :minDate='futureTimestamp' :maxDate='maxTimestamp' type="datetime"
+                            v-model="endTimeValue" :formatter="Door.handleFormatTime"
+                            @change="Door.handleEndTimePicker" />
+                    </view>
+                </view>
+
+                <view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
+                    <view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx'
+                        @click="Door.handleResetTime">重置</view>
+                    <view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]'
+                        @click="Door.handleConfirmHour">确定（{{ totalHour }}小时）</view>
+                </view>
+            </view>
+        </wd-popup>
+
+        <!-- 费用明细 -->
+        <wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
+            @close="showCostPopup = false" position="bottom">
+            <view class='bg-[#FBFBFB] py-40rpx realtive'>
+                <view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
+                <view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
+                    <!-- 套餐 -->
+                    <view>
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                            <view>套餐</view>
+                            <view>￥{{ costBill.server_all_price }}</view>
+                        </view>
+
+                        <view
+                            class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>服务费（含两小时）</view>
+                            <view>x1</view>
+                        </view>
+                    </view>
+
+                    <view class="my-30rpx">
+                        <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
+                    </view>
+
+                    <!-- 服务费 -->
+                    <view>
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                            <view>服务费</view>
+                            <view>￥{{ costBill.server_all_price }}</view>
+                        </view>
+
+                        <view
+                            class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>服务费（￥{{ costBill.server_price }}元/小时）</view>
+                            <view>x{{ costParams.hours }}</view>
+                        </view>
+                    </view>
+
+                    <!-- 车马费 -->
+                    <view>
+                        <view
+                            class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
+                            <view>车马费</view>
+                            <view>￥{{ costBill.mileage_server_price }}</view>
+                        </view>
+
+                        <view
+                            class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>车马费（￥{{ costBill.mileage_price }}元/小时）</view>
+                            <view>{{ costBill.team_user_distance }}公里</view>
+                        </view>
+                    </view>
+
+                    <!-- 茶艺服务 -->
+                    <view>
+                        <view
+                            class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx  mt-52rpx">
+                            <view>茶艺服务</view>
+                            <view>￥{{ costBill.leaf_tea_all_price }}</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx"
+                            v-if="selectedTeaTxt.length > 0">
+                            <view class='w-400rpx'>{{ selectedTeaTxt.join('/') }}</view>
+                            <view>￥{{ costBill.leaf_amount }}</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx"
+                            v-if="teaUsageValue > 0">
+                            <view class='w-400rpx'>茶具使用</view>
+                            <view>{{ costBill.teacup_price }}</view>
+                        </view>
+                    </view>
+
+                    <view class="my-30rpx">
+                        <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
+                    </view>
+
+                    <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                        <view>实付金额</view>
+                        <view>￥{{ costBill.order_amount }}</view>
+                    </view>
+                </view>
+            </view>
+        </wd-popup>
+
+        <!-- 茶艺服务 -->
+        <wd-popup v-model="showTeaServicePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
+            position="bottom">
+            <view class="relative">
+                <view class="absolute top-18rpx right-30rpx" @click="showTeaServicePopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">茶艺服务</view>
+                <scroll-view scroll-y class="h-900rpx">
+                    <view class="">
+                        <!-- 服务人数 -->
+                        <view class="mx-60rpx mb-56rpx">
+                            <view class="text-32rpx leading-44rpx text-#303133">服务人数</view>
+                            <view class="flex items-center justify-between mt-28rpx">
+                                <view class="text-28rpx leading-40rpx text-#303133">服务人数</view>
+                                <view class="">
+                                    <wd-input-number v-model="servicePeople" />
+                                </view>
+                            </view>
+                        </view>
+
+                        <!-- 茶具使用 -->
+                        <view class="mx-60rpx mb-70rpx">
+                            <view class="text-32rpx leading-44rpx text-#303133">茶具使用</view>
+                            <view class="mt-28rpx flex items-center justify-between w-full">
+                                <view class="flex items-center justify-between w-full">
+                                    <view class="text-28rpx leading-40rpx text-#303133">茶具需求</view>
+                                    <view>
+                                        <wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44"
+                                            inline>
+                                            <block v-for="(item, index) in teaUsageList" :key="index">
+                                                <wd-radio :value="item.type">
+                                                    <view class="text-[#303133] text-26rpx leading-36rpx mt-2rpx">
+                                                        {{ item.name }}</view>
+                                                </wd-radio>
+                                            </block>
+                                        </wd-radio-group>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+
+                        <!-- 预定茶叶 -->
+                        <view class="mx-60rpx mb-50rpx">
+                            <view class="text-32rpx leading-44rpx text-#303133">
+                                <text class="mr-20rpx">预定茶叶</text>
+                                <text class="text-26rpx leading-36rpx text-#909399">支持多选</text>
+                            </view>
+                            <view class="mt-28rpx">
+                                <view class="grid grid-cols-3 gap-x-16rpx gap-y-16rpx">
+                                    <view v-for="(item, index) in teaList" :key="index"
+                                        class="text-28rpx leading-40rpx rounded-8rpx text-center py-14rpx"
+                                        :class="selectedTea.includes(item.id) ? 'bg-#4C9F44 text-#fff' : 'bg-#F7F7F7 text-#606266'"
+                                        @click="Reserve.handleToggleTea(item.id, item.name, item.price)">
+                                        <view>{{ item.name }}</view>
+                                        <view>￥{{ item.price }}</view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+
+                        <view class="h-2rpx bg-#EFF0F2"></view>
+
+                        <!-- 按钮 -->
+                        <view class="mx-60rpx flex items-center justify-between py-40rpx">
+                            <view class="">
+                                <view class="text-24rpx leading-34rpx text-#303133">已选 {{ selectedTea.length }} 项</view>
+                                <view class="">
+                                    <price-format color="#FF5951" :first-size="40" :second-size="40"
+                                        :subscript-size="28" :price="costBill.order_amount"></price-format>
+                                </view>
+                            </view>
+
+                            <view class="flex items-center">
+                                <view
+                                    class="w-178rpx h-70rpx leading-70rpx text-center bg-#F6F7F8 text-#303133 rounded-8rpx mr-20rpx"
+                                    @click="Reserve.handleResetTeaService">重置</view>
+                                <view
+                                    class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx"
+                                    @click="Reserve.handleConfirmTeaService">确定</view>
+                            </view>
+                        </view>
+                    </view>
+                </scroll-view>
+            </view>
+        </wd-popup>
+
+        <!-- 选择预定时间 -->
+        <booking-time v-model="showBookTimePopup" :day="sevenDay" :auto-reserve-time="sevenDay.minimum_time"
+            @selectedTime="Reserve.handleChooseReserveTime"></booking-time>
+
+        <view>
+            <navbar title="预约茶艺师" :leftArrow="false"></navbar>
+        </view>
+
+        <view>
+            <!-- 茶艺师信息 -->
+            <view class="flex items-center bg-white p-20rpx rounded-10rpx mb-20rpx mt-20rpx">
+                <view class="mr-28rpx relative">
+                    <wd-img width="200rpx" height="200rpx" :src="info.image" radius="10rpx"></wd-img>
+                </view>
+                <view class="">
+                    <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
+                        {{ info.name }}
+                    </view>
+                    <view class="flex items-center mt-18rpx">
+                        <view class="mr-12rpx">
+                            <view
+                                class="bg-#FEF1F0 text-#FF5951 w-144rpx h-40rpx rounded-6rpx text-center text-22rpx leading-40rpx">
+                                {{ info.age_range }}后茶艺师</view>
+                        </view>
+                        <tea-specialist-level :level="info.level"></tea-specialist-level>
+                    </view>
+                    <view class="font-400 text-22rpx leading-32rpx text-#6A6363 mt-30rpx">已预约 {{ Number(info.sold) > 10
+                        ? Number(info.sold) + '+' : Number(info.sold) }}</view>
+                </view>
+            </view>
+
+            <!-- 服务方式 -->
+            <view class="mt-20rpx bg-white px-30rpx py-34rpx">
+                <view class="flex items-center justify-between">
+                    <view class="font-bold text-32rpx leading-44rpx">服务方式</view>
+                    <view class="flex items-center" @click="router.navigateTo('/bundle/package/service')">
+                        <view class="w-28rpx h-28rpx flex items-center mr-4rpx">
+                            <wd-img :src="`${OSS}icon/icon_change.png`" width="28rpx" height="28rpx"></wd-img>
+                        </view>
+                        <view class="font-400 text-28rpx text-[#4C9F44] leading-40rpx">切换服务方式</view>
+                    </view>
+                </view>
+
+                <view class="font-400 text-28rpx text-[#303133] mt-34rpx">
+                    <text>服务方式：</text>
+                    <text>{{ serviceTypeValue == 1 ? '到店服务' : '上门服务' }}</text>
+                </view>
+
+                <!-- 到店服务 -->
+                <view v-if="serviceTypeValue == 1">
+                    <view class="mt-16rpx text-[#8A94A3] font-400 text-26rpx">服务门店</view>
+
+                    <view class="flex items-center mt-18rpx">
+                        <view class="w-100rpx h-100rpx flex items-center mr-20rpx mt-8rpx">
+                            <wd-img :src="address.image" width="100rpx" height="100rpx" radius="16rpx"></wd-img>
+                        </view>
+                        <view class="flex-1">
+                            <view class="font-400 text-28rpx text-[#303133] line-1">{{ address.name }}</view>
+                            <view class="flex items-start mt-10rpx">
+                                <view class="w-28rpx h-28rpx flex items-center mr-8rpx mt-8rpx">
+                                    <wd-img :src="`${OSS}icon/icon_location4.png`" width="28rpx" height="28rpx"></wd-img>
+                                </view>
+                                <view class="font-400 text-28rpx text-[#303133] line-1 w-400rpx">{{ address.address }}</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 上门服务 -->
+                <view v-if="serviceTypeValue == 2">
+                    <view class="mt-16rpx text-[#8A94A3] font-400 text-26rpx">服务地址</view>
+
+                    <view class="flex items-start mt-18rpx">
+                        <view class="w-28rpx h-28rpx flex items-center mr-8rpx mt-8rpx">
+                            <wd-img :src="`${OSS}icon/icon_location4.png`" width="28rpx" height="28rpx"></wd-img>
+                        </view>
+                        <view class="font-400 text-28rpx text-[#303133] line-2">{{ address.address }}</view>
+                    </view>
+                </view>
+            </view>
+            <!-- 预定时间 -->
+            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="Reserve.handleChooseTime">
+                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
+                <view class="flex items-center justify-between">
+                    <view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
+                    <view class="flex items-center">
+                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
+                            <template v-if="startTimeLayout && endTimeLayout">
+                                {{ startTimeLayout }} {{ endTimeLayout }}
+                            </template>
+                            <template v-else>
+                                请选择
+                            </template>
+                        </view>
+                        <view>
+                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 茶艺服务 -->
+            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="showTeaServicePopup = true">
+                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">茶艺服务</view>
+                <view class="flex items-center justify-between">
+                    <view class="text-[26rpx] text-[#606266] leading-36rpx">茶艺服务</view>
+                    <view class="flex items-center">
+                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
+                            <template v-if="selectedTea.length > 0">
+                                {{ servicePeople }}人/{{ selectedTeaTxt.join(',') }}
+                            </template>
+                            <template v-else>
+                                请选择
+                            </template>
+                        </view>
+                        <view>
+                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 订单备注 -->
+            <view class="bg-white py-26rpx px-30rpx mt-20rpx">
+                <view class="text-32rpx leading-44rpx text-#303133 mb-28rpx">
+                    <text class="mr-20rpx">订单备注 </text>
+                    <text class="text-26rpx leading-36rpx text-#909399">(选填)</text>
+                </view>
+                <wd-textarea v-model="orderRemarks" :auto-height="true" no-border placeholder="有想说的可以在这里写哦！"
+                    custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]'
+                    custom-textarea-class='!bg-[#F8F9FA] !min-h-[100rpx] !px-24rpx' />
+            </view>
+
+            <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]" :style="{ height: '140rpx' }">
+                <view class="mt-22rpx flex justify-between items-center">
+                    <view class="flex items-center ml-40rpx mr-20rpx" @click="showCostPopup = true">
+                        <view class="text-24rpx text-[#303133] leading-34rpx w-50rpx whitespace-nowrap mr-10rpx">合计：
+                        </view>
+                        <view class="flex items-center h-56rpx mr-16rpx">
+                            <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28"
+                                :price="costBill.order_amount"></price-format>
+                        </view>
+                        <view class="flex items-center text-[#4C9F44] w-100rpx whitespace-nowrap">
+                            <view class="text-24rpx mr-10rpx">费用明细</view>
+                            <wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx"
+                                color="#4C9F44"></wd-icon>
+                        </view>
+                    </view>
+                    <view class="mr-30rpx">
+                        <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' :disabled="isSubmitting"
+                            @click="Reserve.handleSubmitOrder">立即预定</wd-button>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { useMessage, useToast } from 'wot-design-uni'
+import { router, toPlus } from '@/utils/tools'
+import PriceFormat from '@/components/PriceFormat.vue'
+import { OrderType } from '@/utils/order'
+import { getTeaTypeList, createTeaSpecialistOrder } from '@/api/tea'
+import type { ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
+import BookingTime from '@/components/BookingTime.vue'
+import { getTeaSpecialistDetail, getTeaSpecialistFeeDetails } from '@/api/tea-specialist'
+
+const OSS = inject('OSS')
+const toast = useToast()
+const message = useMessage('wd-message-box-slot')
+
+// 防止重复提交
+const isSubmitting = ref(false)
+
+// 服务方式
+const serviceType = ref<Array<any>>([
+    { type: 1, name: '到店服务' },
+    { type: 2, name: '上门服务' },
+])
+const serviceTypeValue = ref<number>(1)
+
+// 选择茶馆
+const teaHouse = ref<{ id: number, name: string }>({ id: 0, name: '' })
+
+// 选择预定时间
+const MINIMUMTIME = 2 // TODO 暂时写死
+const showBookTimePopup = ref<boolean>(false)
+const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
+    minimum_time: MINIMUMTIME,
+    time: []
+})
+const reserveTime = ref<Array<any>>([])
+const timeSlots = ref<Array<string>>([]) // 连续选择的预约时间
+const dayTitle = ref<string>('') // 周三03/18
+const dayTime = ref<string>('') // 2024-03-18
+const dayHours = ref<string>('') // 预定时长00:00,00:30
+const startTime = ref<number>(0) // 开始时间
+const endTime = ref<number>(0) // 结束时间
+const countHours = ref<number>(0) // 预定了几个小时
+
+// 上门服务-预定时间相关
+const showReservePopup = ref<boolean>(false) // 预定时间popup
+const currentTimePicker = ref<string>('start') // 当前选择的时间类型
+const startTimeValue = ref<string>('') // 开始时间
+const endTimeValue = ref<string>('') // 结束时间
+const now = new Date()
+const minTimestamp = Date.now() + 0.5 * 60 * 60 * 1000
+// 允许选择今天及未来六天的日期
+const futureTimestamp = minTimestamp + 2 * 60 * 60 * 1000
+const maxTimestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6, 23, 59, 59, 999).getTime()
+const startTimeLayout = ref<string>('')
+const endTimeLayout = ref<string>('')
+const totalHour = ref<number>(0)
+
+// 上门服务选择的地址
+const address = ref({
+    id: 0,
+    name: '',
+    contact: '',
+    telephone: '',
+    longitude: 0,
+    latitude: 0,
+    address: '',
+    image: '',
+    is_default: 0,
+})
+
+// 茶艺服务
+const showTeaServicePopup = ref<boolean>(false) // 显示门店列表弹窗
+const servicePeople = ref<number>(1) // 服务人数
+const teaList = ref<ITeaTypeListResult[]>([]) // 茶叶列表
+const selectedTea = ref<Array<any>>([]) // 选择的茶叶
+const selectedTeaTxt = ref<Array<any>>([]) // 选择的茶叶文本
+const selectedTeaPrice = ref<Array<any>>([]) // 选择的茶叶价格
+const totalSelectedTeaPrice = ref<string>('') // 选择的茶叶总价
+
+// 茶具使用
+const teaUsageList = ref<Array<any>>([
+    { type: 0, name: '客户自备' },
+    { type: 1, name: '茶艺师提供' },
+])
+const teaUsageValue = ref<number>(0)
+
+// 订单备注
+const orderRemarks = ref<string>('')
+
+// 费用明细相关
+const showCostPopup = ref<boolean>(false) // 费用明细popup
+
+// 茶艺师
+const id = ref<number>(0)
+const info = ref({
+    id: 0,
+    image: '',
+    image_arr: [], // 轮播图
+    name: '', // 茶艺师名字
+    star: 0, // 茶艺师评分
+    sold: 0, // 已预约
+    age_range: '00', // 茶艺师年龄段 
+    level: 1, // 茶艺师等级
+    distance: 0, // 距离
+    is_time: '', // 预计到达
+    sex: 0, // 性别
+    both: 0, // 年龄
+    weight: 0, // 体重
+    height: 0, // 身高
+    hobby_introduce: '', // 兴趣爱好介绍
+    price: 0, // 服务费
+    mileage_price: 0, // 车马费
+    state: 0, // 茶艺师状态哦
+    server_type: 0, // 服务类型 1到店 2上门 3两者皆有
+})
+
+// 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券)
+const bill = ref<{ service: any, travel: any, teaService: any, coupon: number, total: number }>({
+    service: {
+        total: 0,
+        unitPrice: 0,
+        num: 0,
+        startTime: 0,
+        endTime: 0
+    },
+    travel: {
+        total: 0,
+        unitPrice: 0,
+        num: 0
+    },
+    teaService: {
+        total: 0,
+        tea: '',
+        teaTotal: 0,
+        cup: 0,
+        peopleNum: 0
+    },
+    coupon: 0,
+    total: 0
+})
+
+// 费用明细
+const costBill = ref<any>({
+    package: 0, // 套餐费用
+    order_amount: 0, // 订单实付价格
+    server_price: 0, // 服务费单价
+    server_all_price: 0, // 服务费总价
+    mileage_price: 0, // 车马费单价
+    team_user_distance: 0, // 车马费公里数
+    mileage_server_price: 0, //车马费总价
+    leaf_tea_all_price: 0, // 茶艺服务费
+    leaf_amount: 0, // 茶叶金额
+    teacup_price: 0, // 茶具金额
+    coupon_price: 0, // 优惠券金额
+})
+
+// 计算费用明细参数
+const costParams = ref({
+    hours: 0, // 预定小时数
+    tea_id: '', // 茶叶id
+    longitude: 0, // 经度
+    latitude: 0, // 纬度
+    user_coupon_id: 0, // 优惠券id
+    is_teacup: 0, // 是否需要茶具 0客户自备 1茶艺师提供
+    team_user_id: 0, // 茶艺师id
+})
+
+onLoad(async (args) => {
+    if (args.id) {
+        id.value = Number(args.id)
+        costParams.value.team_user_id = Number(args.id)
+
+        // 获取茶艺师详情
+        const res = await getTeaSpecialistDetail({
+            team_user_id: args.id,
+            latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
+            longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
+        })
+        info.value = res.teamaster
+
+        // 根据茶艺师支持的服务类型初始化服务方式
+        if (info.value.server_type === 1 || info.value.server_type === 3) {
+            serviceTypeValue.value = 1
+        } else if (info.value.server_type === 2 || info.value.server_type === 3) {
+            serviceTypeValue.value = 2
+        }
+    }
+
+    // 初始化时间组件默认值，兼容 H5 端不自动触发 @change 的情况
+    startTimeValue.value = String(minTimestamp)
+
+    // #ifdef H5
+    // 仅在 H5 环境下手动触发，避免小程序端组件抛出 @change 造成执行两次
+    Door.handleStartTimePicker({ value: minTimestamp as number })
+    // #endif
+
+    // 初始化数据
+    Reserve.handleInit()
+})
+
+const Reserve = {
+    /**
+     * 初始化-获取茶叶列表
+     */
+    handleInit: async () => {
+        const tea = await getTeaTypeList()
+        teaList.value = tea as ITeaTypeListResult[]
+    },
+
+    /**
+     * 设置默认服务方式
+     */
+    handleSetServiceType: async () => {
+        // 设置默认服务方式
+        const serviceStorage = uni.getStorageSync('selectedPackageService')
+        if (serviceStorage) {
+            const serviceData = serviceStorage
+            serviceTypeValue.value = serviceData.serviceType
+            // 如果是到店服务则默认选择门店，如果是上门服务则默认选择地址
+            address.value = {
+                id: serviceData.id,
+                name: serviceData.name,
+                image: serviceData.image,
+                contact: serviceData.contact,
+                telephone: serviceData.telephone,
+                longitude: serviceData.longitude,
+                latitude: serviceData.latitude,
+                address: serviceData.address,
+                is_default: serviceData.is_default,
+            }
+            costParams.value.longitude = serviceData.longitude
+            costParams.value.latitude = serviceData.latitude
+        } else {
+            toast.show('请选择服务方式')
+            router.navigateBack(1, 500)
+            return
+        }
+    },
+
+    /**
+     * 选择预订时间
+     */
+    handleChooseTime: async () => {
+        if (info.value.state === 1) {
+            toast.show('茶艺师工作中，暂不可预约')
+            return
+        }
+
+        if (info.value.state === 2) {
+            toast.show('茶艺师已离线，暂不可预约')
+            return
+        }
+
+        if (serviceTypeValue.value === 1 && teaHouse.value.id === 0) {
+            // 到店服务必须要选择门店
+            toast.show('请先选择门店')
+            return false
+        }
+
+        showReservePopup.value = true
+    },
+
+    /**
+     * 切换预定茶叶选择
+     */
+    handleToggleTea: (id: number, name: string, price: number) => {
+        console.log("🚀 ~ id:", id)
+        const index = selectedTea.value.indexOf(id)
+        console.log("🚀 ~ index:", index)
+        if (index >= 0) {
+            // 已选择，取消选择
+            selectedTea.value.splice(index, 1)
+            selectedTeaTxt.value.splice(index, 1)
+            selectedTeaPrice.value.splice(index, 1)
+        } else {
+            // 未选择，添加选择
+            selectedTea.value.push(id)
+            selectedTeaTxt.value.push(name)
+            selectedTeaPrice.value.push(price)
+        }
+        console.log("🚀 ~ selectedTea.value:", selectedTea.value)
+
+        totalSelectedTeaPrice.value = toPlus(selectedTeaPrice.value)
+        bill.value.teaService.total = Number(totalSelectedTeaPrice.value) // 更新茶艺服务费用
+
+        // 计算费用明细
+        costParams.value.tea_id = selectedTea.value.join(',')
+        Reserve.handleCost()
+    },
+
+    /**
+     * 选择门店
+     */
+    handleToChooseStore: () => {
+        uni.$on('chooseTeaHouse', params => {
+            console.log("🚀 ~ params:", params)
+
+            uni.$off('chooseTeaHouse')
+            teaHouse.value = params
+
+            // 计算费用明细
+            costParams.value.longitude = params.longitude
+            costParams.value.latitude = params.latitude
+            Reserve.handleCost()
+        })
+        router.navigateTo('/bundle_b/pages/tea-specialist/store?from=reserve')
+    },
+
+    /**
+     * 选择地址
+     */
+    handleToAddress: () => {
+        uni.$on('chooseAddress', params => {
+            console.log("🚀 ~ params:", params)
+            uni.$off('chooseAddress')
+            address.value = params
+
+            costParams.value.longitude = params.longitude
+            costParams.value.latitude = params.latitude
+            Reserve.handleCost()
+        })
+        router.navigateTo('/bundle_b/pages/tea-specialist/address/list?from=reserve')
+    },
+
+    /**
+     * 选中预定时间
+     */
+    handleChooseReserveTime: (params: any) => {
+        reserveTime.value = params
+        // if (!digits(params.countSelectedTime)) {
+        //     message.alert({
+        //         title: '提示',
+        //         msg: '选择时间段不满一小时按一小时算请合理选择时间',
+        //         confirmButtonText: '确定',
+        //         cancelButtonProps: {
+        //             customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
+        //         },
+        //         confirmButtonProps: {
+        //             customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
+        //         },
+        //     })
+        // }
+
+        timeSlots.value = params.selectedTimestamps
+        dayTitle.value = params.dayTitle
+        dayTime.value = params.dayTime
+        const times = params.selectedTime.map(item => {
+            return item.time
+        }).join(',')
+        dayHours.value = times
+        startTime.value = params.selectedTimestamps[0]
+        endTime.value = params.selectedTimestamps[params.selectedTimestamps.length - 1]
+
+        // 预定了几个小时
+        countHours.value = params.countSelectedTime
+
+        bill.value.service = {
+            total: 0,
+            unitPrice: 0,
+            num: params.countSelectedTime,
+            startHour: params.selectedTime[0].time,
+            endHour: params.selectedTime[params.selectedTime.length - 1].time
+        }
+
+        // 计算费用明细
+        costParams.value.hours = params.countSelectedTime
+        Reserve.handleCost()
+    },
+
+    /**
+     * 重置差茶艺服务
+     */
+    handleResetTeaService: () => {
+        servicePeople.value = 1
+        selectedTea.value = []
+        teaUsageValue.value = 0
+    },
+
+    /**
+     * 确认茶艺服务
+     */
+    handleConfirmTeaService: () => {
+        if (selectedTea.value.length == 0) {
+            toast.info('请选择预定茶叶')
+            return
+        }
+        showTeaServicePopup.value = false
+
+        // 计算费用明细
+        costParams.value.is_teacup = teaUsageValue.value
+        Reserve.handleCost()
+    },
+
+    /**
+     * 提交订单数据
+     */
+    handleSubmitOrder: async () => {
+        if (isSubmitting.value) return
+
+        if (costParams.value.longitude == 0 && costParams.value.latitude == 0) {
+            toast.info('请选择地址')
+            return false
+        }
+
+        if (info.value.state === 1) {
+            toast.show('茶艺师工作中，暂不可预约')
+            return
+        }
+
+        if (info.value.state === 2) {
+            toast.show('茶艺师已离线，暂不可预约')
+            return
+        }
+
+        if (totalHour.value == 0) {
+            toast.info('请选择预定时间')
+            return false
+        }
+
+        // 选择了上门服务则必须要茶艺师提供茶具
+        if (serviceTypeValue.value === 2 && teaUsageValue.value === 0) {
+            teaUsageValue.value = 1
+            costParams.value.is_teacup = 1
+            await Reserve.handleCost()
+
+            toast.info('上门服务须选择茶艺师提供茶具')
+            return false
+        }
+
+        if (selectedTea.value.length == 0) {
+            toast.info('请选择茶叶')
+            return false
+        }
+
+        isSubmitting.value = true
+        toast.loading('提交中...')
+
+        // 提交的订单数据
+        const params = {
+            team_user_id: id.value, // 茶艺师ID
+            server_type: serviceTypeValue.value, // 服务方式 1到店服务 2上门服务
+            longitude: costParams.value.longitude, // 经度
+            latitude: costParams.value.latitude, // 纬度
+            store_id: serviceTypeValue.value == 1 ? teaHouse.value.id : 0, // 茶室Id如果是上门服务则传0
+            address: serviceTypeValue.value == 1 ? teaHouse.value.name : address.value.address, // 地址: 到店传茶室名称 上门则传地址
+            start_time: Math.floor(Door.startTimeTimestamp / 1000), // 预约开始时间
+            end_time: Math.floor(Door.endTimeTimestamp / 1000), // 预约结束时间
+            hours: totalHour.value, // 预约小时数
+            remrk: orderRemarks.value, // 订单备注
+            is_teacup: teaUsageValue.value, // 是否需要茶具 0客户自备 1茶艺师提供
+            tea_id: selectedTea.value.join(','), // 茶叶商品ids 多个逗号隔开
+            user_coupon_id: 0, // 优惠券id默认传0
+            server_number: servicePeople.value
+        }
+
+        try {
+            const res = await createTeaSpecialistOrder(params)
+            toast.close()
+
+            uni.$on('payment', params => {
+                console.log("🚀 ~ params:", params)
+                setTimeout(() => {
+                    uni.$off("payment")
+                    isSubmitting.value = false
+
+                    if (params.result) {
+                        uni.redirectTo({
+                            url: `/pages/notice/reserve?type=${OrderType.TeaSpecialist}&orderId=${params.orderId}`
+                        })
+                    } else {
+                        uni.redirectTo({
+                            url: '/bundle/order/tea-specialist/order-list'
+                        })
+                    }
+                }, 1000)
+            })
+
+            setTimeout(() => {
+                router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaSpecialist}&orderId=${res.order_id}&teaSpecialistName=${info.value.name}&teaSpecialistOrderAmount=${res.order_amount}`)
+            }, 800)
+        } catch (error) {
+            toast.close()
+            isSubmitting.value = false
+            return
+        }
+    },
+
+    /**
+     * 计算费用明细
+     */
+    handleCost: async () => {
+        toast.loading('计费中...')
+        const res = await getTeaSpecialistFeeDetails(costParams.value)
+        toast.close()
+        costBill.value = res
+    }
+}
+
+// 上门服务
+const Door = {
+    startTimeTimestamp: 0, // 记录开始时间戳
+    endTimeTimestamp: 0, // 记录结束时间戳
+
+    handleStartTimePicker: async (e: { value: number }) => {
+        await Reserve.handleSetServiceType() // 重置茶艺服务选择
+        console.log("🚀 ~ e:", e)
+        Door.startTimeTimestamp = e.value
+        startTimeLayout.value = Door.handleFormatDate(e.value)
+        endTimeLayout.value = Door.handleFormatDate(Number(e.value) + Number(2 * 60 * 60 * 1000)) // 初始化结束时间是未来2个小时
+        Door.endTimeTimestamp = Number(e.value) + Number(2 * 60 * 60 * 1000) // 初始化结束时间是未来2个小时
+        endTimeValue.value = String(Door.endTimeTimestamp)
+        Door.handleTotalTimestamp()
+
+        costParams.value.hours = totalHour.value
+        Reserve.handleCost()
+    },
+
+    handleEndTimePicker: (e: { value: number }) => {
+        Door.endTimeTimestamp = e.value
+        endTimeLayout.value = Door.handleFormatDate(e.value)
+        Door.handleTotalTimestamp()
+    },
+
+    handleFormatTime: (type: string, values: string) => {
+        if (type === 'year') {
+            return `${values}年`
+        }
+        if (type === 'month') {
+            return `${values}月`
+        }
+        if (type === 'date') {
+            return `${values}日`
+        }
+        if (type === 'hour') {
+            return `${values}时`;
+        }
+        if (type === 'minute') {
+            return `${values}分`;
+        }
+        return values
+    },
+
+    handleTotalTimestamp: () => {
+        if (Door.startTimeTimestamp && Door.endTimeTimestamp) {
+            const diffMs = Door.endTimeTimestamp - Door.startTimeTimestamp
+            // 计算小时，保留一位小数
+            const hours = (diffMs / 1000 / 60 / 60)
+            const result = Math.round(hours * 10) / 10 // 保留一位小数
+            if (result >= 0) {
+                totalHour.value = result
+            }
+            return result
+        }
+        totalHour.value = 0
+        return 0
+    },
+
+    /**
+     * 格式化时间
+     */
+    handleFormatDate: (timestamp: number) => {
+        const date = new Date(timestamp)
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hour = String(date.getHours()).padStart(2, '0')
+        const minute = String(date.getMinutes()).padStart(2, '0')
+
+        return `${year}-${month}-${day} ${hour}:${minute}`
+    },
+
+    /**
+     * 重置预定时间
+     */
+    handleResetTime: () => {
+        startTimeValue.value = ''
+        endTimeValue.value = ''
+        startTimeLayout.value = ''
+        endTimeLayout.value = ''
+        Door.startTimeTimestamp = 0
+        Door.endTimeTimestamp = 0
+        totalHour.value = 0
+        currentTimePicker.value = 'start'
+    },
+
+    /**
+     * 确定时间
+     */
+    handleConfirmHour: () => {
+        if (totalHour.value < sevenDay.minimum_time) {
+            toast.info(`起订时间${sevenDay.minimum_time}小时`)
+            return
+        }
+
+        // if (!digits(totalHour.value)) {
+        //     message.alert({
+        //         title: '提示',
+        //         msg: '选择时间段不满一小时按一小时算请合理选择时间',
+        //         confirmButtonText: '确定',
+        //         cancelButtonProps: {
+        //             customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
+        //         },
+        //         confirmButtonProps: {
+        //             customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
+        //         },
+        //     })
+        // }
+        showReservePopup.value = false
+
+        // 计算费用明细
+        costParams.value.hours = totalHour.value
+        Reserve.handleCost()
+    },
+}
+
+const billTotal = computed(() => {
+    const s = Number(bill.value.service.total) || 0
+    const t = Number(bill.value.travel.total) || 0
+    const ts = Number(bill.value.teaService.total) || 0
+
+    let total = Number(toPlus(s, t, ts))
+    if (bill.value.coupon > 0) {
+        total + bill.value.coupon
+        return total - bill.value.coupon
+    }
+    return total
+})
+
+watch(billTotal, (val) => {
+    bill.value.total = val
+})
+</script>
+
+<style lang="scss">
+page {
+    background-color: $cz-page-background;
+}
+
+.swiper {
+    :deep() {
+        .wd-swiper-nav__item--dots-bar {
+            width: 56rpx !important;
+            height: 6rpx !important;
+            border-radius: 3rpx !important;
+        }
+
+        .is-active {
+            background-color: #2B9F93 !important;
+        }
+    }
+}
+
+.pay {
+    :deep() {
+        .wd-radio {
+            margin-top: 0 !important;
+        }
+    }
+}
+
+.swiper-service {
+    content: " ";
+    display: block;
+    background-color: #4C9F44;
+    width: 152rpx;
+    height: 56rpx;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 20rpx;
+    transition: all 0.3s ease;
+    z-index: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/bundle/package/service.vue b/src/bundle/package/service.vue
new file mode 100644
index 0000000..6f246fa
--- /dev/null
+++ b/src/bundle/package/service.vue
@@ -0,0 +1,285 @@
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}</route>
+
+<template>
+    <view class="pb-100rpx">
+        <navbar title="选择服务方式" custom-class='!bg-[#F6F7F8]'></navbar>
+
+        <view class="pb-100rpx">
+            <view class="mx-30rpx mt-38rpx">
+                <!-- 服务方式 -->
+                <view class="bg-white rounded-16rpx px-30rpx py-28rpx">
+                    <view class="flex justify-between items-center">
+                        <view class="flex items-center">
+                            <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">服务方式</view>
+                        </view>
+
+                        <view class="flex items-center">
+                            <wd-radio-group v-model="serviceType" size="large" shape="dot" checked-color="#4C9F44"
+                                inline @change="Service.handleChangeServiceType">
+                                <wd-radio :value="1" border>
+                                    <view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">到店服务</view>
+                                </wd-radio>
+                                <wd-radio :value="2" border>
+                                    <view class="leading-36rpx font-400 text-30rpx ml-12rpx">上门服务</view>
+                                </wd-radio>
+                            </wd-radio-group>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="bg-white rounded-16rpx mt-30rpx px-30rpx py-28rpx mx-30rpx">
+                <!-- 商家信息 -->
+                <template v-if="serviceType === 1">
+                    <view class="text-34rpx font-bold leading-48rpx text-#303133">商家信息</view>
+                    <view class="mt-32rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="Service.upCallback"
+                            :up="upOption">
+                            <wd-radio-group v-model="storeIndex" size="large" shape="dot" checked-color="#4C9F44">
+                                <view v-for="(item, index) in list" :key="index">
+                                    <wd-radio :value="index">
+                                        <view class="flex items-center justify-between mb-32rpx">
+                                            <view class="mr-32rpx">
+                                                <wd-img width="80rpx" height='80rpx'
+                                                    :src="`${OSS}icon/icon_location3.png`"></wd-img>
+                                            </view>
+                                            <view class="flex-1">
+                                                <view class="text-left">{{ item.name }}</view>
+                                                <view
+                                                    class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
+                                                    <view class="w-136rpx line-1">距您{{ item.distance }}km</view>
+                                                    <view>
+                                                        <wd-divider vertical />
+                                                    </view>
+                                                    <view class="w-300rpx line-1">{{ item.address }}</view>
+                                                </view>
+                                            </view>
+                                        </view>
+                                    </wd-radio>
+                                </view>
+                            </wd-radio-group>
+                        </mescroll-body>
+                    </view>
+                </template>
+
+                <!-- 地址 -->
+                <template v-if="serviceType === 2">
+                    <view class="h-1088rpx">
+                        <view class="flex items-center justify-between">
+                            <view class="text-34rpx font-bold leading-48rpx text-#303133">地址</view>
+                            <view class="text-28rpx font-400 leading-40rpx text-#4C9F44"
+                                @click="Service.handleAddAddress">新增地址</view>
+                        </view>
+                        <view clas>
+                            <view v-if="addressList.length === 0">
+                                <!-- 地址为空显示 -->
+                                <view class="text-center">
+                                    <view class="mt-278rpx">
+                                        <wd-img width="290rpx" height='200rpx'
+                                            :src="`${OSS}images/h5/address/address_image1.png`"></wd-img>
+                                    </view>
+                                    <view class="font-500 text-32rpx leading-44rpx text-#909399 mt-50rpx">未填写收货地址</view>
+                                </view>
+                                <view
+                                    class="mt-36rpx bg-#fff text-#4C9F44 border-1rpx border-solid border-[#4C9F44] font-400 text-28rpx leading-40rpx mx-auto w-398rpx h-80rpx leading-80rpx text-center rounded-8rpx"
+                                    @click="Service.handleAddAddress">添加地址</view>
+                            </view>
+
+                            <!-- 地址列表 -->
+                            <view class="pt-22rpx" v-if="addressList.length > 0">
+                                <view class="rounded-16rpx p-34rpx box-border flex items-center mb-20rpx"
+                                    :class="addressIndex === index ? 'border-1rpx border-solid border-[#4C9F44] bg-#FAFFF9' : 'border-1rpx border-solid border-[#F6F7F8] bg-#F6F7F8'" 
+                                    v-for="(item, index) in addressList" :key="index">
+                                    <view @click="addressIndex = index">
+                                        <view class="flex items-center justify-between">
+                                            <view class="flex items-center">
+                                                <view class="mr-10rpx">
+                                                    <wd-tag color="#4C9F44" bg-color="#F3F3F3"
+                                                        custom-class="!rounded-4rpx !px-10rpx"
+                                                        v-if="item.is_default">默认</wd-tag>
+                                                </view>
+                                                <view class="flex items-center justify-between">
+                                                    <view class="text-30rpx leading-42rpx text-#303133">
+                                                        <text class="mr-16rpx">{{ item.contact }}</text>
+                                                        <text>{{ item.telephone }}</text>
+                                                    </view>
+                                                </view>
+                                            </view>
+
+                                            <view @click.stop="Service.handleAddAddress(item.id)">
+                                                <wd-icon name="edit-outline" size="32rpx" color="#666666"></wd-icon>
+                                            </view>
+                                        </view>
+                                        <view class="w-562rpx line-1 text-26rpx leading-34rpx text-#909399 mt-10rpx">{{
+                                            item.address }}</view>
+                                    </view>
+
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+
+                </template>
+            </view>
+        </view>
+        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center"
+            :style="{ height: '140rpx' }">
+            <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
+                <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="Service.handleNext">下一步
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
+import { router } from '@/utils/tools'
+import { getHomeTeaStoreList } from '@/api/tea-room'
+import type { ITeaHouseListResult } from '@/api/types/tea'
+import type { IUserAddressListResult } from '@/api/types/user'
+import { getUserAddress } from '@/api/user'
+
+const OSS = inject('OSS')
+
+// 服务方式
+const serviceType = ref<number>(1)
+const storeIndex = ref<number>(-1) // 选择的门店索引
+
+// 地址列表
+const addressList = ref<IUserAddressListResult[]>([])
+const addressIndex = ref<number>(-1)
+
+// 分页
+const list = ref<Array<any>>([])
+const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+const storeName = ref<string>('') // 搜索的门店名称
+const upOption = {
+    textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
+}
+
+onLoad((args) => {
+    // 初始化地址列表
+    Service.handleInitAddress()
+})
+
+const Service = {
+    // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
+    upCallback: (mescroll) => {
+        const filter = {
+            page: mescroll.num,
+            size: mescroll.size,
+            latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
+            longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
+            search: storeName.value
+        }
+
+        getHomeTeaStoreList(filter).then((res: ITeaHouseListResult) => {
+            const curPageData = res.list || [] // 当前页数据
+            if (mescroll.num == 1) list.value = [] // 第一页需手动制空列表
+            list.value = list.value.concat(curPageData) //追加新数据
+            mescroll.endSuccess(curPageData.length, Boolean(res.more))
+        }).catch(() => {
+            mescroll.endErr() // 请求失败, 结束加载
+        })
+    },
+
+    /**
+     * 初始化地址列表
+     */
+    handleInitAddress: async () => {
+        const res = await getUserAddress()
+        addressList.value = Array.isArray(res) ? res : []
+    },
+
+    /**
+     * 跳转地址添加/编辑页面
+     * @param id 地址ID，0表示添加，非0表示编辑
+     */
+    handleAddAddress: (id: number = 0) => {
+        uni.$on('refreshAddressList', () => {
+            Service.handleInitAddress()
+            uni.$off('refreshAddressList')
+        })
+
+        if (id > 0) {
+            router.navigateTo(`/bundle_b/pages/tea-specialist/address/add?id=${id}`)
+        } else {
+            router.navigateTo('/bundle_b/pages/tea-specialist/address/add')
+        }
+    },
+
+    /**
+     * 切换服务方式
+     */
+    handleChangeServiceType: () => {
+        // 切换服务方式时重置选择
+        storeIndex.value = -1
+        addressIndex.value = -1
+    },
+
+    handleNext: () => {
+        let address = {}
+
+        if (serviceType.value === 1) {
+            // 到店服务
+            if (storeIndex.value === -1) {
+                uni.showToast({
+                    title: '请选择门店',
+                    icon: 'none'
+                })
+                return
+            }
+
+            const selectedStore = list.value[storeIndex.value]
+            address = {
+                serviceType: 1, // 服务方式：1-到店服务
+                id: selectedStore.id, // 门店ID
+                name: selectedStore.name, // 门店名称
+                image: selectedStore.image, // 门店图片
+                address: selectedStore.address, // 门店地址
+                longitude: selectedStore.longitude, // 门店经度
+                latitude: selectedStore.latitude, // 门店纬度
+            }
+        } else {
+            // 上门服务
+            if (addressIndex.value === -1) {
+                uni.showToast({
+                    title: '请选择地址',
+                    icon: 'none'
+                })
+                return
+            }
+
+            const selectedAddress = addressList.value[addressIndex.value]
+            address = {
+                serviceType: 2, // 服务方式：2-上门服务
+                id: selectedAddress.id, // 地址ID
+                name: selectedAddress.contact, // 联系人名称
+                image: '', // 地址图片
+                telephone: selectedAddress.telephone, // 联系人电话
+                address: selectedAddress.address, // 地址
+                longitude: selectedAddress.longitude, // 地址经度
+                latitude: selectedAddress.latitude, // 地址纬度
+                is_default: selectedAddress.is_default // 是否默认地址
+            }
+        }
+
+        uni.setStorageSync('selectedPackageService', address) // 将选择的服务信息存储到本地，供下一个页面使用
+        router.navigateTo('/bundle/package/tea-specialist')
+    }
+}
+</script>
+
+<style lang="scss">
+page {
+    background: $cz-page-background;
+}
+</style>
diff --git a/src/bundle/package/tea-specialist.vue b/src/bundle/package/tea-specialist.vue
new file mode 100644
index 0000000..8d0c459
--- /dev/null
+++ b/src/bundle/package/tea-specialist.vue
@@ -0,0 +1,197 @@
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}</route>
+
+<template>
+    <view class="pb-160rpx min-h-100vh bg-[#fff]">
+        <navbar title="选择茶艺师" custom-class='!bg-[#fff]'></navbar>
+
+        <!-- 茶艺师列表部分 -->
+        <view class="bg-[#fff] px-30rpx pt-20rpx pb-40rpx">
+            <view class="text-30rpx font-bold text-[#303133]">茶艺师</view>
+            <view class="text-24rpx text-[#818CA9] mt-12rpx mb-32rpx font-500">匹配心动茶艺师</view>
+
+            <view class="flex flex-wrap justify-between">
+                <view class="w-216rpx mb-30rpx relative" v-for="(item, index) in list" :key="index"
+                    @click="TeaSpecialist.handleSelect(index)">
+                    <view class="relative w-216rpx h-216rpx rounded-16rpx overflow-hidden">
+                        <wd-img :src="item.avatar" width="216rpx" height="216rpx" mode="aspectFill"></wd-img>
+                        <view class="absolute bottom-0 left-0 z-10">
+                            <!-- 选中的样式 -->
+                            <view
+                                class="w-40rpx h-40rpx rounded-full bg-[#4C9F44] flex items-center justify-center border-2rpx border-solid border-[#4C9F44]"
+                                v-if="selectedIndex === index">
+                                <wd-icon name="check-bold" size="24rpx" color="#fff"></wd-icon>
+                            </view>
+                            <!-- 未选中的样式 -->
+                            <view
+                                class="w-40rpx h-40rpx rounded-full bg-[rgba(255,255,255,0.9)] border-2rpx border-solid border-[#d4d4d4]"
+                                v-else></view>
+                        </view>
+                    </view>
+                    <view class="text-28rpx text-[#2A3B56] mt-12rpx line-1">{{ item.name }}</view>
+                    <view class="text-24rpx text-[#F55B02] mt-6rpx">{{ item.level }}</view>
+                </view>
+            </view>
+
+            <view class="flex justify-center mt-10rpx">
+                <view class="flex items-center justify-center bg-[#F6F7F8] rounded-34rpx h-100rpx w-320rpx"
+                    @click="TeaSpecialist.handleMore">
+                    <wd-img :src="`${OSS}icon/icon_more.png`" width="36rpx" height="36rpx"></wd-img>
+                    <text
+                        class="text-26rpx text-[#606266] ml-24rpx mr-8rpx font-400 text-28rpx leading-40rpx">查看更多</text>
+                    <wd-icon name="arrow-down" size="28rpx" color="#606266"></wd-icon>
+                </view>
+            </view>
+        </view>
+
+        <!-- 茶艺师详细信息模块 -->
+        <view class="mx-28rpx mt-20rpx mb-30rpx relative border-2rpx border-solid border-[#F6F4F4]" v-if="selectedSpecialist">
+            <view class="flex justify-between items-start bg-[#F5F7FF] rounded-t-16rpx p-30rpx">
+                <view>
+                    <view class="text-36rpx font-bold text-[#303133] mb-12rpx">{{ selectedSpecialist.name }}</view>
+                    <view class="text-28rpx text-[#120D26] mb-12rpx">{{ selectedSpecialist.title }}</view>
+                    <view class="flex items-center text-24rpx text-[#909399] mb-16rpx">
+                        <wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"
+                            class="mr-8rpx"></wd-img>
+                        <text>商家认证的名称</text>
+                    </view>
+                    <view class="flex items-center">
+                        <wd-rate v-model="selectedSpecialist.rating" readonly active-color="#FF5951" allow-half
+                            active-icon="star-filled" icon="star" space="4rpx" />
+                        <text class="text-24rpx text-[#606266] ml-10rpx">{{ selectedSpecialist.rating }} 推荐</text>
+                    </view>
+                </view>
+                <view class="w-120rpx h-120rpx" @click="TeaSpecialist.handleChat">
+                    <wd-img :src="`${OSS}icon/icon_msg.png`" width="120rpx" height="120rpx" placeholder="icon"></wd-img>
+                </view>
+            </view>
+
+            <view class="bg-[#FCFCFE] rounded-b-16rpx p-30rpx">
+                <!-- 服务方式 -->
+      
+                <view class="bg-[#EBFBF7] h-64rpx rounded-12rpx p-14rpx flex items-center mt-22rpx text-[#35C1A0]">
+                    <wd-img :src="`${OSS}icon/icon_heart.png`" width="36rpx" height="36rpx"></wd-img>
+                    <text class="font-bold text-24rpx leading-34rpx ml-16rpx">服务方式</text>
+                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx">到店服务</text>
+                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx">上门服务</text>  
+                    <!-- <text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 1 || info.server_type == 3">到店服务</text>
+                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2 || info.server_type == 3">上门服务</text> -->
+                </view>
+
+                <!-- 基本属性 -->
+                <view class="mt-36rpx grid grid-cols-2 gap-y-24rpx px-10rpx">
+                    <view class="flex items-center text-28rpx text-[#606266]">
+                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_gender.png`"
+                            class="mr-16rpx"></wd-img>
+                        <text class="mr-16rpx">性别:</text>
+                        <text class="text-[#303133]">女</text>
+                    </view>
+                    <view class="flex items-center text-28rpx text-[#606266]">
+                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_born.png`"
+                            class="mr-16rpx"></wd-img>
+                        <text class="mr-16rpx">年龄:</text>
+                        <text class="text-[#303133]">21岁</text>
+                    </view>
+                    <view class="flex items-center text-28rpx text-[#606266]">
+                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_height.png`"
+                            class="mr-16rpx"></wd-img>
+                        <text class="mr-16rpx">身高:</text>
+                        <text class="text-[#303133]">165cm</text>
+                    </view>
+                    <view class="flex items-center text-28rpx text-[#606266]">
+                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_weight.png`"
+                            class="mr-16rpx"></wd-img>
+                        <text class="mr-16rpx">体重:</text>
+                        <text class="text-[#303133]">53kg</text>
+                    </view>
+                </view>
+
+                <!-- 标签 -->
+                <view class="mt-36rpx border border-solid border-[#F0F2F5] rounded-14rpx p-24rpx pb-8rpx bg-[#FFFFFF]">
+                    <view class="flex flex-wrap">
+                        <view class="flex flex-wrap items-center">
+                            <view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx">123</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 底部按钮 -->
+        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center"
+            :style="{ height: '140rpx' }">
+            <view class="text-32rpx flex items-center justify-center leading-90rpx text-center w-full px-60rpx">
+                <view class="flex-1 w-full h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="TeaSpecialist.handleNext">下一步</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref, computed } from 'vue'
+import { router } from '@/utils/tools'
+
+const OSS = inject('OSS')
+
+// 模拟数据列表
+const list = ref([
+    { name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=1', rating: 4.5 },
+    { name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=2', rating: 4.8 },
+    { name: '夏雪', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=3', rating: 5.0 },
+    { name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=4', rating: 4.2 },
+    { name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=5', rating: 4.5 },
+    { name: '夏雪', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=6', rating: 4.5 }
+])
+
+const selectedIndex = ref(0)
+const selectedSpecialist = computed(() => list.value[selectedIndex.value])
+
+const TeaSpecialist = {
+    /**
+     * 选中某个茶艺师
+     */
+    handleSelect: (index: number) => {
+        selectedIndex.value = index
+    },
+
+    /**
+     * 加载更多茶艺师
+     */
+    handleMore: () => {
+        uni.showToast({
+            title: '加载更多',
+            icon: 'none'
+        })
+    },
+
+    /**
+     * 点击聊天
+     */
+    handleChat: () => {
+        uni.showToast({
+            title: '打开聊天',
+            icon: 'none'
+        })
+    },
+
+    /**
+     * 下一步
+     */
+    handleNext: () => {
+        router.navigateTo('/bundle/package/reserve?id=439')
+    }
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+page {
+    background-color: #fff;
+}
+</style>
diff --git a/src/bundle/reserve-group/reserve-group.vue b/src/bundle/reserve-group/reserve-group.vue
index 081fa18..42238cc 100644
--- a/src/bundle/reserve-group/reserve-group.vue
+++ b/src/bundle/reserve-group/reserve-group.vue
@@ -50,14 +50,14 @@
                     <view class="text-32rpx leading-44rpx text-#303133">
                         预定日期 <text class="text-[#FF3B30] ml-10rpx">*</text>
                     </view>
-                    <wd-calendar v-model="form.reserve_date" type="date" :min-date="minDate" use-default-slot @confirm="TeaRoom.handleConfirmDate">
+                    <wd-datetime-picker v-model="form.reserve_date" type="date" :min-date="minDate" :max-date="maxDate" use-default-slot @confirm="TeaRoom.handleConfirmDate">
                         <view class="flex items-center">
                             <view class="text-30rpx mr-8rpx" :class="form.reserve_date ? 'text-#303133' : 'text-#C9C9C9'">
                                 {{ reserveDateStr || '请选择' }}
                             </view>
                             <wd-icon name="arrow-right" size="32rpx" color="#C9C9C9"></wd-icon>
                         </view>
-                    </wd-calendar>
+                    </wd-datetime-picker>
                 </view>
             </view>
 
@@ -216,9 +216,10 @@ const status = ref<number>(-1) // 0待审核 1审核成功 2审核失败 3未提
 const reserveDateStr = computed(() => {
     if (!form.value.reserve_date) return ''
     const d = new Date(form.value.reserve_date)
-    return `${d.getMonth() + 1}月${d.getDate()}日`
+    return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
 })
 const minDate = ref<number>(new Date(new Date().setHours(0, 0, 0, 0)).getTime())
+const maxDate = ref<number>(new Date(new Date().getFullYear(), 11, 31, 23, 59, 59).getTime())
 
 onLoad(async () => {
     const res = await getJoinCooperationStatus()
diff --git a/src/bundle_b/pages/tea-specialist/reserve.vue b/src/bundle_b/pages/tea-specialist/reserve.vue
index a80fc06..81a2af8 100644
--- a/src/bundle_b/pages/tea-specialist/reserve.vue
+++ b/src/bundle_b/pages/tea-specialist/reserve.vue
@@ -231,7 +231,7 @@
             <!-- 茶艺师信息 -->
             <view class="flex items-center bg-white p-20rpx rounded-10rpx mb-20rpx mt-20rpx">
                 <view class="mr-28rpx relative">
-                    <wd-img width="200rpx" height="200rpx" :src="info.image"></wd-img>
+                    <wd-img width="200rpx" height="200rpx" radius="10rpx" :src="info.image"></wd-img>
                 </view>
                 <view class="">
                     <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
diff --git a/src/pages.json b/src/pages.json
index 43da96e..b299d36 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -251,6 +251,33 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "package/reserve",
+          "type": "page",
+          "needLogin": true,
+          "layout": "tabbar",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "package/service",
+          "type": "page",
+          "needLogin": true,
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "package/tea-specialist",
+          "type": "page",
+          "needLogin": true,
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "profile/profile",
           "type": "page",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 0cddbeb..c714eaa 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -67,7 +67,8 @@
 			</view>
 
 			<view class="mx-30rpx pb-30rpx flex justify-between">
-				<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #EAFFF9 0%, #F6F7F9 100%);">
+				<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #EAFFF9 0%, #F6F7F9 100%);"
+				@click="router.navigateTo(`/bundle/package/detail`)">
 					<view class="px-10rpx pt-10rpx flex justify-center">
 						<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_16.png`" radius="16rpx" mode="aspectFill" />
 					</view>
diff --git a/src/pages/notice/reserve.vue b/src/pages/notice/reserve.vue
index 9d06fe7..086c51e 100644
--- a/src/pages/notice/reserve.vue
+++ b/src/pages/notice/reserve.vue
@@ -35,6 +35,15 @@
 					</template>
 				</reserve-notice>
 			</view>
+			<view v-if="type == OrderType.ReserveGroup">
+				<reserve-notice title="团体茶艺师预约成功" desc="团体茶艺师预约成功">
+					<template #layout>
+						<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
+							<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-632rpx' @click="reserve.handleRoomDone">完成</view>
+						</view>
+					</template>
+				</reserve-notice>
+			</view>
 		</view>
 	</view>
 	
diff --git a/src/utils/order.ts b/src/utils/order.ts
index c66b3f0..c819778 100644
--- a/src/utils/order.ts
+++ b/src/utils/order.ts
@@ -210,6 +210,7 @@ export const TeaSpecialistOrderStatusValue: Record<TeaSpecialistOrderStatusText,
 export const OrderType = {
     TeaRoomOrder: 'teaRoomOrder',
     TeaSpecialist: 'teaSpecialist',
+    ReserveGroup: 'reserveGroup',
 }
 
 // 包间订单状态数字(根据UI图还缺已退款、待接单、售后中、售后完成)