diff --git a/package.json b/package.json
index 79295bb..02c41f2 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "abortcontroller-polyfill": "^1.7.8",
     "alova": "^3.3.3",
     "dayjs": "1.11.10",
+    "decimal.js": "^10.6.0",
     "echarts": "^6.0.0",
     "js-cookie": "^3.0.5",
     "jweixin-1.6.0": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index deb6fb2..a4509f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -85,6 +85,9 @@ importers:
       dayjs:
         specifier: 1.11.10
         version: 1.11.10
+      decimal.js:
+        specifier: ^10.6.0
+        version: 10.6.0
       echarts:
         specifier: ^6.0.0
         version: 6.0.0
diff --git a/src/api/tea.ts b/src/api/tea.ts
index f807b44..f35fa8e 100644
--- a/src/api/tea.ts
+++ b/src/api/tea.ts
@@ -1,5 +1,5 @@
 import { http } from '@/http/alova'
-import type { ITeaSpecialistDetailsResult, ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
+import type { ITeaSpecialistDetailsResult, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
 
 /**
  * 获取茶艺师详情
diff --git a/src/api/types/tea.ts b/src/api/types/tea.ts
index 19b3799..4a86e43 100644
--- a/src/api/types/tea.ts
+++ b/src/api/types/tea.ts
@@ -56,4 +56,15 @@ export interface ITeaHouseListResult {
 export interface ITeaSpecialistFuture7DaysResult {
     minimum_time: number
     time: Array<any>
+}
+
+/**
+ * 茶叶类型列表
+ */
+export interface ITeaTypeListResult {
+    id: number
+    name: string
+    status: number
+    tea_price: number
+    dtime: string
 }
\ No newline at end of file
diff --git a/src/api/types/user.ts b/src/api/types/user.ts
index bf34fd6..1080b4f 100644
--- a/src/api/types/user.ts
+++ b/src/api/types/user.ts
@@ -39,4 +39,12 @@ export interface IUserAddressListResult {
  */
 export interface IUserAddressDetailsResult extends IUserAddressListResult {
     address_details: IUserAddressListResult
+}
+
+/**
+ * 优惠券列表
+ */
+export interface IUserCouponListResult {
+    no_use: Array<any>
+    use: Array<any>
 }
\ No newline at end of file
diff --git a/src/api/user.ts b/src/api/user.ts
index c475a10..4b6b0e1 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,5 +1,5 @@
 import { http } from '@/http/alova'
-import type { IUserAddressListResult, IUserAddressDetailsResult } from '@/api/types/user'
+import type { IUserAddressListResult, IUserAddressDetailsResult, IUserCouponListResult } from '@/api/types/user'
 
 
 /**
@@ -74,3 +74,15 @@ export interface IUserAddressDetailsParams extends IDeleteUserAddressParams {}
 export function userAddressDetails(data: IUserAddressDetailsParams) {
     return http.Post<IUserAddressDetailsResult>('/api/user/addressDetails', data)
 }
+
+/**
+ * 优惠券列表
+ */
+export interface IGetCouponsParams {
+    id: number
+    numbers: number
+}
+
+export function getCoupons(data: IGetCouponsParams) {
+    return http.Post<IUserCouponListResult>('/api/UserCoupon/UserCoupinList', data)
+}
\ No newline at end of file
diff --git a/src/bundle/coupon/coupon.vue b/src/bundle/coupon/coupon.vue
index 4418f30..df6f1a4 100644
--- a/src/bundle/coupon/coupon.vue
+++ b/src/bundle/coupon/coupon.vue
@@ -10,7 +10,7 @@
 <template>
     <view class="pb-180rpx">
         <view>
-			<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]'></navbar>
+			<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]' :left-arrow="false"></navbar>
 		</view>
 
         <view>
@@ -20,19 +20,19 @@
                     <view class="mx-30rpx">
                         <view class="mx30rpx">
                             <text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
-                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
+                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
                         </view>
                         <view class="mt-28rpx radio">
                             <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                                 <coupon
-                                    v-for="(item, index) in couponList"
+                                    v-for="(item, index) in couponList.use"
                                     :key="item.id"
                                     :coupon="item"
                                     canUse
                                     showChecked
                                     :checked="item.id === checkedId"
-                                    :onCheck="coupons.handleCheck"
-                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
+                                    :onCheck="Coupons.handleCheck"
+                                    :class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
                                 ></coupon>
                             </wd-radio-group>
                         </view>
@@ -40,73 +40,31 @@
                     <view class="mx-30rpx">
                         <view class="mx30rpx">
                             <text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
-                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
+                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
                         </view>
                         <view class="mt-28rpx radio">
                             <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                                 <coupon
-                                    v-for="(item, index) in unCouponList"
+                                    v-for="(item, index) in couponList.no_use"
                                     :key="item.id"
                                     :coupon="item"
                                     :canUse="false"
                                     showChecked
                                     :checked="item.id === checkedId"
-                                    :onCheck="coupons.handleCheck"
-                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
+                                    :onCheck="Coupons.handleCheck"
+                                    :class="index !== couponList.no_use.length - 1 ? 'mb-20rpx' : ''"
                                 ></coupon>
                             </wd-radio-group>
                         </view>
                     </view>
                 </view>
-
-                <!-- 团购券 -->
-                <view v-if="couponType == 2">
-                    <view class="mx-30rpx">
-                        <view class="mx30rpx">
-                            <text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用团购券</text>
-                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
-                        </view>
-                        <view class="mt-28rpx radio">
-                            <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
-                                <group-coupon
-                                    v-for="(item, index) in couponList"
-                                    :key="item.id"
-                                    :coupon="item"
-                                    canUse
-                                    :checked="item.id === checkedId"
-                                    :onCheck="coupons.handleCheck"
-                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
-                                ></group-coupon>
-                            </wd-radio-group>
-                        </view>
-                    </view>
-                    <view class="mx-30rpx">
-                        <view class="mx30rpx">
-                            <text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用团购券</text>
-                            <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
-                        </view>
-                        <view class="mt-28rpx radio">
-                            <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
-                                <group-coupon
-                                    v-for="(item, index) in unCouponList"
-                                    :key="item.id"
-                                    :coupon="item"
-                                    :canUse="false"
-                                    :checked="item.id === checkedId"
-                                    :onCheck="coupons.handleCheck"
-                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
-                                ></group-coupon>
-                            </wd-radio-group>
-                        </view>
-                    </view>
-                </view>
             </view>
         </view>
 
         <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
-            <view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
+            <view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择 {{ checkedId ? 1 : 0 }}张</view>
             <view class="mr-30rpx">
-                <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
+                <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
             </view>
         </view>
     </view>
@@ -116,31 +74,47 @@
     import {ref} from 'vue'
     import Coupon from '@/components/coupon/Coupon.vue'
     import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
+    import { getCoupons } from '@/api/user'
+    import type { IUserCouponListResult } from '@/api/types/user'
 
     const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
 	const OSS = inject('OSS')
 
-    const couponList = ref([
-        { id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
-        { id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
-    ])
+    const couponList = ref<IUserCouponListResult>({
+        no_use: [],
+        use: []
+    })
     const checkedId = ref<number>(0)
 
-    const unCouponList = ref([
-        { id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
-        { id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
-    ])
-
     onLoad((args) => {
         if (args.type) {
             couponType.value = args.type
         }
+
+        if (args.id && args.time) {
+            // 获取到茶艺师ID和预定了几个小时
+            Coupons.handleInit(args.id, args.time)
+        }
     })
 
-    const coupons = {
-        handleCheck: (id: number) => {
+    const Coupons = {
+        // 初始化优惠券列表
+        handleInit: async (id: number, numbers: number) => {
+            const res = await getCoupons({id, numbers})
+            couponList.value = res
+        },
+
+        // 选择优惠券
+        handleCheck: (id: any) => {
             checkedId.value = id
             console.log("🚀 ~ checkedId.value :", checkedId.value )
+        },
+
+        // 确认选择优惠券
+        handleConfirmCoupon: () => {
+            const coupon = couponList.value.use.find(item => item.user_coupon_id === checkedId.value)
+            uni.$emit('chooseCoupon', { coupon })
+            uni.navigateBack()
         }
     }
 </script>
diff --git a/src/components/coupon/Coupon.vue b/src/components/coupon/Coupon.vue
index 4cc4fd4..feefa87 100644
--- a/src/components/coupon/Coupon.vue
+++ b/src/components/coupon/Coupon.vue
@@ -1,20 +1,20 @@
 <template>
-    <view class="mb-20rpx" @click="onCheck(coupon.id)">
+    <view class="mb-20rpx" @click="onCheck(coupon.user_coupon_id)">
         <view class="coupon h-210rpx flex items-center">
             <view class="w-260rpx h-[100%] rounded-l-16rpx rounded-tr-0 rounded-br-0 flex flex-col items-center justify-center" :class="canUse ? 'bg-[#4C9F44]' : 'bg-[#F2F2F2]'">
                 <view class="flex" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">
-                    <view class="text-72rpx leading-100rpx">{{ coupon.amount }}</view>
+                    <view class="text-52rpx leading-100rpx">{{ coupon.coupon_price }}</view>
                     <view class="text-32rpx leading-44rpx mt-40rpx ml-10rpx">元</view>
                 </view>
-                <view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满120元可用</view>
+                <view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满{{ coupon.use_price }}元可用</view>
             </view>
             <view class="bg-[#fff] w-490rpx h-[100%] rounded-r-16rpx rounded-tl-0 rounded-bl-0 flex justify-between items-center">
                 <view class="ml-30rpx line-1">
-                    <view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">茶室优惠</view>
-                    <view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 2022-08-12</view>
+                    <view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">{{ coupon.title }}</view>
+                    <view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 {{ coupon.effect_time }}</view>
                 </view>
                 <view class="h-100% mr-70rpx mt-58rpx" v-if="showChecked">
-                    <wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
+                    <wd-radio :value="coupon.user_coupon_id" shape="dot" :disabled="!canUse"></wd-radio>
                 </view>
             </view>
         </view>
@@ -30,9 +30,11 @@
     defineProps<{
         coupon: {
             id: number
-            amount: number
-            limit: number
-            expire: string
+            coupon_price: number
+            use_price: number
+            title: string
+            effect_time: string
+            user_coupon_id: number
         }
         canUse: boolean
         showChecked: boolean
diff --git a/src/pages/reserve/tea-room.vue b/src/pages/reserve/tea-room.vue
index 904944b..73c349d 100644
--- a/src/pages/reserve/tea-room.vue
+++ b/src/pages/reserve/tea-room.vue
@@ -15,29 +15,59 @@
                 </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 class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
-                        <view>茶室费</view>
-                        <view>￥640.00</view>
+                    <!-- 服务费 -->
+                    <view>
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                            <view>服务费</view>
+                            <view>￥{{ bill.service.total }}</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>服务费（￥{{ bill.service.unitPrice }}元/小时）</view>
+                            <view>x{{ bill.service.num }}</view>
+                        </view>
                     </view>
 
-                    <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
-                        <view>茶室费（￥160元/小时）</view>
-                        <view>x4</view>
+                    <!-- 车马费 -->
+                    <view>
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
+                            <view>车马费</view>
+                            <view>￥{{ bill.travel.total }}</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>车马费（￥{{ bill.travel.unitPrice }}元/小时）</view>
+                            <view>{{ bill.travel.num }}公里</view>
+                        </view>
                     </view>
 
+                    <!-- 茶艺服务 -->
+                    <view>
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx  mt-52rpx">
+                            <view>茶艺服务</view>
+                            <view>{{ bill.serviceFee }}</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>车马费（￥160元/小时）</view>
+                            <view>x4</view>
+                        </view>
+
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>车马费（￥160元/小时）</view>
+                            <view>x4</view>
+                        </view>
+                    </view>
+ 
                     <view class="mt-52rpx">
                         <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
-                            <view>茶室费</view>
+                            <view>优惠</view>
                             <view class="text-[#4C9F44]">-￥640.00</view>
                         </view>
                         <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
                             <view>优惠券</view>
                             <view>-￥20</view>
                         </view>
-                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
-                            <view>优惠券</view>
-                            <view>-￥20</view>
-                        </view>
                     </view>
 
                     <view class="my-30rpx">
@@ -81,35 +111,6 @@
             </view>
         </wd-popup>
 
-        <!-- 选择门店 -->
-        <!-- <wd-popup v-model="showTeaHousePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
-            <view class="relative">
-                <view class="absolute top-18rpx right-30rpx" @click="showTeaHousePopup = 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-500rpx  pb-20rpx">
-                    <view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
-                        <view class="flex items-center justify-between mb-66rpx" @click="TeaRoom.handleChooseTeaHouse(item)">
-                            <view class="mr-32rpx">
-                                <wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
-                            </view>
-                            <view class="flex-1">
-                                <view>这是茶馆名字</view>
-                                <view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
-                                    <view>距您5.3km</view>
-                                    <view>
-                                        <wd-divider vertical />
-                                    </view>
-                                    <view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
-                                </view>
-                            </view>
-                        </view>
-                    </view>
-                </scroll-view>
-            </view>
-        </wd-popup> -->
-
         <!-- 茶艺服务 -->
         <wd-popup v-model="showTeaServicePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
             <view class="relative">
@@ -133,17 +134,18 @@
                         <!-- 预定茶叶 -->
                         <view class="mx-60rpx mb-50rpx">
                             <view class="text-32rpx leading-44rpx text-#303133">
-                                <text class="mr-20rpx">服务人数</text>
+                                <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 class="text-28rpx leading-40rpx rounded-8rpx text-center py-14rpx"
-                                        :class="selectedTea.includes(item.id) ? 'bg-#4C9F44 text-#fff' : 'bg-#F7F7F7 text-#606266'"
+                                    <view
                                         v-for="(item, index) in teaList" :key="index"
-                                        @click="TeaRoom.handleToggleTea(item.id)">
+                                        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="TeaRoom.handleToggleTea(item.id, item.name, item.tea_price)">
                                             <view>{{item.name}}</view>
-                                            <view>￥{{item.price}}</view>
+                                            <view>￥{{item.tea_price}}</view>
                                     </view>
                                 </view>
                             </view>
@@ -156,7 +158,7 @@
                                 <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>
+                                        <wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline @change="TeaRoom.handleChangeTeaUsage">
                                             <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>
@@ -175,13 +177,13 @@
                             <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="23.02"></price-format>
+                                    <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="totalSelectedTeaPrice"></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">重置</view>
-                                <view class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx">确定</view>
+                                <view class="w-178rpx h-70rpx leading-70rpx text-center bg-#F6F7F8 text-#303133 rounded-8rpx mr-20rpx" @click="TeaRoom.handleResetTeaService">重置</view>
+                                <view class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx" @click="TeaRoom.handleConfirmTeaService">确定</view>
                             </view>
                         </view>
                     </view>
@@ -287,8 +289,13 @@
                 <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">
-                            {{ teaService.name || '请选择' }}
+                        <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>
@@ -307,12 +314,19 @@
             </view>
 
             <!-- 优惠券 -->
-            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="TeaRoom.handleToCoupon(1)">
+            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="TeaRoom.handleToCoupon(CouponType.Discount)">
                 <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">无可用</view>
+                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
+                            <template v-if="selectedCoupon?.id > 0">
+                                {{ selectedCoupon.name  }}
+                            </template>
+                            <template v-else>
+                                请选择
+                            </template>
+                        </view>
                         <view>
                             <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                         </view>
@@ -331,7 +345,7 @@
                     <view class="flex items-center ml-60rpx">
                         <view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
                         <view class="flex items-center h-56rpx mr-16rpx">
-                            <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
+                            <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
                             <view class="ml-20rpx" v-if="isGroupBuying">
                                 <price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
                             </view>
@@ -351,17 +365,18 @@
 </template>
 
 <script lang="ts" setup>
-    import {toast} from '@/utils/toast'
-    import {router} from '@/utils/tools'
+    import { toast } from '@/utils/toast'
+    import { router, toTimes, toPlus } from '@/utils/tools'
     import PriceFormat from '@/components/PriceFormat.vue'
     import {ReserveServiceCategory} from '@/utils/order'
     import { PayList, PayCategory, PayValue } from '@/utils/pay'
     import Pay from '@/components/Pay.vue'
     import { getTeaSpecialistDetails, getNext7Days, getTeaTypeList } from '@/api/tea'
-    import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
+    import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
 	import { TeaSpecialistLevelValue } from '@/utils/teaSpecialist'
     import type { IUserAddressListResult } from '@/api/types/user'
     import BookingTime from '@/components/BookingTime.vue'
+    import { CouponType } from '@/utils/coupon'
 
 	const OSS = inject('OSS')
 
@@ -374,11 +389,10 @@
 
     // 选择茶馆
     const teaHouse = ref<{id: number, name: string}>({id: 0, name: ''})
-    const showTeaHousePopup = ref<boolean>(false) // 显示门店列表弹窗
 
     // 选择预定时间
     const showBookTimePopup = ref<boolean>(false)
-    let sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
+    const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
         minimum_time: 0,
         time: []
     })
@@ -402,34 +416,16 @@
     const teaService = ref<{id: number, name: string}>({id: 0, name: ''})
     const showTeaServicePopup = ref<boolean>(false) // 显示门店列表弹窗
     const servicePeople = ref<number>(1) // 服务人数
-    const teaList = ref<Array<any>>([
-        {
-            id: 1,
-            name: '红茶(3泡)',
-            price: 1
-        },
-        {
-            id: 2,
-            name: '绿茶(3泡)',
-            price: 2
-        },
-        {
-            id: 3,
-            name: '乌龙茶(3泡)',
-            price: 13
-        },
-        {
-            id: 4,
-            name: '普洱茶(3泡)',
-            price: 4
-        }
-    ])
+    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: 1, name: '到店服务'},
-        {type: 2, name: '上门服务'},
+        {type: 1, name: '客户自备'},
+        {type: 2, name: '茶艺师提供'},
     ])
     const teaUsageValue =  ref<number>(1) 
     
@@ -447,7 +443,7 @@
     const showPayPopup = ref<boolean>(false) // 支付popup
 
     // 茶艺师
-    const id = ref<number>(0)
+    const teaSpecialistId = ref<number>(0)
     const info = reactive<ITeaSpecialistDetailsFields>({ 
         name: '',
         star: 0,
@@ -464,6 +460,32 @@
     })
     const is90 = ref<boolean>(false)
 
+    // 选择的优惠券
+    const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
+
+    // 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券)
+    const bill = ref<{service: any, travel: any, teaService: any, coupon: number, total: number}>({
+        service: {
+            total: 0,
+            unitPrice: 0,
+            num: 0
+        },
+        travel: {
+            total: 0,
+            unitPrice: 0,
+            num: 0
+        },
+        teaService: {
+            total: 0,
+            tea: '',
+            teaTotal: 0,
+            cup: 0,
+            peopleNum: 0
+        },
+        coupon: 0,
+        total: 0
+    })
+
     // 提交的数据
     const reserveTime = ref<Array<any>>([])
 
@@ -474,6 +496,8 @@
         }
 
         if (args.id) {
+            teaSpecialistId.value = Number(args.id)
+
             const res = await getTeaSpecialistDetails({
                 id: args.id,
                 longitude: 0,
@@ -488,43 +512,68 @@
                         is90.value = true
                     }
                 })
+
+                bill.value.travel = {
+                    total: toTimes(info.fare_price, info.distance),
+                    unitPrice: info.fare_price,
+                    num: info.distance
+                }
             }
         }
 
