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 14:26:52 +08:00
parent 274ce84de1
commit c166bb6519
1 changed files with 211 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/bundle_b/pages/tea-specialist/list.vue
View File

@ -24,15 +24,9 @@
<view class="search-box px-30rpx pb-10rpx pt-20rpx bg-[#fff]"> <view class="search-box px-30rpx pb-10rpx pt-20rpx bg-[#fff]">
<view class="w-full h-72rpx bg-[#F6F7F8] rounded-36rpx flex items-center pl-30rpx pr-6rpx"> <view class="w-full h-72rpx bg-[#F6F7F8] rounded-36rpx flex items-center pl-30rpx pr-6rpx">
<wd-icon name="search" size="32rpx" color="#C0C4CC"></wd-icon> <wd-icon name="search" size="32rpx" color="#C0C4CC"></wd-icon>
<input <input type="text" class="flex-1 ml-16rpx text-28rpx h-full bg-transparent" placeholder="茶艺师名称"
type="text" placeholder-style="color: #C0C4CC" v-model="keywords" @confirm="List.handleSearch"
class="flex-1 ml-16rpx text-28rpx h-full bg-transparent" confirm-type="search" />
placeholder="茶艺师名称"
placeholder-style="color: #C0C4CC"
v-model="keywords"
@confirm="List.handleSearch"
confirm-type="search"
/>
<view <view
class="w-142rpx h-60rpx flex justify-center items-center rounded-30rpx bg-[#4C9F44] text-[#fff] text-28rpx" class="w-142rpx h-60rpx flex justify-center items-center rounded-30rpx bg-[#4C9F44] text-[#fff] text-28rpx"
@click="List.handleSearch"> @click="List.handleSearch">
@ -43,16 +37,17 @@
</view> </view>
<!-- 团体茶艺师预购 --> <!-- 团体茶艺师预购 -->
<view class="flex items-center justify-center pt-20rpx bg-[#fff] pb-28rpx" @click="router.navigateTo('/bundle/reserve-group/reserve-group')"> <view class="flex items-center justify-center pt-20rpx bg-[#fff] pb-28rpx"
@click="router.navigateTo('/bundle/reserve-group/reserve-group')">
<wd-img :src="`${OSS}images/teaspecialist/image1.png`" width="690rpx" height="320rpx"></wd-img> <wd-img :src="`${OSS}images/teaspecialist/image1.png`" width="690rpx" height="320rpx"></wd-img>
</view> </view>
<!-- 茶艺师列表 --> <!-- 茶艺师列表 -->
<view class="level-bg pt-28rpx"> <view class="level-bg pt-28rpx">
<!-- 茶艺师等级筛选 --> <!-- 茶艺师等级筛选 -->
<view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx mb-30rpx tea-level-scrollbar">
<view <view
v-for="(item, index) in TeaSpecialistLevels" :key="index" class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx mb-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="h-64rpx rounded-12rpx px-24rpx py-12rpx flex items-center justify-center font-400 text-28rpx mr-20rpx"
:class="selectedLevel.includes(item.level) ? 'border-2rpx border-solid border-[#4C9F44] text-[#4C9F44] bg-[#fff]' : 'bg-[#FFF] text-[#606266]'" :class="selectedLevel.includes(item.level) ? 'border-2rpx border-solid border-[#4C9F44] text-[#4C9F44] bg-[#fff]' : 'bg-[#FFF] text-[#606266]'"
@click="List.handleToggleTeaSpecialistLevel(item.level)"> @click="List.handleToggleTeaSpecialistLevel(item.level)">
@ -60,11 +55,12 @@
</view> </view>
</view> </view>
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="List.upCallback" :up="upOption" fixed> <mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="List.upCallback"
<view :up="upOption" fixed>
class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx relative" <view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx relative"
v-for="(item, index) in list" :key="index"> v-for="(item, index) in list" :key="index">
<view class="tea-specialist-time absolute z-3 top-6rpx left-0 bg-[#4C9F44] text-[#fff] font-400 text-18rpx flex items-center justify-center"> <view
class="tea-specialist-time absolute z-3 top-6rpx left-0 bg-[#4C9F44] text-[#fff] font-400 text-18rpx flex items-center justify-center">
<text v-if="item.state == 0">可约</text> <text v-if="item.state == 0">可约</text>
<text v-if="item.state == 1">工作中</text> <text v-if="item.state == 1">工作中</text>
<text v-if="item.state == 2">不可约</text> <text v-if="item.state == 2">不可约</text>
@ -77,44 +73,59 @@
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx"> <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
{{ item.name }} {{ item.name }}
</view> </view>
<view> <view class="flex items-center">
<tea-specialist-level :level="item.level"></tea-specialist-level> <wd-icon name="star-on" size="22rpx" color="#FF5951"></wd-icon>
<view class="font-400 text-24rpx text-[#FF5951] leading-34rpx ml-6rpx">5.0</view>
<!-- <tea-specialist-level :level="item.level"></tea-specialist-level> -->
</view> </view>
</view> </view>
<view class="flex items-center"> <view class="flex items-center">
<!-- 到店服务标签 --> <!-- 到店服务标签 -->
<view class="mr-12rpx" v-if="item.server_type == 1 || item.server_type == 3"> <view class="mr-12rpx" v-if="item.server_type == 1 || item.server_type == 3">
<wd-tag color="#F55726" bg-color="#F55726" plain custom-class="!rounded-4rpx">到店服务</wd-tag> <wd-tag color="#F55726" bg-color="#F55726" plain
custom-class="!rounded-4rpx">到店服务</wd-tag>
</view> </view>
<!-- 上门服务标签 --> <!-- 上门服务标签 -->
<view class="mr-12rpx" v-if="item.server_type == 2 || item.server_type == 3"> <view class="mr-12rpx" v-if="item.server_type == 2 || item.server_type == 3">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag> <wd-tag color="#40AE36" bg-color="#40AE36" plain
custom-class="!rounded-4rpx">上门服务</wd-tag>
</view> </view>
<view class="mr-12rpx"> <view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">{{ item.both }}岁</wd-tag> <wd-tag color="#818CA9" bg-color="#F3F3F3">{{ item.both }}岁</wd-tag>
</view> </view>
<view class="flex items-center mt-8rpx"> <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> <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> </view>
<view class="flex flex-wrap items-center mt-14rpx">
<view
class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx">
123</view>
</view>
<view class="flex items-center justify-between mt-18rpx"> <view class="flex items-center justify-between mt-18rpx">
<view class="mr-20rpx w-200rpx"> <view class="mr-20rpx w-200rpx">
<view class="flex items-center"> <view class="flex items-center">
<view class="flex items-center"> <view class="flex items-center">
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img> <wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx"
height="36rpx"></wd-img>
</view> </view>
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text> <text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
</view> </view>
</view> </view>
<view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您{{ item.distance }}km</view> <view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您{{
item.distance
}}km</view>
</view> </view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx"> <view
class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx">
<view class=""> <view class="">
<text class="text-32rpx">￥{{ item.price }}</text> <text class="text-32rpx">￥{{ item.price }}</text>
<text class="text-24rpx">/小时</text> <text class="text-24rpx">/小时</text>