116 lines
4.8 KiB
HTML
116 lines
4.8 KiB
HTML
{{define "playComments"}}
|
||
<link rel="stylesheet" href="/static/css/playComments.css">
|
||
{{/* 播放页评论区：首屏 4 条，超出显示「查看更多评论」客户端翻页 */}}
|
||
{{$c := .chapter}}
|
||
{{$pageSize := .commentSize}}
|
||
{{$total := .commentTotal}}
|
||
{{$shown := len .comments}}
|
||
<div
|
||
class="play-comments"
|
||
data-play-comments
|
||
data-comment-page="{{if .commentPage}}{{.commentPage}}{{else}}1{{end}}"
|
||
data-comment-size="{{if gt $pageSize 0}}{{$pageSize}}{{else}}4{{end}}"
|
||
data-comment-total="{{$total}}"
|
||
data-comment-loaded="{{$shown}}"
|
||
>
|
||
<div class="play-comments__head">
|
||
<h2 class="play-comments__title">评论</h2>
|
||
<span class="play-comments__count" data-comment-total-label>{{if gt $total 0}}{{$total}} 条{{else if and $c (gt $c.CountComment 0)}}{{$c.CountComment}} 条{{else if and .video (gt .video.CountComment 0)}}{{.video.CountComment}} 条{{else}}暂无评论{{end}}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="play-composer"
|
||
data-play-composer
|
||
data-object-id="{{.commentObjectID}}"
|
||
data-object-type="{{.commentObjectType}}"
|
||
data-logged-in="{{if .isLoggedIn}}1{{else}}0{{end}}"
|
||
>
|
||
<div class="play-composer__avatar" aria-hidden="true">
|
||
{{if .avatar}}
|
||
<img decoding="async" loading="lazy" class="play-composer__avatar-img lazy" src="/static/images/placeholder.png?v=2" data-src="{{.avatar}}" alt="当前用户头像">
|
||
{{else}}
|
||
<img decoding="async" loading="lazy" class="play-composer__avatar-img" src="/static/images/placeholder.png?v=2" data-src="/static/images/profile/avatar.png" alt="默认用户头像">
|
||
{{end}}
|
||
</div>
|
||
<div class="play-composer__field">
|
||
<input
|
||
class="play-composer__input"
|
||
type="text"
|
||
maxlength="200"
|
||
placeholder="{{if .isLoggedIn}}说点什么…{{else}}登录后发表评论{{end}}"
|
||
aria-label="发表评论"
|
||
data-comment-input
|
||
{{if not .isLoggedIn}}readonly{{end}}
|
||
>
|
||
<span class="play-composer__count" data-comment-count>0 / 200</span>
|
||
</div>
|
||
{{if .isLoggedIn}}
|
||
<button class="btn btn--primary play-composer__send" type="button" data-comment-send>发布</button>
|
||
{{else}}
|
||
<button class="btn btn--primary play-composer__login" type="button" data-login-open>登录</button>
|
||
{{end}}
|
||
</div>
|
||
|
||
<ul class="play-comment-list" data-comment-list>
|
||
{{range .comments}}
|
||
<li class="play-comment" data-comment-id="{{.ID}}">
|
||
{{$avatar := commentAvatar .UserAvatar}}
|
||
{{if .UserAvatar}}
|
||
<img decoding="async" loading="lazy" class="play-comment__avatar lazy" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
|
||
{{else}}
|
||
<img decoding="async" loading="lazy" class="play-comment__avatar" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
|
||
{{end}}
|
||
<div class="play-comment__body">
|
||
<div class="play-comment__meta">
|
||
<span class="play-comment__name">{{if .UserName}}{{.UserName}}{{else}}匿名用户{{end}}</span>
|
||
<span class="play-comment__time">{{formatCommentTime .CreatedAt}}</span>
|
||
</div>
|
||
<p class="play-comment__text">{{.Text}}</p>
|
||
{{range .Children}}
|
||
<div class="play-comment__reply">
|
||
{{if .UserName}}{{.UserName}}{{else}}用户{{end}}{{if .ReplyUserName}} 回复 {{.ReplyUserName}}{{end}}：{{.Text}}
|
||
</div>
|
||
{{end}}
|
||
<div class="play-comment__actions">
|
||
<button
|
||
class="play-comment__action{{if eq .IsLike 1}} is-active{{end}}"
|
||
type="button"
|
||
aria-label="点赞"
|
||
data-comment-like="{{.ID}}"
|
||
data-liked="{{if eq .IsLike 1}}1{{else}}2{{end}}"
|
||
data-like-raw="{{.CountLike}}"
|
||
>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/heart.svg" alt="点赞">
|
||
<span data-like-count>{{.CountLike}}</span>
|
||
</button>
|
||
<button
|
||
class="play-comment__action"
|
||
type="button"
|
||
data-comment-reply
|
||
data-comment-id="{{.ID}}"
|
||
data-parents-id="{{.ID}}"
|
||
data-reply-name="{{if .UserName}}{{.UserName}}{{else}}匿名用户{{end}}"
|
||
>回复</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
{{else}}
|
||
<li class="play-comment play-comment--empty">
|
||
<p class="play-comment__text">暂无评论</p>
|
||
</li>
|
||
{{end}}
|
||
</ul>
|
||
|
||
<button
|
||
class="play-comments__more"
|
||
type="button"
|
||
data-comment-more
|
||
{{if le $total $shown}}hidden{{end}}
|
||
>
|
||
查看更多评论
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</button>
|
||
</div>
|
||
<script defer src="/static/js/pages/playComments.js?v=4"></script>
|
||
{{end}}
|