Merge branch 'dev' of http://1.94.207.143:3000/xyy/xyy-m into dev

src/pages/visa/visaList.vue

@@ -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({