乡村旅居筛选

src/Components/assistingAgriculture/index/Screen.vue

 <template>
   <view class="sort" :style="{ width: width }">
-    <view class="date">筛选</view>
+    <view class="date">出发城市</view>
     <ul class="ul">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in screenList"
         :key="index"
         :class="{ active: selectedItem === index }"
-        @tap="selectItem(index)"
+        @tap="selectItem(index, item, 'screen')"
       >
-        {{ item }}
+        {{ item.tripCity }}
+      </li>
+    </ul>
+    <view class="date">服务承诺</view>
+    <ul class="ul">
+      <li
+        v-for="(item, index) in serveList"
+        :key="index"
+        :class="{ active: selectedItem1 === index }"
+        @tap="selectItem(index, item, 'serve')"
+      >
+        {{ item.labelName }}
+      </li>
+    </ul>
+    <view class="date">适用人群</view>
+    <ul class="ul">
+      <li
+        v-for="(item, index) in peopleList"
+        :key="index"
+        :class="{ active: selectedItem2 === index }"
+        @tap="selectItem(index, item, 'people')"
+      >
+        {{ item.labelName }}
       </li>
     </ul>
   </view>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
-const items = reactive([
-  '智能排序',
-  '距离优先',
-  '好评优先',
-  '销量优先',
-  '低价优先',
-  '低价优先',
-  '距离优先',
-  '好评优先',
-  '销量优先',
-  '低价优先',
-  '距离优先',
-]);
+import { defineProps, onMounted, ref } from 'vue';
+import { screeningConditions } from '@/api/assistingAgriculture/village';
+const emit = defineEmits(['screenParams']);
 const selectedItem = ref(null);
+const selectedItem1 = ref(null);
+const selectedItem2 = ref(null);
+const screenList = ref([]);
+const serveList = ref([]);
+const peopleList = ref([]);
 const props = defineProps({
   width: {
     type: String,
     default: '100%',
   },
 });
-const selectItem = (selectItem) => {
-  selectedItem.value = selectItem;
+onMounted(async () => {
+  getScreeningConditions();
+});
+const selectItem = (index, item, type) => {
+  if (type === 'screen') {
+    selectedItem.value = index;
+  } else if (type === 'serve') {
+    selectedItem1.value = index;
+  } else if (type === 'people') {
+    selectedItem2.value = index;
+  }
+  emit('screenParams', item, type);
+};
+// 查询出发日期
+const getScreeningConditions = () => {
+  screeningConditions().then((res) => {
+    screenList.value = res.data.startCityList;
+    serveList.value = res.data.serviceList;
+    peopleList.value = res.data.forPeopleList;
+  });
 };
 </script>
 
@@ -68,7 +102,6 @@ const selectItem = (selectItem) => {
     letter-spacing: 0em;
     font-variation-settings: 'opsz' auto;
     font-feature-settings: 'kern' on;
-    color: #fa5151;
     margin-left: 44rpx;
     margin-top: 20rpx;
   }

src/api/assistingAgriculture/village.js

@@ -32,3 +32,11 @@ export function getStartDate(data) {
     data,
   });
 }
+// 查询筛选
+export function screeningConditions(data) {
+  return request({
+    url: `/sgyrdd/prod/screeningConditions/list`,
+    method: 'GET',
+    data,
+  });
+}

src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue

@@ -55,7 +55,12 @@
           :scroll-with-animation="true"
           @scroll="scroll"
         >
-          <view class="foodCard" v-for="(item, index) in popularRouterData" :key="index">
+          <view
+            class="foodCard"
+            v-for="(item, index) in popularRouterData"
+            :key="index"
+            @tap="toRouteDetails(item)"
+          >
             <!--            <img-->
             <!--              class="img-icon"-->
             <!--              src="/static/assistingAgriculture/rural/icon.png"-->
@@ -120,7 +125,7 @@
             class="card-detail"
             v-for="(item, index) in cardList"
             :key="index"
-            @tap="toRouteDetails"
+            @tap="toRouteDetails(item)"
           >
             <img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
             <view class="detail-text">
@@ -173,7 +178,10 @@ const cardList = ref([]);
 const popularRouterData = ref([]);
 const sortType = ref(null);
 const attractionId = ref(null);
+const startCity = ref(null);
 const dateType = ref(null);
+const serviceCommitment = ref(null);
+const labelId = ref(null);
 const locationFiltering = (index) => {
   switch (index) {
     case 0:
@@ -223,7 +231,6 @@ const sortParams = (sortMode) => {
 };
 // 出发日期
 const dataParams = (item) => {
-  console.log(item, 333);
   dateType.value = item;
   getProd();
 };
@@ -232,6 +239,18 @@ const placeParams = (id) => {
   attractionId.value = id;
   getProd();
 };
+// 筛选
+const screenParams = (item, type) => {
+  console.log(item, type, 111);
+  if (type === 'screen') {
+    startCity.value = item.tripCity;
+  } else if (type === 'serve') {
+    serviceCommitment.value = item.labelName;
+  } else if (type === 'people') {
+    labelId.value = item.labelName;
+  }
+  getProd();
+};
 // 查询列表
 const getProd = () => {
   const params = {
@@ -240,6 +259,9 @@ const getProd = () => {
     ...(sortType.value !== null && { sortType: sortType.value.sortMode }),
     ...(attractionId.value !== null && { attractionId: attractionId.value.id }),
     ...(dateType.value !== null && { dateType: dateType.value }),
+    ...(startCity.value !== null && { startCity: startCity.value }),
+    ...(serviceCommitment.value !== null && { serviceCommitment: serviceCommitment.value }),
+    ...(labelId.value !== null && { labelId: labelId.value }),
   };
   getProdList(params).then((res) => {
     res.data.records.forEach((item) => {
@@ -248,10 +270,11 @@ const getProd = () => {
     cardList.value = res.data.records;
   });
 };
-function toRouteDetails() {
+function toRouteDetails(item) {
+  console.log(item, 22222);
   // TODO: 跳转到线路详情
   xma.navigateTo({
-    url: '/pages/assistingAgriculture/RouteDetails/RouteDetails',
+    url: `/pages/assistingAgriculture/RouteDetails/RouteDetails?prodId=${item.prodId}`,
   });
 }
 function toSpecialOfferZoneList() {