mayiming/toutoukan_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序实现对话框回复

Browse Source
This commit is contained in:
马懿铭
2025-10-08 01:37:39 +08:00
parent 178caaf28b
commit d043271757
5 changed files with 358 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
miniprogram/pages/articledetail/articledetail.wxml
View File

@@ -1,11 +1,13 @@
<!-- 外层容器：统一页面背景 -->
<view class="page-wrapper" bindtap="handleBlankTap">
<!-- 核心内容容器：包裹投票区+评论区，消除割裂感 -->
<view class="page-wrapper" catchtap="handleBlankTap">
<scroll-view
class="content-container"
scroll-y="true"
style="height: 100vh;"
bindscroll="onPageScroll"
>
<view class="content-container">
<!-- 1. 投票区域：仅当有投票数据时显示 -->
<view class="voting-section" wx:if="{{cardReviewData}}">
<!-- 卡片头部：用户信息+投票状态 -->
<view class="card-header" bindtap="goToDetail" data-id="{{cardReviewData.article_id}}">
<view class="card-header" catchtap="goToDetail" data-id="{{cardReviewData.article_id}}">
<view class="user-info">
<image
src="https://picsum.photos/id/100/200/200"
@@ -14,21 +16,18 @@
alt="用户头像"
></image>
<view class="user-details">
<text class="username">{{cardReviewData.publisher_id}}</text>
<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" bindtap="goToDetail" data-id="{{cardReviewData.article_id}}">
<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>
@@ -36,21 +35,18 @@
<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' : ''}}"
bindtap="{{(cardReviewData.is_ended || cardReviewData.user_has_voted) ? '' : 'selectOption'}}"
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}}
@@ -60,18 +56,14 @@
</view>
</view>
<!-- AI标识 -->
<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>
@@ -79,20 +71,18 @@
</block>
</view>
<!-- 投票统计信息 -->
<view class="vote-stats" bindtap="goToDetail" data-id="{{cardReviewData.article_id}}">
<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}}"
bindtap="submitVote"
catchtap="submitVote"
data-card-id="{{cardReviewData.article_id}}"
>
<text class="btn-text">
@@ -100,78 +90,81 @@
</text>
</button>
<button
class="share-btn"
open-type="share"
>
<!-- 原有图标 -->
<t-icon
name="link-1"
class="wrapper-link-icon"
/>
</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="section-divider"></view>
<!-- 2. 评论区域 -->
<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, onCommentTap: handleCommentTap, formatter: formatter}}" />
<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>
<!-- 3. 回复输入框：点击评论时弹出，fixed固定在底部 -->
<view class="reply-input-container" wx:if="{{showReplyInput}}">
<input
class="reply-input"
placeholder="请输入回复内容..."
value="{{replyContent}}"
bindinput="handleReplyInput"
bindblur="handleInputBlur"
/>
<button
class="reply-submit-btn"
bindtap="handleReplySubmit"
disabled="{{!replyContent.trim()}}"
>
发送
</button>
</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工具：时间格式化（评论时间显示用） -->
<wxs src="./utils.wxs" module="formatter" />
<!-- 评论项模板：主评论+子评论通用 -->
<template name="commentItem">
<view
class="comment-item {{item.parent_id ? 'reply-level' : 'top-level'}}"
bindtap="{{onCommentTap}}"
data-comment-id="{{item.id}}"
data-comment-type="{{item.parent_id ? 'sub' : 'main'}}"
catchtap="handleCommentTap"
data-item="{{item}}"
>
<!-- 评论头部：用户头像+用户名 -->
<view class="comment-header">
<image
class="avatar"
@@ -184,19 +177,16 @@
</view>
</view>
<!-- 评论内容 -->
<view class="comment-content">
<text>{{item.content}}</text>
</view>
<!-- 评论底部：时间+点赞+点踩 -->
<view class="comment-footer">
<view class="footer-left">
{{formatter.formatIsoDateTime(item.created_at)}} <!-- 格式化评论时间 -->
{{formatter.formatIsoDateTime(item.created_at)}}
</view>
<view class="footer-right">
<!-- 点赞按钮：用Vant Icon -->
<view class="like-icon-wrap" bindtap="handleLike" data-id="{{item.id}}">
<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'}}"
@@ -204,8 +194,7 @@
/>
<text class="likes-count">{{item.likes_count || 0}}</text>
</view>
<!-- 点踩按钮：自定义图片 -->
<view class="dislike-icon-wrap" bindtap="handleDislike" data-id="{{item.id}}">
<view class="dislike-icon-wrap" catchtap="handleDislike" data-id="{{item.id}}">
<image
class="dislike-icon {{item.is_disliked ? 'disliked' : ''}}"
src="/images/dislike.png"
@@ -217,14 +206,12 @@
</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"
bindtap="{{onCommentTap}}"
data-comment-id="{{reply.id}}"
data-comment-type="sub"
catchtap="handleCommentTap"
data-item="{{reply}}"
>
<view class="comment-header">
<image
@@ -247,7 +234,7 @@
{{formatter.formatIsoDateTime(reply.created_at)}}
</view>
<view class="footer-right">
<view class="like-icon-wrap" bindtap="handleLike" data-id="{{reply.id}}">
<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'}}"
@@ -255,7 +242,7 @@
/>
<text class="likes-count">{{reply.likes_count || 0}}</text>
</view>
<view class="dislike-icon-wrap" bindtap="handleDislike" data-id="{{reply.id}}">
<view class="dislike-icon-wrap" catchtap="handleDislike" data-id="{{reply.id}}">
<image
class="dislike-icon {{reply.is_disliked ? 'disliked' : ''}}"
src="/images/dislike.png"
@@ -270,7 +257,6 @@
</block>
</view>
<!-- 评论分割线 -->
<view class="comment-divider"></view>
</view>
</template>
</template>