feat: update
This commit is contained in:
yanghao05
48
frontend/wechat/src/api/client.js
Normal file
48
frontend/wechat/src/api/client.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import axios from 'axios';
|
||||
|
||||
// Create axios instance with default config
|
||||
const client = axios.create({
|
||||
baseURL: '/v1',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
// Request interceptor
|
||||
client.interceptors.request.use(
|
||||
config => {
|
||||
const authStore = useAuthStore();
|
||||
if (authStore.isAuthenticated && authStore.token) {
|
||||
config.headers.Authorization = `Bearer ${authStore.token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor
|
||||
client.interceptors.response.use(
|
||||
response => {
|
||||
return response
|
||||
},
|
||||
error => {
|
||||
// Handle HTTP errors here
|
||||
if (error.response) {
|
||||
// Server responded with error status
|
||||
console.error('API Error:', error.response.status, error.response.data);
|
||||
} else if (error.request) {
|
||||
// Request made but no response received
|
||||
console.error('API Error: No response received', error.request);
|
||||
} else {
|
||||
// Something else happened
|
||||
console.error('API Error:', error.message);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default client;
|
||||
27
frontend/wechat/src/api/postApi.js
Normal file
27
frontend/wechat/src/api/postApi.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import client from './client';
|
||||
|
||||
export const postApi = {
|
||||
list({ page = 1, limit = 10, keyword = '' } = {}) {
|
||||
return client.get('/api/posts', {
|
||||
params: {
|
||||
page,
|
||||
limit,
|
||||
keyword: keyword.trim()
|
||||
}
|
||||
});
|
||||
},
|
||||
show(id) {
|
||||
return client.get(`/api/posts/${id}`);
|
||||
},
|
||||
mine({ page = 1, limit = 10 } = {}) {
|
||||
return client.get('/api/posts/mine', {
|
||||
params: {
|
||||
page,
|
||||
limit
|
||||
}
|
||||
});
|
||||
},
|
||||
buy(id) {
|
||||
return client.post(`/api/posts/buy/${id}`);
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useArticleStore = defineStore('article', {
|
||||
state: () => ({
|
||||
articles: [],
|
||||
page: 1,
|
||||
loading: false,
|
||||
hasMore: true,
|
||||
searchQuery: ''
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async fetchArticles() {
|
||||
if (this.loading || !this.hasMore) return
|
||||
this.loading = true
|
||||
try {
|
||||
const response = await fetch(`/api/posts?page=${this.page}&q=${this.searchQuery}`)
|
||||
const data = await response.json()
|
||||
const items = data.items || []
|
||||
this.articles = [...this.articles, ...items]
|
||||
this.hasMore = items.length > 0 // 只有当返回的列表为空时，才设置 hasMore 为 false
|
||||
this.page++
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
setSearchQuery(query) {
|
||||
this.searchQuery = query
|
||||
this.articles = []
|
||||
this.page = 1
|
||||
this.hasMore = true
|
||||
this.fetchArticles()
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,297 +0,0 @@
|
||||
{
|
||||
"page": 7,
|
||||
"limit": 10,
|
||||
"total": 100,
|
||||
"items": [
|
||||
{
|
||||
"id": 40,
|
||||
"created_at": "2025-04-11T15:03:25.666419Z",
|
||||
"updated_at": "2025-04-11T15:03:25.666419Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-39",
|
||||
"description": "test-description-39",
|
||||
"content": "test-content-39",
|
||||
"price": 6747,
|
||||
"discount": 98,
|
||||
"views": 8091,
|
||||
"likes": 9914,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 8143
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 2977
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"created_at": "2025-04-11T15:03:25.661237Z",
|
||||
"updated_at": "2025-04-11T15:03:25.661237Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-38",
|
||||
"description": "test-description-38",
|
||||
"content": "test-content-38",
|
||||
"price": 2891,
|
||||
"discount": 45,
|
||||
"views": 4462,
|
||||
"likes": 6110,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 5431
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 3866
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"created_at": "2025-04-11T15:03:25.657112Z",
|
||||
"updated_at": "2025-04-11T15:03:25.657112Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-37",
|
||||
"description": "test-description-37",
|
||||
"content": "test-content-37",
|
||||
"price": 904,
|
||||
"discount": 70,
|
||||
"views": 8988,
|
||||
"likes": 816,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 3307
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 2933
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 37,
|
||||
"created_at": "2025-04-11T15:03:25.65266Z",
|
||||
"updated_at": "2025-04-11T15:03:25.65266Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-36",
|
||||
"description": "test-description-36",
|
||||
"content": "test-content-36",
|
||||
"price": 4476,
|
||||
"discount": 45,
|
||||
"views": 9910,
|
||||
"likes": 9295,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 3472
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 3283
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 36,
|
||||
"created_at": "2025-04-11T15:03:25.644946Z",
|
||||
"updated_at": "2025-04-11T15:03:25.644946Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-35",
|
||||
"description": "test-description-35",
|
||||
"content": "test-content-35",
|
||||
"price": 7397,
|
||||
"discount": 56,
|
||||
"views": 2486,
|
||||
"likes": 673,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 1183
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 9735
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"created_at": "2025-04-11T15:03:25.640256Z",
|
||||
"updated_at": "2025-04-11T15:03:25.640256Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-34",
|
||||
"description": "test-description-34",
|
||||
"content": "test-content-34",
|
||||
"price": 3733,
|
||||
"discount": 15,
|
||||
"views": 3705,
|
||||
"likes": 1863,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 8713
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 9442
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 34,
|
||||
"created_at": "2025-04-11T15:03:25.634088Z",
|
||||
"updated_at": "2025-04-11T15:03:25.634088Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-33",
|
||||
"description": "test-description-33",
|
||||
"content": "test-content-33",
|
||||
"price": 6591,
|
||||
"discount": 12,
|
||||
"views": 3834,
|
||||
"likes": 7400,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 7429
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 9401
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"created_at": "2025-04-11T15:03:25.628572Z",
|
||||
"updated_at": "2025-04-11T15:03:25.628572Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-32",
|
||||
"description": "test-description-32",
|
||||
"content": "test-content-32",
|
||||
"price": 3740,
|
||||
"discount": 92,
|
||||
"views": 7324,
|
||||
"likes": 3705,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 8942
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 2618
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"created_at": "2025-04-11T15:03:25.623885Z",
|
||||
"updated_at": "2025-04-11T15:03:25.623885Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-31",
|
||||
"description": "test-description-31",
|
||||
"content": "test-content-31",
|
||||
"price": 1839,
|
||||
"discount": 37,
|
||||
"views": 4750,
|
||||
"likes": 2995,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 7409
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 8843
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 31,
|
||||
"created_at": "2025-04-11T15:03:25.61745Z",
|
||||
"updated_at": "2025-04-11T15:03:25.61745Z",
|
||||
"deleted_at": null,
|
||||
"status": 1,
|
||||
"title": "test-title-30",
|
||||
"description": "test-description-30",
|
||||
"content": "test-content-30",
|
||||
"price": 2297,
|
||||
"discount": 56,
|
||||
"views": 715,
|
||||
"likes": 1224,
|
||||
"tags": [
|
||||
"tag1",
|
||||
"tag2",
|
||||
"tag3"
|
||||
],
|
||||
"assets": [
|
||||
{
|
||||
"type": "audio",
|
||||
"media": 9268
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"media": 4416
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,15 +1,54 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { AiOutlineLeft } from 'vue-icons-plus/ai'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { postApi } from '../api/postApi'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const article = ref(null)
|
||||
const buying = ref(false)
|
||||
|
||||
const handleBuy = async () => {
|
||||
if (buying.value) return
|
||||
buying.value = true
|
||||
try {
|
||||
const response = await postApi.buy(route.params.id)
|
||||
const payData = response.data
|
||||
|
||||
// 调用微信支付
|
||||
window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
||||
...payData
|
||||
}, function (res) {
|
||||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||||
// 支付成功，刷新文章数据
|
||||
fetchArticle()
|
||||
} else {
|
||||
// 支付失败或取消
|
||||
console.error('Payment failed:', res.err_msg)
|
||||
alert('支付失败：' + (res.err_msg === 'get_brand_wcpay_request:cancel' ? '支付已取消' : '支付异常'))
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to initiate payment:', error)
|
||||
alert('发起支付失败，请稍后重试')
|
||||
} finally {
|
||||
buying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchArticle = async () => {
|
||||
try {
|
||||
const { id } = route.params
|
||||
const { data } = await postApi.show(id)
|
||||
article.value = data
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch article:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// TODO: Implement API call to fetch article details
|
||||
const { id } = route.params
|
||||
article.value = { id, title: '文章标题', content: '文章内容' }
|
||||
await fetchArticle()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -18,10 +57,7 @@ onMounted(async () => {
|
||||
<header class="fixed top-0 left-0 right-0 h-14 bg-white border-b border-gray-200 flex items-center px-4 z-50">
|
||||
<button @click="router.back()"
|
||||
class="flex items-center justify-center w-10 h-10 mr-2 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
<AiOutlineLeft class="h-5 w-5" />
|
||||
</button>
|
||||
<h2 class="text-lg font-medium">{{ article?.title || '文章详情' }}</h2>
|
||||
</header>
|
||||
@@ -29,7 +65,19 @@ onMounted(async () => {
|
||||
<main class="pt-14 px-4">
|
||||
<div v-if="article" class="py-4">
|
||||
<div class="prose max-w-none">
|
||||
{{ article.content }}
|
||||
<template v-if="article.purchased">
|
||||
{{ article.content }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="text-center py-8">
|
||||
<p class="text-gray-600 mb-4">购买后即可阅读完整内容</p>
|
||||
<button @click="handleBuy" :disabled="buying"
|
||||
class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 active:bg-blue-800 transition-colors disabled:opacity-50">
|
||||
<span v-if="buying">处理中...</span>
|
||||
<span v-else>购买文章 ¥{{ article.price }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-center items-center py-8">
|
||||
@@ -38,7 +86,3 @@ onMounted(async () => {
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 可以移除所有样式，因为都使用了 Tailwind 类 */
|
||||
</style>
|
||||
@@ -1,28 +1,51 @@
|
||||
<script setup>
|
||||
import { postApi } from '@/api/postApi'
|
||||
import ArticleListItem from '@/components/ArticleListItem.vue'
|
||||
import { useArticleStore } from '@/stores/article'
|
||||
import { useIntersectionObserver } from '@vueuse/core'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useArticleStore()
|
||||
const searchInput = ref('')
|
||||
const loadingTrigger = ref(null)
|
||||
const articles = ref([])
|
||||
const loading = ref(false)
|
||||
const hasMore = ref(true)
|
||||
const currentPage = ref(1)
|
||||
const limit = 10
|
||||
|
||||
const fetchArticles = async () => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const { data } = await postApi.list({
|
||||
page: currentPage.value,
|
||||
limit,
|
||||
keyword: searchInput.value
|
||||
})
|
||||
if (data.items?.length === 0) {
|
||||
hasMore.value = false
|
||||
} else {
|
||||
articles.value.push(...data.items)
|
||||
currentPage.value += 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch articles:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 优化 Intersection Observer 配置
|
||||
useIntersectionObserver(
|
||||
loadingTrigger,
|
||||
([{ isIntersecting }]) => {
|
||||
console.log('Intersection state:', { isIntersecting, loading: store.loading, hasMore: store.hasMore })
|
||||
if (isIntersecting && !store.loading && store.hasMore) {
|
||||
console.log('Fetching more articles...')
|
||||
store.fetchArticles()
|
||||
if (isIntersecting && !loading.value && hasMore.value) {
|
||||
fetchArticles()
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold: 0,
|
||||
rootMargin: '100px' // 提前 100px 触发加载
|
||||
rootMargin: '100px'
|
||||
}
|
||||
)
|
||||
|
||||
@@ -31,7 +54,10 @@ const showArticle = (id) => {
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
store.setSearchQuery(searchInput.value)
|
||||
articles.value = []
|
||||
currentPage.value = 1
|
||||
hasMore.value = true
|
||||
fetchArticles()
|
||||
}
|
||||
|
||||
const handleKeyup = (e) => {
|
||||
@@ -41,9 +67,7 @@ const handleKeyup = (e) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (store.articles.length === 0) {
|
||||
store.fetchArticles()
|
||||
}
|
||||
fetchArticles()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -58,16 +82,15 @@ onMounted(() => {
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="p-4">
|
||||
<div v-if="store.articles.length === 0 && !store.loading" class="text-center text-gray-500 py-8">
|
||||
<div v-if="articles.length === 0 && !loading" class="text-center text-gray-500 py-8">
|
||||
暂无文章
|
||||
</div>
|
||||
|
||||
<ArticleListItem v-for="article in store.articles" :key="article.id" :article="article"
|
||||
<ArticleListItem v-for="article in articles" :key="article.id" :article="article"
|
||||
@click="showArticle(article.id)" class="mb-4" />
|
||||
|
||||
<!-- 优化加载触发器位置和显示 -->
|
||||
<div ref="loadingTrigger" class="py-4 text-center" v-show="store.hasMore || store.loading">
|
||||
<div v-if="store.loading"
|
||||
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
|
||||
<div v-if="loading"
|
||||
class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600 mx-auto">
|
||||
</div>
|
||||
<div v-else class="h-8">
|
||||
@@ -75,7 +98,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!store.hasMore && store.articles.length > 0" class="text-center text-gray-500 py-4">
|
||||
<div v-if="!hasMore && articles.length > 0" class="text-center text-gray-500 py-4">
|
||||
没有更多文章了
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,58 @@
|
||||
<script setup>
|
||||
import { postApi } from '@/api/postApi'
|
||||
import ArticleListItem from '@/components/ArticleListItem.vue'
|
||||
import { useIntersectionObserver } from '@vueuse/core'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const purchasedArticles = ref([])
|
||||
const loadingTrigger = ref(null)
|
||||
const loading = ref(false)
|
||||
const hasMore = ref(true)
|
||||
const currentPage = ref(1)
|
||||
const limit = 10
|
||||
|
||||
const showArticle = (id) => {
|
||||
router.push(`/article/${id}`)
|
||||
const fetchArticles = async () => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await postApi.mine({
|
||||
page: currentPage.value,
|
||||
limit
|
||||
})
|
||||
if (response.data.data?.length === 0) {
|
||||
hasMore.value = false
|
||||
} else {
|
||||
purchasedArticles.value.push(...response.data.data)
|
||||
currentPage.value += 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch purchased articles:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// TODO: Implement API call to fetch purchased articles
|
||||
purchasedArticles.value = []
|
||||
useIntersectionObserver(
|
||||
loadingTrigger,
|
||||
([{ isIntersecting }]) => {
|
||||
if (isIntersecting && !loading.value && hasMore.value) {
|
||||
fetchArticles()
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold: 0,
|
||||
rootMargin: '100px'
|
||||
}
|
||||
)
|
||||
|
||||
const showArticle = (id) => {
|
||||
router.push(`/posts/${id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchArticles()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -20,23 +60,32 @@ onMounted(async () => {
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex-none bg-white border-b border-gray-200 z-50 shadow">
|
||||
<div class="p-4">
|
||||
<h2 class="text-lg font-medium text-gray-800">已购买的文章</h2>
|
||||
<h2 class="text-lg font-medium text-gray-800">已购买</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="p-4">
|
||||
<div v-if="purchasedArticles.length === 0" class="text-center text-gray-500 py-8">
|
||||
暂无已购买的文章
|
||||
<div v-if="purchasedArticles.length === 0 && !loading" class="text-center text-gray-500 py-8">
|
||||
暂无已购买
|
||||
</div>
|
||||
|
||||
<ArticleListItem v-for="article in purchasedArticles" :key="article.id" :article="article"
|
||||
@click="showArticle(article.id)" class="mb-4" />
|
||||
|
||||
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
|
||||
<div v-if="loading"
|
||||
class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600 mx-auto">
|
||||
</div>
|
||||
<div v-else class="h-8">
|
||||
<!-- 空白占位，保持触发器可见 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasMore && purchasedArticles.length > 0" class="text-center text-gray-500 py-4">
|
||||
没有更多了
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Remove all styles as they're replaced by Tailwind classes */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user