fashion-ssr-vue3/components/common/category/item.vue

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

import { setBrandFavoriteApi } from '~/api/model/brand'

defineProps({
  item: Object as any,
  isFavorite: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:favorite', 'click:detail'])
const { openLoginModal } = useLoginModal()

const hoverStatus = ref<any>()

async function onFavorite(item: any) {
  try {
    const { status } = await openLoginModal()
    if (status) {
      const params = { bid: item.id, type: item.isFavorite ? 2 : 1 }
      await setBrandFavoriteApi(params)
      item.isFavorite = !item.isFavorite
      ElMessage({
        message: `${item.isFavorite ? 'Add' : 'Remove'} to My Favourites Successfully`,
        type: 'success',
        plain: true,
      })
      emit('update:favorite', item)
    }
  }
  catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div>
    <div class="custom-main mx-auto  overflow-hidden pos-relative">
      <h2 class="!mb-20px text-30px fw-800 text-#333 line-clamp-1">
        {{ item.brandName }}
      </h2>
      <img
        :src="item.thumbnail || item.masterImage"
        alt=""
        srcset=""
        class="w-260px h-260px object-cover"
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-main{
  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
  background-size: cover;
  width: 360px;
  height: 360px;
  border-radius: 10px;
  padding: 20px 50px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
}
</style>