Skip to content

Commit

Permalink
feat:新增查阅帖子详情功能 (#72)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anguoo
anguoo authored Feb 19, 2024
1 parent 5ccde75 commit efbca6e
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 38 deletions.
1 change: 0 additions & 1 deletion src/utils/public.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ export const getAllNotificationCount = async(fn: () => void): Promise<boolean> =
.then((res: any) => {
total = res.total
fn()
console.log('total=', total);
})
return total > 0
}
Expand Down
9 changes: 7 additions & 2 deletions src/views/home/show-recommend.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
v-for="(post, index) in responseDetail.posts"
:key="index"
>
<header class="posts-header">{{ post.title }}</header>
<router-link
class="posts-header"
:to="'/post/' + post.postId"
>{{ post.title }}</router-link>
<section class="posts-section">
<img src="" v-if="showPostImage(post.url)">
<div class="posts-layout">
Expand Down Expand Up @@ -333,8 +336,9 @@ const trunNum = (type: string) => {
border-bottom: 1px solid #e5e5e583;
.posts-header {
color: #000;
text-decoration: none;
font-weight: 700;
margin-bottom: 10px;
cursor: pointer;
}
.posts-header:hover {
Expand All @@ -344,6 +348,7 @@ const trunNum = (type: string) => {
.posts-section {
width: 100%;
margin-top: 5px;
display: flex;
.posts-layout {
Expand Down
132 changes: 98 additions & 34 deletions src/views/posts/post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,37 @@
<div class="detail-box">
<div class="detail">
<header class="detail-header">
<div class="title">仁里延绵细雨季：沐浴生命的洗礼与期待春暖花开</div>
<div class="title">{{ postDetail.title }}</div>
<div class="other">
<div class="time">编写于 {{ turnTime(postDetail.updateTime) }}</div>
<div class="tag" v-if="postDetail.tags.length != 1">
<div>标签:</div>
<div
v-for="tag in postDetail.tags"
:key="tag"
>{{ tag }}</div>
</div>
</div>
<div class="user">
<div>
<img src="https://cloudmind.top/assets/avatar.png" alt="">
<div>admin</div>
<img :src="postDetail.author.url" alt="">
<div>{{ postDetail.author.name }}</div>
</div>
<button class="attention">关注</button>
</div>
</header>
<section class="detail-section">
<div style="margin-bottom: 10px;">
多么的春意盎然，一切是多么的勃勃生机。然而，这一季节的雨却是江南特有的景色，在文人的眼里，这样的雨季更是一种美。古代文人都在在自己的笔下写下了一笔又一笔的江南雨的景色。词人李清照的“梧桐更兼细雨，到黄昏，点点滴滴”诉说了相思的愁绪；宋代贺铸在《青玉案》一词写下这样的名句：“一川烟草，满城风絮，梅子黄雨时”。据说，就是因为如此，贺铸从此就有了“贺梅子”的雅号。<br><br>江南的雨一下就是一个季节，延绵细雨，使人感觉让生命留在青春的岁月里，流年岁月，收纳空白，收纳了我们的所有的乐趣。是春雨把它冲刷了么，我却不曾当得知，雨季使人们有了臆想的时空，但没有人知道怎么去欣赏它。季节展开了它封存已久的封面，雨季浸湿了衣裳，很多人并没有惊喜，只是一个渐变，没有一点张扬，只是感受生命在这个延绵雨季之中的一种价值。于我而言，我喜欢在雨季坐在窗前发呆，看着远方的天宇处下着淅淅沥沥的雨，聆听淡漠的音乐，看着雨飘进自己的心中的某一方净土，回想着消逝的时光，或是不停的踱步，品着茶，沉想着时光的易逝和生命的不可预约，这是我的雨季，我一个生命最美的时光。<br><br>来到仁里的这些时间里，我们都感叹，时间去哪了？是流走了么？其实自己而不曾得知，很多时候，我只是在不断的想着把我在基层里遇到的最美的时光留下一个深深的印记。正时此刻，在仁里的这几个月，却让我发现了最美的景象“仁里的雨季”，雾色中留下的深深的痕迹这便是这里的雨，它毫不留情的下了整整一个季节，让人欢喜让人忧，欢喜的是小孩们可以在雨中嘻戏，欢喜的是情侣可以在雨中漫步，然而更是欢喜的是人们可以在田间开始劳作一年的庄家，当你走到这里，或许仁里能给你最美的印象。<br><br>生活在一个地方，我们所遇到的人和事，总会给我们或大或小的变化，但不管怎样，人总会变，在仁里这样的雨的季节却永远依旧的散播着它周而复始的雨，给予大地的滋润，之所以仁里如此的气候，让生长在这里的人们喜欢这里，自患者里的每一个时光，对于这里的人甚至我来说，在时光的山水里，总能山一程水一程中偶遇一些温暖。有时过于执着地探讨一些毫无意义的问题，且辗转反侧。用着最简单的话，却是说不清楚道不明白。人生就是一本书，不要等全部写完你再看，到边写边看的时候了，人生经不起等待。那些温暖的回忆，会随着我们的一时雨季随风飘散，只是在记忆的深处，有时会翻出来，如同穿越一样，回到从前温暖的时光。忘记不掉的不都是美好的，美好的往往突如其来，不用行程的安排。<br><br>春天是年的封面，雨，是春天的景象，人们愿意活在美丽的封面里，愿意沉浸在雨的诗情画意里。雨季给了很多遐想，他们都期待着美好，盼望美好是追求的梦想，追求梦想虽是情非得已。在仁里这样的一个地方，花桥、鼓楼每一个景物都在印衬着春天雨季的意象中，当这些景物都展现在雨中的时候，有时候感觉像是某一个地方的“海市蜃楼”其实这就是仁里，最美的景色，在这里你能把这个季节最美的时光尽收眼底。最美的景物，我们总会存贮在存储器里，成为一种电子文件，记录着仁里这样不一般的雨季，雨不和花一样，没有香味，但却淅淅沥沥，因为它懂这个季节是它是“花季”，该开花了。触摸正在流动的日子，有一种真实感受，什么滋味在心中潜滋暗长是个人的体会，对与错，丑与美，这一切只是个人心中对所见的一种评判。在仁里的“雨”路上，一些不同的风景与人会一一闪过，不复再现，容不得思考与想念。<br><br>所以有时候，每当遇到这样的雨季，我时常沉浸在一种寂寞的悲伤里，哀叹时间的无情，世事的艰难。人行走在风景里，心却想着另一处的美好。人与景相容，与雨相知，与雨相融。一段文字，一首短诗，一本好书分别以不同的形式影响着人生的态度，引导着原来不曾有过的想法，站在高山俯瞰着仁里鼓楼在蒙蒙细雨中的风景，抬头看，却阴霾满布。没有更高的理想，不会看到更奇美的风景。沉浸在仁里的雨季之中，品一口茶，静静的享受这这样雨的季节，它给我们的欢喜和价值，春天是花开的季节，三月是春雨飘散的季节，春雨给了我们洗涤人生、洗涤思想，这样的季节给了我们生命的的洗礼。<br><br>仁里延绵细雨季，等待的只是春暖花开。
</div>
<div class="time">编写于 2024-02-13 21:39</div>
<div v-html="postDetail.text"></div>
</section>
<footer class="detail-footer">
<div class="situation">
<div class="like">
<i class="iconfont icon-a-dianzan2"></i>
<div>点赞 3.9w</div>
<div>点赞 {{ postDetail.likeCount }}</div>
</div>
<div class="remark">
<i class="iconfont icon-a-xiaoxi1"></i>
<div>评论 2.9k</div>
<div>评论 {{ postDetail.commentCount }}</div>
</div>
<div class="collect">
<i class="iconfont icon-xihuan02"></i>
Expand All @@ -53,6 +60,45 @@
<script setup lang="ts">
import Nav from '@/components/navigation.vue'
import CHeader from '@/components/header.vue'
import { get } from '@/utils/request'
import { turnTime } from '@/utils/public'
import { ref, onMounted } from 'vue'
import type { responseGetPost } from './utils'
const postDetail = ref<responseGetPost>({
title: '',
text: '',
author: {
userId: '',
name: '',
url: '',
},
tags: [],
viewCount: 0,
likeCount: 0,
commentCount: 0,
shareCount: 0,
collectCount: 0,
liked: false,
collected: false,
createTime: 0,
updateTime: 0,
})
onMounted(() => {
getPost()
})
const getPost = () => {
const postId = location.href.split('/').pop()
const url = '/content/getPost?postId=' + postId
get(url)
.then((res: any) => {
postDetail.value = res as responseGetPost
console.log(postDetail.value);
})
}
</script>

<style scoped lang="css">
Expand Down Expand Up @@ -87,21 +133,20 @@ import CHeader from '@/components/header.vue'
.detail-box {
width: 100%;
padding: 20px;
padding: 0 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.detail {
width: 100%;
min-width: 700px;
max-width: 1000px;
background-color: #fff;
padding: 20px 30px;
.detail-header {
width: 100%;
height: 120px;
height: 130px;
padding-bottom: 20px;
margin-bottom: 10px;
border-bottom: 1px solid #0000001f;
Expand All @@ -111,17 +156,29 @@ import CHeader from '@/components/header.vue'
.title {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
margin-bottom:10px;
}
div {
.other {
display: flex;
align-items: center;
justify-content: space-between;
div {
font-size: 25px;
font-weight: 700;
margin-right: 10px;
.time {
font-size: 14px;
color: #8c8c8c;
margin-bottom: 10px;
}
.tag {
display: flex;
font-size: 13px;
padding: 5px 10px;
color: #8c8c8c;
user-select: none;
div {
margin-left: 10px;
}
}
}
Expand All @@ -136,37 +193,44 @@ import CHeader from '@/components/header.vue'
border-radius: 50%;
margin-right: 10px;
}
div {
display: flex;
align-items: center;
div {
font-size: 18px;
font-weight: 700;
margin-right: 10px;
cursor: pointer;
}
}
}
.attention {
width: 80px;
height: 35px;
width: 70px;
height: 30px;
border-radius: 20px;
background-color: rgb(205, 222, 254);
font-size: 16px;
font-weight: 700;
color: #fff;
background-color: #f8d9c5;
box-shadow: 0 0 5px 1px #ebac82;
border: none;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.attention:hover {
background-color: rgb(205, 222, 254, 0.8);
}
.attention:active {
transform: scale(0.9);
box-shadow: none;
}
}
.detail-section {
display: flex;
flex-direction: column;
.time {
font-size: 14px;
color: #8c8c8c;
margin-top: 10px;
}
}
.detail-footer {
Expand All @@ -188,7 +252,7 @@ import CHeader from '@/components/header.vue'
i {
font-size: 20px;
margin-right: 10px;
margin-right: 5px;
}
}
}
Expand Down
1 change: 0 additions & 1 deletion src/views/posts/posts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ const htmlToText = (html: string) => {
const toPostDetail = (postId: string) => {
router.push('/post/' + postId)
console.log('跳转');
}
const likePost = (thisPost: any) => {
Expand Down
20 changes: 20 additions & 0 deletions src/views/posts/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,26 @@ export interface responseGetOtherPosts {
}[]
}

export interface responseGetPost {
title: string,
text: string,
author: {
userId: string,
name: string,
url: string,
}
tags: string[],
viewCount: number,
likeCount: number,
commentCount: number,
shareCount: number,
collectCount: number,
liked: boolean,
collected: boolean,
createTime: number,
updateTime: number,
}

export const getOtherPosts = async () => {
const postsList = ref<responseGetOtherPosts>({
posts: []
Expand Down

0 comments on commit efbca6e

Please sign in to comment.