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.
234 lines
11 KiB
234 lines
11 KiB
<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-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>
|
|
|
|
<view class="filter-tag {{currentFilter === '在线' ? 'active' : ''}}" bindtap="changeFilter" data-filter="在线">
|
|
<text>在线专家</text>
|
|
|
|
</view>
|
|
|
|
<view class="filter-tag {{currentFilter === '离线' ? 'active' : ''}}" bindtap="changeFilter" data-filter="离线">
|
|
<text>离线专家</text>
|
|
|
|
</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>
|