fashion-ssr-vue3/components/common/block/catalogs.vue

<!-- @format -->

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import { Api } from '@/api/model/url'

const config = useRuntimeConfig()
const baseURL = config.public.apiBaseSiteUrl

const modules = [Navigation, Pagination]
const catalogueList = ref<any>([])
const swiperVertical = ref<any>(null)

const solution = ref('category')
const list = ref([
  {
    key: 'category',
    title: 'By Category',
  },
  {
    key: 'trend',
    title: 'By Trend',
  },
])
const requestUrl = `${baseURL}${Api.CatalogueList}`
const params = { pageNo: 1, pageSize: 9, state: 1, trend: 0, order: 'desc' }
const { data, pending, error, refresh } = await useAsyncData(
  'catalogue-list',
  () => $fetch(requestUrl, { params }),
)

watch(() => data.value, (newValue) => {
  if (newValue?.result)
    catalogueList.value = newValue?.result?.records || []
}, { immediate: true })

function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onClickLeft() {
  // swiperVertical.value.slideTo()
  swiperVertical.value.slidePrev()
}
function onClickRight() {
  // swiperVertical.value.slideTo(4)
  swiperVertical.value.slideNext()
}
function switchCatalogs(item: any) {
  solution.value = item.key
  if (item.key === 'category')
    params.trend = 0
  else
    params.trend = 1

  refresh()
}
</script>

<template>
  <div
    id="catalogs" class="bg-#0F0820 pt-100px pb-160px  data-section"
    data-section-color="#0F0820"
  >
    <div class="w-1200-auto text-left pos-relative">
      <h2 class="text-36px fw-800 text-#fff !mb-40px custom-title-font">
        Download EJET Spark  <span class="custom-title-bg02">Catalogs</span>
      </h2>
      <div class="flex gap-20px mb-30px text-center">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="py-8px w-132px b-rd-6px text-14px fw-bold b-solid b-1px cursor-pointer hover:bg-#fff hover:text-#000 transition-all duration-300"
          :class="
            solution === item.key
              ? '!bg-#fff !text-#000 b-#fff'
              : 'bg-#0F0820 text-#fff b-#fff'
          "
          @click="switchCatalogs(item)"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="w-1200-auto pos-relative">
        <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer">
          <nuxt-link class="text-#fff hover:text-#D7C4FF" :to="solution === 'category' ? '/categories' : '/trends'">
            View All
          </nuxt-link>
          <svgo-arrow-line-r class="w-16px h-16px ml-10px" />
        </div>
        <div
          class="pos-absolute cursor-pointer left-48% bottom--60px w-30px h-30px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickLeft()"
        >
          <img
            src="~/assets/images/swiper_icon2_l.png"
            alt=""
            class="!w-2430px !h-30px"
            srcset=""
          >
        </div>
        <div
          class="pos-absolute cursor-pointer left-52% bottom--60px w-28px h-28px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickRight()"
        >
          <img
            src="~/assets/images/swiper_icon2_r.png"
            alt=""
            class="!w-30px !h-30px"
            srcset=""
          >
        </div>
        <Swiper
          v-if="catalogueList.length"
          :slides-per-view="3"
          :space-between="20"
          :modules="modules"
          :centered-slides="true"
          :loop="true"
          :navigation="false"
          :pagination="true"
          class="pos-relative"
          @swiper="onVerticalSwiper"
        >
          <SwiperSlide v-for="(item, index) in catalogueList" :key="index">
            <common-catalogs-item :item="item" class="catalog-item" />
          </SwiperSlide>
        </Swiper>
      </div>
      <img
        class="w-240px h-148px pos-absolute right-0 bottom--160px z-101"
        src="~/assets/images/catalogs_img01.png"
        alt=""
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.swiper-slide{
  border-radius: 10px;
  background-color: #fff;
}

.swiper-slide{
    background-color: #F3F4FB;
  &.swiper-slide-prev{
    background-color: #D7C4FF!important;
    transition: all 0.3s ease-in-out;
  }
}
</style>