xyy-m/src/pages/visa/index.vue

<template>
  <div class="w-full h-full">
    <div class="w-full px-16 h-40 mt-10 mx-auto">
      <div class="flex h-40 w-full items-center justify-between rounded-full border bg-[#fff]">
        <input
          type="text"
          v-model="searchString"
          class="ml-5 w-[80%] h-full pl-10 text-sm"
          placeholder="请输入要办理的签证居留的国家或地区名称"
          @keydown.enter="navigateTovisaList({ searchString })"
          style="outline: none; background: none"
        />
        <!-- @keydown.enter="navigateTovisaList({ searchString })" -->
        <button
          @click="navigateTovisaList({ searchString })"
          class="h-full border flex justify-center items-center w-66 shrink-0 rounded-r-full"
        >
          <div style="color: white" class="w-16 h-16 shrink-0">
            <img class="w-full h-full object-cover" src="~/assets/img/visa/search.svg" alt="" />
          </div>
        </button>
      </div>
    </div>
    <div class="w-full pl-32 pb-10 text-left text-sm text-black-9">
      *暂不支持公务员、军人办理签证
    </div>

    <div class="relative h-110 w-full pt-23">
      <img
        :src="banner_visa"
        alt="banner_visa"
        class="absolute left-0 top-0 z-[-100] h-full w-full"
      />
      <img
        :src="banner_left"
        alt="banner_left"
        class="absolute left-0 top-0 z-[-80] h-full w-127"
      />
      <img
        :src="banner_right"
        alt="banner_right"
        class="absolute right-0 top-0 -z-80 h-full w-127"
      />

      <!-- 签证的搜索区域 -->
      <div class="mx-auto box-border flex w-190 flex-wrap items-center justify-center">
        <h1 class="w-full text-center text-xl">签证居留</h1>

        <h2 class="w-full pb-24 pt-4 px-15 text-black-6 text-center text-sm">
          覆盖全球多个国家和地区，
          <br />
          提供全面便捷的一站式服务。
        </h2>
      </div>
    </div>

    <div class="flex flex-col items-center px-16 pt-16 justify-center bg-[#fff]">
      <!-- 签证办理流程 -->

      <VisaPayProcess></VisaPayProcess>
      <!-- 签证类型 -->
      <div class="flex w-full flex-wrap items-center justify-between">
        <NuxtLink
          v-for="(item, index) in visaTypeList"
          :key="item?.id"
          :to="`/visa/article/${item?.id}`"
          class="relative mb-12 box-border h-60 w-165 rounded-lg hover:border-[1px] hover:border-[#FD9A00] hover:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] active:border-[1px] active:border-[#FD9A00] active:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
          style="background: linear-gradient(90deg, #fff5eb 0%, #f9e5cd 100%)"
        >
          <h1 class="my-18 ml-16 h-24 text-xl font-semibold leading-24 text-[#FD9A00]">
            {{ item?.title }}
          </h1>

          <img
            :src="visaTypeImageList[index]"
            alt=""
            class="absolute left-0 top-0 z-[10] h-full w-full"
          />
        </NuxtLink>
      </div>

      <!-- 热门目的地签证 -->
      <div class="box-border w-full rounded-lg">
        <h1
          v-if="hotVisaList?.length > 0"
          class="p-16 text-center text-base font-normal text-black-6"
        >
          热门签证
        </h1>
        <div class="flex flex-wrap items-start justify-between">
          <NuxtLink
            :to="`/visa/details/${item?.id}`"
            v-for="(item, index) in hotVisaList?.slice(0, 8)"
            :key="item.id"
            :class="`mb-12 w-[48%] cursor-pointer overflow-hidden  rounded-xl bg-[#fff]`"
          >
            <div class="h-98 w-full overflow-hidden rounded-t-xl">
              <img v-if="item?.img" :src="item?.img" alt="" class="h-full w-full" />
            </div>

            <div class="box-border border flex rounded-b-xl items-center justify-between p-8">
              <span
                :title="item?.countryCodeIdDictMap?.name"
                class="w-42 line-clamp-1 text-base font-medium text-black-3"
              >
                {{ item?.countryCodeIdDictMap?.name }}
              </span>

              <div
                :class="` shrink-0 line-clamp-1 px-4 h-20 text-center text-sm leading-3xl rounded-full text-[${formatStatus(item?.visaTypeIdDictMap?.id)}] bg-[${formatStatus(item?.visaTypeIdDictMap?.id)}]/[0.1]`"
              >
                {{ item?.visaTypeIdDictMap.name }}
              </div>

              <span class="shrink-0 line-clamp-1">
                <span class="text-sm text-[#f0a020]">￥</span>
                <span class="text-base text-[#f0a020]">{{ item?.floorPrice }}</span>
                <span class="text-sm text-[#999]">起</span>
              </span>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
    <h1
      v-if="allVisaList.length > 0"
      class="w-full pb-20 pt-8 font-normal text-center text-base text-black-6"
    >
      全球目的地签证
    </h1>
    <div
      class="flex w-full items-center border-b-[1px] border-[#E7E7E7] border- mb-16 justify-between overflow-hidden"
    >
      <div
        :class="`flex relative justify-center items-center box-border h-48 flex-1 cursor-pointer ${tabs_value === item?.id ? 'border-b-1 border-b-[#FD9A00] bg-[#fff] font-[600] font-semibold text-[#FD9A00]' : ' bg-[#fff] font-normal text-black-9'}  text-base `"
        v-for="item in allVisaList"
        :key="item?.id"
        @click="changeTabs(item?.id)"
      >
        {{ item?.title }}
        <div
          v-if="tabs_value === item?.id"
          class="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-3 bg-[#FF9300] rounded"
        ></div>
      </div>
    </div>

    <div class="w-full bg-[#fff] mb-30 pl-12">
      <div class="box-border flex flex-wrap justify-start">
        <Empty v-if="!chauAllCountryVisaData.length" title="暂无数据" top="50" />
        <template v-for="(el, it) in chauAllCountryVisaData" :key="el?.id + el?.english_name">
          <div
            @click="navigateGlobalTovisaList({ countryCodeId: el?.country_code }, it)"
            :class="`mb-12 mr-10 flex py-8 px-6 h-108 w-[22%] flex-wrap justify-between  rounded-[4px] ${globalActive == it ? 'bg-[#F5F7FA]' : ''} `"
          >
            <div class="h-48 mb-4 w-72 overflow-hidden border border-dotted border-[#E5E5E5]">
              <img
                v-if="el?.url !== ''"
                class="h-full w-full rounded-[4px] object-cover"
                :src="el?.url"
                style="object-fit: contain"
                alt=""
              />
              <img v-else class="h-full w-full rounded-[4px] object-cover" :src="UN" alt="" />
            </div>
            <div class="pl-2.5 box-border w-full">
              <div
                :title="el?.country"
                :class="`h-[26px] w-full truncate text-ellipsis whitespace-nowrap text-base font-[400] leading-[20px]  ${globalActive == it ? 'text-[#FF9300]' : ''} `"
              >
                {{ el?.country }}
              </div>

              <div
                :title="el?.english_name"
                :class="`h-16 w-72 truncate text-ellipsis whitespace-nowrap text-sm font-[400] leading-sm   ${globalActive == it ? 'text-[#FF9300]' : 'text-black-9 '} `"
              >
                {{ el?.english_name }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <Footer />
  </div>
</template>
<script setup>
import banner_visa from '@/assets/img/visa/banner_visa.png'
import banner_left from '@/assets/img/visa/banner_left.png'
import banner_right from '@/assets/img/visa/banner_right.png'
import search_svg from '~/assets/img/visa/search.svg'

// 签证分类的图片
import small_banner_icon1 from '@/assets/img/visa/small_banner1.png'
import small_banner_icon2 from '@/assets/img/visa/small_banner2.png'
import small_banner_icon3 from '@/assets/img/visa/small_banner3.png'
import small_banner_icon4 from '@/assets/img/visa/small_banner4.png'

//国家图片
import UN from '@/assets/img/visa/UNImage.png'

onMounted(() => {
  getVisaTypeList()
  getHotVisaList()
  getAllVisaList()
  getChauAllCountryVisaList()
})

const colorList = ['#FF9300', '#1BC467', '#FF476A', '#1BC467']
// 签证的搜索
const searchString = ref('')

// 全球的tabs的下标
const tabs_value = ref('1')

// 全球签证触发的下标
const globalActive = ref(null)

// 顾问信息
let consultantInfo = ref({})

// 顾问的模态框
let showVisaModal = ref(false)

// 重新获取洲对应的国家
watch(
  tabs_value,
  () => {
    getChauAllCountryVisaList()
  },
  { deep: true }
)

// 跳转到签证的列表页
const navigateTovisaList = (parmas) => {
  // if (parmas.searchString) {
  navigateTo({
    path: '/visa/visaList',
    query: {
      ...parmas
    }
  })
  // }
}

// 跳转到签证的列表页
const navigateGlobalTovisaList = (parmas, index) => {
  globalActive.value = index
  navigateTo({
    path: '/visa/visaList',
    query: {
      ...parmas
    }
  })
}

const visaTypeImageList = [
  small_banner_icon1,
  small_banner_icon2,
  small_banner_icon3,
  small_banner_icon4
]

const isValue = (parmas) => {
  if (parmas !== null || parmas !== undefined || parmas !== '') {
    return parmas
  } else {
    return ''
  }
}

// tabs标题的切换
const changeTabs = (newTabId) => {
  tabs_value.value = newTabId
}

// 获取签证的类型列表
const visaTypeList = ref([])
async function getVisaTypeList() {
  const { data } = await request(`/website/tourism/visa/getTypeList`)

  if (Array.isArray(data)) visaTypeList.value = data
}

// 获取热门签证
const hotVisaList = ref([])
async function getHotVisaList() {
  const { data } = await request('/website/tourism/visa/hotAddress')

  if (Array.isArray(data)) hotVisaList.value = data
}

// 获取全球的签证目的地
const allVisaList = ref([])
async function getAllVisaList() {
  const { data } = await request('/website/tourism/visa/interFind')

  if (Array.isArray(data)) allVisaList.value = data
}

// 获取洲对应的国家的签证目的地

const chauAllCountryVisaData = ref([])

async function getChauAllCountryVisaList() {
  let url = `/website/tourism/visa/findAllCountry?id=${tabs_value.value}`
  let { data } = await request(url)

  if (Array.isArray(data) && data?.length) {
    chauAllCountryVisaData.value = data
  } else {
    chauAllCountryVisaData.value = []
  }
}

function formatStatus(status) {
  let index = visaTypeList.value?.findIndex((item) => item.id == status)
  return colorList[index]
}

// 单独获取顾问得的二维码
// const getCounselorQr = async () => {
//   showVisaModal.value = !showVisaModal.value
//   try {
//     let url = `/website/tourism/visa/findWechatList`

//     let { data } = await request(url)

//     if (data) {
//       consultantInfo.value = data
//       consultantInfo.value.workingTime = `${isValue(data?.start)}:00 - ${isValue(data?.end)}:00`
//     }
//   } finally {
//     return
//   }
// }
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__line {
  background-color: #ff9300;
}

::v-deep .van-tab__text--ellipsis {
  font-size: 16px;
}
</style>