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-300px h-300px mb-20px overflow-hidden pos-relative">
        <img
          :src="item.thumbnail || item.masterImage"
          alt=""
          srcset=""
          class="w-100% h-100% object-contain hover-effect"
        >
        <div
          v-if="isFavorite"
          class="b-rd-50% custom-like b-1px b-solid w-32px h-32px flex cursor-pointer justify-center items-center bg-#CC9879/10% pos-absolute bottom-20px hover:bg-#CC9879"
          :class="item.isFavorite && '!bg-#CC9879'"
          @mouseover="hoverStatus = '!fill-#fff'"
          @mouseleave="hoverStatus = '!fill-#CC9879'"
          @click.stop="onFavorite(item)"
        >
          <svgo-like
            :class="(item.isFavorite && '!fill-#fff') || hoverStatus"
            class="!fill-#CC9879 text-16px"
            :filled="true"
          />
        </div>
      </div>
      <div class="fw-400 text-14px text-#666">
        {{ item?.categoryNames ? (item?.categoryNames.join(','))[0] : '' }}
      </div>
      <h3
        class="fw-600 text-24px !my-10px text-#363C40 custom-title-font line-clamp-1"
      >
        {{ item.brandName }}
      </h3>
      <div class="text-#999 text-18px mb-20px h-48px lh-24px line-clamp-2">
        {{ item.brandStory }}
      </div>
      <div class="underline text-#C58C64 cursor-pointer">
        Shop Now
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-main {
  .custom-like {
    right: -50px;
    opacity: 0;
    transition: all 0.3s ease-out;
  }
  &:hover {
    .custom-like {
      right: 12px;
      opacity: 1;
    }
  }
}
</style>