Skip to content

Commit

Permalink
fix: 实现重构后的帖子页面的部分功能 (#161)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lansongxx
Lansongxx authored Mar 31, 2024
1 parent 910bc22 commit f5858f5
Show file tree
Hide file tree
Showing 7 changed files with 541 additions and 443 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@

* 实现通知跳转个人中心

* 实现重构后的帖子页面的部分功能

## 2024-03-29

### ✨ Features | 新功能
Expand Down
20 changes: 20 additions & 0 deletions src/utils/consts.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@


export enum TargetType {
User = 1,
File = 2,
Post = 3
}

export enum RelationType {
Like = 1,
Follow = 2,
Collect = 3,
Share = 4,
Comment = 5,
View = 6,
Hate = 7,
Upload = 8,
Download = 9,
Publish = 10
}
2 changes: 1 addition & 1 deletion src/views/notification/notification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ const turnNotificationType = (type: string): number => {
return 4
case 'comment':
return 5
default:
default:
return 0
}
}
Expand Down
222 changes: 144 additions & 78 deletions src/views/test-posts/posts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,27 @@
<section class="section">
<nav class="nav">
<ul>
<li>
<input
type="radio"
name="nav"
id="follow"
value="follow"
v-model="navSelect"
checked
>
<label for="follow"><i class="iconfont icon-shoucang01"></i>关注</label>
</li>
<li>
<input
type="radio"
name="nav"
id="all"
value="all"
v-model="navSelect"
>
<label for="all"><i class="iconfont icon-fenlei"></i>全部</label>
</li>
<li>
<input
type="radio"
name="nav"
id="choice"
value="choice"
v-model="navSelect"
>
<label for="choice"><i class="iconfont icon-fenlei"></i>选项</label>
</li>
<li>
<input
type="radio"
name="nav"
id="all"
value="all"
v-model="navSelect"
>
<label for="all"><i class="iconfont icon-fenlei"></i>全部</label>
</li>
<li v-for="zone in zoneList"
:key="zone.zoneId">
<input
type="radio"
name="nav"
:id="`zone-${zone.zoneId}`"
:value="zone.zoneId"
v-model="navSelect"
>
<label :for="`zone-${zone.zoneId}`"><i class="iconfont icon-fenlei"></i>{{zone.value}}</label>
</li>
</ul>
</nav>
<div class="posts">
Expand All @@ -53,10 +43,18 @@
<input
type="radio"
name="posts"
id="hot"
id="latest"
>
<label for="hot">热门</label>
<label for="latest">最新</label>
</li>
<li>
<input
type="radio"
name="posts"
id="follow"
>
<label for="follow">关注</label>
</li>
</ul>
</div>
<div></div>
Expand All @@ -71,71 +69,52 @@
<span>
<span class="post-rank-span">文章排行榜</span>
</span>
<span class="refresh-post-rank">
<i class="iconfont icon-undo-alt-solid"></i>
换一换</span>
<!-- <span class="refresh-post-rank">-->
<!-- <i class="iconfont icon-undo-alt-solid"></i>-->
<!-- 换一换</span>-->
</div>
<div class="posts-rank-contents">
<div class="posts-rank-contents" v-for="(post,index) in postRankList"
:key="post.postId">
<ul>
<li>
<span>1</span>
<span>这是一个标题</span>
</li>
<li>
<span>2</span>
<span>这是一个标题</span>
</li>
<li>
<span>3</span>
<span>这是一个标题</span>
</li>
<li>
<span>4</span>
<span>这是一个标题</span>
</li>
<li>
<span>5</span>
<span>这是一个标题</span>
<span>{{index + 1}}</span>
<router-link :to="`/post/${post.postId}`">
<span>{{post.title}}</span>
</router-link>
</li>
</ul>
</div>
<div class="post-rank-more">查看更多</div>
<div class="post-rank-more" @click="loadMorePosts" v-if="!noMorePosts">查看更多</div>
<div v-else class="post-rank-more">没有更多文章了</div>
</div>
<div class="author-rank">
<div class="author-rank-title">
<span>
<span class="author-rank-span">作者排行榜</span>
</span>
</div>
<div class="author-rank-contents">
<div class="author-rank-contents" v-for="user in userRankList"
:key="user.userId">
<ul>
<li>
<div class="author">
<div>
<img src="" alt="">
<img :src="user.url" alt="头像">
</div>
<div>
<p>作者1</p>
<p>作者简介</p>
<router-link :to="`/user/center/${user.userId}`">
<p>{{ user.name }}</p>
</router-link>
<p>{{ user.description}}</p>
</div>
</div>
<button>关注</button>
</li>
<li>
<div class="author">
<div>
<img src="" alt="">
</div>
<div>
<p>作者1</p>
<p>作者简介</p>
</div>
</div>
<button>关注</button>
<button v-if="!user.followed" @click="followUser(user)">关注</button>
<button v-else @click="unfollowerUser(user)">已关注</button>
</li>
</ul>
</div>
<div class="author-rank-more">查看更多</div>
<div class="author-rank-more" @click="loadMoreUsers" v-if="!noMoreUsers">查看更多</div>
<div v-else class="author-rank-more">没有更多作者了</div>
</div>
</div>
</section>
Expand All @@ -144,10 +123,98 @@

