mirror of https://github.com/rocboss/paopao-ce
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.5 KiB
100 lines
2.5 KiB
<template>
|
|
<div>
|
|
<main-nav title="话题" />
|
|
|
|
<n-list class="main-content-wrap tags-wrap" bordered>
|
|
<n-tabs type="line" animated @update:value="changeTab">
|
|
<n-tab-pane name="hot" tab="热门" />
|
|
<n-tab-pane name="new" tab="最新" />
|
|
<n-tab-pane v-if="store.state.userLogined"
|
|
name="follow" tab="关注" />
|
|
<template v-if="store.state.userLogined" #suffix>
|
|
<n-tag v-model:checked="tagsChecked" checkable>
|
|
{{tagsEditText}}
|
|
</n-tag>
|
|
</template>
|
|
</n-tabs>
|
|
<n-spin :show="loading">
|
|
<n-space>
|
|
<tag-item
|
|
v-for="tag in tags"
|
|
:tag="tag"
|
|
:showAction="store.state.userLogined && tagsChecked"
|
|
:checkFollowing="inFollowTab"
|
|
>
|
|
</tag-item>
|
|
</n-space>
|
|
</n-spin>
|
|
</n-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed, watch} from 'vue';
|
|
import { getTags } from '@/api/post';
|
|
import { useStore } from 'vuex';
|
|
|
|
const store = useStore();
|
|
const tags = ref<Item.TagProps[]>([]);
|
|
const tagType = ref<"hot" | "new" | "follow">('hot');
|
|
const loading = ref(false);
|
|
const tagsChecked = ref(false)
|
|
const inFollowTab = ref(false)
|
|
|
|
watch(tagsChecked, () => {
|
|
if (!tagsChecked.value) {
|
|
window.$message.success("保存成功");
|
|
store.commit("refreshTopicFollow")
|
|
}
|
|
});
|
|
const tagsEditText = computed({
|
|
get: () => {
|
|
let text = "编辑";
|
|
if (tagsChecked.value) {
|
|
text = "保存";
|
|
}
|
|
return text;
|
|
},
|
|
set: (newVal) => {
|
|
// do nothing
|
|
},
|
|
});
|
|
const loadTags = () => {
|
|
loading.value = true;
|
|
getTags({
|
|
type: tagType.value,
|
|
num: 50,
|
|
})
|
|
.then((res) => {
|
|
tags.value = res.topics;
|
|
loading.value = false;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
loading.value = false;
|
|
});
|
|
};
|
|
const changeTab = (tab: "hot" | "new" | "follow") => {
|
|
tagType.value = tab;
|
|
if (tab == "follow") {
|
|
inFollowTab.value = true
|
|
} else {
|
|
inFollowTab.value = false
|
|
}
|
|
loadTags();
|
|
};
|
|
onMounted(() => {
|
|
loadTags();
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tags-wrap {
|
|
padding: 20px;
|
|
}
|
|
.dark {
|
|
.tags-wrap {
|
|
background-color: rgba(16, 16, 20, 0.75);
|
|
}
|
|
}
|
|
</style> |