2026
/
wxamp-ymtxUser
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
与牧同行-小程序用户端
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.
7 Commits
1 Branch
0 Tags
5.3 MiB
Tree: bc6767691a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'bc6767691a'
${ noResults }
wxamp-ymtxUser/pagesA/pages/expert/expert.wxml

247 lines
12 KiB
Raw Normal View History

专家列表，弹框详情，对话框
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <view class="expert-page">
  2. <!-- 顶部区域 -->
  3. <view class="header-section">
  4. <!-- 背景装饰 -->
  5. <view class="header-bg">
  6. <view class="bg-circle bg-circle-1"></view>
  7. <view class="bg-circle bg-circle-2"></view>
  8. <view class="bg-circle bg-circle-3"></view>
  9. </view>
  11. <!-- 标题内容 -->
  12. <view class="header-content">
  13. <view class="title-row">
  14. <text class="main-title">牲畜专家</text>
  15. <view class="expert-badge">
  16. <text class="badge-text">专业咨询</text>
  17. </view>
  18. </view>
  19. <text class="sub-title">连接行业专家 · 解决养殖难题</text>
  21. <!-- 统计信息 -->
  22. <view class="stats-row">
  23. <view class="stat-item">
  24. <text class="stat-number">{{allExperts.length}}</text>
  25. <text class="stat-label">总专家数</text>
  26. </view>
  27. <view class="stat-divider"></view>
  28. <view class="stat-item">
  29. <text class="stat-number">{{onlineCount}}</text>
  30. <text class="stat-label">在线专家</text>
  31. </view>
  32. <view class="stat-divider"></view>
  33. <view class="stat-item">
  34. <text class="stat-number">24h</text>
  35. <text class="stat-label">快速响应</text>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  41. <!-- 搜索和筛选区域 -->
  42. <view class="search-filter-section">
  43. <!-- 搜索框 -->
  44. <view class="search-wrapper">
  45. <view class="search-box">
  46. <image src="/pagesA/images/ss.png" class="search-icon"></image>
  47. <input type="text" placeholder="搜索专家姓名、擅长领域..." placeholder-class="placeholder" bindinput="onSearchInput" value="{{searchKeyword}}" />
  48. <view wx:if="{{searchKeyword}}" class="clear-btn" bindtap="clearSearch">
  49. <image src="/pagesA/images/ch.png" class="clear-icon"></image>
  50. </view>
  51. </view>
  52. </view>
  54. <!-- 筛选标签 -->
  55. <scroll-view class="filter-scroll" scroll-x>
  56. <view class="filter-tags">
  57. <view class="filter-tag {{currentFilter === 'all' ? 'active' : ''}}" bindtap="changeFilter" data-filter="all">
  58. <text>全部专家</text>
  59. <view class="tag-count">{{allExperts.length}}</view>
  60. </view>
  62. <view class="filter-tag {{currentFilter === 'online' ? 'active' : ''}}" bindtap="changeFilter" data-filter="online">
  63. <text>在线专家</text>
  64. <view class="tag-count online-count">{{onlineCount}}</view>
  65. </view>
  67. <view class="filter-tag {{currentFilter === 'offline' ? 'active' : ''}}" bindtap="changeFilter" data-filter="offline">
  68. <text>离线专家</text>
  69. <view class="tag-count">{{allExperts.length - onlineCount}}</view>
  70. </view>
  72. <view class="filter-tag {{currentFilter === 'senior' ? 'active' : ''}}" bindtap="changeFilter" data-filter="senior">
  73. <text>资深专家</text>
  75. </view>
  77. <view class="filter-tag {{currentFilter === 'veterinary' ? 'active' : ''}}" bindtap="changeFilter" data-filter="veterinary">
  78. <text>兽医专家</text>
  79. </view>
  80. </view>
  81. </scroll-view>
  82. </view>
  84. <!-- 专家列表 -->
  85. <view class="expert-list-section">
  86. <!-- 列表标题 -->
  87. <view class="list-header">
  88. <text class="list-title">专家列表</text>
  89. <text class="list-count">已为您找到 {{filteredExperts.length}} 位专家</text>
  90. </view>
  92. <!-- 专家卡片列表 -->
  93. <scroll-view class="expert-cards" scroll-y>
  94. <!-- 空状态 -->
  95. <view wx:if="{{filteredExperts.length === 0}}" class="empty-state">
  96. <image src="/pagesA/images/kzt.png" class="empty-image"></image>
  97. <text class="empty-title">暂无相关专家</text>
  98. <text class="empty-desc">换个关键词试试，或联系客服为您推荐</text>
  99. </view>
  101. <!-- 专家卡片 -->
  102. <view wx:else>
  103. <block wx:for="{{filteredExperts}}" wx:key="id">
  104. <view class="expert-card">
  105. <!-- 专家头像和在线状态 -->
  106. <view class="card-left">
  107. <view class="avatar-container">
  108. <image src="{{item.avatar}}" class="expert-avatar" mode="aspectFill"></image>
  109. <view class="online-badge {{item.online ? 'online' : 'offline'}}">
  110. {{item.online ? '在线' : '离线'}}
  111. </view>
  112. </view>
  113. </view>
  115. <!-- 专家信息 -->
  116. <view class="card-middle">
  117. <view class="name-title-row">
  118. <text class="expert-name">{{item.name}}</text>
  119. <text class="expert-title">{{item.title}}</text>
  120. </view>
  122. <!-- 专门的信息展示区域 -->
  123. <view class="info-display">
  124. <view class="info-item">
  125. <text class="info-label">擅长领域：</text>
  126. <text class="info-value">{{item.expertise}}</text>
  127. </view>
  129. <view class="info-item">
  130. <text class="info-label">从业经验：</text>
  131. <text class="info-value">{{item.experience}}年</text>
  132. </view>
  133. </view>
  134. </view>
  136. <!-- 点击按钮 -->
  137. <view class="contact-btn {{item.online ? 'online-btn' : 'offline-btn'}}" bindtap="showContactInfo" data-index="{{index}}">
  138. {{item.online ? '立即咨询' : '查看联系'}}
  139. </view>
  140. </view>
  141. </block>
  142. </view>
  143. </scroll-view>
  144. </view>
  146. <!-- 联系方式弹窗 -->
  147. <view wx:if="{{showContactDialog}}" class="dialog-overlay" bindtap="hideContactDialog">
  148. <view class="contact-modal" catchtap="stopPropagation">
  149. <!-- 可滚动的内容区域 -->
  150. <scroll-view class="modal-content" scroll-y>
  151. <!-- 模态框头部 -->
  152. <view class="modal-header">
  153. <view class="header-left">
  154. <image src="/pages/images/tx.png" class="modal-avatar"></image>
  155. <view class="expert-intro">
  156. <view class="modallei">
  157. <view class="modal-name">{{currentExpert.name}}</view>
  158. <view class="modal-title">{{currentExpert.title}}</view>
  159. </view>
  160. <view class="title-status">
  161. <view class="modal-status {{currentExpert.online ? 'online' : 'offline'}}">
  162. <view class="status-dot"></view>
  163. {{currentExpert.online ? '在线可咨询' : '暂时离线'}}
  164. </view>
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  170. <!-- 专家简介 -->
  171. <view class="expert-bio">
  172. <view class="bio-header">
  173. <text class="bio-title">专家简介</text>
  174. </view>
  175. <text class="bio-content">{{currentExpert.bio || '资深牲畜养殖专家，拥有丰富的实践经验和理论知识，擅长解决各类养殖难题'}}</text>
  176. </view>
  178. <!-- 联系方式 -->
  179. <view class="contact-section">
  180. <!-- 电话 -->
  181. <view class="contact-item phone-item">
  182. <view class="contact-icon-container">
  183. <image src="/pagesA/images/phone.png" class="contact-item-icon"></image>
  184. </view>
  185. <view class="contact-info">
  186. <text class="contact-label">联系电话</text>
  187. <text class="contact-value">{{currentExpert.phone}}</text>
  188. <text class="contact-desc">可直接拨打电话咨询</text>
  189. </view>
  190. <button class="action-btn call-btn" bindtap="makePhoneCall" data-phone="{{currentExpert.phone}}">
  191. 拨打
  192. </button>
  193. </view>
  195. <!-- 邮箱 -->
  196. <view class="contact-item email-item">
  197. <view class="contact-icon-container">
  198. <image src="/pagesA/images/dzyx.png" class="contact-item-icon"></image>
  199. </view>
  200. <view class="contact-info">
  201. <text class="contact-label">电子邮箱</text>
  202. <text class="contact-value">{{currentExpert.email}}</text>
  203. <text class="contact-desc">发送邮件可获得详细回复</text>
  204. </view>
  205. <button class="action-btn copy-btn" bindtap="copyEmail" data-email="{{currentExpert.email}}">
  206. 复制
  207. </button>
  208. </view>
  210. <!-- 工作单位 -->
  211. <view class="contact-item institution-item">
  212. <view class="contact-icon-container">
  213. <image src="/pagesA/images/gzdw.png" class="contact-item-icon"></image>
  214. </view>
  215. <view class="contact-info">
  216. <text class="contact-label">工作单位</text>
  217. <text class="contact-value">{{currentExpert.institution}}</text>
  218. <text class="contact-desc">专业机构认证专家</text>
  219. </view>
  220. <button class="action-btn address-btn" bindtap="viewLocation" data-address="{{currentExpert.address}}">
  221. 位置
  222. </button>
  223. </view>
  224. </view>
  226. <!-- 咨询时间 -->
  227. <view class="consultation-time">
  228. <view class="time-header">
  229. <text class="time-title">咨询时间建议</text>
  230. </view>
  231. <text class="time-content">{{currentExpert.online ? '专家当前在线，可直接联系咨询' : '专家当前不在线，建议在工作时间联系或发送邮件咨询'}}</text>
  232. <view class="time-slots">
  233. <text class="time-slot">工作日 9:00-18:00</text>
  234. <text class="time-slot">周末 10:00-16:00</text>
  235. </view>
  236. </view>
  237. </scroll-view>
  239. <!-- 操作按钮（固定在底部） -->
  240. <view class="modal-actions">
  241. <button class="secondary-btn" bindtap="hideContactDialog">稍后联系</button>
  242. <button class="primary-btn" bindtap="startConsultation">
  243. {{currentExpert.online ? '立即咨询' : '预约咨询'}}
  244. </button>
  245. </view>
  246. </view>
  247. </view>
  248. </view>