fashion-ssr-vue3/pages/collections/index.vue

<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>