diff --git a/src/api/tea-specialist.ts b/src/api/tea-specialist.ts
new file mode 100644
index 0000000..7394e36
--- /dev/null
+++ b/src/api/tea-specialist.ts
@@ -0,0 +1,23 @@
+import { http } from '@/http/alova'
+
+/**
+ * 获取茶艺师等级
+ */
+export function getTeaSpecialistLevels() {
+    return http.Post<any>('/api/Teamaster/teamasterLevel',  null)
+}
+
+/**
+ * 获取茶艺师列表
+ */
+export interface ITeaSpecialistParams {
+    level_id: string
+    page: number
+    size: number
+    latitude: number
+    longitude: number
+}
+
+export function getTeaSpecialist(data: ITeaSpecialistParams) {
+    return http.Post('/api/Teamaster/teamasterList', data)
+}
diff --git a/src/api/types/tea-specialist.ts b/src/api/types/tea-specialist.ts
new file mode 100644
index 0000000..9089303
--- /dev/null
+++ b/src/api/types/tea-specialist.ts
@@ -0,0 +1,10 @@
+/**
+ * 茶艺师列表数据返回
+ */
+export interface ITeaSpecialistResult {
+	count: Number
+	list: Array<any>
+	more: Number
+	page: string
+	size: string
+}
\ No newline at end of file
diff --git a/src/bundle_b/components/TeaSpecialistLevel.vue b/src/bundle_b/components/TeaSpecialistLevel.vue
new file mode 100644
index 0000000..06116e6
--- /dev/null
+++ b/src/bundle_b/components/TeaSpecialistLevel.vue
@@ -0,0 +1,53 @@
+<template>
+    <view class="w-168rpx h-40rpx relative mr-44rpx">
+        <view class="absolute left-0 top-0 h-36rpx flex items-start">
+            <!-- 金牌茶艺师 -->
+            <wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img> 
+        </view>
+        <view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
+    </view>
+</template>
+
+<script lang="ts" setup name="TeaSpecialistLevel">
+	/**
+	 * TeaSpecialistLevel 茶艺师等级
+	 * @description 用于展示茶艺师等级
+     */
+
+	const OSS = inject('OSS')
+
+	defineProps({
+        level: {
+            type: String,
+            default: ''
+        }
+    })
+
+    // 茶艺师等级对应的icon和文字
+    const levelMap = {
+        gold: {
+            icon: `${OSS}icon/icon_gold_medal.png`,
+            text: '金牌茶艺师'
+        },
+        senior: {
+            icon: `${OSS}icon/icon_senior_medal.png`,
+            text: '高级茶艺师'
+        },
+        intermediate: {
+            icon: `${OSS}icon/icon_intermediate_medal.png`,
+            text: '中级茶艺师'
+        },
+        junior: {
+            icon: `${OSS}icon/icon_junior_medal.png`,
+            text: '初级茶艺师'
+        },
+        enthusiast: {
+            icon: `${OSS}icon/icon_enthusiast_medal.png`,
+            text: '茶艺爱好者'
+        }
+    }
+</script>
+
+<script lang="ts">
+    export default {}
+</script>
\ No newline at end of file
diff --git a/src/bundle_b/pages/tea-specialist/detail.vue b/src/bundle_b/pages/tea-specialist/detail.vue
new file mode 100644
index 0000000..c4444dd
--- /dev/null
+++ b/src/bundle_b/pages/tea-specialist/detail.vue
@@ -0,0 +1,485 @@
+<route lang="jsonc" type="page">
+    {
+        "needLogin": "true",
+        "layout": "default",
+        "style": {
+            "navigationStyle": "custom"
+        }
+    }
+</route>
+
+<template>
+    <view :class="isReserve ? 'pb-28rpx' : ''">
+        <wd-message-box selector="wd-message-box-slot"></wd-message-box>
+
+        <!-- 打赏茶艺师 -->
+        <wd-popup v-model="showTipTeaSpecialistPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showTipTeaSpecialistPopup = false" position="bottom">
+            <view class='bg-[#fff] py-40rpx realtive'>
+                <view class="absolute top-18rpx right-30rpx" @click="showTipTeaSpecialistPopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="">
+                    <view class="text-36rpx text-[#121212] leading-50rpx text-center" v-if="!isOtherTip">打赏一下</view>
+                    <view class="flex items-center mx-16rpx" v-if="isOtherTip">
+                        <view class="flex items-center" @click="isOtherTip = false">
+                            <wd-icon name="thin-arrow-left" size="32rpx"></wd-icon>
+                        </view>
+                        <view class="flex-1 text-36rpx text-[#121212] leading-50rpx text-center">其它打赏金额</view>
+                    </view>
+                </view>
+                <view class="mt-48rpx font-400 text-30rpx leading-42rpx text-#303133 text-center">很喜欢这个茶艺师，快打个赏吧</view>
+                <!-- 打赏金额 -->
+                <view class="mt-62rpx flex justify-between items-center mx-30rpx" v-if="!isOtherTip">
+                    <view class="bg-#F0F6EF flex flex-col items-center justify-center h-240rpx px-20rpx py-24rpx w-[22%] rounded-4rpx text-center" 
+                        v-for="(item, index) in tipList" :key="index" @click="Detail.handleTipTeaSpecialist(item)">
+                            <wd-img width="64rpx" height='64rpx' :src="`${OSS}images/h5/tip/tip_image${index + 1}.png`"></wd-img>
+                            <view class="font-bold text-#006C2D text-40rpx leading-30rpx mt-20rpx">
+                                <price-format color="#006C2D" :first-size="40" :subscript-size="22" :show-decimal="false" :price="item.tip_price" v-if="item.tip_price > 0"></price-format>
+                                <view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.tip_price == 0">其他金额</view>
+                            </view>
+                            <view class="bg-#4C9F44 rounded-8rpx w-120rpx h-48rpx leading-48rpx text-#fff text-28rpx mt-16rpx">打赏</view>
+                    </view>
+                </view>
+                <!-- 自定义打赏金额 -->
+                <view class="mx-30rpx mt-46rpx" v-if="isOtherTip">
+                    <wd-input
+						type="text" 
+						placeholder="请输入1~50元的金额" 
+						v-model="tipMoney" 
+						no-border
+						custom-class="!bg-[#F6F7F8] !rounded-16rpx !text-30rpx !leading-48rpx" 
+						custom-input-class="!h-104rpx !pl-60rpx">
+							<template #prefix>
+								<view class="ml-30rpx font-bold text-30rpx leading-48rpx text-[#303133]">
+									￥
+								</view>
+							</template>
+					</wd-input>
+                </view>
+
+                <view class="font-400 text-24rpx leading-34rpx text-#909399 mt-34rpx mx-30rpx">打赏金额将给到茶艺师，是您自愿对于茶艺师的赠与</view>
+            
+                <view class="text-32rpx leading-44rpx text-center flex items-center justify-center mt-136rpx" v-if="isOtherTip">
+                    <view class="w-330rpx h-90rpx leading-90rpx bg-#F6F7F8 text-#303133 rounded-8rpx mr-30rpx"  @click="isOtherTip = false">在想想</view>
+                    <view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx" @click="Detail.handleTipTeaSpecialistOtherMoney">打赏</view>
+                </view>
+                
+            </view>
+        </wd-popup>
+
+        <view>
+            <navbar :title="isReserve ? '预约茶艺师' : '茶艺师详情'" fixed :left-arrow="false">
+                <template #right>
+					<view class="flex items-center ml-114rpx">
+                        <!-- <view class="mr-16rpx flex items-center" @click="Detail.handleCollect">
+                            <template v-if="userInfo.token && info.collect > 0">
+                                <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img>
+                            </template>
+                            <template v-else>
+                                <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
+                            </template>
+                        </view> -->
+                        <!-- <view @click="Detail.handleShare" class="flex items-center">
+						    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_share.png`"></wd-img>
+                        </view> -->
+					</view>
+				</template>
+            </navbar>
+        </view>
+
+        <view class="pb-30rpx bg-white">
+            <!-- 轮播图 -->
+            <view class="mx-30rpx">
+				<wd-swiper value-key="image" height="400rpx" 
+					:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
+			</view>
+
+            <!-- 昵称显示 -->
+            <view class="bg-white rounded-t-16rpx px-30rpx">
+                <view class="font-bold text-34rpx leading-48rpx text-#303133 pt-36rpx">{{ info.name }}</view>
+                <view class="flex items-center justify-between mt-4rpx">
+                    <view class="flex items-center">
+                        <wd-rate v-model="rate" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star"  space="4rpx"/>
+                        <view class="font-400 text-26rpx text-#606266 ml-8rpx">{{ info.star }} 推荐</view>
+                    </view>
+                    <view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 {{ info.reservation_num > 10 ? info.reservation_num + '+' : info.reservation_num }}</view>
+                </view>
+                
+                <view class="flex items-center justify-between mt-24rpx">
+                    <view class="flex items-center">
+                        <view class="mr-20rpx" v-if="is90">
+                            <wd-tag color="#FF5951" bg-color="#FEF1F0" custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx !w-144rpx">90后茶艺师</wd-tag>
+                        </view>
+                        <view class="w-160rpx h-40rpx relative mr-44rpx top-6rpx">
+                            <view class="absolute left-0 top-0 h-36rpx flex items-start">
+                                <wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
+                            </view>
+                            <view>
+                                <tea-specialist-level :level="TeaSpecialistLevelValue[info.teamasterLevel?.[0]?.level_name] || 'junior'"></tea-specialist-level>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="font-400 text-24rpx leading-34rpx text-#818CA9">距离您{{ info.distance }}km 预计{{ info.speed }}分钟</view>
+                </view>
+            </view>
+
+            <view class="h-2rpx bg-#F6F7F9 mx-30rpx mt-28rpx"></view>
+
+            <!-- 个人信息 -->
+            <view class="flex justify-between items-center mx-88rpx text-center mt-30rpx">
+                <view>
+                    <view class="font-400 text-28rpx leading-40rpx text-#606266">性别</view>
+                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.gender == 1 ? '男' : '女' }}</view>
+                </view>
+                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
+                <view>
+                    <view class="font-400 text-28rpx leading-40rpx text-#606266">年龄</view>
+                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.both }}</view>
+                </view>
+                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
+                <view>
+                    <view class="font-400 text-28rpx leading-40rpx text-#606266">身高</view>
+                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.height }}cm</view>
+                </view>
+                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
+                <view>
+                    <view class="font-400 text-28rpx leading-40rpx text-#606266">体重</view>
+                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.weight }}kg</view>
+                </view>
+            </view>
+
+            <!-- 兴趣爱好 -->
+            <view class="mx-30rpx mt-44rpx">
+                <view class="font-bold text-32rpx leading-44rpx text-#303133">
+                    兴趣爱好
+                </view>
+
+                <view class="bg-#FBFBFB rounded-8rpx px-28rpx py-20rpx mt-22rpx">
+                    <view class="flex items-center">
+                        <view class="mr-12rpx">
+                            <wd-img :src="`${OSS}icon/icon_tea2.png`" width="32rpx" height="32rpx"></wd-img>
+                        </view>
+                        <view class="font-400 text-26rpx leading-36rpx text-#606266">兴趣爱好</view>
+                    </view>
+                    <view class="mt-20rpx font-400 text-28rpx leading-40rpx text-#303133">
+                        “{{ info.real.interests }}”
+                    </view>
+                </view>
+            </view>
+
+            <view class="h-20rpx bg-#F6F7F9 mt-42rpx mb-40rpx"></view>
+
+            <view class="content-tab">
+                <wd-tabs v-model="tab">
+                    <block v-for="(item, index) in tabList" :key="index">
+                        <wd-tab :title="item.title">
+                            <view class="content mx-30rpx mt-44rpx">{{ item.content }}</view>
+                        </wd-tab>
+                    </block>
+                </wd-tabs>
+            </view>
+            
+            <!-- 费用说明 -->
+            <view class="mx-30rpx mt-44rpx">
+                <view >
+                    <view class="font-bold text-32rpx leading-44rpx text-#303133">
+                        费用说明
+                    </view>
+
+                    <view class="">
+                        <view class="flex items-center mt-24rpx">
+                            <view class="mr-12rpx flex items-center">
+                                <wd-img :src="`${OSS}icon/icon_billing.png`" width="32rpx" height="32rpx"></wd-img>
+                            </view>
+                            <view class="font-400 text-26rpx leading-36rpx text-#606266">计费标准</view>
+                        </view>
+                        
+                        <view class="mt-22rpx">
+                            <view class="flex items-center justify-between">
+                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
+                                <view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
+                                    <view>服务费</view>
+                                    <view>￥{{ info.price }}/小时</view>
+                                </view>
+                            </view>
+                            <view class="flex items-center justify-between mt-20rpx">
+                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
+                                <view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
+                                    <view>车马费</view>
+                                    <view>￥{{ info.fare_price }}/公里</view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view>
+                        <view class="flex items-center mt-24rpx">
+                            <view class="mr-12rpx flex items-center">
+                                <wd-img :src="`${OSS}icon/icon_info.png`" width="36rpx" height="36rpx"></wd-img>
+                            </view>
+                            <view class="font-400 text-26rpx leading-36rpx text-#606266">其它说明</view>
+                        </view>
+                        
+                        <view class="mt-50rpx flex items-center justify-around">
+                            <view class="flex items-center">
+                                <view class="mr-20rpx flex items-center">
+                                    <wd-img :src="`${OSS}icon/icon_safe3.png`" width="36rpx" height="36rpx"></wd-img>
+                                </view>
+                                <view class="font-bold text-30rpx leading-48rpx text-#303133">
+                                    爽约包退
+                                </view>
+                            </view>
+                           <view class="flex items-center">
+                                <view class="flex items-center mr-20rpx">
+                                    <wd-img :src="`${OSS}icon/icon_card.png`" width="36rpx" height="36rpx"></wd-img>
+                                </view>
+                                <view class="font-bold text-30rpx leading-48rpx text-#303133">
+                                    实名认证
+                                </view>
+                            </view>
+                        </view>
+
+                        <view class="h-4rpx bg-#F6F7F9 mt-40rpx mb-26rpx"></view>
+
+                        <!-- 温馨提示 -->
+                        <view>
+                            <view class="flex items-center">
+                                <view class="mr-14rpx">
+                                    <wd-icon name="info-circle" size="36rpx" color="#707070"></wd-icon>
+                                </view>
+                                <view class="font-bold text-28rpx leading-48rpx text-#303133">温馨提示</view>
+                            </view>
+
+                            <view class="flex items-center mt-24rpx">
+                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-12rpx"></view>
+                                <view class="font-500 text-26rpx leading-48rpx text-#F29747">茶艺师需提前一小时预约，两小时起订</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 操作按钮 -->
+        <view>
+            <!-- 邀约状态下的按钮 -->
+            <view v-if="isReserve" class="mx-60rpx rounded-8rpx h-90rpx leading-90rpx text-center mt-52rpx bg-#4C9F44 text-#fff text-30rpx leading-42rpx font-bold"
+                @click="Detail.handleReserve">
+                立即邀约
+            </view>
+
+            <view v-if="!isReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] bg-white mt-24rpx pt-36rpx pb-28rpx">
+                <view class="w-330rpx h-90rpx bg-[#F0F6EF] rounded-8rpx mr-30rpx text-#4C9F44 flex items-center justify-center" @click="showTipTeaSpecialistPopup = true">
+                    <view class="flex items-center mr-16rpx">
+                        <wd-img :src="`${OSS}icon/icon_flower.png`" width="40rpx" height="40rpx"></wd-img>
+                    </view>
+                    打赏
+                </view>
+                <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="Detail.handleReserveTeaspecialist">立即预定</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+	import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
+    import { useMessage } from 'wot-design-uni'
+    import { getTeaSpecialistDetails, collectTeaSpecialist, getTeaSpecialistRewardAmounts, teaSpecialistInvite } from '@/api/tea'
+    import { ITeaSpecialistDetailsFields } from '@/api/types/tea'
+    import type { ITeaSpecialistRewardAmountsResult } from '@/api/types/tea'
+    import { toast } from '@/utils/toast'
+	import { TeaSpecialistLevelValue } from '@/utils/teaSpecialist'
+	import { router } from '@/utils/tools'
+	import { useUserStore } from '@/store'
+    import type {IUserInfoVo } from '@/api/types/login'
+
+	const OSS = inject('OSS')
+
+    // tab
+    const tab = ref<number>(1)
+    const tabList = ref<Array<{id: number, status: number, content: string, title: string}>>([
+        {id: 0, status: 0, content: '', title: ''},
+    ])
+
+    // 用户信息
+	const userInfo = ref<IUserInfoVo>(null)
+
+    // 茶艺师
+    const id = ref<number>(0)
+    const info = reactive<ITeaSpecialistDetailsFields>({ 
+        id: 0,
+        name: '',
+        star: 0,
+        image: '',
+        reservation_num: 0,
+        distance: 0,
+        speed: 0,
+        real: { gender: 1, both: 18, height: 165, weight: 53, interests: '爱好茶艺，喜欢旅游，把爱好当工作' },
+        teamasterlabel: [],
+        teamasterLevel: [],
+        price: 0,
+        fare_price: 0,
+        collect: 0,
+        up_status: 0,
+        textarea: []
+    })
+	const latitude = ref<number>(0) // 纬度
+	const longitude = ref<number>(0) // 经度
+    const is90 = ref<boolean>(false)
+
+    // 是否是预约茶艺师页面
+    const isReserve = ref<boolean>(false)
+
+    // 弹窗
+    const message = useMessage('wd-message-box-slot')
+
+    // 轮播图
+	const swiperList = ref<string[]>([
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`
+    ])
+	const current = ref<number>(0)
+
+    // 评分
+    const rate = ref<number>(1)
+
+    // 打赏主茶艺师
+    const showTipTeaSpecialistPopup = ref<boolean>(false)
+	const tipList = ref<Array<ITeaSpecialistRewardAmountsResult>>([])
+
+    const isOtherTip = ref<boolean>(false) // 是否是其他打赏金额
+    const tipMoney = ref<string>('') // 其他打赏金额
+
+    onLoad(async (args) => {
+        const userStore = useUserStore()
+        userInfo.value = userStore.userInfo 
+
+        id.value = args.id || 0
+
+        // 获取茶艺师详情
+        const res = await getTeaSpecialistDetails({
+            id: args.id,
+            latitude: uni.getStorageSync('latitude'),
+            longitude: uni.getStorageSync('longitude'),
+            user_id: userInfo.value.id || 0
+        })
+        // 将返回的数据合并到 reactive 对象中
+        Object.assign(info, res.teamaster || {})
+        rate.value = info.star
+        tabList.value = info.textarea
+        console.log("🚀 ~ tabList:", res)
+
+        // 茶艺师是否上线
+        // if (info.up_status == 0) {
+        //     isReserve.value = true
+        // }
+
+        if (info.teamasterlabel) {
+            info.teamasterlabel.map(item => {
+                if (item.label_name == '90后茶艺师') {
+                    is90.value = true
+                }
+            })
+        }
+
+        // 获取打赏金额
+        getTeaSpecialistRewardAmounts().then((res: Array<ITeaSpecialistRewardAmountsResult>) => {
+            tipList.value = res
+        })
+    })
+
+    const Detail = {
+        // 处理收藏
+        handleCollect: async () => {
+            let status = info.collect == 0 ? 1 : 0
+            await collectTeaSpecialist({
+                id: id.value,
+                status
+            })
+
+            info.collect = info.collect == 0 ? 1 : 0
+        },
+
+        // 处理分享
+        handleShare: () => {
+            const url = window.location.href
+            const { name, real, image} = info
+            const params = {
+                title: name,
+                desc: real?.interests,
+                imgUrl: image,
+                link: url
+            }
+        },
+
+        // 立即邀约
+        handleReserve: () => {
+            message.alert({
+                title: '邀约茶艺师',
+                msg: `尊敬的客户我们即将向[${info.name}]发出服务邀约，请过十分钟后刷新页面，谢谢您的支持！`,
+                confirmButtonText: '好的',
+                confirmButtonProps: {
+                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
+                }
+            }).then(async res => {
+                await teaSpecialistInvite({
+                    id: info.id,
+                })
+            })
+        },
+
+        // 打赏茶艺师
+        handleTipTeaSpecialist: (item: ITeaSpecialistRewardAmountsResult) => {
+            if (!userInfo.value.token) {
+                toast.info('请先登录')
+                router.switchTab('/pages/my/my', 500)
+                return
+            }
+
+            if (item.tip_price == 0) {
+                isOtherTip.value = true
+            } else {
+                showTipTeaSpecialistPopup.value = false
+                router.navigateTo(`/pages/cashier/cashier?id=${id.value}&lat=${latitude.value}&lng=${longitude.value}&money=${item.tip_price}`)
+            }
+        },
+
+        // 打赏茶艺师其它金额
+        handleTipTeaSpecialistOtherMoney: () => {
+            if (Number(tipMoney.value) < 1 || Number(tipMoney.value) > 50) {
+                toast.info('请输入1~50元的金额')
+                return
+            }
+            showTipTeaSpecialistPopup.value = false
+            router.navigateTo(`/pages/cashier/cashier?from=tip&teaSpecialistId=${id.value}&money=${tipMoney.value}`)
+        },
+
+        // 预约茶艺师
+        handleReserveTeaspecialist: () => {
+            router.navigateTo(`/pages/reserve/tea-room?id=${id.value}`)
+        },
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background: $cz-page-background;
+    }
+
+    .content-tab {
+        :deep() {
+            .wd-tabs__line {
+                background-color: #006C2D !important;
+            }
+
+            .wd-tabs__nav-item {
+                color: #303133 !important;
+            }
+
+            .wd-tabs__nav-item.is-active {
+                color: #006C2D !important;
+            }
+        }
+    }
+</style>
diff --git a/src/bundle_b/pages/tea-specialist/list.vue b/src/bundle_b/pages/tea-specialist/list.vue
new file mode 100644
index 0000000..4fc78c4
--- /dev/null
+++ b/src/bundle_b/pages/tea-specialist/list.vue
@@ -0,0 +1,286 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+	"layout": "tabbar",
+	"style": {
+		"navigationStyle": "custom"
+	}
+}</route>
+
+<template>
+	<view class="home-bg">
+		<view class="home-bg w-[100%] sticky top-0 left-0 z-100">
+			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
+                <template #left>
+                    <view class="flex items-center">
+                        <view class="mt-4rpx" @click="router.navigateBack()">
+                            <wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
+                        </view>
+                        <view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">预约茶艺师</view>
+                    </view>
+                </template>
+            </wd-navbar>
+
+            <view class="search-box relative">
+				<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel	custom-input-class="!h-72rpx !pr-160rpx" v-model="keywords" light >
+				</wd-search>
+				<view 
+					class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx" 
+					@click="List.handleSearch">
+					搜索
+				</view>
+			</view>
+		</view>
+
+        <!-- 团体茶艺师预购 -->
+        <view class="">
+            <view class="mx-30rpx flex items-center">
+                <view class="flex items-center mr-14rpx">
+                    <wd-img width="160rpx" height="36rpx" :src="`${OSS}images/h5/home/home_image1.png`" />
+                </view>
+                <view class="flex items-center mr-14rpx">
+                    <view class="flex items-center">
+                        <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
+                    </view>
+                    <view class="font-400 text-22rpx leading-32rpx text-#818CA9">专业资质</view>
+                </view>
+                <view class="flex items-center">
+                    <view class="flex items-center">
+                        <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
+                    </view>
+                    <view class="font-400 text-22rpx leading-32rpx text-#818CA9">定制方案</view>
+                </view>
+            </view>
+
+            <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx">
+            <!-- <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx" @click="router.navigateTo('/pages/reserve/group-tea-specialist')"> -->
+				<wd-img width="690rpx" height="260rpx" :src="`${OSS}images/h5/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 class="">
+            <view class="relative mt-44rpx h-44rpx mx-30rpx">
+				<view class="absolute ele-center">
+					<wd-img width="252rpx" height="24rpx" :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="flex items-center  text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx my-30rpx tea-level-scrollbar">
+                <view 
+                    v-for="(item, index) in TeaSpecialistLevels" :key="index"
+                    class="h-64rpx rounded-12rpx px-24rpx py-12rpx flex items-center justify-center font-400 text-28rpx mr-20rpx"
+                    :class="selectedLevel.includes(item.id) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#FFF] text-[#606266]'"
+                    @click="List.handleToggleTeaSpecialistLevel(item.id)">
+                    {{ item.level_name}}
+                </view>
+            </view>
+
+            <mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="List.upCallback" :up="upOption" fixed>
+                <view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in list" :key="index" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/detail?id=${item.id}`)">
+                    <view class="mr-28rpx relative">
+                        <wd-img width="200rpx" height="200rpx" :src="item.image"></wd-img>
+                        <view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
+                            可约9:00
+                        </view>
+                    </view>
+                    <view class="flex-1">
+                        <view class="flex items-center">
+                            <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
+                                {{ item.name }}
+                            </view>
+                            <view>
+                                <tea-specialist-level :level="TeaSpecialistLevelValue[item.teamasterLevel[0].level_name]"></tea-specialist-level>
+                            </view>
+                        </view>
+
+                        <view class="flex items-center">
+                            <template v-for="(label, labelIndex) in item.teamasterlabel" :key="labelIndex">
+                                <!-- 上门服务 -->
+                                <view class="mr-12rpx" v-if="label.id == 1">
+                                    <wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
+                                </view>
+
+                                <!-- 到点服务 -->
+                                <view class="mr-12rpx" v-if="label.id == 2">
+                                    <wd-tag color="#F55726" bg-color="#F55726" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
+                                </view>
+                            </template>
+                    
+                            <view class="mr-12rpx">
+                                <wd-tag color="#818CA9" bg-color="#F3F3F3">{{ item.both }}</wd-tag>
+                            </view>
+                            <view class="flex items-center mt-8rpx">
+                                <wd-img :src="item.sex == 1 ? `${OSS}icon/icon_man.png` : `${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
+                            </view>
+                        </view>
+
+                        <view class="flex items-center justify-between mt-18rpx">
+                            <view class="mr-20rpx w-200rpx">
+                                <view class="flex items-center" v-if="item.authent_status == 1">
+                                    <view class="flex items-center">
+                                        <wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
+                                    </view>
+                                    <text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
+                                </view>
+                            </view>
+
+                            <view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您{{ item.distance }}km</view>
+                        </view>
+
+                        <view class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx">
+                            <view class="">
+                                <text class="text-32rpx">￥{{ item.price }}</text>
+                                <text class="text-24rpx">/小时</text>
+                            </view>
+                            <view class="font-400 text-22rpx leading-32rpx text-#92928C">最快{{ item.speed }}分钟到达</view>
+                        </view>
+                    </view>
+                </view>
+            </mescroll-body>
+        </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 { getTeaSpecialistLevels, getTeaSpecialist } from '@/api/tea-specialist'
+	import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
+	import type { ITeaSpecialistResult } from '@/api/types/tea-specialist'
+	import {TeaSpecialistLevelValue} from '@/utils/teaSpecialist'
+	
+	const OSS = inject('OSS')
+	const navbarHeight = inject('navbarHeight')
+
+    // 茶艺师等级
+	const TeaSpecialistLevels = reactive<Array<{ id: number, status: number, level_name: string}>>([])
+    const selectedLevel = ref<Array<any>>([]) // 选择茶艺师的点击等级
+
+    // mescroll
+	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+    const downOption = {
+		auto: true
+	}
+	const upOption = {
+		empty: {
+			icon : OSS + 'icon/icon_reserver_empty.png',
+			tip: '暂无预约信息',
+		},
+		auto: true,
+		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
+	}
+    const orderStatus = ref<string>('')
+	const list = ref<Array<any>>([]) // 茶室列表
+    const keywords = ref<string>('') // 搜索关键词
+	const canReset = ref<boolean>(false) // 避免onShow重复加载
+
+    onShow(() => {
+        if (canReset.value) {
+            list.value = []
+            getMescroll().resetUpScroll()
+        }
+        canReset.value = true
+    })
+
+    onLoad(async () => {
+		// 获取茶艺师等级tab
+		getTeaSpecialistLevels().then((res:Array<any>) => {
+			TeaSpecialistLevels.push(...res)
+		})
+	})
+
+
+    const List = {
+        /**
+         * 筛选表
+         */
+        upCallback: (mescroll) => {
+			const filter = {
+				level_id: selectedLevel.value.join(',') || '0',
+				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: keywords.value
+			}
+
+			getTeaSpecialist(filter).then((res: ITeaSpecialistResult) => {
+				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() // 请求失败, 结束加载
+			})
+		},
+    
+
+        /**
+         * 获取茶艺师等级
+         * @param value 
+         */
+        handleToggleTeaSpecialistLevel: (value: any) => {
+			const index = selectedLevel.value.indexOf(value);
+			if (index > -1) {
+				// 如果已经选择了该等级，则取消选择
+				selectedLevel.value.splice(index, 1);
+			} else {
+				// 如果未选择该等级，则添加选择
+				selectedLevel.value.push(value);
+			}
+
+			List.handleSearch()
+		},
+
+        /**
+         * 搜索茶艺师列表
+         */
+        handleSearch: () => {
+			list.value = [] 
+			getMescroll().resetUpScroll()
+        },
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $cz-page-background;
+    }
+
+    .home-bg {
+        background-color: $cz-page-background;
+        background-image: url(#{$OSS}images/home/home_bg.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+    }
+
+    .search-box {
+		:deep() {
+			.wd-search {
+				background: transparent !important;
+			}
+		}
+	}
+
+	.ele-center {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+    // 隐藏横向滚动条
+	.tea-level-scrollbar {
+		&::-webkit-scrollbar {
+			display: none;
+			-ms-overflow-style: none;
+			scrollbar-width: none;
+		}
+	}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 228da46..fbb4ed0 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -534,6 +534,29 @@
           }
         }
       ]
