筛选组件

src/components/index/DepartureDate.vue

+<template>
+  <view class="sort" :style="{ width: width }">
+    <ul class="ul">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ active: selectedItem === index }"
+        @tap="selectItem(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const selectedItem = ref(null);
+const props = defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+});
+const selectItem = (selectItem) => {
+  selectedItem.value = selectItem;
+};
+</script>
+
+<style lang="scss" scoped>
+.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);
+  margin: 0 auto;
+  z-index: 99;
+  display: flex;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+  .ul {
+    padding-left: 60rpx;
+    li {
+      list-style-type: none;
+      font-size: 22rpx;
+      color: #3d3d3d;
+      margin-top: 20rpx;
+    }
+    .active {
+      color: #fa5151;
+    }
+  }
+}
+</style>

src/components/index/ScenicSpots.vue

+<template>
+  <view class="sort" :style="{ width: width }">
+    <ul class="ul">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ active: selectedItem === index }"
+        @tap="selectItem(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const selectedItem = ref(null);
+const props = defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+});
+const selectItem = (selectItem) => {
+  selectedItem.value = selectItem;
+};
+</script>
+
+<style lang="scss" scoped>
+.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);
+  margin: 0 auto;
+  z-index: 99;
+  display: flex;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+  .ul {
+    padding-left: 60rpx;
+    li {
+      list-style-type: none;
+      font-size: 22rpx;
+      color: #3d3d3d;
+      margin-top: 20rpx;
+    }
+    .active {
+      color: #fa5151;
+    }
+  }
+}
+</style>

src/components/index/Screen.vue

+<template>
+  <view class="sort" :style="{ width: width }">
+    <ul class="ul">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ active: selectedItem === index }"
+        @tap="selectItem(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const selectedItem = ref(null);
+const props = defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+});
+const selectItem = (selectItem) => {
+  selectedItem.value = selectItem;
+};
+</script>
+
+<style lang="scss" scoped>
+.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);
+  margin: 0 auto;
+  z-index: 99;
+  display: flex;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+  .ul {
+    padding-left: 60rpx;
+    li {
+      list-style-type: none;
+      font-size: 22rpx;
+      color: #3d3d3d;
+      margin-top: 20rpx;
+    }
+    .active {
+      color: #fa5151;
+    }
+  }
+}
+</style>

src/components/index/Sort.vue

+<template>
+  <view class="sort" :style="{ width: width }">
+    <ul class="ul">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ active: selectedItem === index }"
+        @tap="selectItem(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const selectedItem = ref(null);
+const props = defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+});
+const selectItem = (selectItem) => {
+  selectedItem.value = selectItem;
+};
+</script>
+
+<style lang="scss" scoped>
+.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);
+  margin: 0 auto;
+  z-index: 99;
+  display: flex;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+  .ul {
+    padding-left: 60rpx;
+    li {
+      list-style-type: none;
+      font-size: 22rpx;
+      color: #3d3d3d;
+      margin-top: 20rpx;
+    }
+    .active {
+      color: #fa5151;
+    }
+  }
+}
+</style>

src/pages/RuralTravel/RuralTravel.vue

@@ -91,6 +91,10 @@
               ></wd-icon>
             </view>
           </view>
+          <Sort v-show="rotate" />
+          <DepartureDate v-show="rotate2" />
+          <ScenicSpots v-show="rotate3" />
+          <Screen v-show="rotate4" />
         </view>
         <view class="list-card">
           <view
@@ -131,6 +135,11 @@
 
 <script setup lang="ts">
 import Search from '../../components/index/Search.vue';
+import Sort from '../../components/index/Sort.vue';
+import DepartureDate from '../../components/index/DepartureDate.vue';
+import ScenicSpots from '../../components/index/ScenicSpots.vue';
+import Screen from '../../components/index/Screen.vue';
+
 const rotate = ref(false);
 const rotate2 = ref(false);
 const rotate3 = ref(false);