fashion-ssr-vue3/components/common/brand/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)
  }
}
function toDetail(item: any) {
  const router = useRouter()
  router.push({ path: `/brand/${item.id}` })
  // emit('click:detail', item)
}
</script>

<template>
  <div>
    <div class="text-left " @click="toDetail(item)">
      <div class="b-rd-10px custom-main mx-auto  !w-360px h-360px mb-20px overflow-hidden pos-relative">
        <img
          :src="item.thumbnail || item.masterImage"
          alt=""
          srcset=""
          class="w-100% h-100% object-contain"
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>