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

207 lines
7.6 KiB

  1. <view class="forum-page">
  2. <!-- 顶部栏 -->
  3. <view class="header">
  4. <view class="header-content">
  5. <view class="header-main">
  6. <text class="title-text">问答社区</text>
  7. <text class="title-sub">互帮互助,共同成长</text>
  8. </view>
  9. </view>
  10. </view>
  11. <!-- 主内容区 -->
  12. <view class="main-content">
  13. <!-- 搜索框 -->
  14. <view class="search-section">
  15. <view class="search-box">
  16. <image class="search-icon" src="/pagesB/images/sou.png" mode="aspectFit"></image>
  17. <input class="search-input" placeholder="搜索问题或关键词..." value="{{searchKeyword}}" bindinput="onSearchInput" bindconfirm="onSearchConfirm" confirm-type="search" />
  18. <view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch">
  19. <text class="clear-text">×</text>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- 帖子列表 -->
  24. <scroll-view class="post-list-section" scroll-y enable-back-to-top scroll-top="{{scrollTop}}" bindscrolltolower="loadMore" bindscroll="onScroll" refresher-enabled="{{true}}" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
  25. <!-- 搜索加载提示 -->
  26. <view class="search-loading" wx:if="{{searchLoading && posts.length === 0}}">
  27. <view class="search-spinner"></view>
  28. <text class="search-loading-text">搜索中...</text>
  29. </view>
  30. <!-- 空状态 -->
  31. <view class="empty-state" wx:if="{{!loading && !searchLoading && posts.length === 0}}">
  32. <view class="empty-text" wx:if="{{searchKeyword}}">
  33. 没有找到"{{searchKeyword}}"相关的问题
  34. </view>
  35. <view class="empty-text" wx:else>
  36. 这里还没有问题,快来发布第一个吧!
  37. </view>
  38. <button class="empty-btn" bindtap="createPost" wx:if="{{!searchKeyword}}">
  39. 发布问题
  40. </button>
  41. </view>
  42. <!-- 帖子列表 -->
  43. <view class="post-list" wx:if="{{posts.length > 0}}">
  44. <block wx:for="{{posts}}" wx:key="id">
  45. <view class="post-card" data-id="{{item.id}}" bindtap="goToDetail">
  46. <view class="post-content">
  47. <view class="post-type">
  48. <!-- 头像 -->
  49. <view class="user-info">
  50. <image class="user-avatar" src="{{baseUrl+item.avatar}}" mode="aspectFill"></image>
  51. <text class="username">{{item.nickName}}</text>
  52. </view>
  53. <!-- 时间 -->
  54. <text class="post-time">{{item.createdAt}}</text>
  55. </view>
  56. <!-- 标题 -->
  57. <view class="post-title-wrapper">
  58. <text class="post-title">{{item.title}}</text>
  59. </view>
  60. <!-- 内容摘要 -->
  61. <view class="post-summary">
  62. {{item.content}}
  63. </view>
  64. <!-- 图片预览 -->
  65. <view class="post-images" wx:if="{{item.images && item.images.length>0}}">
  66. <view class="images-grid">
  67. <block wx:for="{{item.images}}" wx:key="index" wx:for-index="imgIndex">
  68. <image class="post-image" src="{{baseUrl+item}}" mode="aspectFill" data-postindex="{{index}}" data-imageindex="{{imgIndex}}" bindtap="previewImage"></image>
  69. </block>
  70. </view>
  71. </view>
  72. <!-- 底部信息 -->
  73. <view class="post-footer">
  74. <view class="post-meta">
  75. <view class="meta-item">
  76. <image class="meta-icon" src="/pagesB/images/hf.png" mode="aspectFit"></image>
  77. <text class="meta-count">{{item.answerCount || 0}}</text>
  78. </view>
  79. <view class="meta-item">
  80. <image class="meta-icon" src="/pagesB/images/lll.png" mode="aspectFit"></image>
  81. <text class="meta-count">{{item.viewCount || 0}}</text>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. </block>
  88. <!-- 加载更多 -->
  89. <view class="load-more" wx:if="{{hasMore && posts.length > 0}}">
  90. <view class="loading-spinner" wx:if="{{!loadingMore}}">
  91. <text class="loading-text">上拉加载更多</text>
  92. </view>
  93. <view class="loading-spinner" wx:else>
  94. <view class="spinner"></view>
  95. <text class="loading-text">加载中...</text>
  96. </view>
  97. </view>
  98. <!-- 没有更多了 -->
  99. <view class="no-more" wx:if="{{!hasMore && posts.length > 0}}">
  100. <view class="no-more-line"></view>
  101. <text class="no-more-text">已经到底了</text>
  102. <view class="no-more-line"></view>
  103. </view>
  104. </view>
  105. </scroll-view>
  106. </view>
  107. <!-- 固定发布按钮(左下角) -->
  108. <view class="floating-create-btn" bindtap="createPost">
  109. <image class="create-icon" src="/pagesA/images/jh.png" mode="aspectFit"></image>
  110. </view>
  111. <!-- 返回顶部按钮(右下角) -->
  112. <view class="back-to-top-btn {{showBackToTop ? 'show' : ''}}" bindtap="backToTop">
  113. <view class="back-top-icon">↑</view>
  114. </view>
  115. <!-- 发布模态框 -->
  116. <view class="post-modal-overlay" wx:if="{{showPostModal}}" bindtap="hidePostModal">
  117. <view class="post-modal-content" catchtap="stopPropagation">
  118. <view class="modal-header">
  119. <text class="modal-title">发布问题</text>
  120. <view class="modal-close" bindtap="hidePostModal">
  121. <text class="close-icon">×</text>
  122. </view>
  123. </view>
  124. <view class="modal-body">
  125. <view class="form-field">
  126. <view class="field-header">
  127. <text class="field-label">问题标题</text>
  128. <text class="field-counter">{{postTitle.length}}/50</text>
  129. </view>
  130. <input class="title-input" placeholder="请输入问题标题" value="{{postTitle}}" bindinput="onPostTitleInput" maxlength="50" />
  131. </view>
  132. <view class="form-field">
  133. <view class="field-header">
  134. <text class="field-label">详细描述</text>
  135. <text class="field-counter">{{postContent.length}}/500</text>
  136. </view>
  137. <textarea class="content-input" placeholder="请详细描述您的问题..." value="{{postContent}}" bindinput="onPostContentInput" maxlength="500" auto-height />
  138. </view>
  139. <view class="form-field">
  140. <view class="field-header">
  141. <text class="field-label">添加图片</text>
  142. <text class="field-hint">最多3张</text>
  143. </view>
  144. <view class="image-upload-area">
  145. <view class="uploaded-images" wx:if="{{postImages.length > 0}}">
  146. <block wx:for="{{postImages}}" wx:key="index">
  147. <view class="image-item">
  148. <image class="preview-image" src="{{item}}" mode="aspectFill"></image>
  149. <view class="image-remove" bindtap="removeImage" data-index="{{index}}">
  150. <text class="remove-icon">×</text>
  151. </view>
  152. </view>
  153. </block>
  154. </view>
  155. <view class="upload-btn" wx:if="{{postImages.length < 3}}" bindtap="chooseImage">
  156. <image class="camera-icon" src="/pagesA/images/jh.png" mode="aspectFit"></image>
  157. <text class="upload-text">添加图片</text>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <view class="modal-footer">
  163. <button class="cancel-btn" bindtap="hidePostModal">取消</button>
  164. <button class="submit-btn" bindtap="submitPost" disabled="{{!postTitle || !postContent || isSubmitting}}">
  165. {{isSubmitting ? '发布中...' : '发布'}}
  166. </button>
  167. </view>
  168. </view>
  169. </view>
  170. <!-- 首次加载遮罩 -->
  171. <view class="loading-overlay" wx:if="{{initialLoading && posts.length === 0}}">
  172. <view class="loading-content">
  173. <view class="spinner-large"></view>
  174. <text class="loading-tip">加载中...</text>
  175. </view>
  176. </view>
  177. </view>