Skip to content

Commit

Permalink
fix: 修复推荐页面帖子无法显示的BUG,实现通知点击帖子跳转功能,实现关注用户功能 (#148)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lansongxx
Lansongxx authored Mar 29, 2024
1 parent 3109e09 commit b5eddb1
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 51 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@

## 2024-03-29

### ✨ Features | 新功能

* 实现通知点击帖子跳转功能

* 实现关注用户功能

### 🐛 Bug Fixes | Bug 修复

* 修复推荐页面帖子无法显示的BUG

## 2024-03-28

### 🐛 Bug Fixes | Bug 修复
Expand Down
20 changes: 10 additions & 10 deletions src/views/home/recommend.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@
@mouseleave="mouseleaveClassifyPop"
></i>
<div class="more-box" v-show="isShowClassify">
<div>
<input
id="goods"
type="radio"
name="select-classify"
v-model="selectClassify"
value="goods"
>
<label for="goods">商品</label>
</div>
<!-- <div>-->
<!-- <input -->
<!-- id="goods"-->
<!-- type="radio"-->
<!-- name="select-classify"-->
<!-- v-model="selectClassify"-->
<!-- value="goods"-->
<!-- >-->
<!-- <label for="goods">商品</label>-->
<!-- </div>-->
<div>
<input
id="file"
Expand Down
112 changes: 86 additions & 26 deletions src/views/home/show-recommend.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,36 @@
{{ tag }}
</div>
</div>
<button>
<span>+</span>
<span>关注</span>
</button>
<div
class="follow"
v-if="!user.followed"
@click="followUser(user)"
>
<i class="iconfont icon-a-dianzan2"></i>
<div>关注</div>
</div>
<div
class="followed"
v-if="user.followed"
@click="unfollowerUser(user)"
>
<i class="iconfont icon-a-dianzan2"></i>
<div>已关注</div>
</div>
</div>
</div>
</div>
</template>


<script setup lang="ts">
import PostDetail from '../posts/post-information.vue'
import { get } from '@/utils/request'
import { ref, onMounted, watch } from 'vue'
import { post } from '@/utils/request'
import {errorMsg} from "@/utils/message";
import {useStore} from "@/store";
const store = useStore()
const storageContent = ref<any>({
hotGoods: [],
Expand Down Expand Up @@ -96,6 +113,7 @@ interface ResponseDetail {
description: string
followCount: number
labels: string[]
followed: boolean
}[],
posts?: {
postId: string
Expand Down Expand Up @@ -250,11 +268,48 @@ const trunNum = (type: string) => {
case 'Files':
return 2
case 'Goods':
return 3
case 'Posts':
return 4
case 'Posts':
return 3
}
}
const followUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/createRelation', {
toId: user.userId,
toType: 1,
relationType: 2,
})
.then(() => {
user.followed = true
user.followCount++
})
}
const unfollowerUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/deleteRelation', {
toId: user.userId,
toType: 1,
relationType: 2,
})
.then(() => {
user.followed = false
user.followCount--
})
}
</script>

