From 3f1879c72084e63b1469e91d9e6fc4e3b5ceaaed Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Mon, 23 Mar 2026 18:33:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AB=8B=E5=8D=B3=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env/.env.development                    |   6 +-
 src/api/tea-room.ts                     |   2 +-
 src/bundle/package/detail.vue           | 566 ++++++++++++++++++++++++
 src/bundle/settle-in/tea-specialist.vue |  11 +-
 src/http/alova.ts                       |   1 +
 src/pages.json                          |   9 +
 src/pages/index/index.vue               |  81 ++--
 7 files changed, 637 insertions(+), 39 deletions(-)
 create mode 100644 src/bundle/package/detail.vue

diff --git a/env/.env.development b/env/.env.development
index 171a4aa..77cbeb4 100644
--- a/env/.env.development
+++ b/env/.env.development
@@ -8,10 +8,10 @@ VITE_DELETE_CONSOLE = false
 VITE_SHOW_SOURCEMAP = true
 
 # 请求地址
-VITE_SERVER_BASEURL = 'https://76458.com'
+VITE_SERVER_BASEURL = 'https://test1.stnav.com'
 # 图片上传路径
-VITE_UPLOAD_BASEURL = 'https://76458.com/upload'
+VITE_UPLOAD_BASEURL = 'https://test1.stnav.com/upload'
 
 # 上传图片请求地址
-VITE_UPLOAD_BASEURL = 'https://76458.com/api/upload/image'
+VITE_UPLOAD_BASEURL = 'https://test1.stnav.com/api/upload/image'
 VITE_UPLOAD_IMAGE_URL = 'https://chaz.oss-cn-shanghai.aliyuncs.com/'