<script setup lang="ts">
import CHeader from '@/components/header.vue'
import { ref } from 'vue'
import {onMounted, ref} from 'vue'
import router from '@/router'
import {
getPostRankList,
getUserRankList,
getZoneList,
type HotPost,
type HotUser,
type Zone
} from "@/views/test-posts/utils";
import {errorMsg} from "@/utils/message";
import {useStore} from "@/store";
import { post } from '@/utils/request'
import { TargetType, RelationType } from '@/utils/consts'
const store = useStore()
const navSelect = ref('all')
const zoneFatherId = ref('root')
const noMoreUsers = ref(false)
const noMorePosts = ref(false)
const userRankList = ref<HotUser[]>([])
const postRankList = ref<HotPost[]>([])
const zoneList = ref<Zone[]>([])
const pageSize = 10; // 假设每页加载10项
let userPage = 1; // 当前用户列表页码
let postPage = 1; // 当前帖子列表页码
onMounted(async() => {
userRankList.value = await getUserRankList(pageSize, 0)
postRankList.value = await getPostRankList(pageSize, 0)
zoneList.value = await getZoneList(zoneFatherId.value, pageSize, 0)
})
// 加载下一页用户
const loadMoreUsers = async () => {
const nextUsers = await getUserRankList(pageSize, userPage * pageSize);
if (nextUsers.length === 0) {
noMoreUsers.value = true;
} else {
userRankList.value = [...userRankList.value, ...nextUsers];
userPage++;
noMoreUsers.value = false;
}
};
// 加载下一页的帖子
const loadMorePosts = async () => {
const nextPosts = await getPostRankList(pageSize, postPage * pageSize);
if (nextPosts.length === 0) {
noMorePosts.value = true;
} else {
postRankList.value = [...postRankList.value, ...nextPosts];
postPage++;
noMorePosts.value = false;
}
};
// 关注用户
const followUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/createRelation', {
toId: user.userId,
toType: TargetType.User,
relationType: RelationType.Follow,
})
.then(() => {
user.followed = true
})
}
// 取消关注用户
const unfollowerUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/deleteRelation', {
toId: user.userId,
toType: TargetType.User,
relationType: RelationType.Follow,
})
.then(() => {
user.followed = false
})
}
const navSelect = ref('follow')
</script>

<style scoped lang="css">
Expand All @@ -173,12 +240,11 @@ const navSelect = ref('follow')
.nav {
width: 200px;
height: 130px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px 1px rgba(136, 136, 136, 0.1);
margin-right: 30px;
ul {
list-style: none;
padding: 0;
Expand Down
5 changes: 1 addition & 4 deletions src/views/test-posts/text-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
<div class="options">
<button>存入草稿</button>
<button>设置帖子相关信息</button>
<img src="../../assets//images/logo.png" alt="">
<img src="../../assets/images/logo.png" alt="">
</div>
</div>
<div id="vditor" name="description"></div>
<div>
</div>
</template>

Expand Down Expand Up @@ -145,7 +144,5 @@ onMounted(() => {
flex: 1;
}
}
</script>
<style scoped lang="css">
</style>
Loading

0 comments on commit f5858f5

Please sign in to comment.