Skip to content

Commit dc9a04f

Browse files
microzzmicrozz
committed
增加回复特定用户
1 parent 85ffe13 commit dc9a04f

File tree

5 files changed

+140
-5
lines changed

5 files changed

+140
-5
lines changed

‎src/common/icons/icon-ups-no.svg

+1
Loading

‎src/common/icons/icon-ups-yes.svg

+1
Loading

‎src/common/style/base.scss

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ i, li {
5858
width: 100%;
5959
border-radius: 0 0 4px 4px;
6060
padding: 5px 8px;
61+
border-bottom: 1px solid rgba(0, 0, 0, .1);
6162
margin-bottom: 10px;
6263
background-color: white;
6364
li {

‎src/components/Content/Article.vue

+136-4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
<div class="total-reply">{{infos.reply_count}} 回复</div>
2020
</div>
2121

22+
<div class="reply-input">
23+
<input v-model.trim="replyContent" type="text">
24+
<button @click="reply('')" type="button">回复</button>
25+
</div>
2226

2327
<div v-for="(item, index) of infos.replies" class="reply-item">
2428

@@ -27,13 +31,24 @@
2731
<img :src="item.author.avatar_url" alt="">
2832
<div class="reply-desc">
2933
<router-link :to="{name: 'user', params: {name: item.author && item.author.loginname}}">{{item.author.loginname}}</router-link>
30-
&nbsp; {{index+1}}楼 • {{changeTime(item.create_at)}}
34+
{{index+1}}楼 • {{changeTime(item.create_at)}}
35+
<span @click="currentIndex=index" class="reply-at">回复</span>
36+
<i @click="ups(index)" :class="[currentUps===index ? 'ups-yes' : 'ups-no']" class="icon-reply-at"></i>
3137
</div>
3238
</div>
3339
</div>
3440

3541
<div v-html="item.content" class="reply-content"></div>
3642

43+
<transition name="slide-top">
44+
<div v-show="currentIndex===index" class="reply-one">
45+
<input type="text" name="" v-model.trim="replyOneContent" :placeholder="'@' + item.author.loginname">
46+
<button @click="reply(item.id, item.author.loginname)">回复</button>
47+
<button @click="currentIndex=null;replyOneContent=''">取消</button>
48+
</div>
49+
</transition>
50+
51+
3752
</div>
3853

3954
</div>
@@ -56,7 +71,14 @@ export default {
5671
infos: {},
5772
types: { share: '分享', ask: '问答', job: '招聘'},
5873
oImgs: [],
59-
isCollected: false
74+
isCollected: false,
75+
replyContent: '',
76+
replyOneContent: '',
77+
isReplyOne: false,
78+
isUps: false,
79+
currentIndex: null, // 回复某个人的 index
80+
currentUps: null
81+
6082
}
6183
},
6284
created() {
@@ -66,6 +88,7 @@ export default {
6688
this.axios.get('https://cnodejs.org/api/v1/topic/' + this.id)
6789
.then(result => result.data.data)
6890
.then(data => this.infos = data)
91+
.then(data => console.log('data', data))
6992
.then(() => this.$store.commit('viewArcticle', false))
7093
.then(() => {
7194
this.oImgs = document.querySelector('.md').querySelectorAll('img');
@@ -128,6 +151,28 @@ export default {
128151
}
129152
})
130153
}
154+
},
155+
reply(id, name) {
156+
if (!this.ak) {
157+
this.$store.commit('showLogin', true);
158+
return;
159+
}
160+
else if (!id) {
161+
this.axios.post(`https://cnodejs.org/api/v1/topic/${this.id}/replies`, {
162+
accesstoken: this.ak,
163+
content: this.replyContent
164+
}).then(() => location.reload())
165+
} else {
166+
console.log('id', id);
167+
this.axios.post(`https://cnodejs.org/api/v1/topic/${this.id}/replies`, {
168+
accesstoken: this.ak,
169+
content: '@' + name + ' ' + this.replyOneContent,
170+
reply_id: id
171+
}).then(() => location.reload())
172+
}
173+
},
174+
ups(index) {
175+
this.currentUps === index ? this.currentUps = null : this.currentUps = index;
131176
}
132177
}
133178
}
@@ -141,7 +186,8 @@ export default {
141186
height: 100%;
142187
padding: 8px 5px 0 5px;
143188
background-color: rgba(0, 0, 0, .07);
144-
overflow: auto;
189+
overflow-x: hidden;
190+
overflow-y: auto;
145191
.body {
146192
background-color: white;
147193
height: 100%;
@@ -178,10 +224,11 @@ export default {
178224
}
179225
180226
.reply {
227+
181228
.other {
182229
margin-top: 20px;
183230
margin-bottom: 10px;
184-
border-bottom: 1px solid rgba(0, 0, 0, .05);
231+
// border-bottom: 1px solid rgba(0, 0, 0, .05);
185232
padding-left: 10px;
186233
display: flex;
187234
justify-content: space-between;
@@ -203,6 +250,34 @@ export default {
203250
}
204251
}
205252
253+
.reply-input {
254+
width: 100%;
255+
height: 50px;
256+
background-color: white;
257+
margin-bottom: 10px;
258+
padding-left: 10px;
259+
padding-top: 5px;
260+
display: flex;
261+
justify-content: center;
262+
align-items: center;
263+
input {
264+
width: 80%;
265+
height: 40px;
266+
font-size: 1.3rem;
267+
border-bottom: 1px solid rgba(0, 0, 0, .5);
268+
margin-right: 10px;
269+
padding-left: 5px;
270+
padding-right: 5px;
271+
}
272+
button {
273+
font-size: 1.3rem;
274+
padding: 3px 5px;
275+
background-color: #2196f3;
276+
color: white;
277+
border-radius: 3px;
278+
}
279+
}
280+
206281
.total-reply {
207282
text-align: center;
208283
width: 100px;
@@ -229,11 +304,68 @@ export default {
229304
border-radius: 3px;
230305
}
231306
.reply-desc {
307+
position: relative;
232308
flex: 1;
233309
padding-left: 10px;
310+
.reply-at {
311+
position: absolute;
312+
right: 50px;
313+
}
314+
.icon-reply-at {
315+
position: absolute;
316+
right: 20px;
317+
top: -2px;
318+
display: inline-block;
319+
width: 20px;
320+
height: 20px;
321+
322+
}
323+
.ups-yes {
324+
background: url('../../common/icons/icon-ups-yes.svg') no-repeat;
325+
background-size: contain;
326+
}
327+
.ups-no {
328+
background: url('../../common/icons/icon-ups-no.svg') no-repeat;
329+
background-size: contain;
330+
}
234331
}
235332
}
236333
}
334+
335+
.reply-one {
336+
width: 100%;
337+
height: 30px;
338+
// background-color: red;
339+
margin-bottom: 20px;
340+
padding-top: 2px;
341+
342+
input {
343+
width: 65%;
344+
height: 100%;
345+
background: none;
346+
border-bottom: 1px solid rgba(0, 0, 0, .1);
347+
font-size: 1.3rem;
348+
color: gray;
349+
}
350+
input:focus {
351+
border-bottom: 1px solid #00bcd4;
352+
color: black;
353+
}
354+
button {
355+
font-size: 1.2rem;
356+
vertical-align: bottom;
357+
padding: 2px 5px;
358+
border-radius: 2px;
359+
}
360+
button:nth-of-type(1) {
361+
background-color: #2196f3;
362+
color: white;
363+
}
364+
button:nth-of-type(2) {
365+
background-color: white;
366+
color: gray;
367+
}
368+
}
237369
}
238370
}
239371

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Vue.use(VueAxios, axios);
1313
Vue.use(Vuex);
1414

1515
Vue.prototype.moment = moment;
16-
Vue.prototype.changeTime = time => moment(time).startOf('hour').fromNow().replace(/hours?/, '小时').replace('ago', '前').replace(/days?/, '天').replace(/minutes?/, '分钟').replace(/\ban?/, '1').replace(/months?/, '个月').replace(/\byears?/, '年').replace(/\s/g, '');
16+
Vue.prototype.changeTime = time => moment(time).startOf('minute').fromNow().replace(/hours?/, '小时').replace('ago', '前').replace(/days?/, '天').replace(/minutes?/, '分钟').replace(/\ban?/, '1').replace(/months?/, '个月').replace(/\byears?/, '年').replace(/\s/g, '').replace('fewseconds','分钟');
1717

1818
const store = new Vuex.Store({
1919
state: {

0 commit comments

Comments
 (0)