乡村旅居筛选

src/Components/assistingAgriculture/index/ScenicSpots.vue

@@ -4,8 +4,8 @@
       <li
         v-for="(item, index) in placeList"
         :key="index"
-        :class="{ active: selectedItem === index }"
-        @tap="selectItem(index, item)"
+        :class="{ active: selectedItem.includes(index) }"
+        @click="selectItem(index, item)"
       >
         {{ item.attractionName }}
       </li>
@@ -14,25 +14,37 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted } from 'vue';
+import { ref, defineProps, defineEmits, onMounted } from 'vue';
+
 import { getTour } from '@/api/assistingAgriculture/village';
+
 const placeList = ref([]);
 const emit = defineEmits(['placeParams']);
-const selectedItem = ref(null);
+const selectedItem = ref([]);
 const props = defineProps({
   width: {
     type: String,
     default: '100%',
   },
 });
+
 onMounted(async () => {
   getTourList();
 });
+
 const selectItem = (index, item) => {
-  selectedItem.value = index;
-  emit('placeParams', item);
+  const itemIndex = selectedItem.value.indexOf(index);
+  if (itemIndex === -1) {
+    selectedItem.value.push(index);
+  } else {
+    selectedItem.value.splice(itemIndex, 1);
+  }
+  emit(
+    'placeParams',
+    placeList.value.filter((_, i) => selectedItem.value.includes(i)),
+  );
 };
