|
6 | 6 | </div> |
7 | 7 | </v-header> |
8 | 8 | <v-content style="bottom: 0;" v-vuet-scroll="{ path: 'topic-detail', name: 'content' }"> |
9 | | - <v-loading v-if="detail.loading"></v-loading> |
10 | | - <v-data-null v-if="!detail.existence" msg="话题不存在"></v-data-null> |
11 | | - <template v-if="!detail.loading && detail.existence"> |
12 | | - <div class="common-typeicon" flex v-if="data.top || data.good"> |
13 | | - <div class="icon" v-if="data.good"> |
| 9 | + <v-loading v-if="data.loading"></v-loading> |
| 10 | + <v-data-null v-if="!data.existence" msg="话题不存在"></v-data-null> |
| 11 | + <template v-if="!data.loading && data.existence"> |
| 12 | + <div class="common-typeicon" flex v-if="topic.top || topic.good"> |
| 13 | + <div class="icon" v-if="topic.good"> |
14 | 14 | <i class="iconfont icon-topic-good"></i> |
15 | 15 | </div> |
16 | | - <div class="icon" v-if="data.top"> |
| 16 | + <div class="icon" v-if="topic.top"> |
17 | 17 | <i class="iconfont icon-topic-top"></i> |
18 | 18 | </div> |
19 | 19 | </div> |
|
27 | 27 | <div class="bd"> |
28 | 28 | <div flex> |
29 | 29 | <router-link flex-box="0" :to="{ name: 'user-detail', params: { username: author.loginname } }">{{ author.loginname }}</router-link> |
30 | | - <time flex-box="1">{{ data.create_at | formatDate }}</time> |
| 30 | + <time flex-box="1">{{ topic.create_at | formatDate }}</time> |
31 | 31 | <div flex-box="0" class="num">#楼主</div> |
32 | 32 | </div> |
33 | 33 | </div> |
|
36 | 36 | <!-- 主题信息 start --> |
37 | 37 | <li> |
38 | 38 | <div class="datas"> |
39 | | - <div class="tit">{{ data.title }}</div> |
| 39 | + <div class="tit">{{ topic.title }}</div> |
40 | 40 | <div class="bottom" flex="main:center"> |
41 | 41 | <div class="item click" flex="main:center cross:center"> |
42 | 42 | <i class="iconfont icon-click"></i> |
43 | | - <div class="num">{{ data.visit_count }}</div> |
| 43 | + <div class="num">{{ topic.visit_count }}</div> |
44 | 44 | </div> |
45 | 45 | <div class="item reply" flex="main:center cross:center"> |
46 | 46 | <i class="iconfont icon-comment"></i> |
47 | | - <div class="num">{{ data.reply_count }}</div> |
| 47 | + <div class="num">{{ topic.reply_count }}</div> |
48 | 48 | </div> |
49 | 49 | </div> |
50 | 50 | </div> |
51 | | - <div class="markdown-body" v-html="data.content"></div> |
| 51 | + <div class="markdown-body" v-html="topic.content"></div> |
52 | 52 | </li> |
53 | 53 | <!-- 主题信息 end --> |
54 | 54 | <li class="replies-count" v-if="replies.length"> |
|
71 | 71 | <div class="icon" @click="commentShow(item, $index)"> |
72 | 72 | <i class="iconfont icon-comment-topic"></i> |
73 | 73 | </div> |
74 | | - <div class="icon" :class="{ fabulous: testThing(item.ups) }" v-if="item.author.loginname !== user.data.loginname" @click="fabulousItem(item)"> |
| 74 | + <div class="icon" :class="{ fabulous: testThing(item.ups) }" v-if="item.author.loginname !== self.loginname" @click="fabulousItem(item)"> |
75 | 75 | <i class="iconfont icon-comment-fabulous"></i> |
76 | 76 | <em v-if="item.ups.length">{{ item.ups.length }}</em> |
77 | 77 | </div> |
78 | 78 | </div> |
79 | 79 | </div> |
80 | 80 | </div> |
81 | | - <reply-box v-if="detail.commentId === item.id" :loginname="item.author.loginname" :replyId="item.id"></reply-box> |
| 81 | + <reply-box |
| 82 | + v-if="data.commentId === item.id" |
| 83 | + :loginname="item.author.loginname" |
| 84 | + :replyId="item.id" |
| 85 | + @success="data.fetch()" |
| 86 | + ></reply-box> |
82 | 87 | </li> |
83 | 88 | <!-- 主题评论 end --> |
84 | 89 | </ul> |
85 | | - <div class="reply" v-if="user.data.id"> |
86 | | - <reply-box @success="$vuet.fetch('topic-detail')"></reply-box> |
| 90 | + <div class="reply" v-if="self.id"> |
| 91 | + <reply-box @success="data.fetch()"></reply-box> |
87 | 92 | </div> |
88 | | - <div class="tip-login" v-if="!user.data.id"> |
| 93 | + <div class="tip-login" v-if="!self.id"> |
89 | 94 | 你还未登录，请先 |
90 | 95 | <router-link to="/login">登录</router-link> |
91 | 96 | </div> |
|
100 | 105 |
|
101 | 106 | export default { |
102 | 107 | mixins: [ |
103 | | - mapModules({ detail: 'topic-detail', user: 'user-self' }), |
| 108 | + mapModules({ data: 'topic-detail', self: 'user-self' }), |
104 | 109 | mapRules({ route: 'topic-detail' }) |
105 | 110 | ], |
106 | 111 | components: { replyBox }, |
107 | 112 | computed: { |
108 | | - data () { |
109 | | - return this.detail.data |
| 113 | + topic () { |
| 114 | + return this.data.topic |
110 | 115 | }, |
111 | 116 | author () { |
112 | | - return this.detail.data.author |
| 117 | + return this.data.topic.author |
113 | 118 | }, |
114 | 119 | replies () { |
115 | | - return this.detail.data.replies |
| 120 | + return this.data.topic.replies |
116 | 121 | } |
117 | 122 | }, |
118 | 123 | methods: { |
119 | 124 | testThing (ups) { // 验证是否点赞 |
120 | | - return ups.indexOf(this.user.data.id || '') > -1 |
| 125 | + return ups.indexOf(this.self.id || '') > -1 |
121 | 126 | }, |
122 | 127 | fabulousItem ({ ups, id }) { // 点赞 |
123 | | - if (!this.user.data.id) return this.$router.push('/login') |
124 | | - var index = ups.indexOf(this.user.data.id) |
| 128 | + if (!this.self.id) return this.$router.push('/login') |
| 129 | + var index = ups.indexOf(this.self.id) |
125 | 130 | if (index > -1) { |
126 | 131 | ups.splice(index, 1) |
127 | 132 | } else { |
128 | | - ups.push(this.user.data.id) |
| 133 | + ups.push(this.self.id) |
129 | 134 | } |
130 | 135 | http.post(`/reply/${id}/ups`) |
131 | 136 | }, |
132 | 137 | commentShow (item) { // 显示隐藏回复框 |
133 | | - if (!this.user.data.id) return this.$router.push('/login') |
134 | | - this.detail.commentId = this.detail.commentId === item.id ? null : item.id |
| 138 | + if (!this.self.id) return this.$router.push('/login') |
| 139 | + this.data.commentId = this.data.commentId === item.id ? null : item.id |
135 | 140 | } |
136 | 141 | } |
137 | 142 | } |
|
0 commit comments