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 11:45:50 +08:00
parent c5fdc32aef
commit d650d2c60d
2 changed files with 44 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
<template>
<view class="home-bg">
<view class="home-bg w-[100%] sticky top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #fff !important;">
<template #left>
<view class="flex items-center" @click="List.handleBack">
<view class="mt-4rpx">
@ -21,62 +21,40 @@
</template>
</wd-navbar>
<view class="search-box relative">
<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx !pr-160rpx" v-model="keywords" light >
</wd-search>
<view
class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx"
@click="List.handleSearch">
搜索
</view>
<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">
<wd-icon name="search" size="32rpx" color="#C0C4CC"></wd-icon>
<input
type="text"
class="flex-1 ml-16rpx text-28rpx h-full bg-transparent"
placeholder="茶艺师名称"
placeholder-style="color: #C0C4CC"
v-model="keywords"
@confirm="List.handleSearch"
confirm-type="search"
/>
<view
class="w-142rpx h-60rpx flex justify-center items-center rounded-30rpx bg-[#4C9F44] text-[#fff] text-28rpx"
@click="List.handleSearch">
搜索
</view>
</view>
</view>
</view>
<!-- 团体茶艺师预购 -->
<!-- <view class="">
<view class="mx-30rpx flex items-center">
<view class="flex items-center mr-14rpx">
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/h5/home/home_image1.png`" />
</view>
<view class="flex items-center mr-14rpx">
<view class="flex items-center">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
</view>
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">专业资质</view>
</view>
<view class="flex items-center">
<view class="flex items-center">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
</view>
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">定制方案</view>
</view>
</view> -->
<!-- <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx"> -->
<!-- <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx" @click="router.navigateTo('/pages/reserve/group-tea-specialist')"> -->
<!-- <wd-img width="690rpx" height="260rpx" :src="`${OSS}images/h5/home/home_image2.png`" mode="scaleToFill" />
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
<text class="mr-8rpx">一键约</text>
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
</view>
</view>
</view> -->
<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>
</view>
<!-- 茶艺师列表 -->
<view class="">
<view class="relative mt-44rpx h-44rpx mx-30rpx">
<view class="absolute ele-center">
<wd-img width="252rpx" height="24rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">茶艺师</view>
</view>
<view class="level-bg pt-28rpx">
<!-- 茶艺师等级筛选 -->
<view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx my-30rpx tea-level-scrollbar">
<view 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="selectedLevel.includes(item.level) ? 'bg-[#4C9F44] text-[#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)">
{{ item.label}}
</view>
@ -286,7 +264,7 @@
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
// background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}
@ -294,8 +272,12 @@
.search-box {
:deep() {
.wd-search {
background: transparent !important;
background: #fff !important;
}
.wd-search__search-left-icon {
color: #999 !important;
}
}
}
@ -318,4 +300,10 @@
min-width: 80rpx;
height: 38rpx;
}
.level-bg {
background: linear-gradient( 180deg, #E9FFF1 0%, #F6F7F8 100%) no-repeat;
background-size: 100% 220rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
}
</style>

14
src/utils/teaSpecialist.ts
View File

@ -1,10 +1,10 @@
// 茶艺师等级枚举
export enum TeaSpecialistLevel {
Gold = '金牌茶艺师',
Senior = '高级茶艺师',
Intermediate = '中级茶艺师',
Junior = '初级茶艺师',
Enthusiast = '茶艺爱好者'
Gold = '云华茶艺师',
Senior = '竹影茶艺师',
Intermediate = '明月茶艺师',
Junior = '清风茶艺师',
// Enthusiast = '茶艺爱好者'
}
// 等级名称对应值
@ -13,7 +13,7 @@ export const TeaSpecialistLevelValue = {
['高级茶艺师']: 'senior',
['中级茶艺师']: 'intermediate',
['初级茶艺师']: 'junior',
['茶艺爱好者']: 'enthusiast',
// ['茶艺爱好者']: 'enthusiast',
}
// 茶艺师对象结构
@ -22,5 +22,5 @@ export const TeaSpecialistLevels = [
{ id: 2, value: 'senior', label: TeaSpecialistLevel.Senior, level: 4 },
{ id: 3, value: 'intermediate', label: TeaSpecialistLevel.Intermediate, level: 3 },
{ id: 4, value: 'junior', label: TeaSpecialistLevel.Junior, level: 2 },
{ id: 5, value: 'enthusiast', label: TeaSpecialistLevel.Enthusiast, level: 1 }
// { id: 5, value: 'enthusiast', label: TeaSpecialistLevel.Enthusiast, level: 1 }
];