rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ui

Browse Source
This commit is contained in:
yanghao05
2025-04-29 10:15:36 +08:00
parent 75e39a0283
commit da8ad94eda
9 changed files with 232 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/wechat/src/components/ArticleListItem.vue
View File

@@ -17,23 +17,28 @@ const discountPrice = computed(() => {
return (props.article.price * props.article.discount / 100).toFixed(2)
})
const mediaTypes = computed(() => {
return [...new Set(props.article.assets.map(asset => asset.type))]
})
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="p-4 bg-white rounded-lg shadow-sm hover:shadow transition-all cursor-pointer">
<div class="flex-1 flex flex-col min-w-0">
<h3 class="text-lg font-medium mb-2 truncate text-gray-800">{{ article.title }}</h3>
<div class="py-2">
<span v-for="type in mediaTypes" :key="type"
class="inline-block px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded mr-1.5">
{{ type }}
</span>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow transition-all cursor-pointer"
@click="showArticle(article)">
<div v-if="article.head_images && article.head_images.length > 0" class="w-full h-48 bg-gray-200">
<img :src="article.head_images[0]" class="w-full h-full object-cover" alt="文章图片">
</div>
<div class="p-4">
<h3 class="text-lg break-all font-medium text-gray-800 line-clamp-1">
{{ article.title }}
</h3>
<p class="text-gray-500 text-sm line-clamp-2 mb-2">{{ article.description }}</p>
<p v-if="article.description" class="text-gray-600 text-sm mb-2 line-clamp-2">{{ article.description }}
</p>
<div class="py-2 flex items-center gap-2">
<span v-for="tag in article.tags" :key="tag"
@@ -42,7 +47,7 @@ const mediaTypes = computed(() => {
</span>
</div>
<div class="flex items-center justify-between mt-auto text-sm py-2">
<div class="flex items-center justify-between mt-auto text-sm">
<div class="flex flex-wrap items-center gap-3">
<span class="flex items-center gap-1 text-gray-700">
<AiOutlineEye class="w-3.5 h-3.5" />
@@ -53,9 +58,16 @@ const mediaTypes = computed(() => {
{{ article.likes }}
</span>
</div>
<div class="flex items-center gap-2 ml-4 flex-shrink-0">
<span class="text-sm font-bold text-red-600">¥{{ discountPrice }}</span>
<span class="text-sm line-through text-gray-500">¥{{ article.price }}</span>
<div class="flex items-center gap-2 ml-4 flex-shrink-0 font-mono">
<span v-if="article.bought" class="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
已购买
</span>
<template v-else>
<span v-if="article.discount < 100" class="text-xs line-through text-gray-500">
¥{{ article.price }}
</span>
<span class="text-xl text-orange-600">&yen;{{ discountPrice }}</span>
</template>
</div>
</div>
</div>