nongxiaoyu/pages/service/expert.vue

<template>
  <view class="expert-container">
    <!-- 分类筛选区域 -->
    <view class="category-section">
      <scroll-view class="category-scroll" scroll-x show-scrollbar="false">
        <view class="category-list">
          <view 
            class="category-item"
            :class="{ active: selectedCategory === item.value }"
            v-for="item in categoryList"
            :key="item.value"
            @click="selectCategory(item.value)"
          >
            <text class="category-text">{{ item.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
        <input 
          class="search-input" 
          placeholder="搜索专家姓名或擅长方向" 
          placeholder-style="color: #999;"
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 专家列表 -->
    <view class="expert-list-container">
      <view class="expert-list">
        <view 
          class="expert-card"
          v-for="expert in filteredExpertList"
          :key="expert.id"
          @click="navigateToDetail(expert)"
        >
          <view class="expert-info">
            <!-- 左侧头像和基本信息 -->
            <view class="expert-basic">
              <view class="avatar-container">
                <image class="expert-avatar" :src="expert.avatar" mode="aspectFill"></image>
                <view class="online-status" v-if="expert.isOnline"></view>
              </view>
              <view class="expert-details">
                <view class="expert-name">{{ expert.name }}</view>
                <view class="expert-title">{{ expert.title }}</view>
                <view class="expert-unit">{{ expert.unit }}</view>
              </view>
            </view>
            
            <!-- 右侧擅长领域和咨询按钮 -->
            <view class="expert-actions">
              <view class="expertise-tags">
                <view 
                  class="expertise-tag"
                  v-for="(tag, index) in expert.expertise.slice(0, 3)"
                  :key="index"
                >
                  {{ tag }}
                </view>
              </view>
              <view class="consult-btn" @click.stop="startConsult(expert)">
                <text class="consult-text">咨询</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedCategory = ref('all')
const searchKeyword = ref('')

// 分类选项
const categoryList = [
  { label: '全部', value: 'all' },
  { label: '种植技术', value: 'planting' },
  { label: '植物保护', value: 'protection' },
  { label: '土壤肥料', value: 'soil' },
  { label: '气象指导', value: 'weather' },
  { label: '病虫害防治', value: 'pest' },
  { label: '农机使用', value: 'machinery' }
]

// 专家列表数据
const expertList = ref([
  {
    id: 1,
    name: '张教授',
    title: '研究员',
    unit: '农业科学院',
    avatar: '/static/icons/professor.png',
    expertise: ['水稻种植', '病虫害防治', '土壤改良'],
    category: 'planting',
    isOnline: true,
    rating: 4.9,
    consultCount: 156
  },
  {
    id: 2,
    name: '李专家',
    title: '高级农艺师',
    unit: '植保站',
    avatar: '/static/icons/professor.png',
    expertise: ['植物保护', '农药使用', '生物防治'],
    category: 'protection',
    isOnline: false,
    rating: 4.8,
    consultCount: 203
  },
  {
    id: 3,
    name: '王老师',
    title: '副教授',
    unit: '农业大学',
    avatar: '/static/icons/professor.png',
    expertise: ['土壤检测', '施肥技术', '营养诊断'],
    category: 'soil',
    isOnline: true,
    rating: 4.7,
    consultCount: 89
  },
  {
    id: 4,
    name: '陈工程师',
    title: '农机专家',
    unit: '农机推广站',
    avatar: '/static/icons/professor.png',
    expertise: ['农机维修', '设备选型', '机械化作业'],
    category: 'machinery',
    isOnline: true,
    rating: 4.6,
    consultCount: 134
  },
  {
    id: 5,
    name: '刘博士',
    title: '气象专家',
    unit: '气象局',
    avatar: '/static/icons/professor.png',
    expertise: ['天气预报', '灾害预警', '农业气象'],
    category: 'weather',
    isOnline: false,
    rating: 4.8,
    consultCount: 178
  }
])

const filteredExpertList = computed(() => {
  let list = expertList.value
  
  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    list = list.filter(expert => expert.category === selectedCategory.value)
  }
  
  // 按搜索关键词筛选
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase()
    list = list.filter(expert => 
      expert.name.toLowerCase().includes(keyword) ||
      expert.expertise.some(tag => tag.toLowerCase().includes(keyword)) ||
      expert.title.toLowerCase().includes(keyword) ||
      expert.unit.toLowerCase().includes(keyword)
    )
  }
  
  return list
})

// 选择分类
const selectCategory = (category) => {
  selectedCategory.value = category
}

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

// 导航到专家详情页
const navigateToDetail = (expert) => {
  uni.navigateTo({
    url: `/pages/service/expert-detail?id=${expert.id}&name=${encodeURIComponent(expert.name)}`
  })
}

// 开始咨询
const startConsult = (expert) => {
  uni.navigateTo({
    url: `/pages/service/expert-chat?expertId=${expert.id}&expertName=${encodeURIComponent(expert.name)}`
  })
}
</script>

<style lang="scss">
.expert-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 分类筛选区域
.category-section {
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.category-scroll {
  white-space: nowrap;
}

.category-list {
  display: inline-flex;
  padding: 0 20rpx;
}

.category-item {
  flex-shrink: 0;
  padding: 24rpx 32rpx;
  margin-right: 8rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 32rpx;
  transition: all 0.2s ease;
  
  &.active {
    color: #4CAF50;
    background-color: #f0fdf4;
    font-weight: bold;
  }
}

// 搜索区域
.search-section {
  background-color: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 32rpx;
  padding: 16rpx 24rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  line-height: 1.5;
}

// 专家列表
.expert-list-container {
  padding: 20rpx;
}

.expert-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.expert-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.expert-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

// 左侧基本信息
.expert-basic {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}

.avatar-container {
  position: relative;
  margin-right: 20rpx;
}

.expert-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border: 3rpx solid #f0f0f0;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24rpx;
  height: 24rpx;
  background-color: #52c41a;
  border-radius: 12rpx;
  border: 3rpx solid #fff;
}

.expert-details {
  flex: 1;
}

.expert-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.expert-title {
  font-size: 26rpx;
  color: #4CAF50;
  margin-bottom: 4rpx;
}

.expert-unit {
  font-size: 24rpx;
  color: #999;
}

// 右侧操作区域
.expert-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16rpx;
}

.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  justify-content: flex-end;
}

.expertise-tag {
  padding: 6rpx 12rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 22rpx;
  border-radius: 12rpx;
  white-space: nowrap;
}

.consult-btn {
  padding: 12rpx 24rpx;
  background-color: #4CAF50;
  border-radius: 20rpx;
  transition: background-color 0.2s ease;
  
  &:active {
    background-color: #45a049;
  }
}

.consult-text {
  font-size: 26rpx;
  color: #fff;
  font-weight: bold;
}
</style>