\ No newline at end of file
diff --git a/src/api/tea-room.ts b/src/api/tea-room.ts
index 40e2289..87c3564 100644
--- a/src/api/tea-room.ts
+++ b/src/api/tea-room.ts
@@ -66,7 +66,7 @@ export function getHomeTeaStoreList(data: IHomeTeaStoreListParams) {
  * 获取茶室开通城市列表
  */
 export function getOpenCityList() {
-    return http.Post<IOpenCityListResult>('/api/teaStore/teaStoreCity', 
+    return http.Post<IOpenCityListResult>('/api/teaStore/teaStoreCity', null,
         {
             meta: { ignoreAuth: true }
         }
diff --git a/src/bundle/package/detail.vue b/src/bundle/package/detail.vue
new file mode 100644
index 0000000..a87c794
--- /dev/null
+++ b/src/bundle/package/detail.vue
@@ -0,0 +1,566 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+    "layout": "tabbar",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}</route>
+
+<template>
+    <view class="pb-180rpx">
+        <view>
+            <navbar title="茶艺师套餐" custom-class='!bg-[#F6F7F8]'></navbar>
+        </view>
+
+        <view>
+            <view class="mt-20rpx mx-30rpx swiper">
+                <wd-swiper value-key="image" height="320rpx" :indicator="{ type: 'dots-bar' }" :list="swiperList"
+                    v-model:current="current" mode="aspectFit" @click="Detail.handlePreviewImage">
+                </wd-swiper>
+            </view>
+
+            <view class="bg-white rounded-16rpx p-30rpx mt-24rpx mx-30rpx">
+                <!-- 价格行 -->
+                <view class="flex items-center justify-between">
+                    <view class="flex items-center">
+                        <view>
+                            <price-format color="#FF5951" :first-size="44" :second-size="44" :subscript-size="28" :price="298"></price-format>
+                        </view>
+                        <view class="ml-20rpx">
+                            <price-format color="#909399" :first-size="24" :second-size="24" :subscript-size="24" :price="298" :line-through="true"></price-format>
+                        </view>
+                        <view
+                            class="bg-[#FFEDED] text-[#FF5951] text-24rpx px-20rpx py-6rpx rounded-8rpx ml-28rpx flex items-center">
+                            2.9折热销中</view>
+                    </view>
+                    <view class="text-[#909399] text-24rpx">已售500+</view>
+                </view>
+
+                <!-- 标题 -->
+                <view class="text-[#303133] text-36rpx font-bold mt-20rpx">清风套餐-标准品质</view>
+
+                <!-- 标签 -->
+                <view class="flex items-center mt-20rpx">
+                    <view
+                        class="text-[#C08A45] text-22rpx border-2rpx border-solid border-[#C3801C] rounded-8rpx px-12rpx py-6rpx mr-16rpx font-500">
+                        回头客92</view>
+                    <view
+                        class="text-[#C08A45] text-22rpx border-2rpx border-solid border-[#C3801C] rounded-8rpx px-12rpx py-6rpx font-500">
+                        500+购买</view>
+                </view>
+
+                <!-- 保障框 -->
+                <view class="bg-[#F2FBF6] rounded-10rpx px-20rpx py-16rpx mt-26rpx flex items-center">
+                    <wd-img :src="`${OSS}icon/icon_safe.png`" width="32rpx" height="32rpx"></wd-img>
+                    <view class="text-[#15B569] text-24rpx font-bold ml-10rpx mr-16rpx">保障</view>
+                    <view class="text-[#606266] text-24rpx">预约后，爽约即可赔付</view>
+                </view>
+
+                <!-- 心动理由框 -->
+                <view class="bg-[#F8F8FF] rounded-10rpx px-20rpx py-22rpx mt-16rpx">
+                    <view class="text-[#2B17AB] text-24rpx leading-36rpx">
+                        <text class="inline-flex items-center align-middle mr-10rpx mb-4rpx">
+                            <wd-img :src="`${OSS}icon/icon_star.png`" width="32rpx" height="32rpx"></wd-img>
+                            <text class="text-[#3545DA] font-bold ml-6rpx">心动理由</text>
+                        </text>
+                        <text class="mt-8rpx">在谈判间隙或需要思考时，众人的注意力可自然地落于茶席，为您赢得宝贵的思考时间。</text>
+                    </view>
+                </view>
+
+                <!-- 须知/保障模块 -->
+                <view class="mt-32rpx">
+                    <view class="flex items-center mb-20rpx">
+                        <view class="text-[#303133] text-26rpx font-bold">须知</view>
+                        <view class="text-[#909399] text-26rpx ml-26rpx">需预约</view>
+                    </view>       
+                    
+                    <view class="flex items-center mb-20rpx">
+                        <view class="text-[#303133] text-26rpx font-bold">保障</view>
+                        <view class="text-[#909399] text-26rpx ml-26rpx">随时退</view>
+                    </view>
+                </view>
+            </view>
+
+            <view>
+                <!-- 套餐详情 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
+                    <view class="mt-24rpx" v-if="teaRoomPackage.introduce">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tcsm.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">套餐介绍</view>
+                        </view>
+                        <rich-text :nodes="teaRoomPackage.introduce"></rich-text>
+                    </view>
+                    <view class="mt-30rpx">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_qtsm.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 其他说明</view>
+                        </view>
+                        <view class="flex items-center">
+                            <view class="bg-[#6A6363] w-8rpx h-8rpx rounded-full mr-12rpx"></view>
+                            <view class="font-500 text-26rpx text-[#303133]">超过一小时100元</view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 购买须知 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
+
+                    <view class="mt-30rpx">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sycj.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 适用场景</view>
+                        </view>
+                        <view class="flex items-center">
+                            <view class="bg-[#6A6363] w-8rpx h-8rpx rounded-full mr-12rpx"></view>
+                            <view class="font-500 text-26rpx text-[#303133]">个人品鉴，小型聚会</view>
+                        </view>
+                    </view>
+
+                    <view class="mt-30rpx" v-if="teaRoomPackage.hour">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sysc.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用时长</view>
+                        </view>
+                        <view class="">{{ teaRoomPackage.hour }}小时</view>
+                    </view>
+
+                    <view class="mt-30rpx" v-if="teaRoomPackage.pl_number">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_syrs.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">使用人数</view>
+                        </view>
+                        <view class="">{{ teaRoomPackage.pl_number }}</view>
+                    </view>
+
+                    <view class="mt-20rpx mb-24rpx">
+                        <wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
+                    </view>
+
+                    <view class="mt-30rpx" v-if="teaRoomPackage.returd_details">
+                        <view class="flex items-center mb-20rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tgsm.png`"></wd-img>
+                            <view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">退改说明</view>
+                        </view>
+                        <rich-text :nodes="teaRoomPackage.returd_details"></rich-text>
+                    </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 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>
+            </view>
+        </view>
+    </view>
+</template>
+
+<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 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 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
+    })
+})
+
+
+// 防止重复提交
+
+const Detail = {
+    /**
+     *  初始包间详情
+     */
+    handleInitReserveRoom: async () => {
+        // 包间详情
+        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 // 订单金额
+    },
+
+    /**
+     * 预览图片
+     */
+    handlePreviewImage: (e: { index: number, item: any }) => {
+        previewImage(swiperList.value[e.index], swiperList.value)
+    }
+}
+</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;
+        }
+    }
+}
+</style>
diff --git a/src/bundle/settle-in/tea-specialist.vue b/src/bundle/settle-in/tea-specialist.vue
index 69dd8c8..0fa8fad 100644
--- a/src/bundle/settle-in/tea-specialist.vue
+++ b/src/bundle/settle-in/tea-specialist.vue
@@ -130,16 +130,7 @@
                                 v-for="(item, idx) in tagList"
                                 :key="item.id"
                                 class="tea-tag"