<style scoped lang="css">
Expand Down Expand Up @@ -383,27 +438,32 @@ const trunNum = (type: string) => {
}
}
button {
width: 60px;
height: 30px;
line-height: 30px;
background-color: #f8d9c5;
box-shadow: 0 0 5px 1px #ebac82;
border: none;
border-radius: 5px;
color: #fff;
font-weight: 700;
cursor: pointer;
.follow, .followed {
width: 70px;
height: 30px;
line-height: 30px;
background-color: #f8d9c5;
box-shadow: 0 0 5px 1px #ebac82;
border: none;
border-radius: 5px;
color: #fff;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.follow i, .followed i {
font-size: 17px;
margin-right: 3px;
}
/* 按钮激活（被点击）时的样式 */
.follow:active, .followed:active {
box-shadow: none;
}
span:first-child {
font-size: 17px;
margin-right: 3px;
vertical-align: top;
}
}
button:active {
box-shadow: none;
}
}
}
}
Expand Down
51 changes: 39 additions & 12 deletions src/views/notification/notification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,18 @@
</div>
<div class="content">
<div class="content-top">
<div class="user">{{ item.fromName }}</div>
<router-link
:to="`/user/${item.fromId}`"
class="user-section"
>{{ item.fromName }}</router-link>
<div>赞了</div>
<div>你的</div>
<div>帖子</div>
</div>
<router-link
to="/post/1"
class="content-section"
>{{ item.toName }}</router-link>
<router-link
:to="`/post/${item.toId}`"
class="content-section"
>{{ item.toName }}</router-link>
<div class="content-bottom">{{ turnTime(item.createTime) }}</div>
</div>
</div>
Expand All @@ -102,13 +105,16 @@
</div>
<div class="content">
<div class="content-top">
<div class="user">{{ item.fromName }}</div>
<router-link
:to="`/user/${item.fromId}`"
class="user-section"
>{{ item.fromName }}</router-link>
<div>评论了</div>
<div>你的</div>
<div>帖子</div>
</div>
<router-link
to="/post/1"
:to="`/post/${item.toId}`"
class="content-section"
>{{ item.toName }}</router-link>
<div class="content-bottom">{{ turnTime(item.createTime) }}</div>
Expand All @@ -120,13 +126,16 @@
</div>
<div class="content">
<div class="content-top">
<div class="user">{{ item.fromName }}</div>
<router-link
:to="`/user/${item.fromId}`"
class="user-section"
>{{ item.fromName }}</router-link>
<div>收藏了</div>
<div>你的</div>
<div>帖子</div>
</div>
<router-link
to="/post/1"
:to="`/post/${item.toId}`"
class="content-section"
>{{ item.toName }}</router-link>
<div class="content-bottom">{{ turnTime(item.createTime) }}</div>
Expand All @@ -138,13 +147,16 @@
</div>
<div class="content">
<div class="content-top">
<div class="user">{{ item.fromName }}</div>
<router-link
:to="`/user/${item.fromId}`"
class="user-section"
>{{ item.fromName }}</router-link>
<div>分享了</div>
<div>你的</div>
<div>帖子</div>
</div>
<router-link
to="/post/1"
:to="`/post/${item.toId}`"
class="content-section"
>{{ item.toName }}</router-link>
<div class="content-bottom">{{ turnTime(item.createTime) }}</div>
Expand All @@ -156,7 +168,10 @@
</div>
<div class="content">
<div class="content-top">
<div class="user">{{ item.fromName }}</div>
<router-link
:to="`/user/${item.fromId}`"
class="user-section"
>{{ item.fromName }}</router-link>
<div>关注了</div>
<div>你</div>
</div>
Expand Down Expand Up @@ -442,6 +457,18 @@ const turnNotificationType = (type: string): number => {
color: #8eaedc;
}
.user-section {
text-decoration: none;
color: #000;
font-size: 12px;
font-weight: 700;
margin-bottom: 5px;
cursor: pointer;
}
.user-section:hover {
color: #8eaedc;
}
.content-bottom {
font-size: 12px;
color: #929292;
Expand Down
2 changes: 1 addition & 1 deletion src/views/notification/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export interface ResponseGetNotification {
fromId: string
toName: string
toId: string
toType: number
toUserId: string
type: number
createTime: number
}>
Expand Down
53 changes: 51 additions & 2 deletions src/views/posts/post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,22 @@
<img :src="postDetail.author.url" alt="">
<div>{{ postDetail.author.name }}</div>
</div>
<button class="attention" v-if="!isMyPost">关注</button>
<div
class="follow"
v-if="!postDetail.author.followed"
@click="followUser(postDetail.author)"
>
<i class="iconfont icon-a-dianzan2"></i>
<div>关注</div>
</div>
<div
class="followed"
v-if="postDetail.author.followed"
@click="unfollowerUser(postDetail.author)"
>
<i class="iconfont icon-a-dianzan2"></i>
<div>已关注</div>
</div>
</div>
</header>
<section class="detail-section">
Expand Down Expand Up @@ -109,7 +124,7 @@ import { turnTime } from '@/utils/public'
import { ref, onMounted, computed } from 'vue'
import type { responseGetPost } from './utils'
import router from '@/router'
import { successMsg } from '@/utils/message'
import {errorMsg, successMsg} from '@/utils/message'
import { cancelRelation, createRelation } from './utils';
const store = useStore()
Expand All @@ -126,6 +141,7 @@ const postDetail = ref<responseGetPost>({
userId: '',
name: '',
url: '',
followed: false,
},
tags: [],
viewCount: 0,
Expand Down Expand Up @@ -223,6 +239,39 @@ const getPost = () => {
})
}
const followUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/createRelation', {
toId: user.userId,
toType: 1,
relationType: 2,
})
.then(() => {
user.followed = true
})
}
const unfollowerUser = (user: any) => {
const longToken = store.getUserLongToken()
if (!longToken) {
errorMsg('请先登录')
return
}
post('/relation/deleteRelation', {
toId: user.userId,
toType: 1,
relationType: 2,
})
.then(() => {
user.followed = false
})
}
</script>

<style scoped lang="css">
Expand Down
Loading

0 comments on commit b5eddb1

Please sign in to comment.