-// 查询景点
+
 const getTourList = () => {
   getTour().then((res) => {
     placeList.value = res.data;

src/Components/assistingAgriculture/index/Screen.vue

@@ -5,7 +5,7 @@
       <li
         v-for="(item, index) in screenList"
         :key="index"
-        :class="{ active: selectedItem === index }"
+        :class="{ active: selectedItem.includes(index) }"
         @tap="selectItem(index, item, 'screen')"
       >
         {{ item.tripCity }}
@@ -16,7 +16,7 @@
       <li
         v-for="(item, index) in serveList"
         :key="index"
-        :class="{ active: selectedItem1 === index }"
+        :class="{ active: selectedItem1.includes(index) }"
         @tap="selectItem(index, item, 'serve')"
       >
         {{ item.labelName }}
@@ -27,7 +27,7 @@
       <li
         v-for="(item, index) in peopleList"
         :key="index"
-        :class="{ active: selectedItem2 === index }"
+        :class="{ active: selectedItem2.includes(index) }"
         @tap="selectItem(index, item, 'people')"
       >
         {{ item.labelName }}
@@ -40,9 +40,9 @@
 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 selectedItem = ref([]);
+const selectedItem1 = ref([]);
+const selectedItem2 = ref([]);
 const screenList = ref([]);
 const serveList = ref([]);
 const peopleList = ref([]);
@@ -56,16 +56,32 @@ onMounted(async () => {
   getScreeningConditions();
 });
 const selectItem = (index, item, type) => {
+  let selectedRef, itemList;
   if (type === 'screen') {
-    selectedItem.value = index;
+    selectedRef = selectedItem;
+    itemList = screenList.value;
   } else if (type === 'serve') {
-    selectedItem1.value = index;
+    selectedRef = selectedItem1;
+    itemList = serveList.value;
   } else if (type === 'people') {
-    selectedItem2.value = index;
+    selectedRef = selectedItem2;
+    itemList = peopleList.value;
   }
-  emit('screenParams', item, type);
+
+  const position = selectedRef.value.indexOf(index);
+  if (position > -1) {
+    selectedRef.value.splice(position, 1);
+  } else {
+    selectedRef.value.push(index);
+  }
+
+  // 使用map创建一个新数组，从itemList中根据索引获取正确的item
+  emit(
+    'screenParams',
+    selectedRef.value.map((i) => ({ ...itemList[i], index: i })),
+    type,
+  );
 };
-// 查询出发日期
 const getScreeningConditions = () => {
   screeningConditions().then((res) => {
     screenList.value = res.data.startCityList;
@@ -73,6 +89,7 @@ const getScreeningConditions = () => {
     peopleList.value = res.data.forPeopleList;
   });
 };
+const reset = () => {};
 </script>
 
 <style lang="scss" scoped>

src/api/assistingAgriculture/village.js

@@ -20,7 +20,7 @@ export function getPopularList(data) {
 export function getProdList(data) {
   return request({
     url: `/sgyrdd/prod/prodList`,
-    method: 'GET',
+    method: 'POST',
     data,
   });
 }

src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue

@@ -186,13 +186,14 @@ const rotate4 = ref(false);
 const cardList = ref([]);
 const popularRouterData = ref([]);
 const sortType = ref(null);
-const attractionId = ref(null);
-const startCity = ref(null);
+const attractionIdList = ref([]);
+const startCityList = ref([]);
 const dateType = ref(null);
 const allocateDate = ref(null);
-const serviceCommitment = ref(null);
+const serviceList = ref([]);
 const keyword = ref('');
-const labelId = ref(null);
+const forPeopleList = ref([]);
+
 const locationFiltering = (index) => {
   switch (index) {
     case 0:
@@ -222,11 +223,11 @@ const locationFiltering = (index) => {
   }
   if (index === 0) {
     sortType.value = null;
-    attractionId.value = null;
+    attractionIdList.value = [];
     dateType.value = null;
-    startCity.value = null;
-    serviceCommitment.value = null;
-    labelId.value = null;
+    startCityList.value = [];
+    serviceList.value = [];
+    forPeopleList.value = [];
   }
 };
 onPullDownRefresh(() => {
@@ -256,28 +257,41 @@ const dataParams = (item, datePart) => {
     dateType.value = item.key;
     getProd();
   } else if (item === undefined) {
-    console.log(item, 3333333);
     dateType.value = 8;
     allocateDate.value = datePart;
     getProd();
   }
 };
 // 景点
-const placeParams = (id) => {
-  attractionId.value = id;
+// const placeParams = (item) => {
+//   console.log(item, 222);
+//   attractionIdList.value = item.id;
+//   getProd();
+// };
+const placeParams = (item) => {
+  const ids = item.map((i) => i.id);
+  const arr = ids.join(',');
+  attractionIdList.value = arr.split(',').map(Number);
   getProd();
 };
+
 // 筛选
-const screenParams = (item, type) => {
-  console.log(item, type, 111);
+const screenParams = (selectedItems, type) => {
+  console.log(selectedItems, type, 111);
   if (type === 'screen') {
-    startCity.value = item.tripCity;
+    const ids = selectedItems.map((i) => i.tripCity);
+    const arr = ids.join(',');
+    startCityList.value = arr.split(',').map(String);
     getProd();
   } else if (type === 'serve') {
-    serviceCommitment.value = item.labelName;
+    const ids = selectedItems.map((i) => i.labelName);
+    const arr = ids.join(',');
+    serviceList.value = arr.split(',').map(String);
     getProd();
   } else if (type === 'people') {
-    labelId.value = item.labelName;
+    const ids = selectedItems.map((i) => i.labelName);
+    const arr = ids.join(',');
+    forPeopleList.value = arr.split(',').map(String);
     getProd();
   }
 };
@@ -292,12 +306,20 @@ const getProd = (searchKeyword = '') => {
   const params = {
     current: 1,
     size: 10,
-    ...(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 }),
+    ...(sortType.value && { sortType: sortType.value.sortMode }),
+    ...(attractionIdList.value &&
+      attractionIdList.value.length > 0 &&
+      attractionIdList.value[0] !== 0 && { attractionIdList: attractionIdList.value }),
+    ...(dateType.value && { dateType: dateType.value }),
+    ...(startCityList.value &&
+      startCityList.value.length > 0 && { startCityList: startCityList.value }),
+    ...(serviceList.value && serviceList.value.length > 0 && { serviceList: serviceList.value }),
+    ...(forPeopleList.value &&
+      forPeopleList.value.length > 0 && { forPeopleList: forPeopleList.value }),
+
+    // ...(startCityList.value && { startCityList: startCityList.value.split(',') }),
+    // ...(serviceList.value && { serviceList: serviceList.value.split(',') }),
+    // ...(forPeopleList.value && { forPeopleList: forPeopleList.value.split(',') }),
     ...(dateType.value === 8 && { allocateDate: allocateDate.value }),
     ...(searchKeyword && { keyword: searchKeyword }),
   };
@@ -312,11 +334,11 @@ const getProd = (searchKeyword = '') => {
 
 const resetParams = () => {
   sortType.value = null;
-  attractionId.value = null;
+  attractionIdList.value = [];
   dateType.value = null;
-  startCity.value = null;
-  serviceCommitment.value = null;
-  labelId.value = null;
+  startCityList.value = [];
+  serviceList.value = [];
+  forPeopleList.value = [];
   allocateDate.value = null;
   getProd();
 };