+    },
+    {
+      "root": "bundle_b",
+      "pages": [
+        {
+          "path": "pages/tea-specialist/detail",
+          "type": "page",
+          "needLogin": "true",
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/tea-specialist/list",
+          "type": "page",
+          "needLogin": true,
+          "layout": "tabbar",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
   ]
 }
\ No newline at end of file
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 3b32f63..c7c2d41 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -30,8 +30,7 @@
 
 		<view :style="{ paddingTop: navbarHeight + 'px' }">
 			<view class="mt-32rpx mx-30rpx">
-				<wd-swiper height="240rpx" indicatorPosition="bottom-left"
-					:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
+				<wd-swiper height="240rpx" indicatorPosition="bottom-left" :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
 			</view>
 
 			<view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
@@ -39,12 +38,8 @@
 				<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
 			</view>
 
-			<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx" @click="Index.handleToWxOfficialAccount">
-				<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 class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
+				<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image7.png`" mode="scaleToFill" />
 			</view>
 
 			<view class="relative mt-40rpx h-44rpx mx-30rpx">
@@ -267,19 +262,6 @@
 			getMescroll().resetUpScroll()
 		},
 
-		/**
-		 * 跳转公众号
-		 */
-		handleToWxOfficialAccount: () => {
-			wx.openOfficialAccountProfile({
-				username: '', // 此处填写公众号的原始 ID
-				success: res => {
-				},
-				fail: res => {
-				}
-			})
-		},
-
 		/**
 		 * 更新定位信息
 		 */
diff --git a/vite.config.ts b/vite.config.ts
index 8b5629a..51d91d2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,7 +62,7 @@ export default ({ command, mode }) => {
 				exclude: ['**/components/**/**.*'],
 				// homePage 通过 vue 文件的 route-block 的type="home"来设定
 				// pages 目录为 src/pages，分包目录不能配置在pages目录下
-				subPackages: ['src/bundle'], // 是个数组，可以配置多个，但是不能为pages里面的目录
+				subPackages: ['src/bundle', 'src/bundle_b'], // 是个数组，可以配置多个，但是不能为pages里面的目录
 				dts: 'src/types/uni-pages.d.ts',
 			}),
 			UniLayouts(),