|
@@ -91,162 +91,165 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full box-border px-16">
|
|
|
- <!-- 每一项签证的展示 -->
|
|
|
- <Empty v-if="!visaList?.length && !loading" title="暂无该签证数据" top="100" />
|
|
|
- <!-- @load="getLoadList" v-model:loading="loading"-->
|
|
|
- <van-list
|
|
|
- v-else-if="visaList.length"
|
|
|
- :finished="finished"
|
|
|
- error-text="获取失败"
|
|
|
- finished-text="-- 没有更多了 --"
|
|
|
- :immediate-check="false"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="item in visaList"
|
|
|
- :key="item?.id"
|
|
|
- class="w-full min-h-160 box-border border rounded-lg mt-12 px-12 pt-15 pb-13 relative"
|
|
|
- style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
+ <Empty v-if="!visaList?.length && !loading" title="暂无该签证数据" top="100" />
|
|
|
+ <van-list
|
|
|
+ v-else-if="visaList.length"
|
|
|
+ v-model:loading="loading"
|
|
|
+ error-text="获取失败"
|
|
|
+ finished-text="-- 没有更多了 --"
|
|
|
+ :finished="finished"
|
|
|
+ :immediate-check="false"
|
|
|
+ @load="getLoadList"
|
|
|
>
|
|
|
- <NuxtLink :to="'/visa/details/' + item?.id" @click.prevent class="w-full block">
|
|
|
- <div class="flex w-full h-90 box-border justify-start mb-15">
|
|
|
- <div class="w-110 h-80 rounded mr-12">
|
|
|
- <img class="h-full w-full rounded object-cover" :src="item?.img" alt="" />
|
|
|
+ <div
|
|
|
+ v-for="item in visaList"
|
|
|
+ :key="item?.id"
|
|
|
+ class="w-full min-h-160 box-border border rounded-lg mt-12 px-12 pt-15 pb-13 relative"
|
|
|
+ style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
|
|
|
+ >
|
|
|
+ <NuxtLink :to="'/visa/details/' + item?.id" @click.prevent class="w-full block">
|
|
|
+ <div class="flex w-full h-90 box-border justify-start mb-15">
|
|
|
+ <div class="w-110 h-80 rounded mr-12">
|
|
|
+ <img class="h-full w-full rounded object-cover" :src="item?.img" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-200">
|
|
|
+ <h1
|
|
|
+ :title="item?.visaTitle"
|
|
|
+ class="w-full h-24 mb-2 truncate whitespace-nowrap text-nowrap text-base font-semibold leading-5xl text-[#444]"
|
|
|
+ >
|
|
|
+ {{ item?.visaTitle }}
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <p class="w-full leading-3xl font-normal text-sm truncate">
|
|
|
+ <span class="text-black-9">签证类型:</span>
|
|
|
+ <span :title="item?.visaTypeIdDictMap?.name" class="font-semibold text-[#444]">
|
|
|
+ {{ item?.visaTypeIdDictMap?.name }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ v-if="item?.validity > 0"
|
|
|
+ class="w-full truncate leading-3xl font-normal text-sm"
|
|
|
+ >
|
|
|
+ <span class="text-black-9">有效期:</span>
|
|
|
+ <span class="text-[#444] font-semibold">
|
|
|
+ {{ item?.validity ? `${item?.validity}天` : '无限制' }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p
|
|
|
+ v-if="item?.processingDays > 0"
|
|
|
+ class="w-full font-normal truncate leading-3xl text-sm"
|
|
|
+ >
|
|
|
+ <span class="text-black-9">出签周期:</span>
|
|
|
+ <span class="text-[#444] font-semibold">
|
|
|
+ 收齐材料后{{ item?.processingDays }}个工作日
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="w-200">
|
|
|
- <h1
|
|
|
- :title="item?.visaTitle"
|
|
|
- class="w-full h-24 mb-2 truncate whitespace-nowrap text-nowrap text-base font-semibold leading-5xl text-[#444]"
|
|
|
- >
|
|
|
- {{ item?.visaTitle }}
|
|
|
- </h1>
|
|
|
-
|
|
|
- <p class="w-full leading-3xl font-normal text-sm truncate">
|
|
|
- <span class="text-black-9">签证类型:</span>
|
|
|
- <span :title="item?.visaTypeIdDictMap?.name" class="font-semibold text-[#444]">
|
|
|
- {{ item?.visaTypeIdDictMap?.name }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p
|
|
|
- v-if="item?.validity > 0"
|
|
|
- class="w-full truncate leading-3xl font-normal text-sm"
|
|
|
- >
|
|
|
- <span class="text-black-9">有效期:</span>
|
|
|
- <span class="text-[#444] font-semibold">
|
|
|
- {{ item?.validity ? `${item?.validity}天` : '无限制' }}
|
|
|
+ <div class="w-full box-border flex justify-between h-24 items-center">
|
|
|
+ <p class="block text-center text-sm font-normal text-[#FF476A] pt-3 m-0">
|
|
|
+ ¥
|
|
|
+ <span class="text-5xl font-semibold">
|
|
|
+ {{ item?.floorPrice ? item?.floorPrice : '????' }}
|
|
|
</span>
|
|
|
+ 起
|
|
|
</p>
|
|
|
|
|
|
- <p
|
|
|
- v-if="item?.processingDays > 0"
|
|
|
- class="w-full font-normal truncate leading-3xl text-sm"
|
|
|
+ <button
|
|
|
+ class="h-full border-[0.5px] text-base px-13 shrink-0 border-black-9 rounded-full bg-white active:bg-black/[0.1]"
|
|
|
>
|
|
|
- <span class="text-black-9">出签周期:</span>
|
|
|
- <span class="text-[#444] font-semibold">
|
|
|
- 收齐材料后{{ item?.processingDays }}个工作日
|
|
|
- </span>
|
|
|
- </p>
|
|
|
+ 详情
|
|
|
+ <van-icon size="14" name="arrow" />
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </NuxtLink>
|
|
|
|
|
|
- <div class="w-full box-border flex justify-between h-24 items-center">
|
|
|
- <p class="block text-center text-sm font-normal text-[#FF476A] pt-3 m-0">
|
|
|
- ¥
|
|
|
- <span class="text-5xl font-semibold">
|
|
|
- {{ item?.floorPrice ? item?.floorPrice : '????' }}
|
|
|
- </span>
|
|
|
- 起
|
|
|
- </p>
|
|
|
-
|
|
|
- <button
|
|
|
- class="h-full border-[0.5px] text-base px-13 shrink-0 border-black-9 rounded-full bg-white active:bg-black/[0.1]"
|
|
|
- >
|
|
|
- 详情
|
|
|
- <van-icon size="14" name="arrow" />
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </NuxtLink>
|
|
|
-
|
|
|
- <button
|
|
|
- @click.stop="getVisaCounselorDetails(item.id)"
|
|
|
- class="h-24 absolute bottom-15 right-97 z-20 border-[0.5px] text-[#FD9A00] text-base px-13 shrink-0 border-[#FD9A00] rounded-full bg-white active:bg-[#FD9A00]/[0.1]"
|
|
|
- >
|
|
|
- 联系顾问
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </van-list>
|
|
|
+ <button
|
|
|
+ @click.stop="getVisaCounselorDetails(item.id)"
|
|
|
+ class="h-24 absolute bottom-15 right-97 z-20 border-[0.5px] text-[#FD9A00] text-base px-13 shrink-0 border-[#FD9A00] rounded-full bg-white active:bg-[#FD9A00]/[0.1]"
|
|
|
+ >
|
|
|
+ 联系顾问
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
|
|
|
- <div
|
|
|
- class="mb-20 mt-11 overflow-hidden box-border h-107 w-full rounded-lg border border-[#F5F5F5] flex"
|
|
|
- >
|
|
|
<div
|
|
|
- class="box-border flex h-full w-115 px-15 py-11 items-center justify-center border-r-[1px] border-r-[#F5F5F5]"
|
|
|
- style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
|
|
|
+ class="mb-20 mt-11 overflow-hidden box-border h-107 w-full rounded-lg border border-[#F5F5F5] flex"
|
|
|
>
|
|
|
- <div class="h-84 w-84 shrink-0">
|
|
|
- <img
|
|
|
- :src="rightTopCounselorData?.counselorWechat"
|
|
|
- alt=""
|
|
|
- class="h-full w-full object-cover"
|
|
|
- />
|
|
|
+ <div
|
|
|
+ class="box-border flex h-full w-115 px-15 py-11 items-center justify-center border-r-[1px] border-r-[#F5F5F5]"
|
|
|
+ style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
|
|
|
+ >
|
|
|
+ <div class="h-84 w-84 shrink-0">
|
|
|
+ <img
|
|
|
+ :src="rightTopCounselorData?.counselorWechat"
|
|
|
+ alt=""
|
|
|
+ class="h-full w-full object-cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="font-semibold h-full w-230 flex items-center justify-start text-base text-[#444]"
|
|
|
- >
|
|
|
- <div class="w-22 h-12 shrink-0 mx-20">
|
|
|
- <img class="w-full h-full" src="@/assets/img/visa/three_left.svg" alt="" />
|
|
|
+ <div
|
|
|
+ class="font-semibold h-full w-230 flex items-center justify-start text-base text-[#444]"
|
|
|
+ >
|
|
|
+ <div class="w-22 h-12 shrink-0 mx-20">
|
|
|
+ <img class="w-full h-full" src="@/assets/img/visa/three_left.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ 扫码联系 人工服务
|
|
|
</div>
|
|
|
- 扫码联系 人工服务
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="z-[10] flex w-full mb-8 items-center text-xl font-semibold text-black-3">
|
|
|
- <div class="w-16 h-16 shrink-0 mr-4">
|
|
|
- <img class="w-full h-full object-cover" src="@/assets/img/visa/fire.svg" alt="" />
|
|
|
+ <div class="z-[10] flex w-full mb-8 items-center text-xl font-semibold text-black-3">
|
|
|
+ <div class="w-16 h-16 shrink-0 mr-4">
|
|
|
+ <img class="w-full h-full object-cover" src="@/assets/img/visa/fire.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ 超值热卖
|
|
|
</div>
|
|
|
- 超值热卖
|
|
|
- </div>
|
|
|
|
|
|
- <div class="relative min-h-244 w-full rounded-lg border overflow-hidden mb-20">
|
|
|
- <img
|
|
|
- class="absolute left-0 top-0 z-0 h-67 w-full object-cover"
|
|
|
- src="@/assets/img/visa/Rectangle.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="absolute left-0 top-0 z-1 box-border h-full w-full px-11">
|
|
|
- <NuxtLink
|
|
|
- v-for="item in hotList"
|
|
|
- :key="item.id"
|
|
|
- :to="'/t/' + item?.id"
|
|
|
- class="my-15 flex h-60 w-full justify-between"
|
|
|
- >
|
|
|
- <div class="w-90 h-full shrink-0 overflow-hidden rounded-[4px]">
|
|
|
- <img
|
|
|
- class="h-full w-full object-cover"
|
|
|
- :src="item.homeHotPicturesAfterConvert[0]"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class="relative min-h-244 w-full rounded-lg border overflow-hidden mb-20">
|
|
|
+ <img
|
|
|
+ class="absolute left-0 top-0 z-0 h-67 w-full object-cover"
|
|
|
+ src="@/assets/img/visa/Rectangle.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="absolute left-0 top-0 z-1 box-border h-full w-full px-11">
|
|
|
+ <NuxtLink
|
|
|
+ v-for="item in hotList"
|
|
|
+ :key="item.id"
|
|
|
+ :to="'/t/' + item?.id"
|
|
|
+ class="my-15 flex h-60 w-full justify-between"
|
|
|
+ >
|
|
|
+ <div class="w-90 h-full shrink-0 overflow-hidden rounded-[4px]">
|
|
|
+ <img
|
|
|
+ class="h-full w-full object-cover"
|
|
|
+ :src="item.homeHotPicturesAfterConvert[0]"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="ml-15 box-border w-220">
|
|
|
- <p
|
|
|
- :title="`【热销纯玩】 ${item?.projectTitle}`"
|
|
|
- class="h-38 text-sm line-clamp-2 leading-2xl"
|
|
|
- >
|
|
|
- 【热销纯玩】{{ item?.projectTitle }}
|
|
|
- </p>
|
|
|
- <p class="text-right text-sm font-semibold leading-2xl text-black-9">
|
|
|
- <span class="text-base text-[#FF476A]">
|
|
|
- ¥ {{ item?.price ? item?.price : '????' }}
|
|
|
- </span>
|
|
|
- 起
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </NuxtLink>
|
|
|
+ <div class="ml-15 box-border w-220">
|
|
|
+ <p
|
|
|
+ :title="`【热销纯玩】 ${item?.projectTitle}`"
|
|
|
+ class="h-38 text-sm line-clamp-2 leading-2xl"
|
|
|
+ >
|
|
|
+ 【热销纯玩】{{ item?.projectTitle }}
|
|
|
+ </p>
|
|
|
+ <p class="text-right text-sm font-semibold leading-2xl text-black-9">
|
|
|
+ <span class="text-base text-[#FF476A]">
|
|
|
+ ¥ {{ item?.price ? item?.price : '????' }}
|
|
|
+ </span>
|
|
|
+ 起
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </van-pull-refresh>
|
|
|
</div>
|
|
|
+
|
|
|
<van-back-top
|
|
|
bottom="30vh"
|
|
|
right="12px"
|
|
@@ -258,6 +261,7 @@
|
|
|
<div>TOP</div>
|
|
|
</div>
|
|
|
</van-back-top>
|
|
|
+
|
|
|
<van-dialog
|
|
|
:keyboard-enabled="false"
|
|
|
v-model:show="showVisaModal"
|
|
@@ -352,11 +356,7 @@ const showItemLocation = ref(false)
|
|
|
|
|
|
const visaTypeTitle = ref(TYPE_TEXT)
|
|
|
const visaLocationTitle = ref(ADDRESS_TEXT)
|
|
|
-// const activeIndex = ref('')
|
|
|
-// const activeIndex2 = ref('')
|
|
|
|
|
|
-// const visaTypeIndex = ref(0) //签证类型索引
|
|
|
-// const visaLocIndex = ref(0) //签证类型索引
|
|
|
watch(showItemType.value, () => {}, { deep: true })
|
|
|
|
|
|
// 监听签证类型筛选框收起
|
|
@@ -367,11 +367,12 @@ function onVisaLocFilterClose() {}
|
|
|
|
|
|
const queryParams = reactive({
|
|
|
pageNum: 1,
|
|
|
- pageSize: 1000,
|
|
|
+ pageSize: 10,
|
|
|
searchString: computed(() => route.query?.searchString ?? ''),
|
|
|
countryCodeId: computed(() => route.query?.countryCodeId ?? '')
|
|
|
})
|
|
|
|
|
|
+const refreshing = ref(false)
|
|
|
const loading = ref(false)
|
|
|
const finished = ref(false)
|
|
|
|
|
@@ -413,6 +414,14 @@ const isValue = (parmas) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 下拉刷新
|
|
|
+const onRefresh = () => {
|
|
|
+ refreshing.value = true
|
|
|
+ queryParams.pageNum = 1
|
|
|
+ visaList.value = []
|
|
|
+ getVisaList()
|
|
|
+}
|
|
|
+
|
|
|
// 搜索的方法
|
|
|
function search() {
|
|
|
if (searchString.value) {
|
|
@@ -438,6 +447,9 @@ const handleCheckedVisaTypeChange = (parmas) => {
|
|
|
itemTypeRef.value.toggle(false)
|
|
|
showItemType.value = !showItemType.value
|
|
|
document.title = parmas.title
|
|
|
+ visaList.value = []
|
|
|
+ queryParams.pageNum = 1
|
|
|
+ finished.value = false
|
|
|
getVisaList()
|
|
|
}
|
|
|
|
|
@@ -450,6 +462,9 @@ const phoneSection = (codeId, phone) => {
|
|
|
|
|
|
// 出签地得选择筛选条件
|
|
|
const handleCheckedCitiesChange = (parmas) => {
|
|
|
+ queryParams.pageNum = 1
|
|
|
+ visaList.value = []
|
|
|
+ finished.value = false
|
|
|
if (parmas.name == ADDRESS_TEXT) {
|
|
|
visaLocationTitle.value = ADDRESS_TEXT
|
|
|
} else {
|
|
@@ -460,6 +475,7 @@ const handleCheckedCitiesChange = (parmas) => {
|
|
|
itemLocationRef.value.toggle(false)
|
|
|
showItemLocation.value = !showItemLocation.value
|
|
|
document.title = parmas.name
|
|
|
+
|
|
|
getVisaList()
|
|
|
}
|
|
|
|
|
@@ -504,22 +520,29 @@ async function getVisaList() {
|
|
|
})
|
|
|
|
|
|
if (Array.isArray(dataList) && dataList?.length) {
|
|
|
- visaList.value = dataList
|
|
|
+ visaList.value = visaList.value.concat(dataList)
|
|
|
} else {
|
|
|
visaList.value = []
|
|
|
}
|
|
|
|
|
|
loading.value = false
|
|
|
-
|
|
|
- if (totalCount <= visaList.value.length) {
|
|
|
+ refreshing.value = false
|
|
|
+ if (visaList.value.length >= totalCount) {
|
|
|
finished.value = true
|
|
|
+ } else {
|
|
|
+ finished.value = false
|
|
|
}
|
|
|
- } catch (err) {}
|
|
|
+ } catch (err) {
|
|
|
+ } finally {
|
|
|
+ refreshing.value = false
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 获取筛选签证列表
|
|
|
function getLoadList() {
|
|
|
queryParams.pageNum++
|
|
|
+ finished.value = true
|
|
|
getVisaList()
|
|
|
}
|
|
|
|
|
@@ -568,11 +591,6 @@ async function getTourismProject() {
|
|
|
if (Array.isArray(dataList)) hotList.value = dataList
|
|
|
}
|
|
|
|
|
|
-watch(
|
|
|
- () => queryParams.pageNum,
|
|
|
- () => getVisaList()
|
|
|
-)
|
|
|
-
|
|
|
watch(searchString, (newValue, oldValue) => {
|
|
|
searchString.value = newValue
|
|
|
if (newValue) {
|
|
@@ -591,6 +609,7 @@ watch(
|
|
|
[() => route.query.searchString, () => route.query.countryCodeId],
|
|
|
() => {
|
|
|
queryParams.pageNum = 1
|
|
|
+ visaList.value = []
|
|
|
getVisaList()
|
|
|
},
|
|
|
{ immediate: true }
|
|
@@ -607,7 +626,6 @@ onMounted(() => {
|
|
|
getCounselorQr()
|
|
|
|
|
|
// getCountryList()
|
|
|
- // getVisaList()
|
|
|
})
|
|
|
|
|
|
useSeoMeta({
|