2020-07-14 14:19:15 +09:00
|
|
|
<template>
|
|
|
|
<div id="comments" class="comments-area clearfix">
|
|
|
|
<h3 class="comments-count section-heading uppercase"><span>{{ total }} コメント</span></h3>
|
|
|
|
<div v-if="total === 0">コメントがありません。</div>
|
|
|
|
<span v-else>
|
|
|
|
<ul class="commentlist" v-for="(c, i) in comment" :key="`comment-${i}`">
|
|
|
|
<li class="comment even thread-even depth-1" :id="`li-comment-${c.id}`">
|
|
|
|
<div class="commentnumber">{{ i+1 }}</div>
|
|
|
|
<div :id="`comment-${c.id}`">
|
|
|
|
<div>
|
2020-09-23 17:19:30 +09:00
|
|
|
<cite class="fn">
|
|
|
|
<span v-if="isvideo === 'n'">
|
|
|
|
<img style="height: 24px;" :src="c.icon" :alt="`${c.name}さんのアイコン`">
|
|
|
|
<a :href="c.channel">{{ (c.name || '名無しのテクニシャン') }}</a>
|
|
|
|
</span>
|
2020-10-04 01:51:46 +09:00
|
|
|
<span v-else>
|
|
|
|
<span v-if="c.user_id"><a :href="`/profile/${c.user_id}`" :style="c.showcol"><img style="width: 24px; height: 24px;" :src="c.avatar" :alt="`${c.showname}さんのアイコン`"> {{ c.showname }}</a></span>
|
|
|
|
<span v-else>{{ (c.name || '名無しのテクニシャン') }}</span>
|
|
|
|
</span>
|
2020-09-23 17:19:30 +09:00
|
|
|
</cite> <span class="says">より:</span>
|
2020-12-29 22:17:53 +09:00
|
|
|
<span class="comment-meta commentmetadata" :id="`#comment-${c.id}`"> <a :href="`#comment-${c.id}`">{{ c.created }}</a></span>
|
2020-07-14 14:19:15 +09:00
|
|
|
</div>
|
2020-12-29 22:01:06 +09:00
|
|
|
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="c.message"></p>
|
|
|
|
<div class="reply">返信({{ c.replyCount }})</div>
|
2020-07-14 14:19:15 +09:00
|
|
|
</div>
|
|
|
|
</li>
|
2020-12-29 22:01:06 +09:00
|
|
|
<span v-if="c.replies">
|
|
|
|
<ul class="commentlist" v-for="(r, j) in c.replies" :key="`comment-${i}-reply-${j}`">
|
|
|
|
<li class="comment even thread-even depth-2" :id="`li-comment-${r.id}`">
|
|
|
|
<div class="commentnumber">{{ i+1 }}/{{ j+1 }}</div>
|
|
|
|
<div :id="`comment-${r.id}`">
|
|
|
|
<div>
|
|
|
|
<cite class="fn">
|
|
|
|
<span v-if="isvideo === 'n'">
|
|
|
|
<img style="height: 24px;" :src="r.icon" :alt="`${r.name}さんのアイコン`">
|
|
|
|
<a :href="r.channel">{{ (r.name || '名無しのテクニシャン') }}</a>
|
|
|
|
</span>
|
|
|
|
<span v-else>
|
|
|
|
<span v-if="r.user_id"><a :href="`/profile/${r.user_id}`" :style="r.showcol"><img style="width: 24px; height: 24px;" :src="r.avatar" :alt="`${r.showname}さんのアイコン`"> {{ r.showname }}</a></span>
|
|
|
|
<span v-else>{{ (r.name || '名無しのテクニシャン') }}</span>
|
|
|
|
</span>
|
|
|
|
</cite> <span class="says">より:</span>
|
2020-12-29 22:17:53 +09:00
|
|
|
<span class="comment-meta commentmetadata" :id="`#comment-${r.id}`"> <a :href="`#comment-${r.id}`">{{ r.created }}</a></span>
|
2020-12-29 22:01:06 +09:00
|
|
|
</div>
|
|
|
|
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="r.message"></p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</span>
|
2020-07-14 14:19:15 +09:00
|
|
|
</ul>
|
|
|
|
</span>
|
2020-09-23 17:19:30 +09:00
|
|
|
<span v-if="isvideo !== 'n'">
|
|
|
|
<hr />
|
|
|
|
<div v-if="err" class="alert alert-danger">{{ err }}</div>
|
2020-10-04 01:51:46 +09:00
|
|
|
<span v-if="user.length === 0">
|
|
|
|
<div class="form-group row">
|
|
|
|
<div class="col-md-4 col-lg-3">名前</div>
|
|
|
|
<div class="input-group col-md col-lg">
|
|
|
|
<input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
|
|
|
|
</div>
|
2020-09-23 17:19:30 +09:00
|
|
|
</div>
|
2020-10-04 01:51:46 +09:00
|
|
|
<div class="form-group row">
|
|
|
|
<div class="col-md-4 col-lg-3">メールアドレス</div>
|
|
|
|
<div class="input-group col-md col-lg">
|
|
|
|
<input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" />
|
|
|
|
</div>
|
2020-09-23 17:19:30 +09:00
|
|
|
</div>
|
2020-10-04 01:51:46 +09:00
|
|
|
</span>
|
|
|
|
<span v-else>
|
|
|
|
<div class="form-group row">
|
|
|
|
<div class="col-md-4 col-lg-3">名前</div>
|
|
|
|
<div class="input-group col-md col-lg">
|
|
|
|
<a :href="`/profile/${user.user_id}`" :style="user.showcol"><img style="width: 24px; height: 24px;" :src="user.avatar" :alt="`${user.showname}さんのアイコン`"> {{ user.showname }}</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</span>
|
2020-09-23 17:19:30 +09:00
|
|
|
<div class="row">
|
2020-12-29 22:20:07 +09:00
|
|
|
<div class="col-md-4 col-lg-3">本文 <span class="badge badge-danger">必須</span></div>
|
2020-09-23 17:19:30 +09:00
|
|
|
<div class="col-md col-lg">
|
|
|
|
<textarea class="form-control" id="new-message" rows="16" v-model="newComment.text"></textarea>
|
|
|
|
</div>
|
2020-07-14 14:19:15 +09:00
|
|
|
</div>
|
2020-09-23 17:19:30 +09:00
|
|
|
<div class="row" style="margin-top: 16px;">
|
|
|
|
<div class="col">
|
|
|
|
<button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
|
|
|
|
</div>
|
2020-07-14 14:19:15 +09:00
|
|
|
</div>
|
2020-09-23 17:19:30 +09:00
|
|
|
</span>
|
2020-07-14 14:19:15 +09:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
2020-10-08 10:15:36 +09:00
|
|
|
props: { user: Object, slug: '', isvideo: '', comments: Array },
|
2020-07-14 14:19:15 +09:00
|
|
|
data: function () { return { comment: this.comments, newComment: {}, err: '', loading: true, sending: false } },
|
|
|
|
computed: {
|
|
|
|
total: function () {
|
|
|
|
return this.comment.length;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created: function () { this.reset(); },
|
|
|
|
methods: {
|
|
|
|
reset () {
|
|
|
|
this.loading = false;
|
|
|
|
this.newComment.name = '';
|
|
|
|
this.newComment.mail = '';
|
|
|
|
this.newComment.text = '';
|
|
|
|
},
|
2020-12-23 14:17:15 +09:00
|
|
|
page () {},
|
2020-07-14 14:19:15 +09:00
|
|
|
send () {
|
2020-09-23 17:19:30 +09:00
|
|
|
if (this.isvideo !== 'n') {
|
|
|
|
this.err = '';
|
|
|
|
this.sending = true;
|
2020-07-14 14:19:15 +09:00
|
|
|
|
2020-09-23 17:19:30 +09:00
|
|
|
axios.post('/api/comment/new', {
|
2020-10-04 01:51:46 +09:00
|
|
|
user_id: this.user.user_id,
|
2020-09-23 17:19:30 +09:00
|
|
|
comment: this.newComment,
|
|
|
|
isvideo: this.isvideo,
|
|
|
|
slug: this.slug
|
|
|
|
}).then(res => {
|
|
|
|
this.sending = false;
|
|
|
|
if (res.data.status === '010100') { this.comment.push(res.data.result); this.reset(); }
|
|
|
|
else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message;
|
|
|
|
}).catch(err => {
|
|
|
|
this.sending = false;
|
|
|
|
this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message;
|
|
|
|
});
|
|
|
|
}
|
2020-07-14 14:19:15 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.fn {
|
|
|
|
font-size: 16px;
|
|
|
|
font-style: normal;
|
|
|
|
color: #20ec77;
|
|
|
|
}
|
|
|
|
.comment-meta a {
|
|
|
|
color: #bdc3c7;
|
|
|
|
}
|
|
|
|
.commentlist p {
|
|
|
|
margin: 0 0 10px;
|
|
|
|
padding: 10px 0 40px 0;
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
.commentnumber {
|
|
|
|
float: left;
|
|
|
|
margin-right: 5px;
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
ul {
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
</style>
|