xyy-m/src/pages/travel-projects/index.client.vue

<template>
  <div class="">
    <van-sticky :offset-top="50">
      <van-dropdown-menu ref="menuRef">
        <van-dropdown-item :title="currentAreaFilterLabel" ref="areaFilterRef">
          <van-tree-select
            height="340px"
            v-model:active-id="activeCountryId"
            v-model:main-active-index="activeAreaIndex"
            :items="areaOptions"
            @click-nav="handleAreaClick"
            @click-item="handleCountryClick"
          />
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-empty
      v-if="!listData.length && !loading"
      image="search"
      description="暂无相关旅游项目"
    />
    <div class="px-15" v-else-if="listData.length">
      <van-list
        class=""
        v-model:loading="loading"
        :finished="finished"
        finished-text="-- 没有更多了 --"
        @load="onLoadMore"
        :immediate-check="false"
      >
        <TravelProjectItem
          v-for="item in listData"
          :key="item.id"
          :item-data="item"
        >
        </TravelProjectItem>
      </van-list>
    </div>
  </div>
</template>

<script setup>
const currentArea = ref({});
const currentCountry = ref({});
const currentAreaFilterLabel = computed(() => {
  if (!currentArea.value?.id) {
    return "全部区域";
  }
  return `${currentArea.value.text || ""}${currentCountry.value.text || ""}`;
});

const requestQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  areaId: computed(() => currentArea.value?.id ?? ""),
  countryId: computed(() => currentCountry.value?.id ?? ""),
});
const listData = ref([]);

const loading = ref(false);

const finished = ref(false);

async function getList() {
  loading.value = true;
  const { data } = await request("/website/tourism/project/list", {
    query: requestQuery,
  });
  listData.value = listData.value.concat(data.dataList);
  loading.value = false;
  if (data.totalCount <= listData.value.length) {
    finished.value = true;
  }
}

function onLoadMore() {
  requestQuery.pageNum++;
  getList();
}

// 地区筛选
const areaFilterRef = ref(null);
const activeAreaIndex = ref(0);
const activeCountryId = ref(0);
const areaOptions = ref([]);

function handleAreaClick(index) {
  activeCountryId.value = null;
  if (index === 0) {
    currentArea.value = areaOptions.value[index];
    currentCountry.value = {};
    areaFilterRef.value.toggle();
    reSearch();
  }
}

function handleCountryClick(item) {
  currentArea.value = areaOptions.value[activeAreaIndex.value];
  currentCountry.value = item;
  areaFilterRef.value.toggle();
  reSearch();
}

function reSearch() {
  requestQuery.pageNum = 1;
  listData.value = [];
  getList();
}

async function getFilterAddress() {
  const { data } = await request(
    "/website/tourism/projectTravelNotes/travelNotesDirectoryList"
  );
  data.forEach((item) => {
    item.text = item.areaName;
    item.id = item.areaId;
    item.children.forEach((subItem) => {
      subItem.text = subItem.countryName;
      subItem.id = subItem.countryId;
    });
    item.children.unshift({ text: "全部", id: "" });
  });
  data.unshift({ text: "全部", id: "" });
  areaOptions.value = data;
}

onMounted(() => {
  getList();
  getFilterAddress();
});
</script>

<style lang="scss" scoped>
:deep(.van-tree-select__item) {
  font-weight: normal;
}
</style>