-        // 获取未来7天时间段
-        const next7 = await getNext7Days()
-        Object.assign(sevenDay, next7)
-
-    
+        // 初始化数据
+        TeaRoom.handleInit()
 	})
 
-    const TeaRoom = {
+    const TeaRoom = {   
+        handleInit: async () => {
+            // 获取未来7天时间段
+            const next7 = await getNext7Days()
+            Object.assign(sevenDay, next7)
+
+            const tea = await getTeaTypeList()
+            teaList.value = tea as ITeaTypeListResult[]
+            console.log("🚀 ~ teaList.value:", teaList.value)
+        },
 
         handleClick: (item: any) => {
 			// 处理点击事件
 			console.log('Clicked item:', item)
 		},
 
-        // 跳转优惠券页面
-        handleToCoupon(type) {
-            // 1：优惠券 2：团购券
-            uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
-        },
-
         handlePay: () => {
             // 这里需要判断下如果是预约的话，跳转结果通知是reserve的，团购是pay的
             // uni.navigateTo({ url: '/bundle/reserve-room/result' })
         },
+        
 
-        handleToggleTea: (id: number) => {
+        // 切换预定茶叶选择
+        handleToggleTea: (id: number, name: string, price: number) => {
             const index = selectedTea.value.indexOf(id)
             if (index > -1) {
                 // 已选择，取消选择
                 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)
             }
+
+            totalSelectedTeaPrice.value = toPlus(selectedTeaPrice.value)
+        },
+
+        // 切换茶具需求
+        handleChangeTeaUsage: () => {
+            // TODO 这边需要加上或减去茶具费用
+            // if (teaUsageValue.value == 2) {
+            //     totalSelectedTeaPrice.value += toTimes(160, servicePeople.value)
+            // } else {
+            //     totalSelectedTeaPrice.value = toMinus(selectedTeaPrice.value)
+            // }
+            console.log("🚀 ~ teaUsageValue:", teaUsageValue.value)
         },
 
         // 选择门店
@@ -547,9 +596,51 @@
         
         // 选中预定时间
         handleChooseReserveTime: (params: any) => {
-            console.log("🚀 ~ params:", params)
+            bill.value.service = {
+                total: toTimes(info.price, params[1].length),
+                unitPrice: info.price,
+                num: params[1].length
+            },
             reserveTime.value = params
         },
+        
+        // 跳转优惠券页面
+        handleToCoupon(type) {
+            uni.$on('chooseCoupon', params => {
+                uni.$off('chooseCoupon')
+                console.log("🚀 ~ params:", params)
+                selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
+            })
+
+            if (reserveTime.value.length == 0) {
+                toast.info('请选择预定时间')
+                return
+            }
+            // 获取预定了几个小时
+            const count = reserveTime.value[1].length
+            uni.navigateTo({ url: `/bundle/coupon/coupon?id=${teaSpecialistId.value}&time=${count}&type=${type}` })
+        },
+
+        // 重置差茶艺服务
+        handleResetTeaService: () => {
+            servicePeople.value = 1
+            selectedTea.value = []
+            teaUsageValue.value = 1
+        },
+
+        // 确认茶艺服务
+        handleConfirmTeaService: () => {
+            if (selectedTea.value.length == 0) {
+                toast.info('请选择预定茶叶')
+                return
+            }
+            console.log("🚀 ~ servicePeople:", servicePeople.value)
+            console.log("🚀 ~ servicePeople:", selectedTeaPrice.value)
+            console.log("🚀 ~ servicePeople:", teaUsageValue.value)
+            
+            teaService.value = { id: 1, name: '茶艺服务' }
+            showTeaServicePopup.value = false
+        },
 
         // 提交表单
         handleSubmitOrder: () => {
diff --git a/src/utils/coupon.ts b/src/utils/coupon.ts
new file mode 100644
index 0000000..b2256d3
--- /dev/null
+++ b/src/utils/coupon.ts
@@ -0,0 +1,4 @@
+export const CouponType = {
+    Discount: 1, // 优惠券
+    GroupBuy: 2  // 团购券
+}
\ No newline at end of file
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 5e1db78..594a71d 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -1,3 +1,6 @@
+import Decimal from 'decimal.js'
+import { allowedNodeEnvironmentFlags } from 'process';
+
 /**
  * 页面跳转方法
  * @param url  跳转地址
@@ -48,4 +51,75 @@ export const router = {
             })
         }, time);
     },
+}
+
+/**
+ * 乘法，避免浮点数精度问题，不进行四舍五入，直接截断
+ * @param num1 乘数1
+ * @param num2 乘数2
+ * @returns 乘积
+ */
+export function toTimes(num1: number, num2: number) {
+    const value1 = new Decimal(num1)
+    const value2 = new Decimal(num2)
+    const result = value1.times(value2).toDecimalPlaces(2, Decimal.ROUND_DOWN)
+    console.log("🚀 ~ toPlus ~ result:", result)
+
+    return result.toString()
+}
+
+/**
+ * 加法，避免浮点数精度问题，不进行四舍五入，直接截断
+ * @param args 任意数量的加数
+ * @returns 求和结果字符串，保留2位小数（向下截断）
+ */
+/**
+ * 加法，支持对象参数（如 {0: '128', 1: '128'}），避免浮点数精度问题，不进行四舍五入，直接截断
+ * @param args 任意数量的加数或对象
+ * @returns 求和结果字符串，保留2位小数（向下截断）
+ */
+export function toPlus(...args: any[]): string {
+    // 支持 toPlus({0: '128', 1: '128'}) 或 toPlus('128', '128')
+    let arr: any[] = []
+    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null) {
+        // 传入的是对象，取所有值
+        arr = Object.values(args[0])
+    } else {
+        arr = args
+    }
+    let sum = new Decimal(0)
+    for (const num of arr) {
+        // 自动转为数字
+        const n = Number(num)
+        if (!isNaN(n)) {
+            sum = sum.plus(new Decimal(n))
+        }
+    }
+    // 截断2位小数，不四舍五入
+    const result = sum.toDecimalPlaces(2, Decimal.ROUND_DOWN)
+    return result.toString()
+}
+
+/**
+ * 减法，支持对象参数（如 {0: '128', 1: '28'}），避免浮点数精度问题，不进行四舍五入，直接截断
+ * @param args 任意数量的被减数和减数或对象
+ * @returns 结果字符串，保留2位小数（向下截断）
+ */
+export function toMinus(...args: any[]): string {
+    // 支持 toMinus({0: '128', 1: '28'}) 或 toMinus('128', '28')
+    let arr: any[] = []
+    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null) {
+        arr = Object.values(args[0])
+    } else {
+        arr = args
+    }
+    if (arr.length === 0) return '0.00'
+    let result = new Decimal(Number(arr[0]) || 0)
+    for (let i = 1; i < arr.length; i++) {
+        const n = Number(arr[i])
+        if (!isNaN(n)) {
+            result = result.minus(new Decimal(n))
+        }
+    }
+    return result.toDecimalPlaces(2, Decimal.ROUND_DOWN).toString()
 }
\ No newline at end of file