乡村旅居智能排序修改

src/Components/assistingAgriculture/index/Sort.vue

@@ -5,7 +5,7 @@
         v-for="(item, index) in items"
         :key="index"
         :class="{ active: selectedItem === index }"
-        @tap="selectItem(index, item)"
+        @click="selectItem(index, item)"
       >
         {{ item.name }}
       </li>
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { ref } from 'vue';
 const items = ref([
   { name: '距离优先', sortMode: 1 },
   { name: '好评优先', sortMode: 2 },
@@ -31,8 +31,13 @@ const props = defineProps({
   },
 });
 const selectItem = (index, item) => {
-  selectedItem.value = index;
-  emit('sortParams', item);
+  if (selectedItem.value === index) {
+    selectedItem.value = null;
+    emit('sortParams', null);
+  } else {
+    selectedItem.value = index;
+    emit('sortParams', item);
+  }
 };
 const reset = () => {
   selectedItem.value = null;
@@ -44,8 +49,6 @@ defineExpose({ reset });
 .sort {
   position: absolute;
   top: 100%;
-  // width: 100%;
-  //   min-height: 212rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #ffffff;
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
@@ -55,12 +58,13 @@ defineExpose({ reset });
   padding-bottom: 20rpx;
   box-sizing: border-box;
   .ul {
-    padding-left: 60rpx;
+    padding-left: 30rpx;
     li {
       list-style-type: none;
       font-size: 22rpx;
       color: #3d3d3d;
       margin-top: 20rpx;
+      cursor: pointer;
     }
     .active {
       color: #fa5151;