<script lang='ts' setup> import { ArrowRight } from '@element-plus/icons-vue' import { getFeatureListApi } from '~/api/model/feature' import { PageSizeEnum } from '~/enums/sizeEnum' import { useUserStore } from '@/stores/modules/user' import { ConstKeys } from '~/enums/const-enums' useHead({ title: 'Product Collections | Discover Top Picks and Trending Items at EJET Selection', meta: [ { name: 'description', content: `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `, }, { property: 'og:title', content: 'Product Collections | Discover Top Picks and Trending Items at EJET Selection', }, { property: 'og:description', content: `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `, }, { property: 'og:type', content: 'website', }, { property: 'twitter:title', content: 'Product Collections | Discover Top Picks and Trending Items at EJET Selection', }, { property: 'twitter:description', content: `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `, }, { property: 'twitter:card', content: 'summary_large_image', }, ], link: [ { rel: 'canonical', href: `${ConstKeys.DOMAINPRO}/collections`, }, ], }) const userStore = useUserStore() const { isLogin } = storeToRefs(userStore) const { openLoginModal } = useLoginModal() const list = ref<any>([]) const moreList = ref<any>([]) const total = ref(0) const currentPage = ref(0) const page_size = ref(10) async function getFeatureList( pageNo = PageSizeEnum.PAGE, pageSize = page_size.value, ) { const params = { pageNo, pageSize, } const res: any = await getFeatureListApi(params) list.value = res.records currentPage.value = res.current total.value = res.total } async function getMoreList(pageNo = PageSizeEnum.PAGE, pageSize = 3) { const params = { pageNo, pageSize, } const res: any = await getFeatureListApi(params) moreList.value = res.records } getFeatureList() getMoreList() function updatePage(currentPage: number, pageSize: number) { const dom: any = document.getElementById('app-scroller') dom.scrollTo({ top: 400, behavior: 'smooth', }) getFeatureList(currentPage, pageSize) } </script> <template> <div> <div> <div class="relative"> <img src="~/assets/images/featured_banner.png" class="w-full h-[400px] object-cover" alt="" srcset="" > <div class="pos-absolute text-center top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]" > <h1 class="!mb-20px text-#fff text-48px fw-700 custom-title-font"> Product Collections </h1> <div class="mb-48px text-#f4f4f4 text-24px"> Discover top picks and trending items for your retail success </div> <div v-if="!isLogin"> <el-button type="primary" plain class="w-176px !bg-#C58C46 !text-#fff !h-48px !text-18px !fw-500 !b-rd-150px" @click="openLoginModal" > Sign on EJET </el-button> </div> </div> </div> <div class="w-1400px mx-auto"> <div class="pt-40px pb-60px"> <el-breadcrumb :separator-icon="ArrowRight"> <el-breadcrumb-item :to="{ path: '/' }"> Home </el-breadcrumb-item> <el-breadcrumb-item> Collections</el-breadcrumb-item> </el-breadcrumb> </div> <div class="mb-100px"> <div v-if="list.length" class="grid grid-cols-2 gap-x-60px gap-y-100px" > <div v-for="item in list" :key="item.id"> <common-featured-item3 v-if="item.type === '1'" :item /> <common-featured-item v-else :item /> </div> </div> <div v-if="list.length" class="flex justify-center mt-60px"> <el-pagination v-model:current-page="currentPage" :page-size="page_size" :pager-count="10" layout="prev, pager, next" :total="total" @change="updatePage" /> </div> <common-empty v-else class="pt-50px" title=""> <template #icon> <img src="~/assets/images/featured_empty.png" class="w-200px h-200px" alt="" srcset="" > </template> </common-empty> </div> </div> </div> <div class="w-1400px mx-auto mb-160px"> <h1 class="fw-500 text-30px text-center text-#333 !mb-50px"> Explore More Product Collections </h1> <div class="grid grid-cols-3 gap-x-106px px-66px"> <div v-for="(item, index) in moreList" :key="index"> <common-featured-item2 :item /> </div> </div> </div> <AppFooter /> </div> </template> <style lang='less' scoped> </style>