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

174 lines
5.8 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <!-- pages/search/index.wxml -->
  2. <view class="container_zsl">
  3. <!-- 搜索区域 -->
  4. <view class="search-area">
  5. <view class="search-box">
  6. <view class="search-input-wrapper">
  7. <image src="/pagesB/images/sou.png" class="search-icon" />
  8. <input
  9. class="search-input"
  10. placeholder="请输入关键词搜索,如:猪瘟、饲养、疫苗..."
  11. placeholder-class="placeholder"
  12. value="{{searchValue}}"
  13. bindinput="onInputSearch"
  14. bindconfirm="onSearch"
  15. />
  16. <icon
  17. class="clear-icon"
  18. type="clear"
  19. size="16"
  20. wx:if="{{searchValue}}"
  21. bindtap="onClearSearch"
  22. />
  23. </view>
  24. </view>
  25. <!-- 分类筛选 -->
  26. <view class="category-filter">
  27. <view
  28. class="category-item {{activeCategory === item.value ? 'active' : ''}}"
  29. wx:for="{{categories}}"
  30. wx:key="value"
  31. data-category="{{item.value}}"
  32. bindtap="onFilterCategory"
  33. >
  34. {{item.name}}
  35. <view class="category-dot" wx:if="{{activeCategory === item.value}}"></view>
  36. </view>
  37. </view>
  38. </view>
  39. <!-- 加载状态 -->
  40. <view wx:if="{{isLoading}}" class="loading">
  41. <view class="spinner">
  42. <view class="spinner-item"></view>
  43. <view class="spinner-item"></view>
  44. <view class="spinner-item"></view>
  45. </view>
  46. <text class="loading-text">正在搜索...</text>
  47. </view>
  48. <!-- 搜索结果 -->
  49. <scroll-view
  50. wx:else
  51. class="result-list"
  52. scroll-y
  53. enable-back-to-top
  54. bindscrolltolower="onScrollToLower"
  55. >
  56. <!-- 搜索结果列表 -->
  57. <view wx:if="{{searchResults.length > 0}}">
  58. <view class="result-count">
  59. <text>找到 {{total}} 条相关结果</text>
  60. <text wx:if="{{currentCategory !== '全部'}}">(在{{currentCategory}}中搜索)</text>
  61. <text wx:if="{{currentSearchKey && currentCategory !== '全部'}}">关键词:"{{currentSearchKey}}"</text>
  62. </view>
  63. <view class="knowledge-list">
  64. <view
  65. class="knowledge-item"
  66. wx:for="{{searchResults}}"
  67. wx:key="id"
  68. data-value="{{item}}"
  69. bindtap="onViewDetail"
  70. >
  71. <view class="item-header">
  72. <view class="title-wrapper">
  73. <view class="item-title">{{item.title}}</view>
  74. <view class="item-category">{{item.categoryType}}</view>
  75. </view>
  76. </view>
  77. <view class="item-content">{{item.content}}</view>
  78. <view class="item-footer">
  79. <view class="tags">
  80. <view class="tag">
  81. {{item.keywords}}
  82. </view>
  83. </view>
  84. <view class="actions">
  85. <view class="date-info">
  86. <text class="date">{{item.publishTime}}</text>
  87. </view>
  88. <view
  89. class="copy-btn"
  90. data-content="{{item.content}}"
  91. bindtap="onCopyContent"
  92. >
  93. <text>复制</text>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. <!-- 加载更多提示 -->
  100. <view wx:if="{{hasMore}}" class="load-more">
  101. <view wx:if="{{!loadingMore}}" class="load-more-text">上拉加载更多</view>
  102. <view wx:else class="load-more-loading">
  103. <view class="loading-dots">
  104. <view class="dot"></view>
  105. <view class="dot"></view>
  106. <view class="dot"></view>
  107. </view>
  108. <text>加载中...</text>
  109. </view>
  110. </view>
  111. <!-- 没有更多数据提示 -->
  112. <view wx:if="{{!hasMore && searchResults.length > 0}}" class="no-more">
  113. <text>没有更多数据了</text>
  114. </view>
  115. </view>
  116. <!-- 无结果 -->
  117. <view class="empty-state" wx:if="{{!isLoading && searchResults.length==0}}">
  118. <text class="empty-text" wx:if="{{currentSearchKey}}">未找到"{{currentSearchKey}}"的相关信息</text>
  119. <text class="empty-text" wx:if="{{!currentSearchKey && currentCategory !== '全部'}}">当前分类"{{currentCategory}}"暂无数据</text>
  120. <text class="empty-text" wx:if="{{!currentSearchKey && currentCategory === '全部'}}">暂无数据</text>
  121. <view class="suggestions" wx:if="{{currentSearchKey}}">
  122. <view class="suggestion-item">
  123. <view class="suggestion-dot"></view>
  124. <text>检查关键词拼写</text>
  125. </view>
  126. <view class="suggestion-item">
  127. <view class="suggestion-dot"></view>
  128. <text>尝试其他相关词汇</text>
  129. </view>
  130. <view class="suggestion-item">
  131. <view class="suggestion-dot"></view>
  132. <text>咨询专业兽医</text>
  133. </view>
  134. </view>
  135. <view class="suggestions" wx:if="{{!currentSearchKey && currentCategory !== '全部'}}">
  136. <view class="suggestion-item">
  137. <view class="suggestion-dot"></view>
  138. <text>尝试切换到"全部"分类</text>
  139. </view>
  140. <view class="suggestion-item">
  141. <view class="suggestion-dot"></view>
  142. <text>在搜索框中输入关键词进行搜索</text>
  143. </view>
  144. </view>
  145. </view>
  146. </scroll-view>
  147. </view>
  148. <!-- 使用提示弹框 -->
  149. <view wx:if="{{showTipsModal}}" class="modal-mask" bindtap="hideTips">
  150. <view class="modal-content" catchtap="stopPropagation">
  151. <view class="modal-header">
  152. <image src="/pagesB/images/syts.png" class="modal-icon" />
  153. <text class="modal-title">使用提示</text>
  154. </view>
  155. <view class="modal-body">
  156. <view class="tip-item" wx:for="{{tip}}">
  157. <text class="tip-text">{{item}}</text>
  158. </view>
  159. </view>
  160. <view class="modal-footer">
  161. <button class="modal-confirm" bindtap="hideTips">我知道了</button>
  162. </view>
  163. </view>
  164. </view>