fashion-ssr-vue3/components/business/account/favourite/brands.vue

<!-- @format -->

<script lang="ts" setup>
import { getCollectBrandsListApi } from '@/api/model/my'
import { PageSizeEnum } from '~/enums/sizeEnum'

const props = defineProps<{
  activeName: string
}>()
const list = ref<any[]>([])
const currentPage = ref(PageSizeEnum.PAGE)
const total = ref()
const page_size = ref(8)
watch(() => props.activeName, (newVal) => {
  if (newVal === 'following')
    getCollectBrandsList()
}, { immediate: true })

async function getCollectBrandsList(pageNo = currentPage.value, pageSize = page_size.value) {
  const data: any = await getCollectBrandsListApi({
    pageNo,
    pageSize,
  })
  total.value = data.total
  currentPage.value = data.current
  list.value = data.records
}
function changePage(current: number, size: number) {
  getCollectBrandsList(current, size)
}
</script>

<template>
  <div class="min-h-400px flex items-center">
    <div v-if="list.length">
      <div class="grid grid-gap-y-41px grid-gap-x-55px grid-cols-4">
        <div v-for="item in list" :key="item.id">
          <common-brand-item :item />
        </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 />
  </div>
</template>

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