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

<script lang='ts' setup>
import dayjs from 'dayjs'
import { useUserStore } from '@/stores/modules/user'

defineProps({
  item: Object as any,
})
const router = useRouter()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { openLoginModal } = useLoginModal()

async function openFeaturedDetail(item: any) {
  if (!item.userEnable) {
    router.push({
      path: `/collections/${item.slug}`,
    })
    return
  }
  const { status } = await openLoginModal()
  if (status) {
    router.push({
      path: `/collections/${item.slug}`,
      query: {
        id: item.id,
      },
    })
  }
}
</script>

<template>
  <div class="pos-relative cursor-pointer" @click="openFeaturedDetail(item)">
    <div v-if="!isLogin && item.userEnable" class="flex text-#666 items-center pos-absolute top-20px right-20px cursor-pointer">
      <svgo-lock class="!w-20px !h-20px ml-4px" />
    </div>
    <!-- <NuxtLink class="cursor-pointer" :to="{ name: 'collections-name', params: { name: item.title }, query: { id: item.id } }"> -->
    <img :src="item.thumbnailUrl" alt="" srcset="" class="w-680px b-rd-14px h-385px object-cover mr-100px">
    <div class="mt-28px">
      <div class="text-32px fw-700 line-clamp-2 text-#363C40 lh-40px custom-title-font">
        {{ item.title }}
      </div>
      <div class="flex mt-20px mb-24px text-#7C7C7C text-18px">
        <div class="mr-48px">
          {{ dayjs(item.createTime).format('MMMM D, YYYY') }}
        </div>
        <div>{{ item.merchandiseQuantity }} products</div>
      </div>
      <div class="text-18px lh-24px line-clamp-1 text-#666">
        {{ item.headImageText }}
      </div>
    </div>
    <!-- </NuxtLink> -->
  </div>
</template>