274 lines
12 KiB
Vue
274 lines
12 KiB
Vue
<route lang="jsonc" type="page">{
|
|
"needLogin": true,
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}</route>
|
|
|
|
<template>
|
|
<view class="pb-160rpx min-h-100vh bg-[#fff]">
|
|
<navbar title="选择茶艺师" custom-class='!bg-[#fff]'></navbar>
|
|
|
|
<!-- 茶艺师列表部分 -->
|
|
<view class="bg-[#fff] px-30rpx pt-20rpx pb-40rpx">
|
|
<view class="text-30rpx font-bold text-[#303133]">茶艺师</view>
|
|
<view class="text-24rpx text-[#818CA9] mt-12rpx mb-32rpx font-500">匹配心动茶艺师</view>
|
|
|
|
<view class="grid grid-cols-3 gap-y-20rpx gap-x-20rpx justify-items-center">
|
|
<view class="w-216rpx relative" v-for="(item, index) in list" :key="index"
|
|
@click="TeaSpecialist.handleSelect(index)">
|
|
<view class="relative w-216rpx h-216rpx rounded-16rpx overflow-hidden">
|
|
<wd-img :src="item.image" width="216rpx" height="216rpx" mode="aspectFill"></wd-img>
|
|
<view class="absolute bottom-0 left-0 z-10">
|
|
<!-- 选中的样式 -->
|
|
<view
|
|
class="w-40rpx h-40rpx rounded-full bg-[#4C9F44] flex items-center justify-center border-2rpx border-solid border-[#4C9F44]"
|
|
v-if="selectedIndex === index">
|
|
<wd-icon name="check-bold" size="24rpx" color="#fff"></wd-icon>
|
|
</view>
|
|
<!-- 未选中的样式 -->
|
|
<view
|
|
class="w-40rpx h-40rpx rounded-full bg-[rgba(255,255,255,0.9)] border-2rpx border-solid border-[#d4d4d4]"
|
|
v-else></view>
|
|
</view>
|
|
</view>
|
|
<view class="text-28rpx text-[#2A3B56] mt-12rpx line-1">{{ item.name }}</view>
|
|
<view class="text-24rpx text-[#F55B02] mt-6rpx">
|
|
<tea-specialist-level :level="item.level"></tea-specialist-level>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex justify-center mt-40rpx">
|
|
<view class="flex items-center justify-center bg-[#F6F7F8] rounded-34rpx h-100rpx w-320rpx"
|
|
@click="TeaSpecialist.handleMore">
|
|
<wd-img :src="`${OSS}icon/icon_more.png`" width="36rpx" height="36rpx"></wd-img>
|
|
<text
|
|
class="text-26rpx text-[#606266] ml-24rpx mr-8rpx font-400 text-28rpx leading-40rpx">查看更多</text>
|
|
<wd-icon name="arrow-down" size="28rpx" color="#606266"></wd-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 茶艺师详细信息模块 -->
|
|
<view class="mx-28rpx mt-20rpx mb-30rpx relative border-2rpx border-solid border-[#F6F4F4]" v-if="info">
|
|
<view class="flex justify-between items-start bg-[#F5F7FF] rounded-t-16rpx p-30rpx">
|
|
<view>
|
|
<view class="text-36rpx font-bold text-[#303133] mb-12rpx">{{ info.name }}</view>
|
|
<view class="text-28rpx text-[#120D26] mb-12rpx">
|
|
<tea-specialist-level :level="info.level"></tea-specialist-level>
|
|
</view>
|
|
<view class="flex items-center text-24rpx text-[#909399] mb-16rpx">
|
|
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"
|
|
class="mr-8rpx"></wd-img>
|
|
<text @click="TeaSpecialist.handlePreviewInfo">{{ info.company_abv }}</text>
|
|
</view>
|
|
<view class="flex items-center">
|
|
<wd-rate v-model="info.sold" readonly active-color="#FF5951" allow-half
|
|
active-icon="star-filled" icon="star" space="4rpx" />
|
|
<text class="text-24rpx text-[#606266] ml-10rpx">{{ info.sold }} 推荐</text>
|
|
</view>
|
|
</view>
|
|
<view class="w-120rpx h-120rpx">
|
|
<wd-img :src="`${OSS}icon/icon_msg.png`" width="120rpx" height="120rpx" placeholder="icon"></wd-img>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-[#FCFCFE] rounded-b-16rpx p-30rpx">
|
|
<!-- 服务方式 -->
|
|
|
|
<view class="bg-[#EBFBF7] h-64rpx rounded-12rpx p-14rpx flex items-center mt-22rpx text-[#35C1A0]">
|
|
<wd-img :src="`${OSS}icon/icon_heart.png`" width="36rpx" height="36rpx"></wd-img>
|
|
<text class="font-bold text-24rpx leading-34rpx ml-16rpx">服务方式</text>
|
|
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 1">到店服务</text>
|
|
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2">上门服务</text>
|
|
</view>
|
|
|
|
<!-- 基本属性 -->
|
|
<view class="mt-36rpx grid grid-cols-2 gap-y-24rpx px-10rpx">
|
|
<view class="flex items-center text-28rpx text-[#606266]">
|
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_gender.png`"
|
|
class="mr-16rpx"></wd-img>
|
|
<text class="mr-16rpx">性别:</text>
|
|
<text class="text-[#303133]">{{ info.sex }}</text>
|
|
</view>
|
|
<view class="flex items-center text-28rpx text-[#606266]">
|
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_born.png`"
|
|
class="mr-16rpx"></wd-img>
|
|
<text class="mr-16rpx">年龄:</text>
|
|
<text class="text-[#303133]">{{ info.both }}岁</text>
|
|
</view>
|
|
<view class="flex items-center text-28rpx text-[#606266]">
|
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_height.png`"
|
|
class="mr-16rpx"></wd-img>
|
|
<text class="mr-16rpx">身高:</text>
|
|
<text class="text-[#303133]">{{ info.height }}cm</text>
|
|
</view>
|
|
<view class="flex items-center text-28rpx text-[#606266]">
|
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_weight.png`"
|
|
class="mr-16rpx"></wd-img>
|
|
<text class="mr-16rpx">体重:</text>
|
|
<text class="text-[#303133]">{{ info.weight }}kg</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view class="mt-36rpx border border-solid border-[#F0F2F5] rounded-14rpx p-24rpx pb-8rpx bg-[#FFFFFF]">
|
|
<view class="flex flex-wrap">
|
|
<view class="flex flex-wrap items-center">
|
|
<view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx"
|
|
v-for="label in info.label" :key="label.id">{{ label.label_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center"
|
|
:style="{ height: '140rpx' }">
|
|
<view class="text-32rpx flex items-center justify-center leading-90rpx text-center w-full px-60rpx">
|
|
<view class="flex-1 w-full h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="TeaSpecialist.handleNext">下一步</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { inject, ref, computed } from 'vue'
|
|
import { router, previewImage } from '@/utils/tools'
|
|
import { getTeaSpecialist, getTeaSpecialistDetail } from '@/api/tea-specialist'
|
|
import type { ITeaSpecialistResult } from '@/api/types/tea-specialist'
|
|
import { toast } from '@/utils/toast'
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
// 茶艺师列表及分页参数
|
|
const list = ref<any[]>([])
|
|
const page = ref(1)
|
|
const size = 6
|
|
const hasMore = ref(true)
|
|
const selectedIndex = ref(0)
|
|
const selectedSpecialist = computed(() => list.value[selectedIndex.value])
|
|
|
|
const info = ref({
|
|
team_user_id: 0,
|
|
name: '', // 茶艺师名字
|
|
star: 0, // 茶艺师评分
|
|
level: 1, // 茶艺师等级
|
|
sold: 0, // 推荐
|
|
sex: 0, // 性别
|
|
both: 0, // 年龄
|
|
weight: 0, // 体重
|
|
height: 0, // 身高
|
|
mileage_price: 0, // 车马费
|
|
server_type: 0, // 服务方式 1到店 2上门 3两者都有
|
|
label: [], // 专属圈子标签
|
|
company_abv: '', // 公司简称
|
|
company_url: '', // 图片链接
|
|
company_status: 0, // 是否有公司信息
|
|
})
|
|
|
|
const serviceType = ref<number>(1) // 服务方式，默认为到店服务
|
|
|
|
onLoad((args) => {
|
|
serviceType.value = args.serviceType || 1 // 默认到店服务
|
|
|
|
TeaSpecialist.handleGetTeaSpecialistList()
|
|
})
|
|
|
|
const TeaSpecialist = {
|
|
/**
|
|
* 获取茶艺师列表，分页加载
|
|
*/
|
|
handleGetTeaSpecialistList: async () => {
|
|
if (!hasMore.value) return
|
|
console.log("🚀 ~ uni.getStorageSync('teaPackageType'):", uni.getStorageSync('teaPackageType'))
|
|
|
|
const storage = uni.getStorageSync('selectedPackageService')
|
|
const filter = {
|
|
page: page.value,
|
|
size,
|
|
latitude: storage.latitude || import.meta.env.VITE_DEFAULT_LATITUDE,
|
|
longitude: storage.longitude || import.meta.env.VITE_DEFAULT_LONGITUDE,
|
|
level: uni.getStorageSync('teaPackageType'),
|
|
server_type: serviceType.value, // 1到店服务 2上门服务
|
|
}
|
|
try {
|
|
const res = await getTeaSpecialist(filter)
|
|
const curPageData = res.list || []
|
|
if (page.value === 1) {
|
|
list.value = curPageData
|
|
if (curPageData.length > 0) {
|
|
selectedIndex.value = 0
|
|
TeaSpecialist.handleGetTeaSpecialistDetail(curPageData[0].team_user_id)
|
|
}
|
|
} else {
|
|
list.value = list.value.concat(curPageData)
|
|
}
|
|
hasMore.value = curPageData.length === size
|
|
if (hasMore.value) page.value += 1
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
}
|
|
},
|
|
/**
|
|
* 选中某个茶艺师
|
|
*/
|
|
handleSelect: (index: number) => {
|
|
selectedIndex.value = index
|
|
const item = list.value[index]
|
|
if (item && item.team_user_id) {
|
|
TeaSpecialist.handleGetTeaSpecialistDetail(item.team_user_id)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载更多茶艺师
|
|
*/
|
|
handleMore: () => {
|
|
TeaSpecialist.handleGetTeaSpecialistList()
|
|
},
|
|
|
|
/**
|
|
* 获取茶艺师详情
|
|
*/
|
|
handleGetTeaSpecialistDetail: async (id: number) => {
|
|
const res = await getTeaSpecialistDetail({
|
|
team_user_id: id,
|
|
latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
|
|
longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
|
|
})
|
|
info.value = res.teamaster
|
|
},
|
|
|
|
/**
|
|
* 下一步
|
|
*/
|
|
handleNext: () => {
|
|
console.log("🚀 ~ info.value:", info.value)
|
|
router.navigateTo(`/bundle/package/reserve?id=${info.value.team_user_id}`)
|
|
},
|
|
|
|
/**
|
|
* 查看商家信息
|
|
*/
|
|
handlePreviewInfo: () => {
|
|
if (info.value.company_status) {
|
|
previewImage(info.value.company_url, [info.value.company_url])
|
|
} else {
|
|
toast.info('暂无商家信息')
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
</style>
|