fashion-ssr-vue3/components/common/favorite/index.vue

<!-- @format -->

<script lang="ts" setup>
import { setGoodsFavoriteApi } from '~/api/model/goods'

defineProps({
  data: { type: Object, default: () => {} },
  svgSize: {
    type: String,
    default: '24px',
  },
  w: {
    type: String,
    default: '50px',
  },
})
const emit = defineEmits(['update:favorite'])
const { openLoginModal } = useLoginModal()

const hoverStatus = ref<any>()

async function handleFavorite(item: any) {
  try {
    const { status } = await openLoginModal()
    if (status) {
      const params = { mid: item.id, type: item.isFavorite ? 2 : 1 }
      await setGoodsFavoriteApi(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
    class="b-rd-50% b-1px b-solid b-#FAE7CE flex  cursor-pointer justify-center items-center bg-#F9F6F2   hover:bg-#CC9879"
    :class="[{ '!bg-#CC9879': data.isFavorite }]"
    :style="{ width: w, height: w }"
    @mouseover="hoverStatus = '!fill-#fff'"
    @mouseleave="hoverStatus = '!fill-#CC9879'"
    @click.stop="handleFavorite(data)"
  >
    <svgo-like
      :class="(data.isFavorite && '!fill-#fff') || hoverStatus"
      class="!fill-#CC9879  "
      :style="{ fontSize: svgSize }"
      :filled="true"
    />
  </div>
</template>

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