fashion-ssr-vue3/components/business/goods/moreFromBrand.vue

<script lang='ts' setup>
import { getBrandGoodsListApi } from '~/api/model/brand'
import { PageSizeEnum } from '~/enums/sizeEnum'

const props = defineProps({
  brandId: { type: String, default: '' },
  brandInfo: { type: Object, default: () => {} },
})
const brandGoodsList = ref<any>([])
watch(() => props.brandId, (id) => {
  if (!id)
    return
  getBrandGoodsList(id)
}, {
  immediate: true,
})

async function getBrandGoodsList(brandId = props.brandId, pageNo = PageSizeEnum.PAGE, pageSize = 8) {
  const res: any = await getBrandGoodsListApi({
    brandId,
    pageNo,
    pageSize,
  })
  brandGoodsList.value = res.records
}
</script>

<template>
  <div v-if="!!brandInfo" class="w-1400px mx-auto mb-160px">
    <h2 class="!mb-60px !fw-700 text-40px text-#363C40 text-center custom-title-font">
      Brand information
    </h2>
    <div class="flex pb-60px items-center">
      <img :src="brandInfo?.brandLogo" class="w-120px h-120px object-contain b-rd-10px" alt="" srcset="">
      <div class="ml-28px">
        <div class="fw-700 text-32px text-#363C40 custom-title-font mb-24px">
          {{ brandInfo?.brandName }}
        </div>
        <div class="text-16px text-#999999">
          {{ brandInfo?.brandStory }}
        </div>
      </div>
    </div>
    <div v-if="brandGoodsList.length">
      <div class="grid grid-gap-66px grid-cols-4">
        <div v-for="item in brandGoodsList" :key="item.id">
          <common-goods-item :item @update:login="getBrandGoodsList" />
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center mt-60px">
      <NuxtLink :to="`/brand/${brandId}`" class="flex justify-center items-center cursor-pointer">
        <div class="underline fw-500 text-#5B463E text-22px hover:text-#CC9879">
          View All
        </div>
        <svgo-arrow class="!w-20px !h-20px ml-16px" />
      </NuxtLink>
    </div>
  </div>
</template>

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