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>
export default {
  data() {
    return {
      selectedCategory: 'all',
      searchKeyword: '',
      
      // 分类选项
      categoryList: [
        { label: '全部', value: 'all' },
        { label: '种植技术', value: 'planting' },
        { label: '植物保护', value: 'protection' },
        { label: '土壤肥料', value: 'soil' },
        { label: '气象指导', value: 'weather' },
        { label: '病虫害防治', value: 'pest' },
        { label: '农机使用', value: 'machinery' }
      ],
      
      // 专家列表数据
      expertList: [
        {
          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
        }
      ]
    }
  },
  
  computed: {
    filteredExpertList() {
      let list = this.expertList;
      
      // 按分类筛选
      if (this.selectedCategory !== 'all') {
        list = list.filter(expert => expert.category === this.selectedCategory);
      }
      
      // 按搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.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;
    }
  },
  
  methods: {
    // 选择分类
    selectCategory(category) {
      this.selectedCategory = category;
    },
    
    // 搜索处理
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
    
    // 导航到专家详情页
    navigateToDetail(expert) {
      uni.navigateTo({
        url: `/pages/service/expert-detail?id=${expert.id}&name=${encodeURIComponent(expert.name)}`
      });
    },
    
    // 开始咨询
    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>