筛选

components/FilterList/index.vue

@@ -1,30 +1,36 @@
 <template>
   <view class="labelColor itemBox" style="height: 45px;">
-    <view class="item" v-for="item in filterList" :key="item[props.idValue]">
+    <view class="item" v-for="(item, index) in filterList" :key="item[props.idValue]" :style="`margin-left: ${index ? '10rpx' : '0'}`">
+      <!-- v-slot:default="{ data, error }" -->
       <uni-data-picker
         ref="picker"
-        v-slot:default="{ data, error }"
+        v-slot:default="{ error }"
         :localdata="item.array" 
         :clear-icon="true"
         :popup-title="'请选择' + item[labelValue]" 
         :map="item.map || { text: 'label', value: 'value' }"
-         @change="e => handleClick(e, item)"
-         @nodeclick="handleChange"
+        @change="e => handleClick(e, item)"
+        @nodeclick="handleChange"
       >
         <view v-if="error" class="error">
           <text>{{error}}</text>
         </view>
-        <view v-else-if="data.length" class="selected">
+        <!-- <view v-else-if="data.length && item.value" class="selected">
           <view class="selected-item d-flex align-center">
-            <view class="ellipsis" style="max-width: 100rpx;">{{ data.length > 1 ? data[data.length - 1].text : data[0].text }}</view>
-            <uni-icons type="closeempty" size="18" @click="data = [], handleClear"></uni-icons>
+            <view
+              class="defaultLink"
+              style="max-width: 100rpx; overflow: hidden; white-space: nowrap;"
+            >
+              {{ data[data.length - 1]?.text || item[labelValue] }}
+            </view>
           </view>
-        </view>
+        </view> -->
         <view v-else>
-          {{ item[labelValue] }}
-          <uni-icons type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
+          <text :class="{'defaultLink': item.value }">{{ item.text || item[labelValue] }}</text>
+          <uni-icons v-if="!item.value" type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
         </view>
       </uni-data-picker>
+      <uni-icons v-if="item.value" class="marginT2" type="closeempty" size="16" color="#999" @click="handleClear(item)"></uni-icons>
     </view>
   </view>
 </template>
@@ -46,13 +52,17 @@ const props = defineProps({
 
 const picker = ref()
 const handleClick = (e, item) => {
-  const obj = e.detail.value
-  item.value = obj.length && obj.length === 1 ? obj[0].value : obj[obj.length - 1].value
+  const obj = e.detail.value?.length ? e.detail.value[e.detail.value.length-1] : {}
+  //
+  item.value = obj.value
+  item.text = obj.text || ''
   emit('change', item.key, item.value)
 }
 
-const handleClear = () => {
-  console.log(picker.value)
+const handleClear = (item) => {
+  item.value = null
+  item.text = null
+  emit('change', item.key, item.value)
 }
 
 const handleChange = () => {}
@@ -70,6 +80,7 @@ const setItemSelectData = () => {
   })
 }
 
+// clone list
 const filterList = ref([])
 watch(() => props.list, 
   (newVal) => {
@@ -83,14 +94,14 @@ watch(() => props.list,
 
 <style scoped lang="scss">
 .labelColor { color: #5c5c5c; }
-.marginR5 { margin-right: 5px; }
+.marginT2 { margin-top: 2px; }
 .itemBox {
   width: 100%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   .item {
-    width: 20%;
+    // width: 20%;
     display: flex;
     align-items: center;
     font-size: 14px;

pages/index/position.vue

@@ -12,9 +12,9 @@
           @clear="query.content = ''; onSearch()"
         />
       </view>
-      <view class="white-bgc px-10 pb-10 mb-10">
+      <view class="white-bgc px-10 mb-10">
         <SwiperAd :list="swiperAdList"></SwiperAd>
-        <!-- <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList> -->
+        <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
       </view>
       <PositionList class="pb-10" :list="positionListData" :noMore="noMore"></PositionList>
     </scroll-view>
@@ -23,7 +23,7 @@
 
 <script setup>
 import SwiperAd from '@/components/SwiperAd'
-// import FilterList from '@/components/FilterList'
+import FilterList from '@/components/FilterList'
 import PositionList from '@/components/PositionList'
 import { swiperAdListTest } from '@/utils/testData'
 import { dealDictObjData } from '@/utils/position'
@@ -54,6 +54,7 @@ const query = reactive({
 })
 //
 const getData = async () => {
+  // console.log('query', query)
   const res = await getJobAdvertisedSearch(query)
   const list = res?.data?.list || []
   if (list?.length) {
@@ -68,7 +69,7 @@ const getData = async () => {
 getData()
 
 const handleSearch = (key, value) => {
-  query[key][0] = value
+  query[key] = value ? [value] : []
   onSearch()
 }