茶艺师列表添加筛选

src/api/tea-specialist.ts

@@ -17,8 +17,10 @@ export interface ITeaSpecialistParams {
     longitude: number
     level?: string
     search?: string
-    server_type?: number // 1到店服务 2上门服务
+    server_type?: string | number // 1到店服务 2上门服务
-    status?: number // 0可约 1已约 2已取消
+    status?: string | number // 0可约 1已约 2已取消
+    state?: string | number // 0全部 1已约 2不可约
+    city_id?: string | number // 城市ID
 }
 
 export function getTeaSpecialist(data: ITeaSpecialistParams) {

src/bundle/package/tea-specialist.vue

@@ -195,6 +195,7 @@ const TeaSpecialist = {
             level: uni.getStorageSync('teaPackageType'),
             server_type: serviceType.value, // 1到店服务 2上门服务
             state: 1, // 1可约 2不可约
+            city_id: uni.getStorageSync('cityId') || 0,
         }
         try {
             const res = await getTeaSpecialist(filter)

src/bundle_b/pages/tea-specialist/list.vue

@@ -9,6 +9,63 @@
 
 <template>
     <view class="home-bg">
+        <!-- 茶艺师-筛选 -->
+        <wd-popup v-model="showFilterPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
+            <view class="relative">
+                <view class="absolute top-18rpx right-30rpx" @click="showFilterPopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">筛选</view>
+
+                <view class="">
+                    <!-- 性别筛选 -->
+                    <view class="mx-30rpx mb-30rpx">
+                        <view class="text-32rpx leading-44rpx text-#303133">茶艺师性别</view>
+                        <view class="flex items-center mt-28rpx">
+                            <view class="h-60rpx w-178rpx rounded-8rpx flex items-center justify-center mr-20rpx"
+                                :class="gender === '1' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#606266]'"
+                                @click="List.handleGenderChange('1')">
+                                <text class="text-26rpx leading-36rpx">男</text>
+                            </view>
+                            <view class="h-60rpx w-178rpx rounded-8rpx flex items-center justify-center"
+                                :class="gender === '2' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#606266]'"
+                                @click="List.handleGenderChange('2')">
+                                <text class="text-26rpx leading-36rpx">女</text>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 服务方式筛选 -->
+                    <view class="mx-30rpx mb-30rpx">
+                        <view class="text-32rpx leading-44rpx text-#303133">服务方式</view>
+                        <view class="flex items-center mt-28rpx">
+                            <view class="h-60rpx w-178rpx rounded-8rpx flex items-center justify-center mr-20rpx"
+                                :class="serverType === '3' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#606266]'"
+                                @click="List.handleServerTypeChange('3')">
+                                <text class="text-26rpx leading-36rpx">全部服务</text>
+                            </view>
+
+                            <view class="h-60rpx w-178rpx rounded-8rpx flex items-center justify-center mr-20rpx"
+                                :class="serverType === '1' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#606266]'"
+                                @click="List.handleServerTypeChange('1')">
+                                <text class="text-26rpx leading-36rpx">到店服务</text>
+                            </view>
+                            <view class="h-60rpx w-178rpx rounded-8rpx flex items-center justify-center"
+                                :class="serverType === '2' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#606266]'"
+                                @click="List.handleServerTypeChange('2')">
+                                <text class="text-26rpx leading-36rpx">上门服务</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="pb-22rpx mt-100rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
+                    <view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="List.handleResetFilter">清空</view>
+                    <view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="List.handleConfirmFilter">确认</view>
+                </view>
+            </view>
+        </wd-popup>
+
         <view class="home-bg w-[100%] sticky top-0 left-0 z-100">
             <wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #fff !important;">
                 <template #left>
@@ -56,13 +113,29 @@
                     </view>
                 </view>
 
-                <view class="ml-30rpx mb-30rpx">
+                <view class="mx-30rpx mb-30rpx">
-                    <view class="flex flex-wrap">
+                    <view class="flex items-center justify-between">
+                        <view class="flex items-center">
                             <view class="mr-20rpx">
-                            <wd-checkbox v-model="condition1" shape="square" checked-color="#4C9F44" @change="List.handleRadioClick('condition1', 1)">可约</wd-checkbox>
+                                <wd-checkbox v-model="condition1" shape="square" checked-color="#4C9F44" @change="List.handleRadioClick('condition1', 1)">
+                                    <text class="text-[#909399]">只看可约</text>
+                                </wd-checkbox>
+                            </view>
+                            <view class="mr-20rpx">
+                                <wd-checkbox v-model="condition3" shape="square" checked-color="#4C9F44" @change="List.handleRadioClick('condition3', 3)">
+                                    <text class="text-[#909399]">只看工作中</text>
+                                </wd-checkbox>
                             </view>
                             <view>
-                            <wd-checkbox v-model="condition2" shape="square" checked-color="#4C9F44" @change="List.handleRadioClick('condition2', 2)">不可约</wd-checkbox>
+                                <wd-checkbox v-model="condition2" shape="square" checked-color="#4C9F44" @change="List.handleRadioClick('condition2', 2)">
+                                    <text class="text-[#909399]">只看不可约</text>
+                                </wd-checkbox>
+                            </view>       
+                        </view>
+
+                        <view class="flex items-center" @click="showFilterPopup = true">
+                            <wd-icon name="filter1" size="32rpx" color="#909399"></wd-icon>
+                            <view class="text-[#909399]">筛选</view>
                         </view>
                     </view>
                 </view>
@@ -191,8 +264,9 @@ const upOption = {
 const orderStatus = ref<string>('')
 const list = ref<Array<any>>([]) // 茶室列表
 const keywords = ref<string>('') // 搜索关键词
-
+const cityId = ref<number>(0)
 onLoad(async () => {
+    console.log("🚀 ~ 213:", 213)
     uni.$on('refreshTeaSpecialist', () => {
         list.value = []
         getMescroll().resetUpScroll()
@@ -215,6 +289,10 @@ onShareAppMessage(() => {
 const condition = ref<string>('') // 当前选中的筛选条件
 const condition1 = ref<boolean>(false)
 const condition2 = ref<boolean>(false)
+const condition3 = ref<boolean>(false)
+const showFilterPopup = ref<boolean>(false)
+const gender = ref<string>('')
+const serverType = ref<string>('')
 
 const List = {
     handleGetLabelStyle: (index: number) => {
@@ -238,8 +316,10 @@ const List = {
             latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
             longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
             search: keywords.value,
-            server_type: 0,
+            server_type: serverType.value || '',
             state: condition.value || 0,
+            gender: gender.value || '',
+            city_id: uni.getStorageSync('cityId') || 0,
         }
 
         getTeaSpecialist(filter).then((res: ITeaSpecialistResult) => {
@@ -286,6 +366,7 @@ const List = {
             if (condition1.value) {
                 condition.value = String(value)
                 condition2.value = false
+                condition3.value = false
             } else {
                 condition.value = ''
             }
@@ -293,6 +374,15 @@ const List = {
             if (condition2.value) {
                 condition.value = String(value)
                 condition1.value = false
+                condition3.value = false
+            } else {
+                condition.value = ''
+            }
+        } else if (type === 'condition3') {
+            if (condition3.value) {
+                condition.value = String(value)
+                condition1.value = false
+                condition2.value = false
             } else {
                 condition.value = ''
             }
@@ -300,6 +390,43 @@ const List = {
         List.handleSearch()
     },
 
+    /**
+     * 重置茶艺师筛选
+     */
+    handleResetFilter: () => {
+        condition1.value = false
+        condition2.value = false
+        condition3.value = false
+        condition.value = ''
+        selectedLevel.value = []
+        gender.value = ''
+        serverType.value = ''
+        showFilterPopup.value = false
+        List.handleSearch()
+    },
+
+    /**
+     * 确认筛选
+     */
+    handleConfirmFilter: () => {
+        showFilterPopup.value = false
+        List.handleSearch()
+    },
+
+    /**
+     * 性别筛选切换
+     */
+    handleGenderChange: (value: string) => {
+        gender.value = gender.value === value ? '' : value
+    },
+
+    /**
+     * 服务方式筛选切换
+     */
+    handleServerTypeChange: (value: string) => {
+        serverType.value = serverType.value === value ? '' : value
+    },
+
     /**
      * 搜索茶艺师列表
      */
@@ -378,5 +505,9 @@ page {
     :deep(.wd-radio-group) {
         background: transparent !important;
     }
+
+    :deep(.wd-checkbox__label) {
+        margin-left: 14rpx !important;
+    }
 }
 </style>

src/pages/index/index.vue

@@ -317,6 +317,9 @@
 		latitude.value = location.latitude
 		longitude.value = location.longitude
 
+		// 删除city_id的缓存
+		uni.removeStorageSync('cityId')
+
 		Index.handleResetSearch()
 	})
 
@@ -400,6 +403,7 @@
 				city_id.value = params.id
 				// latitude.value = params.latitude
 				// longitude.value = params.longitude
+				uni.setStorageSync('cityId', params.id)
 				Index.handleResetSearch()
 			})
 			router.navigateTo(`/pages/city/city?lat=${latitude.value}&lng=${longitude.value}`)