You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
4.7 KiB
130 lines
4.7 KiB
<view class="forum-page">
|
|
|
|
<!-- 顶部栏 -->
|
|
<view class="header">
|
|
<view class="title">问答论坛</view>
|
|
<button class="add-btn" bindtap="showPostModal">发帖提问</button>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<view class="post-list" wx:if="{{posts.length > 0}}">
|
|
<block wx:for="{{posts}}" wx:key="id">
|
|
<view class="post-item" data-index="{{index}}">
|
|
<!-- 帖子头部 -->
|
|
<view class="post-header">
|
|
<view class="user-info">
|
|
<image class="avatar" src="{{item.avatar}}" mode="aspectFill"></image>
|
|
<view class="user-detail">
|
|
<view class="username">{{item.username}}</view>
|
|
<view class="post-time">{{item.time}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帖子内容 -->
|
|
<view class="post-content">
|
|
<view class="post-title">{{item.title}}</view>
|
|
<view class="post-desc">{{item.content}}</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 回复列表 -->
|
|
<view class="reply-list" wx:if="{{item.replies.length > 0}}">
|
|
<view class="reply-title">共{{item.replies.length}}条回复</view>
|
|
<block wx:for="{{item.replies}}" wx:key="index">
|
|
<view class="reply-item" wx:if="{{index < 2 || item.showAllReplies}}">
|
|
<view class="reply-user">
|
|
<image class="reply-avatar" src="{{item.avatar}}" mode="aspectFill"></image>
|
|
<view class="reply-user-info">
|
|
<view class="reply-username">{{item.username}}</view>
|
|
<view class="reply-time">{{item.time}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="reply-content">{{item.content}}</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 查看更多回复 -->
|
|
<view class="view-more-replies" wx:if="{{item.replies.length > 2 && !item.showAllReplies}}" bindtap="toggleReplies" data-index="{{index}}">
|
|
查看全部{{item.replies.length}}条回复
|
|
</view>
|
|
|
|
<!-- 收起回复 -->
|
|
<view class="view-more-replies" wx:if="{{item.replies.length > 2 && item.showAllReplies}}" bindtap="toggleReplies" data-index="{{index}}">
|
|
收起回复
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 回复输入区域（当前激活的帖子） -->
|
|
<view class="reply-input-container" wx:if="{{activeReplyIndex === index}}">
|
|
<input
|
|
class="reply-input"
|
|
placeholder="输入您的回复..."
|
|
value="{{replyContent}}"
|
|
bindinput="onReplyInput"
|
|
focus="{{activeReplyIndex === index}}"
|
|
/>
|
|
<button class="send-reply-btn" bindtap="submitReply" data-index="{{index}}">发送</button>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:else>
|
|
<image class="empty-image" src="/images/empty.png" mode="aspectFit"></image>
|
|
<view class="empty-text">暂无帖子，快来发布第一个问题吧！</view>
|
|
<button class="empty-btn" bindtap="showPostModal">发布问题</button>
|
|
</view>
|
|
|
|
<!-- 发帖弹窗 -->
|
|
<view class="modal-overlay" wx:if="{{showPostModal}}" bindtap="hidePostModal">
|
|
<view class="modal-content" catchtap="preventTap">
|
|
<view class="modal-header">发布新问题</view>
|
|
|
|
<view class="form-item">
|
|
<input
|
|
class="form-input"
|
|
placeholder="请输入问题标题"
|
|
value="{{postTitle}}"
|
|
bindinput="onPostTitleInput"
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<textarea
|
|
class="form-textarea"
|
|
placeholder="请详细描述您的问题..."
|
|
value="{{postContent}}"
|
|
bindinput="onPostContentInput"
|
|
maxlength="500"
|
|
/>
|
|
<view class="textarea-counter">{{postContent.length}}/500</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="selected-tags" wx:if="{{selectedTags.length > 0}}">
|
|
<block wx:for="{{selectedTags}}" wx:key="index">
|
|
<view class="selected-tag">
|
|
{{item}}
|
|
<text class="remove-tag" data-index="{{index}}" bindtap="removeTag">×</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-buttons">
|
|
<button class="modal-btn cancel" bindtap="hidePostModal">取消</button>
|
|
<button class="modal-btn submit" bindtap="submitPost" disabled="{{!postTitle || !postContent}}">发布</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载提示 -->
|
|
<view class="loading" wx:if="{{loading}}">
|
|
<image class="loading-icon" src="/images/loading.png" mode="aspectFit"></image>
|
|
加载中...
|
|
</view>
|
|
</view>
|