|
@@ -0,0 +1,114 @@
|
|
|
+<template>
|
|
|
+ <div class="px-15">
|
|
|
+ <van-sticky :offset-top="60">
|
|
|
+ <div class="h-40 flex items-center justify-end bg-white">
|
|
|
+ <div @click="filterOption.show = true" class="text-black-6 text-base">
|
|
|
+ <span>{{ filterLabel }}</span>
|
|
|
+ <span class="iconfont icon-caret-down"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-sticky>
|
|
|
+ <van-empty
|
|
|
+ v-if="!listData.length && !loading"
|
|
|
+ image="search"
|
|
|
+ description="暂无相关旅游项目"
|
|
|
+ />
|
|
|
+ <van-list
|
|
|
+ v-else-if="listData.length"
|
|
|
+ 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>
|
|
|
+ <van-popup v-model:show="filterOption.show" round position="bottom">
|
|
|
+ <van-cascader
|
|
|
+ title="请选择国家"
|
|
|
+ :options="filterOption.options"
|
|
|
+ @finish="onFinish"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const requestQuery = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ areaId: "",
|
|
|
+ countryId: "",
|
|
|
+});
|
|
|
+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 filterOption = reactive({
|
|
|
+ show: false,
|
|
|
+ options: [],
|
|
|
+});
|
|
|
+
|
|
|
+async function getFilterAddress() {
|
|
|
+ const { data } = await request(
|
|
|
+ "/website/tourism/projectTravelNotes/travelNotesDirectoryList"
|
|
|
+ );
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.text = item.areaName;
|
|
|
+ item.value = item.areaId;
|
|
|
+ item.children.forEach((subItem) => {
|
|
|
+ subItem.text = subItem.countryName;
|
|
|
+ subItem.value = subItem.countryId;
|
|
|
+ });
|
|
|
+ item.children.unshift({ text: "全部", value: "" });
|
|
|
+ });
|
|
|
+ data.unshift({ text: "全部", value: "" });
|
|
|
+ filterOption.options = data;
|
|
|
+}
|
|
|
+
|
|
|
+const filterLabel = ref("区域选择");
|
|
|
+function onFinish({ selectedOptions }) {
|
|
|
+ filterOption.show = false;
|
|
|
+ filterLabel.value = selectedOptions.map((item) => item.text).join("/");
|
|
|
+ requestQuery.areaId = selectedOptions[0]?.value;
|
|
|
+ requestQuery.countryId =
|
|
|
+ selectedOptions.length > 1 ? selectedOptions[1]?.value : "";
|
|
|
+ requestQuery.pageNum = 1;
|
|
|
+ finished.value = false;
|
|
|
+ listData.value = [];
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+ getFilterAddress();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|