wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善茶艺师套餐功能

Browse Source
This commit is contained in:
wangxiaowei
2026-03-28 16:42:40 +08:00
parent 69b0dce2bd
commit 4729dc5ae8
22 changed files with 816 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/bundle/package/tea-specialist.vue
View File

@ -19,7 +19,7 @@
<view class="w-216rpx mb-30rpx 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.avatar" width="216rpx" height="216rpx" mode="aspectFill"></wd-img>
<wd-img :src="item.image" width="216rpx" height="216rpx" mode="aspectFill"></wd-img>
<view class="absolute bottom-0 left-0 z-10">
<!-- 选中的样式 -->
<view
@ -34,7 +34,9 @@
</view>
</view>
<view class="text-28rpx text-[#2A3B56] mt-12rpx line-1">{{ item.name }}</view>
<view class="text-24rpx text-[#F55B02] mt-6rpx">{{ item.level }}</view>
<view class="text-24rpx text-[#F55B02] mt-6rpx">
<tea-specialist-level :level="item.level"></tea-specialist-level>
</view>
</view>
</view>
@ -50,23 +52,25 @@
</view>
<!-- 茶艺师详细信息模块 -->
<view class="mx-28rpx mt-20rpx mb-30rpx relative border-2rpx border-solid border-[#F6F4F4]" v-if="selectedSpecialist">
<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">{{ selectedSpecialist.name }}</view>
<view class="text-28rpx text-[#120D26] mb-12rpx">{{ selectedSpecialist.title }}</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>商家认证的名称</text>
<text>商家认证</text>
</view>
<view class="flex items-center">
<wd-rate v-model="selectedSpecialist.rating" readonly active-color="#FF5951" allow-half
<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">{{ selectedSpecialist.rating }} 推荐</text>
<text class="text-24rpx text-[#606266] ml-10rpx">{{ info.sold }} 推荐</text>
</view>
</view>
<view class="w-120rpx h-120rpx" @click="TeaSpecialist.handleChat">
<view class="w-120rpx h-120rpx">
<wd-img :src="`${OSS}icon/icon_msg.png`" width="120rpx" height="120rpx" placeholder="icon"></wd-img>
</view>
</view>
@ -77,10 +81,8 @@
<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">到店服务</text>
<text class="ml-20rpx font-400 text-24rpx leading-34rpx">上门服务</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> -->
<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>
<!-- 基本属性 -->
@ -89,25 +91,25 @@
<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]">女</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]">21岁</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]">165cm</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]">53kg</text>
<text class="text-[#303133]">{{ info.weight }}kg</text>
</view>
</view>
@ -115,7 +117,8 @@
<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">123</view>
<view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx"
v-for="item in info.label" :key="item">{{ item }}</view>
</view>
</view>
</view>
@ -135,55 +138,106 @@
<script lang="ts" setup>
import { inject, ref, computed } from 'vue'
import { router } from '@/utils/tools'
import { getTeaSpecialist, getTeaSpecialistDetail } from '@/api/tea-specialist'
import type { ITeaSpecialistResult } from '@/api/types/tea-specialist'
const OSS = inject('OSS')
// 模拟数据列表
const list = ref([
{ name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=1', rating: 4.5 },
{ name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=2', rating: 4.8 },
{ name: '夏雪', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=3', rating: 5.0 },
{ name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=4', rating: 4.2 },
{ name: '春风', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=5', rating: 4.5 },
{ name: '夏雪', level: '初级茶艺师', title: '清风茶艺师', avatar: 'https://picsum.photos/400/400?radom=6', rating: 4.5 }
])
// 茶艺师列表及分页参数
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: [], // 专属圈子标签
})
onLoad(() => {
TeaSpecialist.handleGetTeaSpecialistList()
})
const TeaSpecialist = {
/**
* 获取茶艺师列表，分页加载
*/
handleGetTeaSpecialistList: async () => {
if (!hasMore.value) return
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,
}
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: () => {
uni.showToast({
title: '加载更多',
icon: 'none'
})
TeaSpecialist.handleGetTeaSpecialistList()
},
/**
* 点击聊天
* 获取茶艺师详情
*/
handleChat: () => {
uni.showToast({
title: '打开聊天',
icon: 'none'
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: () => {
router.navigateTo('/bundle/package/reserve?id=439')
router.navigateTo(`/bundle/package/reserve?id=${info.value.team_user_id}`)
}
}