-                                :class="{ 'tea-tag--active': selectedTags.includes(item.id) }"
-                                :style="selectedTags.includes(item.id)
-                                    ? idx === 0
-                                        ? 'background:#FAF1F1;color:#CE295A;'
-                                        : idx === 1
-                                            ? 'background:#F1F3FA;color:#2934CE;'
-                                            : idx === 2
-                                                ? 'background:#F1FAF9;color:#29C9CE;'
-                                                : 'background:#4C9F44;color:#fff;'
-                                    : 'background:#F3F3F3;color:#818CA9;'
+                                :style="selectedTags.includes(item.id) ?'background:#4C9F44;color:#fff;' : 'background:#F3F3F3;color:#818CA9;'
                                 "
                                 @click="handleTagClick(item.id)"
                             >
diff --git a/src/http/alova.ts b/src/http/alova.ts
index 27bfa17..cca7b7f 100644
--- a/src/http/alova.ts
+++ b/src/http/alova.ts
@@ -49,6 +49,7 @@ const alovaInstance = createAlova({
 	statesHook: VueHook,
 
 	beforeRequest: onAuthRequired((method) => {
+		console.log("🚀 ~ method:", method)
 		// 设置默认 Content-Type
 		method.config.headers = {
 			ContentType: ContentTypeEnum.JSON,
diff --git a/src/pages.json b/src/pages.json
index f8ef412..a20da5e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -242,6 +242,15 @@
             "navigationBarTitleText": "分包页面"
           }
         },
+        {
+          "path": "package/detail",
+          "type": "page",
+          "needLogin": true,
+          "layout": "tabbar",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "profile/profile",
           "type": "page",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1971bfe..0cddbeb 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -32,7 +32,7 @@
 		</wd-overlay>
 
 		<view class="w-[100%] fixed top-0 left-0 z-100">
-			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #F9FAFB !important;">
+			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #fff !important;">
 				<template #left>
 					<view class="flex items-center line-1 w-130rpx" @click="Index.handleToCity">
 						<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ city || LOCATION_DEFAULT_CITY }}</view>
@@ -49,7 +49,7 @@
 			</wd-navbar>
 		</view>
 
-		<view :style="{ paddingTop: navbarHeight + 'px' }">
+		<view class="bg-white rounded-b-20rpx" :style="{ paddingTop: navbarHeight + 'px' }">
 			<view class="mt-32rpx mx-30rpx">
 				<wd-swiper 
 					height="320rpx" 
@@ -61,35 +61,65 @@
 					></wd-swiper>
 			</view>
 
-			<view class="mt-32rpx flex items-center h-36rpx mx-30rpx">
-				<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home/home_image1.png`" mode="aspectFit" />
-				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">甄选茗师</text>
-				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">·</text>
-				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">商务雅趣</text>
-				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">·</text>
-				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">尊享奉茶</text>
+			<!-- 专属定制 -->
+			<view class="flex justify-center mt-30rpx mb-26rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
+				<wd-img :src="`${OSS}images/home/home_image_15.png`" width="690rpx" height="148rpx" mode="scaleToFill" />
 			</view>
 
-			<view class="mt-24rpx relative w-690rpx h-224rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
+			<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="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>
+					<view class="px-12rpx mt-8rpx">
+						<view class="text-28rpx font-bold text-[#303133] line-1">清风套餐</view>
+						<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
+							<text class="text-28rpx">￥</text>
+							<text class="text-30rpx">298</text>
+							<text class="text-24rpx">/2小时</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #FFF3FB 0%, #F6F7F9 100%);">
+					<view class="px-10rpx pt-10rpx flex justify-center">
+						<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_17.png`" radius="16rpx" mode="aspectFill" />
+					</view>
+					<view class="px-12rpx mt-8rpx">
+						<view class="text-28rpx font-bold text-[#303133] line-1">明月套餐</view>
+						<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
+							<text class="text-28rpx">￥</text>
+							<text class="text-30rpx">598</text>
+							<text class="text-24rpx">/2小时</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #FFF9EA 0%, #F6F7F9 100%);">
+					<view class="px-10rpx pt-10rpx flex justify-center">
+						<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_18.png`" radius="16rpx" mode="aspectFill" />
+					</view>
+					<view class="px-12rpx mt-8rpx">
+						<view class="text-28rpx font-bold text-[#303133] line-1">鹤鸣套餐</view>
+						<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
+							<text class="text-28rpx">￥</text>
+							<text class="text-30rpx">998</text>
+							<text class="text-24rpx">/2小时</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- <view class="mt-24rpx relative w-690rpx h-224rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
 				<wd-img width="690rpx" height="224rpx" :src="`${OSS}images/home/home_image14.png`" mode="scaleToFill" />
-			</view>
-
-			<!-- <view class="relative mt-40rpx h-44rpx mx-30rpx">
-				<view class="absolute ele-center" >
-					<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
-				</view>
-				<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
-			</view>
-			<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
-				<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image2.png`" mode="scaleToFill" />
-				<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
-					<text class="mr-8rpx">一键约</text>
-					<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
-				</view>
 			</view> -->
+		</view>
+
+		<view>
 			<view class="mx-30rpx mt-36rpx mb-10rpx">
 				<scroll-view class="w-[100%] whitespace-nowrap " :scroll-x="true" :show-scrollbar="false" :enhanced="true">
 					<!-- <view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="distance === 1 ? 'active' : ''" @click="Index.handleSort('distance')">距离优先</view> -->
+					<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.smart === 1 ? 'active' : ''" @click="Index.handleSort('smart')">智能排序</view>
 					<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.sales === 1 ? 'active' : ''" @click="Index.handleSort('sales')">销量优先</view>
 					<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.open === 1 ? 'active' : ''" @click="Index.handleSort('open')">24小时营业</view>
 					<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.use === 1 ? 'active' : ''" @click="Index.handleSort('use')">常去</view>
@@ -193,6 +223,7 @@
 	const city_id = ref<number>(0)
 	const distance = ref<number>(0)
 	const sort = ref({
+		smart: 0, // 智能排序
 		sales: 0, // 销量优先
 		open: 0, // 24小时
 		use: 0, // 常去
@@ -426,7 +457,7 @@
 			// const index = e.currentTarget.dataset.index
 		},
 
-		handleSort(type: 'distance' | 'sales' | 'open' | 'use') {
+		handleSort(type: 'smart' | 'distance' | 'sales' | 'open' | 'use') {
 			const userStore = useUserStore()
 			const userId = userStore.userInfo?.id
 			console.log("🚀 ~ userId:", userId)