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-24 18:50:20 +08:00
parent cb9950a4d7
commit 69b0dce2bd
11 changed files with 1609 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/bundle/package/tea-specialist.vue Normal file
View File

@ -0,0 +1,197 @@
<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="flex flex-wrap justify-between">
<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>
<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">{{ item.level }}</view>
</view>
</view>
<view class="flex justify-center mt-10rpx">
<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="selectedSpecialist">
<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="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>
</view>
<view class="flex items-center">
<wd-rate v-model="selectedSpecialist.rating" 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>
</view>
</view>
<view class="w-120rpx h-120rpx" @click="TeaSpecialist.handleChat">
<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">到店服务</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> -->
</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]">女</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>
</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>
</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>
</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">123</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 } from '@/utils/tools'
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 selectedIndex = ref(0)
const selectedSpecialist = computed(() => list.value[selectedIndex.value])
const TeaSpecialist = {
/**
* 选中某个茶艺师
*/
handleSelect: (index: number) => {
selectedIndex.value = index
},
/**
* 加载更多茶艺师
*/
handleMore: () => {
uni.showToast({
title: '加载更多',
icon: 'none'
})
},
/**
* 点击聊天
*/
handleChat: () => {
uni.showToast({
title: '打开聊天',
icon: 'none'
})
},
/**
* 下一步
*/
handleNext: () => {
router.navigateTo('/bundle/package/reserve?id=439')
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #fff;
}
</style>