File tree Expand file tree Collapse file tree 4 files changed +96
-12
lines changed Expand file tree Collapse file tree 4 files changed +96
-12
lines changed Original file line number Diff line number Diff line change @@ -2,7 +2,7 @@ import request from '@/utils/request'
2
2
3
3
export function getCommentList ( queryParams ) {
4
4
return request ( {
5
- url : '/api/comment/' ,
5
+ url : '/api/comment/list/ ' ,
6
6
method : 'get' ,
7
7
params : queryParams
8
8
} )
Original file line number Diff line number Diff line change
1
+ <template >
2
+ <div >
3
+ <p > comments:</p >
4
+ <el-card
5
+ class =" comment-item"
6
+ v-for =" comment in commentList"
7
+ :key =" comment.id"
8
+ >
9
+ <template #header >
10
+ <div class =" card-header" >
11
+ <!-- todo add isAuthor label -->
12
+ <span >
13
+ <b >{{comment.author}}</b >
14
+ <span >{{comment.created_time}}</span >
15
+
16
+ </span >
17
+ <el-button class =" button" text >Operation button</el-button >
18
+ </div >
19
+ </template >
20
+ {{comment.content}}
21
+ </el-card >
22
+ </div >
23
+
24
+ </template >
25
+
26
+ <script >
27
+
28
+
29
+ import {getCommentList } from " @/api/comment" ;
30
+
31
+ export default {
32
+ name: ' ArticleComment' ,
33
+ components: {},
34
+ props: {
35
+ articleId: {
36
+ type: Number
37
+ }
38
+ },
39
+ data () {
40
+
41
+ return {
42
+ loading: false ,
43
+ tempRoute: {},
44
+ commentList: [],
45
+ commentCount: 0 ,
46
+ }
47
+ },
48
+ created () {
49
+ this .getList ()
50
+ },
51
+ methods: {
52
+ getList () {
53
+ this .listLoading = true
54
+ const queryParams = {' article_id' : this .articleId }
55
+ getCommentList (queryParams).then (response => {
56
+ this .commentList = response .data
57
+ this .commentCount = response .count
58
+ this .listLoading = false
59
+ })
60
+ }
61
+
62
+ }
63
+ }
64
+
65
+ </script >
66
+
67
+ <style scoped>
68
+ .comment-item {
69
+ margin-top : 10px ;
70
+
71
+ }
72
+
73
+ .card-header {
74
+
75
+ }
76
+
77
+ </style >
Original file line number Diff line number Diff line change 33
33
</router-link >
34
34
</span >
35
35
</div >
36
+
37
+ <el-divider ></el-divider >
38
+ <article-comment :article-id =" articleId" ></article-comment >
39
+
36
40
<br >
37
41
</div >
38
42
</el-col >
54
58
import {getArticleDetail } from ' @/api/article'
55
59
// import SvgIcon from '@/components/SvgIcon/index'
56
60
57
- import LikeFavorite from " @/views/article/components/LikeFavorite" ;
58
- import CategoryAndTag from " @/views/article/components/CategoryAndTag" ;
59
- //
61
+ import LikeFavorite from " @/views/article/components/LikeFavorite"
62
+ import CategoryAndTag from " @/views/article/components/CategoryAndTag"
63
+ import ArticleComment from ' @/views/article/components/ArticleComment '
60
64
61
65
export default {
62
66
name: " ArticleDetail" ,
63
- components: {LikeFavorite, CategoryAndTag},
67
+ components: {LikeFavorite, CategoryAndTag,ArticleComment },
64
68
data () {
65
69
return {
66
70
articleDetail: {},
67
71
tempRoute: {},
68
- tocBodyStyle: {padding: ' 5px 20px 10px 0px' }
72
+ tocBodyStyle: {padding: ' 5px 20px 10px 0px' },
73
+ articleId: Number
69
74
}
70
75
},
71
76
72
77
created () {
73
- const articleId = this .$route .params && this .$route .params .id
74
- this .fetchData (articleId)
78
+ this . articleId = this .$route .params && this .$route .params .id
79
+ this .fetchData (this . articleId )
75
80
// Why need to make a copy of this.$route here?
76
81
// Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
77
82
// https://github.com/PanJiaChen/vue-element-admin/issues/1221
Original file line number Diff line number Diff line change 1
1
<template >
2
2
<div style =" background-color : #f7f5f5 " >
3
- <div v-for =" article in articleList" :key =" article.id" class = " article-main " >
3
+ <div v-for =" article in articleList" :key =" article.id" >
4
4
<el-row style =" background-color : white " >
5
- <el-col >
5
+ <el-col :span = " 14 " :offset = " 5 " class = " article-main " >
6
6
<div class =" article-title" >
7
7
<router-link
8
8
:to =" '/article/detail/'+ article.id"
14
14
15
15
<div class =" article-desc" >
16
16
<span >
17
- @{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:0
17
+ @{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:{{article.comments_count}}
18
18
<el-button icon =" DeleteFilled" type =" text" />
19
19
<router-link
20
20
:to =" '/article/edit/'+ article.id"
28
28
</div >
29
29
</el-col >
30
30
</el-row >
31
+ <!-- <el-divider style="margin: 10px 0;"/>-->
31
32
</div >
32
33
</div >
33
34
94
95
}
95
96
96
97
.article-main {
97
- margin : 10px 200 px ;
98
+ margin-top : 10px ;
98
99
box-shadow : 1px 2px 3px #ddd ;
99
100
border : 1px solid #ddd ;
101
+ border-radius : 5px ;
100
102
}
101
103
102
104
.article-title {
You can’t perform that action at this time.
0 commit comments