Files
2026-03-31 21:59:42 +08:00

538 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 fixed layoutLeft hideLeftIcon>
<template #left>
<view class="h-48rpx flex items-center" @click="Detail.handleBack">
<view class="mt-4rpx">
<wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ isReserve ? '预约茶艺师' : '茶艺师详情' }}
</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="info.image_arr"
mode="aspectFit" @click="Detail.handlePreviewImage"></wd-swiper>
</view>
<!-- 昵称显示 -->
<view class="bg-white rounded-t-16rpx px-30rpx">
<view class="flex items-center pt-36rpx">
<view class="flex items-center">
<view class="font-bold text-34rpx leading-48rpx text-#303133 mr-30rpx">{{ info.name }}</view>
<view class="mt-8rpx">
<tea-specialist-level :level="info.level"></tea-specialist-level>
</view>
</view>
<!-- <view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 {{ Number(info.sold) > 10 ? Number(info.sold) + '+' : Number(info.sold) }}</view> -->
</view>
<view class="flex items-center justify-between mt-4rpx">
<view class="flex items-center">
<wd-rate v-model="info.star" 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>
<view class="flex items-center mt-24rpx">
<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 class="bg-[#EBFBF7] w-692rpx h-64rpx rounded-12rpx p-14rpx flex items-center mt-22rpx text-[#35C1A0]">
<wd-img :src="`${OSS}icon/icon_heart.png`" width="36rpx" height="36rpx"></wd-img>
<text class="font-bold text-24rpx leading-34rpx ml-16rpx">服务方式</text>
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 1 || info.server_type == 3">到店服务</text>
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2 || info.server_type == 3">上门服务</text>
</view>
<view class="font-400 text-24rpx leading-34rpx text-#818CA9 mt-20rpx">距离您{{ info.distance }}km {{ info.is_time }}
</view>
<!-- <view class="flex items-center justify-between mt-24rpx">
<view class="flex items-center">
<view class="mr-20rpx">
<wd-tag color="#FF5951" bg-color="#FEF1F0"
custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx !w-144rpx">{{ info.age_range
}}后茶艺师</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>
</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.sex == 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.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.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.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 pt-20rpx pb-42rpx 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="flex flex-wrap items-center mt-16rpx">
<view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx"
v-for="(label, index) in info.label" :key="index">{{ label.label_name }}</view>
</view>
</view>
</view>
<view class="h-20rpx bg-#F6F7F9 mt-42rpx mb-40rpx"></view>
<view class="mx-30rpx mt-40rpx">
<!-- 费用说明 -->
<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.mileage_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>
<view class="h-1rpx bg-[#F6F7F9] mt-40rpx mb-24rpx"></view>
<view class="flex items-center">
<view class="w-8rpx h-8rpx bg-[#6A6363] rounded-full mr-12rpx"></view>
<view class="font-500 text-26rpx leading-48rpx text-[#F29747]">茶艺师需提前一小时预约两小时起订</view>
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view>
<view v-if="!isReserve"
class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-24rpx pt-36rpx pb-28rpx">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff"
@click="Detail.handleReserveTeaspecialist">
立即预定</view>
</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-630rpx 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 { getTeaSpecialistDetail } from '@/api/tea-specialist'
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, previewImage } from '@/utils/tools'
import { useUserStore } from '@/store'
import type { IUserInfoVo } from '@/api/types/login'
const OSS = inject('OSS')
// tab
const tab = ref<number>(0)
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
// 茶艺师
const id = ref<number>(0)
const info = ref({
id: 0,
image_arr: [], // 轮播图
name: '', // 茶艺师名字
star: 0, // 茶艺师评分
sold: 0, // 已预约
age_range: '00', // 茶艺师年龄段
level: 1, // 茶艺师等级
distance: 0, // 距离
is_time: '', // 预计到达
sex: 0, // 性别
both: 0, // 年龄
weight: 0, // 体重
height: 0, // 身高
hobby_introduce: '', // 兴趣爱好介绍
price: 0, // 服务费
mileage_price: 0, // 车马费
server_type: 0, // 服务方式 1到店 2上门 3两者都有
label: [], // 专属圈子标签
})
const latitude = ref<number>(0) // 纬度
const longitude = ref<number>(0) // 经度
// 是否是预约茶艺师页面
const isReserve = ref<boolean>(false)
// 弹窗
const message = useMessage('wd-message-box-slot')
// 打赏茶艺师
const showTipTeaSpecialistPopup = ref<boolean>(false)
const tipList = ref<Array<ITeaSpecialistRewardAmountsResult>>([])
const isOtherTip = ref<boolean>(false) // 是否是其他打赏金额
const tipMoney = ref<string>('') // 其他打赏金额
onLoad(async (args) => {
console.log("🚀 ~ args:", args)
const userStore = useUserStore()
userInfo.value = userStore.userInfo
id.value = args.id || 0
Detail.handleGetTeaSpecialistDetail()
// 如果是从分享进入的未登录的情况下
uni.$on('refreshTeaSpecialistDetails', (params) => {
// 处理未登录的情况下
id.value = id.value
uni.$off('refreshTeaSpecialistDetails')
Detail.handleGetTeaSpecialistDetail()
})
// rate.value = info.value.star
// tabList.value = info.value.textarea
// console.log("🚀 ~ tabList:", res)
// // 茶艺师是否上线
// // if (info.up_status == 0) {
// // isReserve.value = true
// // }
// if (info.value.teamasterlabel) {
// info.value.teamasterlabel.map(item => {
// if (item.label_name == '90后茶艺师') {
// is90.value = true
// }
// })
// }
// 获取打赏金额
// getTeaSpecialistRewardAmounts().then((res: Array<ITeaSpecialistRewardAmountsResult>) => {
// tipList.value = res
// })
})
onUnload(() => {
uni.$off('refreshTeaSpecialistDetails')
})
// 茶艺师分享
onShareAppMessage(() => {
return {
title: info.value.name || '预约茶艺师',
path: `/bundle_b/pages/tea-specialist/detail?id=${id.value}`,
}
})
const Detail = {
/**
* 获取茶艺师详情
*/
handleGetTeaSpecialistDetail: async () => {
const res = await getTeaSpecialistDetail({
team_user_id: id.value,
latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
})
info.value = res.teamaster
},
/**
* TODO 处理收藏-暂时不要
*/
handleCollect: async () => {
// let status = info.collect == 0 ? 1 : 0
// await collectTeaSpecialist({
// id: id.value,
// status
// })
// info.collect = info.collect == 0 ? 1 : 0
},
/**
* TODO 处理分享-暂时不要
*/
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,
// })
// })
// },
/**
* TODO 打赏茶艺师-暂时不要
*/
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}`)
}
},
/**
* TODO 打赏茶艺师其它金额-暂时不要
*/
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: () => {
// id.value - 茶艺师的ID
router.navigateTo(`/bundle_b/pages/tea-specialist/reserve?id=${id.value}`)
},
/**
* 分享的页面没有栈所以需要switch方法跳转
*/
handleBack: () => {
router.navigateBack().catch(err => {
router.switchTab('/pages/index/index')
})
},
/**
* 预览图片
*/
handlePreviewImage: (e: { index: number, item: any }) => {
previewImage(info.value.image_arr[e.index], info.value.image_arr)
}
}
</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>