与牧同行-小程序用户端
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.

151 lines
5.5 KiB

  1. <view class="forum-page">
  2. <!-- 帖子详情 -->
  3. <scroll-view
  4. class="post-detail-container"
  5. scroll-y
  6. scroll-with-animation
  7. scroll-into-view="{{scrollToId}}"
  8. bindscroll="onScroll"
  9. >
  10. <!-- 帖子主体 -->
  11. <view class="post-main" id="post-main">
  12. <!-- 帖子头部 -->
  13. <view class="post-header">
  14. <view class="user-info">
  15. <image class="avatar" src="{{baseUrl+post.avatar}}" mode="aspectFill"></image>
  16. <view class="user-detail">
  17. <view class="username">{{post.nickName}}</view>
  18. <view class="post-time">{{post.createdAt}}</view>
  19. </view>
  20. </view>
  21. </view>
  22. <!-- 帖子内容 -->
  23. <view class="post-content">
  24. <view class="post-title">{{post.title}}</view>
  25. <view class="post-desc">{{post.content}}</view>
  26. <!-- 帖子图片 -->
  27. <view class="post-images" wx:if="{{post.images && post.images.length > 0}}">
  28. <view class="images-container">
  29. <block wx:for="{{images}}" wx:for-item="image" wx:for-index="imgIndex" wx:key="index">
  30. <image
  31. class="post-image"
  32. src="{{baseUrl+image}}"
  33. mode="aspectFill"
  34. data-img-index="{{imgIndex}}"
  35. bindtap="previewImage"
  36. ></image>
  37. </block>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <!-- 回复列表 -->
  43. <view class="replies-section" id="replies-section">
  44. <view class="section-title">
  45. <text class="title-text">全部回复</text>
  46. <text class="reply-count">{{postHf.length}}条</text>
  47. </view>
  48. <view class="reply-list" wx:if="{{postHf.length > 0}}">
  49. <block wx:for="{{postHf}}" wx:key="id" wx:for-index="replyIndex">
  50. <view class="reply-item" id="reply-{{item.id}}">
  51. <view class="reply-user">
  52. <image class="reply-avatar" src="{{baseUrl+item.avatar}}" mode="aspectFill"></image>
  53. <view class="reply-user-info">
  54. <view class="reply-username">{{item.nickName}}</view>
  55. <view class="reply-time">{{item.createdAt}}</view>
  56. </view>
  57. </view>
  58. <view class="reply-content">{{item.content}}</view>
  59. <!-- 回复操作 -->
  60. <view class="reply-actions">
  61. <view class="reply-action" bindtap="replyToUser" data-type="reply" data-index="{{replyIndex}}" data-username="{{item.nickName}}">
  62. <image class="reply-action-icon" src="/pagesB/images/hf.png" mode="aspectFit"></image>
  63. <text class="reply-action-text">回复</text>
  64. </view>
  65. </view>
  66. <!-- 二级评论列表 -->
  67. <view class="comment-list" wx:if="{{item.children.length > 0}}">
  68. <block wx:for="{{item.children}}" wx:key="id" wx:for-index="commentIndex">
  69. <view class="comment-item">
  70. <view class="comment-user">
  71. <image class="comment-avatar" src="{{baseUrl+item.avatar}}" mode="aspectFill"></image>
  72. <view class="comment-user-info">
  73. <view class="comment-username">{{item.nickName}}</view>
  74. <view class="comment-time">{{item.createdAt}}</view>
  75. </view>
  76. </view>
  77. <view class="comment-content">
  78. {{item.content}}
  79. </view>
  80. </view>
  81. </block>
  82. </view>
  83. </view>
  84. </block>
  85. </view>
  86. <!-- 空回复状态 -->
  87. <view class="empty-replies" wx:else>
  88. <view class="empty-reply-text">还没有回复,快来第一个回复吧!</view>
  89. </view>
  90. </view>
  91. <!-- 底部占位 -->
  92. <view class="bottom-placeholder" style="height: 160rpx;"></view>
  93. </scroll-view>
  94. <!-- 底部回复输入栏 -->
  95. <view class="bottom-input-container" style="transform: translateY({{inputTransformY}});">
  96. <view class="input-wrapper">
  97. <input
  98. class="reply-input"
  99. placeholder="{{replyPlaceholder}}"
  100. value="{{replyContent}}"
  101. bindinput="onReplyInput"
  102. bindfocus="onInputFocus"
  103. bindblur="onInputBlur"
  104. bindconfirm="submitReply"
  105. adjust-position="{{false}}"
  106. focus="{{isInputFocused}}"
  107. maxlength="500"
  108. />
  109. <button
  110. class="send-btn"
  111. bindtap="submitReply"
  112. disabled="{{!replyContent}}"
  113. >
  114. {{isSubmitting ? '发送中...' : '发送'}}
  115. </button>
  116. </view>
  117. <!-- 回复对象显示 -->
  118. <view class="reply-target" wx:if="{{replyTarget.nickName}}">
  119. <text class="target-text">回复 {{replyTarget.nickName}}</text>
  120. <text class="clear-target" bindtap="clearReplyTarget">×</text>
  121. </view>
  122. </view>
  123. <!-- 图片预览模态框 -->
  124. <view class="preview-overlay" wx:if="{{showPreview}}" catchtap="hidePreview">
  125. <swiper class="preview-swiper" current="{{previewIndex}}" bindchange="onSwiperChange">
  126. <block wx:for="{{previewImages}}" wx:key="index">
  127. <swiper-item>
  128. <image class="preview-image" src="{{baseUrl+item}}" mode="aspectFit"></image>
  129. </swiper-item>
  130. </block>
  131. </swiper>
  132. <view class="preview-indicator">{{previewIndex + 1}}/{{previewImages.length}}</view>
  133. </view>
  134. <!-- 加载提示 -->
  135. <view class="loading" wx:if="{{loading}}">
  136. 加载中...
  137. </view>
  138. </view>