70 lines
2.4 KiB
Vue
70 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed, defineProps } from 'vue'
|
|
import { AiOutlineEye } from 'vue-icons-plus/ai'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
const props = defineProps({
|
|
article: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const formattedDate = computed(() => {
|
|
return new Date(props.article.created_at).toLocaleDateString()
|
|
})
|
|
|
|
const discountPrice = computed(() => {
|
|
return (props.article.price * props.article.discount / (100 * 100)).toFixed(2)
|
|
})
|
|
|
|
const showArticle = (article) => {
|
|
// Since there's no id in the data structure, we might need to use title or other identifier
|
|
// For now, just console log the article
|
|
console.log('Selected article:', article)
|
|
router.push(`/posts/${article.id}`)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
|
|
@click="showArticle(article)">
|
|
<div v-if="article.head_images && article.head_images.length > 0"
|
|
class="relative w-full h-24 bg-gray-100 overflow-hidden">
|
|
<img :src="article.head_images[0]"
|
|
class="absolute inset-0 w-full object-cover transition-transform duration-300 hover:scale-105"
|
|
:alt="article.title" />
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
|
|
</div>
|
|
<div class="p-4 space-y-3">
|
|
<h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
|
|
{{ article.title }}
|
|
</h3>
|
|
|
|
<p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
|
|
{{ article.description }}
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<span v-for="tag in article.tags" :key="tag"
|
|
class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">
|
|
{{ tag }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2 text-sm">
|
|
<div class="flex items-center gap-2 text-gray-500">
|
|
<AiOutlineEye class="w-4 h-4" />
|
|
<span>{{ article.view_count || 0 }}</span>
|
|
</div>
|
|
<div class="text-orange-600 font-mono text-xl" v-if="!article.bought">
|
|
¥{{ discountPrice }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|