fashion-ssr-vue3/pages/suppliers/all-brands.vue

<script lang='ts' setup>
import { ref, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useBrandData } from './useBrandData'
import { PageSizeEnum } from '~/enums/sizeEnum'
import { getCategoryListApi } from '~/api/model/common'
import { ConstKeys } from '~/enums/const-enums'
import { getParentsById } from '~/utils/object'
import {
  getFeatureListApi,
} from '~/api/model/feature'
import { useUserStore } from '@/stores/modules/user'

useHead({
  title: 'Discover and Shop New Brands Wholesale in China | EJET Selection ',
  meta: [
    {
      name: 'description',
      content:
        `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: 'og:title',
      content: 'Discover and Shop New Brands Wholesale in China | EJET Selection ',
    },
    {
      property: 'og:description',
      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: 'Discover and Shop New Brands Wholesale in China | EJET Selection ',
    },
    {
      property: 'twitter:description',
      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/suppliers/all-brands`,
    },
  ],
})

const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { openLoginModal } = useLoginModal()
const { handleSelectedCategory, page_size, brandList, getBrandList, total, selectedCategoryId, currentPage, changePage } = useBrandData()
const categories = ref<any>([])
const levelTopList = ref<any>([])
const list = ref<any>([])
const crumbs = ref<any>([
  { name: 'All Brands', url: '/' },
])

async function getCategories() {
  try {
    const data = await getCategoryListApi({ all: true })
    categories.value = data
    levelTopList.value = data.map((item: any) => {
      const { children, ...rest } = item
      return rest
    })
    levelTopList.value.unshift({
      key: '',
      title: 'All Brands',
    })
  }
  catch (error) {
    console.log(error)
  }
}
async function getFeatureList(pageNo = PageSizeEnum.PAGE, pageSize = 3) {
  const params = {
    pageNo,
    pageSize,
  }
  const res: any = await getFeatureListApi(params)
  list.value = res.records
}

watch(() => selectedCategoryId.value, (value: any) => {
  if (value) {
    const filterArr = getParentsById(categories.value, value)
    const baseCrumb = [
      { name: 'All Brands', url: '/' },
    ]
    const arr: any = []
    filterArr.forEach((ele) => {
      arr.unshift({
        name: ele.title,
        url: '',
      })
    })
    crumbs.value = [...baseCrumb, ...arr]
  }
  else {
    crumbs.value = [
      { name: 'All Brands', url: '/' },
    ]
  }
})

getFeatureList()
getCategories()
getBrandList()
</script>

<template>
  <div class="">
    <div>
      <div class="relative">
        <img src="~/assets/images/all_brand_banner.jpg" class="w-full h-[400px] object-cover" alt="" srcset="">
        <div class="pos-absolute top-[50%] left-[50%]  translate-x-[-50%]   translate-y-[-50%] w-1400px mx-auto">
          <h1 class="!mb-20px text-#333333 text-40px fw-700 custom-title-font">
            Find The Best Wholesale Suppliers
          </h1>
          <div class="mb-20px text-#999999">
            Shop premium Chinese manufacturing brands at wholesale prices.
          </div>
          <div v-if="!isLogin">
            <el-button type="primary" plain class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px">
              <nuxt-link to="/register">
                Shop on EJET
              </nuxt-link>
            </el-button>
          </div>
        </div>
      </div>
      <div class="w-1400px mx-auto pt-60px pb-46px">
        <div class="fw-300 mb-46px">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item, index in crumbs" :key="index" :to="!!item.url ? { path: item.url } : null">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="flex gap-48px">
          <div v-for="item in levelTopList" :key="item.key" :class="selectedCategoryId === item.key && 'fw-700 underline'" class="cursor-pointer text-#666666 hover:underline" @click="handleSelectedCategory(item.key)">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="w-1400px mx-auto mb-160px">
      <!-- <el-row class="row-bg">
        <el-col :span="5">
          <div>
            <h2 class="fw-700 text-24px !mb-40px">
              Categories
            </h2>
            <category-sider :list="categories" class="b-rd-20px" style="box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);border-radius: 20px;overflow: hidden;" @click="handleSelectedCategory" />
          </div>
        </el-col>
        <el-col :span="1" />
        <el-col :span="18"> -->
      <div v-if="brandList.length">
        <div class="grid grid-gap-x-65px grid-gap-y-80px grid-cols-4">
          <div v-for="item in brandList" :key="item.id">
            <common-brand-item :item="item" :is-favorite="true" />
          </div>
        </div>
        <div class="mt-60px 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>
      <common-empty v-else class="mt-200px" title="No brand found ~" />
      <!-- </el-col>
      </el-row> -->
    </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 list" :key="index">
          <common-featured-item2 :item />
        </div>
      </div>
    </div>
    <AppFooter />
  </div>
</template>

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