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

<script lang='ts' setup>
import { getBlogCategoryListApi, getBlogsListApi } from '~/api/model/blogs'
import { PageSizeEnum } from '~/enums/sizeEnum'
import { ConstKeys } from '~/enums/const-enums'

useHead({
  title: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
  meta: [
    {
      name: 'description',
      content:
         `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
    },
    {
      property: 'og:title',
      content: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
    },
    {
      property: 'og:description',
      content:
        `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
    },
    {
      property: 'twitter:description',
      content:
        `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/blog`,
    },
  ],
})

const active = ref('all')
const categoryList = ref([
  {
    title: 'All posts',
    key: 'all',
  },
])
const list = ref<any>([])
const page_size = ref(9)
const total = ref()
const currentPage = ref(PageSizeEnum.PAGE)

async function getBlogCategoryList() {
  const res: any = await getBlogCategoryListApi()
  categoryList.value = categoryList.value.concat(res)
}

async function getBlogsList(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = page_size.value) {
  const res: any = await getBlogsListApi({
    ...params,
    pageNo,
    pageSize,
    orderBy: 'createTime',
    orderType: 'desc',
  })
  list.value = res.records
  total.value = res.total
  currentPage.value = res.current
}
function onSelectedCategory(item: any) {
  active.value = item.key
  getBlogsList({
    categoryId: item.key === 'all' ? '' : item.key,
  }, PageSizeEnum.PAGE, page_size.value)
}
function changePage(current: number, size: number) {
  getBlogsList({ categoryId: active.value === 'all' ? '' : active.value }, current, size)
}
getBlogCategoryList()
getBlogsList()
</script>

<template>
  <div class="">
    <div class="text-center py-80px">
      <h1 class="fw-700 text-40px !mb-20px text-#363C40 custom-title-font">
        Our Blog
      </h1>
      <div class="lh-24px text-16px w-500px mx-auto">
        Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.
      </div>
    </div>
    <div class="w-1400px mx-auto mb-120px">
      <div class="flex gap-84px text-#999999 text-18px justify-center">
        <h2
          v-for="item, index in categoryList" :key="index" class="pb-10px cursor-pointer fw-500 pos-relative" :class="active === item.key && 'after:pos-absolute after:content-empty after:bottom-0 after:left-15% after:right-15% after:h-2px after:bg-#C58C64 text-#C58C64'"
          @click="onSelectedCategory(item)"
        >
          {{ item.title }}
        </h2>
      </div>
      <div class="mt-70px grid grid-cols-3 gap-x-106px gap-y-65px px-66px">
        <div v-for="item, index in list" :key="index">
          <common-blog-item :item="item" />
        </div>
      </div>
      <div class="mt-100px flex justify-center">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="page_size"
          :pager-count="10"
          layout="prev, pager, next" :total="total"
          @change="changePage"
        />
      </div>
    </div>
    <AppFooter />
  </div>
</template>

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