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

177
frontend/wechat/src/api/post_list.json Normal file
View File

@@ -0,0 +1,177 @@
{
"page": 2,
"limit": 10,
"total": 103,
"items": [
{
"id": 93,
"bought": false,
"title": "test-title-92",
"description": "test-description-92",
"content": "",
"price": 1356,
"discount": 77,
"views": 7396,
"likes": 3507,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 92,
"bought": false,
"title": "test-title-91",
"description": "test-description-91",
"content": "",
"price": 394,
"discount": 31,
"views": 6578,
"likes": 5173,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 91,
"bought": false,
"title": "test-title-90",
"description": "test-description-90",
"content": "",
"price": 8669,
"discount": 47,
"views": 5172,
"likes": 2039,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 90,
"bought": false,
"title": "test-title-89",
"description": "test-description-89",
"content": "",
"price": 2402,
"discount": 32,
"views": 5388,
"likes": 7944,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 89,
"bought": false,
"title": "test-title-88",
"description": "test-description-88",
"content": "",
"price": 5696,
"discount": 79,
"views": 782,
"likes": 7308,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 88,
"bought": false,
"title": "test-title-87",
"description": "test-description-87",
"content": "",
"price": 8014,
"discount": 0,
"views": 395,
"likes": 4078,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 87,
"bought": false,
"title": "test-title-86",
"description": "test-description-86",
"content": "",
"price": 3076,
"discount": 39,
"views": 2375,
"likes": 7745,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 86,
"bought": false,
"title": "test-title-85",
"description": "test-description-85",
"content": "",
"price": 1653,
"discount": 60,
"views": 700,
"likes": 2822,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 85,
"bought": false,
"title": "test-title-84",
"description": "test-description-84",
"content": "",
"price": 6214,
"discount": 16,
"views": 7468,
"likes": 9144,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
},
{
"id": 84,
"bought": false,
"title": "test-title-83",
"description": "test-description-83",
"content": "",
"price": 9710,
"discount": 43,
"views": 9576,
"likes": 8256,
"tags": [
"tag1",
"tag2",
"tag3"
],
"head_images": []
}
]
}

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>

6
frontend/wechat/src/views/ArticleDetail.vue
View File

@@ -2,6 +2,7 @@
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import { onMounted, onUnmounted, ref } from 'vue'
import { BsChevronLeft } from 'vue-icons-plus/bs'
import { useRoute, useRouter } from 'vue-router'
import { postApi } from '../api/postApi'
@@ -111,10 +112,7 @@ onUnmounted(() => {
<div class="min-h-screen bg-gray-50 flex flex-col">
<div class="bg-white h-12 flex items-center px-4 border-b border-gray-100">
<button @click="handleBack" class="text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
<BsChevronLeft class="w-6 h-6" />
</button>
</div>

7
frontend/wechat/src/views/ArticleList.vue
View File

@@ -49,9 +49,6 @@ useIntersectionObserver(
}
)
const showArticle = (id) => {
router.push(`/posts/${id}`)
}
const handleSearch = () => {
articles.value = []
@@ -86,8 +83,8 @@ onMounted(() => {
暂无文章
</div>
<ArticleListItem v-for="article in articles" :key="article.id" :article="article"
@click="showArticle(article.id)" class="mb-4" />
<ArticleListItem v-for="article in articles" :key="article.id" :article="{ ...article, bought: true }"
class="mb-4" />
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
<div v-if="loading"

9
frontend/wechat/src/views/PurchasedArticles.vue
View File

@@ -47,10 +47,6 @@ useIntersectionObserver(
}
)
const showArticle = (id) => {
router.push(`/posts/${id}`)
}
onMounted(() => {
fetchArticles()
})
@@ -70,8 +66,9 @@ onMounted(() => {
暂无已购买
</div>
<ArticleListItem v-for="article in purchasedArticles" :key="article.id" :article="article"
@click="showArticle(article.id)" class="mb-4" />
<div v-for="article in purchasedArticles" :key="article.id" class="mb-4">
<ArticleListItem :article="{ ...article, bought: true }" />
</div>
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
<div v-if="loading"