|
|
@ -16,7 +16,7 @@
|
|
|
|
<!-- 右侧帖子列表 -->
|
|
|
|
<!-- 右侧帖子列表 -->
|
|
|
|
<div class="post-list">
|
|
|
|
<div class="post-list">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="(post, index) in filteredPosts"
|
|
|
|
v-for="(post, index) in postListStore.posts"
|
|
|
|
:key="index"
|
|
|
|
:key="index"
|
|
|
|
class="post-item"
|
|
|
|
class="post-item"
|
|
|
|
@click="goToPostDetail(post.id)"
|
|
|
|
@click="goToPostDetail(post.id)"
|
|
|
@ -37,26 +37,30 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="js" name="PostPage">
|
|
|
|
<script setup lang="js" name="PostPage">
|
|
|
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
|
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { usePostListStore } from '@/stores/postlist.js';
|
|
|
|
import { usePostListStore } from '@/stores/postlist.js';
|
|
|
|
|
|
|
|
|
|
|
|
const categories = ref(['全部', '学习', '娱乐', '二手交易']);
|
|
|
|
// 分类名与id映射
|
|
|
|
|
|
|
|
const categoryMap = [
|
|
|
|
|
|
|
|
{ name: '全部', id: null },
|
|
|
|
|
|
|
|
{ name: '校园活动', id: 1 },
|
|
|
|
|
|
|
|
{ name: '学习', id: 2 },
|
|
|
|
|
|
|
|
{ name: '娱乐', id: 3 },
|
|
|
|
|
|
|
|
{ name: '二手交易', id: 4 }
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
const categories = ref(categoryMap.map(item => item.name));
|
|
|
|
const selectedCategory = ref('全部');
|
|
|
|
const selectedCategory = ref('全部');
|
|
|
|
const postListStore = usePostListStore();
|
|
|
|
const postListStore = usePostListStore();
|
|
|
|
const router = useRouter();
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
|
|
// 计算属性,动态筛选
|
|
|
|
|
|
|
|
const filteredPosts = computed(() => {
|
|
|
|
|
|
|
|
if (selectedCategory.value === '全部') return postListStore.posts;
|
|
|
|
|
|
|
|
return postListStore.posts.filter(post => post.category === selectedCategory.value);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 分类切换
|
|
|
|
// 分类切换
|
|
|
|
const selectCategory = async (category) => {
|
|
|
|
const selectCategory = async (categoryName) => {
|
|
|
|
selectedCategory.value = category;
|
|
|
|
selectedCategory.value = categoryName;
|
|
|
|
postListStore.resetList();
|
|
|
|
postListStore.resetList();
|
|
|
|
await postListStore.getList({});
|
|
|
|
// 找到对应的id
|
|
|
|
|
|
|
|
const categoryObj = categoryMap.find(item => item.name === categoryName);
|
|
|
|
|
|
|
|
await postListStore.getList(categoryObj ? categoryObj.id : null);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转详情
|
|
|
|
// 跳转详情
|
|
|
@ -72,13 +76,14 @@ const handleScroll = async () => {
|
|
|
|
!postListStore.loading &&
|
|
|
|
!postListStore.loading &&
|
|
|
|
!postListStore.finished
|
|
|
|
!postListStore.finished
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
await postListStore.getList({});
|
|
|
|
const categoryObj = categoryMap.find(item => item.name === selectedCategory.value);
|
|
|
|
|
|
|
|
await postListStore.getList(categoryObj ? categoryObj.id : null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
onMounted(async () => {
|
|
|
|
// 首次加载
|
|
|
|
// 首次加载
|
|
|
|
await postListStore.getList({});
|
|
|
|
await postListStore.getList();
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|