262 lines
10 KiB
Plaintext
262 lines
10 KiB
Plaintext
<view class="page-wrapper" catchtap="handleBlankTap">
|
|
<scroll-view
|
|
class="content-container"
|
|
scroll-y="true"
|
|
style="height: 100vh;"
|
|
bindscroll="onPageScroll"
|
|
>
|
|
<view class="content-container">
|
|
<view class="voting-section" wx:if="{{cardReviewData}}">
|
|
<view class="card-header" catchtap="goToDetail" data-id="{{cardReviewData.article_id}}">
|
|
<view class="user-info">
|
|
<image
|
|
src="https://picsum.photos/id/100/200/200"
|
|
mode="widthFix"
|
|
class="avatar"
|
|
alt="用户头像"
|
|
></image>
|
|
<view class="user-details">
|
|
<text class="username">{{cardReviewData.publisher_name}}</text>
|
|
<text class="user-status">发起人 ({{cardReviewData.vote_type === 'single' ? '单选' : '多选'}})</text>
|
|
</view>
|
|
</view>
|
|
<view class="vote-status {{cardReviewData.user_has_voted ? 'status-voted' : (cardReviewData.is_ended ? 'status-ended' : 'status-active')}}">
|
|
{{cardReviewData.user_has_voted ? '已投票' : (cardReviewData.is_ended ? '已结束' : '进行中')}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="divider"></view>
|
|
|
|
<view class="vote-title-section" catchtap="goToDetail" data-id="{{cardReviewData.article_id}}">
|
|
<text class="vote-title">
|
|
{{cardReviewData.article_title}}
|
|
<text class="voted-tip" wx:if="{{cardReviewData.user_has_voted}}">• 您已投票</text>
|
|
</text>
|
|
<text class="vote-desc">{{cardReviewData.article_desc || ''}}</text>
|
|
</view>
|
|
|
|
<view class="options-container">
|
|
<block wx:for="{{cardReviewData.options}}" wx:for-item="option" wx:key="id">
|
|
<view
|
|
class="option-item {{(cardReviewData.user_has_voted && option.is_voted) ? 'selected voted-option' : (option.isSelected ? 'selected' : '')}} {{(cardReviewData.is_ended || cardReviewData.user_has_voted) ? 'disabled-option' : ''}}"
|
|
catchtap="{{(cardReviewData.is_ended || cardReviewData.user_has_voted) ? '' : 'selectOption'}}"
|
|
data-card-id="{{cardReviewData.article_id}}"
|
|
data-option-id="{{option.id}}"
|
|
>
|
|
<view class="option-info">
|
|
<view class="option-icon bg-gray">
|
|
<text class="iconfont">{{(cardReviewData.user_has_voted && option.is_voted) ? '✓' : (option.isSelected ? '✓' : '○')}}</text>
|
|
</view>
|
|
<view class="option-details">
|
|
<text class="option-name">
|
|
{{option.name}}
|
|
<text class="your-selection" wx:if="{{cardReviewData.user_has_voted && option.is_voted}}">（您的选择）</text>
|
|
</text>
|
|
<text class="option-desc">{{option.desc || ''}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="option-action-btn">AI</view>
|
|
|
|
<text class="option-percent">{{option.percentage || 0}}%</text>
|
|
|
|
<view class="progress-bar">
|
|
<view class="progress-value" style="width: {{(option.percentage || 0) + '%'}}"></view>
|
|
</view>
|
|
|
|
<view class="vote-indicator {{(cardReviewData.user_has_voted && option.is_voted) || option.isSelected ? 'show' : ''}}">
|
|
<text class="iconfont icon-check-circle"></text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class="vote-stats" catchtap="goToDetail" data-id="{{cardReviewData.article_id}}">
|
|
<text class="stats-text">已有 {{cardReviewData.total_voters || 0}} 人参与投票</text>
|
|
<text class="stats-text">
|
|
{{cardReviewData.is_ended ? '已结束' : '截止至 ' + (cardReviewData.end_time || '0天')}}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="vote-btn-wrapper">
|
|
<button
|
|
class="vote-btn {{(cardReviewData.is_ended ? 'vote-btn-ended' : (cardReviewData.user_has_voted ? 'vote-btn-disabled' : ''))}}"
|
|
disabled="{{cardReviewData.is_ended || cardReviewData.user_has_voted}}"
|
|
catchtap="submitVote"
|
|
data-card-id="{{cardReviewData.article_id}}"
|
|
>
|
|
<text class="btn-text">
|
|
{{cardReviewData.user_has_voted ? '已提交投票' : (cardReviewData.is_ended ? '投票结束' : '投我一票')}}
|
|
</text>
|
|
</button>
|
|
<button
|
|
class="share-btn"
|
|
open-type="share"
|
|
>
|
|
<t-icon
|
|
name="link-1"
|
|
class="wrapper-link-icon"
|
|
/>
|
|
</button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="vote-status-tip" wx:if="{{!cardReviewData && !loading && !error}}">暂无投票数据</view>
|
|
<view class="vote-status-tip" wx:if="{{loading}}">投票数据加载中...</view>
|
|
<view class="vote-status-tip error" wx:if="{{error}}">加载失败：{{error}}</view>
|
|
|
|
|
|
<view class="primary-comment-trigger" catchtap="handleTapPrimaryCommentInput">
|
|
<image class="avatar" src="{{userInfo.avatarUrl || 'https://picsum.photos/id/101/200/200'}}"></image>
|
|
<view class="fake-input-text">快来写下你的评论吧~</view>
|
|
</view>
|
|
|
|
<view class="comment-section">
|
|
<view wx:if="{{comments.length > 0}}">
|
|
<text class="comment-count">共 {{totalCommentsCount}} 条评论</text>
|
|
<block wx:for="{{comments}}" wx:for-item="comment" wx:key="id">
|
|
<template is="commentItem" data="{{item: comment, formatter: formatter}}" />
|
|
</block>
|
|
</view>
|
|
|
|
<view class="comment-status" wx:else>
|
|
<view wx:if="{{!loading && !error}}">快来发布第一条评论吧！</view>
|
|
<view wx:elif="{{loading}}">评论加载中...</view>
|
|
<view wx:elif="{{error}}">加载失败: {{error}}</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<view
|
|
class="reply-input-container {{showReplyInput ? 'visible' : ''}}"
|
|
style="bottom: {{keyboardHeight}}px;"
|
|
catchtap="noop"
|
|
>
|
|
<input
|
|
class="reply-input"
|
|
placeholder="{{currentReplyId ? '回复 ' + (currentReplyUsername || '评论') : '善语结善缘，恶言伤人心'}}"
|
|
value="{{replyContent}}"
|
|
focus="{{showReplyInput}}"
|
|
confirm-type="send"
|
|
bindconfirm="handleReplySubmit"
|
|
bindinput="handleReplyInput"
|
|
bindblur="handleInputBlur"
|
|
bindkeyboardheightchange="onKeyboardHeightChange"
|
|
/>
|
|
<button
|
|
class="reply-submit-btn {{isSubmitDisabled ? 'disabled' : ''}}"
|
|
catchtap="handleReplySubmit"
|
|
>
|
|
发送
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<wxs src="./utils.wxs" module="formatter" />
|
|
|
|
<template name="commentItem">
|
|
<view
|
|
class="comment-item {{item.parent_id ? 'reply-level' : 'top-level'}}"
|
|
catchtap="handleCommentTap"
|
|
data-item="{{item}}"
|
|
>
|
|
<view class="comment-header">
|
|
<image
|
|
class="avatar"
|
|
src="{{item.avatar_url || 'https://picsum.photos/id/237/200/200'}}"
|
|
mode="widthFix"
|
|
alt="用户头像"
|
|
></image>
|
|
<view class="user-info">
|
|
<text class="username">{{item.username || '匿名用户'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="comment-content">
|
|
<text>{{item.content}}</text>
|
|
</view>
|
|
|
|
<view class="comment-footer">
|
|
<view class="footer-left">
|
|
{{formatter.formatIsoDateTime(item.created_at)}}
|
|
</view>
|
|
<view class="footer-right">
|
|
<view class="like-icon-wrap" catchtap="handleLike" data-id="{{item.id}}">
|
|
<van-icon
|
|
class="like-icon {{item.is_liked ? 'liked' : ''}}"
|
|
name="{{item.is_liked ? 'good-job' : 'good-job-o'}}"
|
|
size="18"
|
|
/>
|
|
<text class="likes-count">{{item.likes_count || 0}}</text>
|
|
</view>
|
|
<view class="dislike-icon-wrap" catchtap="handleDislike" data-id="{{item.id}}">
|
|
<image
|
|
class="dislike-icon {{item.is_disliked ? 'disliked' : ''}}"
|
|
src="/images/dislike.png"
|
|
mode="widthFix"
|
|
alt="点踩图标"
|
|
></image>
|
|
<text class="dislikes-count">{{item.dislikes_count || 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="replies-container" wx:if="{{item.replies && item.replies.length > 0}}">
|
|
<block wx:for="{{item.replies}}" wx:for-item="reply" wx:key="id">
|
|
<view
|
|
class="comment-item reply-level sub-comment"
|
|
catchtap="handleCommentTap"
|
|
data-item="{{reply}}"
|
|
>
|
|
<view class="comment-header">
|
|
<image
|
|
class="avatar"
|
|
src="{{reply.avatar_url || 'https://picsum.photos/id/237/200/200'}}"
|
|
mode="widthFix"
|
|
alt="用户头像"
|
|
></image>
|
|
<view class="user-info">
|
|
<text class="username">{{reply.username || '匿名用户'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="comment-content">
|
|
<text>{{reply.content}}</text>
|
|
</view>
|
|
|
|
<view class="comment-footer">
|
|
<view class="footer-left">
|
|
{{formatter.formatIsoDateTime(reply.created_at)}}
|
|
</view>
|
|
<view class="footer-right">
|
|
<view class="like-icon-wrap" catchtap="handleLike" data-id="{{reply.id}}">
|
|
<van-icon
|
|
class="like-icon {{reply.is_liked ? 'liked' : ''}}"
|
|
name="{{reply.is_liked ? 'good-job' : 'good-job-o'}}"
|
|
size="18"
|
|
/>
|
|
<text class="likes-count">{{reply.likes_count || 0}}</text>
|
|
</view>
|
|
<view class="dislike-icon-wrap" catchtap="handleDislike" data-id="{{reply.id}}">
|
|
<image
|
|
class="dislike-icon {{reply.is_disliked ? 'disliked' : ''}}"
|
|
src="/images/dislike.png"
|
|
mode="widthFix"
|
|
alt="点踩图标"
|
|
></image>
|
|
<text class="dislikes-count">{{reply.dislikes_count || 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class="comment-divider"></view>
|
|
</view>
|
|
</template> |