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.
|
|
<view class="expert-page"> <!-- 顶部区域 --> <view class="header-section"> <!-- 背景装饰 --> <view class="header-bg"> <view class="bg-circle bg-circle-1"></view> <view class="bg-circle bg-circle-2"></view> <view class="bg-circle bg-circle-3"></view> </view>
<!-- 标题内容 --> <view class="header-content"> <view class="title-row"> <text class="main-title">牲畜专家</text> <view class="expert-badge"> <text class="badge-text">专业咨询</text> </view> </view> <text class="sub-title">连接行业专家 · 解决养殖难题</text>
<!-- 统计信息 --> <view class="stats-row"> <view class="stat-item"> <text class="stat-number">{{allExperts.length}}</text> <text class="stat-label">总专家数</text> </view> <view class="stat-divider"></view> <view class="stat-item"> <text class="stat-number">{{onlineCount}}</text> <text class="stat-label">在线专家</text> </view> <view class="stat-divider"></view> <view class="stat-item"> <text class="stat-number">24h</text> <text class="stat-label">快速响应</text> </view> </view> </view> </view>
<!-- 搜索和筛选区域 --> <view class="search-filter-section"> <!-- 搜索框 --> <view class="search-wrapper"> <view class="search-box"> <image src="/pagesA/images/ss.png" class="search-icon"></image> <input type="text" placeholder="搜索专家姓名、擅长领域..." placeholder-class="placeholder" bindinput="onSearchInput" value="{{searchKeyword}}" /> <view wx:if="{{searchKeyword}}" class="clear-btn" bindtap="clearSearch"> <image src="/pagesA/images/ch.png" class="clear-icon"></image> </view> </view> </view>
<!-- 筛选标签 --> <scroll-view class="filter-scroll" scroll-x> <view class="filter-tags"> <view class="filter-tag {{currentFilter === '全部' ? 'active' : ''}}" bindtap="changeFilter" data-filter="全部"> <text>全部专家</text> <view class="tag-count">{{allExperts.length}}</view> </view>
<view class="filter-tag {{currentFilter === '在线' ? 'active' : ''}}" bindtap="changeFilter" data-filter="在线"> <text>在线专家</text> <view class="tag-count online-count">{{onlineCount}}</view> </view>
<view class="filter-tag {{currentFilter === '离线' ? 'active' : ''}}" bindtap="changeFilter" data-filter="离线"> <text>离线专家</text> <view class="tag-count">{{allExperts.length - onlineCount}}</view> </view> </view> </scroll-view> </view>
<!-- 专家列表 --> <view class="expert-list-section"> <!-- 列表标题 --> <view class="list-header"> <text class="list-title">专家列表</text> <text class="list-count">已为您找到 {{allExperts.length}} 位专家</text> </view>
<!-- 专家卡片列表 --> <scroll-view class="expert-cards" scroll-y> <!-- 空状态 --> <view wx:if="{{allExperts.length === 0}}" class="empty-state"> <image src="/pagesA/images/kzt.png" class="empty-image"></image> <text class="empty-title">暂无相关专家</text> </view>
<!-- 专家卡片 --> <view wx:else> <block wx:for="{{allExperts}}" wx:key="id"> <view class="expert-card"> <!-- 专家头像和在线状态 --> <view class="card-left"> <view class="avatar-container"> <image src="{{baseUr+item.avatar}}" class="expert-avatar" mode="aspectFill"></image> <view class="online-badge {{item.isOnline=='在线' ? 'online' : 'offline'}}"> {{item.isOnline}} </view> </view> </view>
<!-- 专家信息 --> <view class="card-middle"> <view class="name-title-row"> <text class="expert-name">{{item.realName}}</text> <text class="expert-title">{{item.expert}}</text> </view>
<!-- 专门的信息展示区域 --> <view class="info-display"> <view class="info-item"> <text class="info-label">擅长领域：</text> <text class="info-value">{{item.expertiseArea}}</text> </view>
<view class="info-item"> <text class="info-label">从业经验：</text> <text class="info-value">{{item.workExperience}}</text> </view> </view> </view>
<!-- 点击按钮 --> <view class="contact-btn {{item.isOnline=='在线' ? 'online-btn' : 'offline-btn'}}" bindtap="showContactInfo" data-index="{{index}}"> {{item.isOnline=='在线' ? '立即咨询' : '查看联系'}} </view> </view> </block> </view> </scroll-view> </view>
<!-- 联系方式弹窗 --> <view wx:if="{{showContactDialog}}" class="dialog-overlay" bindtap="hideContactDialog"> <view class="contact-modal" catchtap="stopPropagation"> <!-- 可滚动的内容区域 --> <scroll-view class="modal-content" scroll-y> <!-- 模态框头部 --> <view class="modal-header"> <view class="header-left"> <image src="/pages/images/tx.png" class="modal-avatar"></image> <view class="expert-intro"> <view class="modallei"> <view class="modal-name">{{currentExpert.realName}}</view> <view class="modal-title">{{currentExpert.expert}}</view> </view> <view class="title-status"> <view class="modal-status {{currentExpert.isOnline=='在线' ? 'online' : 'offline'}}"> <view class="status-dot"></view> {{currentExpert.isOnline=='在线' ? '在线可咨询' : '暂时离线'}} </view> </view> </view> </view> </view>
<!-- 专家简介 --> <view class="expert-bio"> <view class="bio-header"> <text class="bio-title">专家简介</text> </view> <text class="bio-content">{{currentExpert.bio || '资深牲畜养殖专家，拥有丰富的实践经验和理论知识，擅长解决各类养殖难题'}}</text> </view>
<!-- 联系方式 --> <view class="contact-section"> <!-- 电话 --> <view class="contact-item phone-item"> <view class="contact-icon-container"> <image src="/pagesA/images/phone.png" class="contact-item-icon"></image> </view> <view class="contact-info"> <text class="contact-label">联系电话</text> <text class="contact-value">{{currentExpert.iphone}}</text> <text class="contact-desc">可直接拨打电话咨询</text> </view> <button class="action-btn call-btn" bindtap="makePhoneCall" data-phone="{{currentExpert.iphone}}"> 拨打 </button> </view>
<!-- 邮箱 --> <view class="contact-item email-item"> <view class="contact-icon-container"> <image src="/pagesA/images/dzyx.png" class="contact-item-icon"></image> </view> <view class="contact-info"> <text class="contact-label">电子邮箱</text> <text class="contact-value">{{currentExpert.email}}</text> <text class="contact-desc">发送邮件可获得详细回复</text> </view> <button class="action-btn copy-btn" bindtap="copyEmail" data-email="{{currentExpert.email}}"> 复制 </button> </view>
<!-- 工作单位 --> <view class="contact-item institution-item"> <view class="contact-icon-container"> <image src="/pagesA/images/gzdw.png" class="contact-item-icon"></image> </view> <view class="contact-info"> <text class="contact-label">工作单位</text> <text class="contact-value">{{currentExpert.institution}}</text> <text class="contact-desc">专业机构认证专家</text> </view> <button class="action-btn address-btn" bindtap="viewLocation" data-address="{{currentExpert.address}}"> 位置 </button> </view> </view>
<!-- 咨询时间 --> <view class="consultation-time"> <view class="time-header"> <text class="time-title">咨询时间建议</text> </view> <text class="time-content">{{currentExpert.isOnline=='在线' ? '专家当前在线，可直接联系咨询' : '专家当前不在线，建议在工作时间联系或发送邮件咨询'}}</text> <view class="time-slots"> <text class="time-slot">工作日 9:00-18:00</text> <text class="time-slot">周末 10:00-16:00</text> </view> </view> </scroll-view>
<!-- 操作按钮（固定在底部） --> <view class="modal-actions"> <button class="secondary-btn" bindtap="hideContactDialog">稍后联系</button> <button class="primary-btn" bindtap="startConsultation"> {{currentExpert.isOnline=='在线' ? '立即咨询' : '预约咨询'}} </button> </view> </view> </view></view>
|
