fashion-ssr-vue3/components/business/account/panel/swiper-recommend.vue

<script lang='ts' setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import { getGoodsRecommendListApi } from '~/api/model/goods'
import { useUserStore } from '@/stores/modules/user'

// import "swiper/css/pagination"
import 'swiper/css'
import 'swiper/css/navigation'

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

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

async function getGoodsRecommendList() {
  try {
    const params = {
      fcId: userInfo.value.purchaseCategory,
      pageNo: 1,
      pageSize: 20,
    }
    const data: any = await getGoodsRecommendListApi(params)
    goodsRecommendList.value = data.records
  }
  catch (error) {
    console.log('error', error)
  }
}
function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onClickLeft() {
  swiperVertical.value.slidePrev()
}
function onClickRight() {
  swiperVertical.value.slideNext()
}
getGoodsRecommendList()
</script>

<template>
  <div class="w-1146px">
    <div v-if="goodsRecommendList.length" class="m-auto pos-relative px-66px">
      <div
        v-if="goodsRecommendList.length"
        class="pos-absolute cursor-pointer left-10px 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
        v-if="goodsRecommendList.length"
        class="pos-absolute cursor-pointer right-10px 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
        :slides-per-view="4"
        :space-between="25"
        :modules="modules"
        :loop="true"
        :navigation="false"
        :pagination="true"
        class="pos-relative"
        @swiper="onVerticalSwiper"
      >
        <SwiperSlide v-for="(item, index) in goodsRecommendList" :key="index">
          <common-goods-item :item w="w-250px" h="h-250px" />
        </SwiperSlide>
      </Swiper>
    </div>
    <div v-else>
      <common-empty />
    </div>
  </div>
</template>

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