fashion-ssr-vue3/components/business/home/brands.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 { getHomeBrandListApi } from '~/api/model/brand'
// import "swiper/css/pagination"

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

getHomeBrandList()
async function getHomeBrandList() {
  try {
    const params = {
      pageNo: 1,
      pageSize: 8,
    }
    const data: any = await getHomeBrandListApi(params)
    brandList.value = data.records
  }
  catch (error) {
    console.log('error', error)
  }
}

function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onClickLeft() {
  // swiperVertical.value.slideTo()
  swiperVertical.value.slidePrev()
}
function onClickRight() {
  // swiperVertical.value.slideTo(4)
  swiperVertical.value.slideNext()
}
</script>

<template>
  <div class="pt-100px text-center">
    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
      Our Top Brands
    </h2>
    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
      Wholesale unique and high-quality products from trusted Chinese brands,
      all in one place.
    </div>
    <div class="my-60px">
      <div class="w-1300px mx-auto pos-relative">
        <div
          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickLeft()"
        >
          <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
        </div>
        <div
          class="pos-absolute cursor-pointer  right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickRight()"
        >
          <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
        </div>
        <Swiper
          v-if="brandList.length" :slides-per-view="4" :space-between="55" :modules="modules" :loop="true" :navigation="false"
          :pagination="true" class="pos-relative" @swiper="onVerticalSwiper"
        >
          <SwiperSlide v-for="(item, index) in brandList" :key="index">
            <common-brand-item :item="item" />
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <NuxtLink to="/suppliers/all-brands" class="flex justify-center items-center cursor-pointer">
        <div class="underline fw-600 text-#5B463E text-22px hover:text-#CC9879 custom-title-font">
          View All
        </div>
        <svgo-arrow class="!w-20px !h-20px ml-16px" />
      </NuxtLink>
    </div>
  </div>
</template>

<style lang="less" scoped></style>