151 行
6.6 KiB
Vue
151 行
6.6 KiB
Vue
<template>
|
|
<div id="comments" class="comments-area clearfix">
|
|
<h3 class="comments-count section-heading uppercase"><span>{{ comment.total }} 件のコメント</span></h3>
|
|
<div style="margin: 12px 0;">
|
|
<span v-if="isvideo !== 'n'">
|
|
<hr />
|
|
<div v-if="err" class="alert alert-danger">{{ err }}</div>
|
|
<span v-if="Object.keys(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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</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>
|
|
<div class="row">
|
|
<div class="col-md-4 col-lg-3">本文 <span class="badge badge-danger">必須</span></div>
|
|
<div class="col-md col-lg">
|
|
<textarea class="form-control" id="new-message" rows="4" v-on:keyup.ctrl.13="send" v-model="newComment.text"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 16px;">
|
|
<div class="col">
|
|
<button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
<div v-if="comment.total === 0">コメントがありません。</div>
|
|
<span v-else>
|
|
<ul class="commentlist" v-for="(c, i) in comment.come" :key="`comment-${i}`">
|
|
<li class="comment even thread-even depth-1" :id="`li-comment-${c.id}`">
|
|
<div class="commentnumber">{{ Number(i)+1 }}({{ c.src }})</div>
|
|
<div :id="`comment-${c.id}`" :ref="`comment-${c.id}`">
|
|
<div>
|
|
<cite class="fn">
|
|
<span v-if="c.isvideo === 'n'">
|
|
<img style="height: 24px;" :src="c.icon" :alt="`${c.name}さんのアイコン`">
|
|
<a :href="c.channel" style="overflow-wrap: break-word;">{{ (c.name || '名無しのテクニシャン') }}</a>
|
|
</span>
|
|
<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>
|
|
</cite> <span class="says">より:</span>
|
|
<span class="comment-meta commentmetadata" :id="`#comment-${c.id}`"> <a :href="`#comment-${c.id}`">{{ c.created }}</a></span>
|
|
</div>
|
|
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="c.message"></p>
|
|
<div class="reply">返信（{{ c.replyCount }}）</div>
|
|
</div>
|
|
</li>
|
|
<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 }}({{ c.src }})</div>
|
|
<div :id="`comment-${r.id}`">
|
|
<div>
|
|
<cite class="fn">
|
|
<span v-if="c.isvideo !== 'f'">
|
|
<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>
|
|
<span class="comment-meta commentmetadata" :id="`#comment-${r.id}`"> <a :href="`#comment-${r.id}`">{{ r.created }}</a></span>
|
|
</div>
|
|
<p style="white-space: pre-wrap; word-wrap: break-word; width: 500px;" v-html="r.message"></p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: { user: Object, slug: '', isvideo: '', comments: Object },
|
|
data: function () { return { comment: this.comments, newComment: {}, err: '', loading: true, sending: false } },
|
|
created: function () { this.reset(); },
|
|
methods: {
|
|
reset () {
|
|
this.loading = false;
|
|
this.newComment.name = '';
|
|
this.newComment.mail = '';
|
|
this.newComment.text = '';
|
|
},
|
|
send () {
|
|
this.err = '';
|
|
this.sending = true;
|
|
|
|
axios.post('/api/comment/new', {
|
|
user_id: this.user.user_id,
|
|
comment: this.newComment,
|
|
isvideo: this.isvideo,
|
|
slug: this.slug
|
|
}).then(res => {
|
|
this.sending = false;
|
|
if (res.data.status === '010100') { this.comment.come.unshift(res.data.result); this.comment.total++; 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;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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>
|