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

<!-- @format -->

<script lang="ts" setup>
import { getCollectionGoodsListApi } 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)

async function getCollectProductsList(pageNo = currentPage.value, pageSize = page_size.value) {
  const data: any = await getCollectionGoodsListApi({
    pageNo,
    pageSize,
  })
  total.value = data.total
  currentPage.value = data.current
  list.value = data.records
}
function changePage(current: number, size: number) {
  getCollectProductsList(current, size)
}

watch(() => props.activeName, (newVal) => {
  if (newVal === 'products')
    getCollectProductsList()
}, { immediate: true })
</script>

<template>
  <div class="min-h-400px flex items-center">
    <div v-if="list.length">
      <div class="grid grid-gap-40px grid-cols-4">
        <div v-for="item in list" :key="item.id">
          <common-goods-item :item />
        </div>
      </div>
      <div class="mt-60px flex justify-center">
        <el-pagination
          :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>