nongxiaoyu/pages/service/expert-detail.vue

<template>
  <view class="expert-detail-container">
    <!-- 专家基本信息卡片 -->
    <view class="expert-info-card">
      <view class="expert-header">
        <view class="avatar-section">
          <view class="avatar-container">
            <image class="expert-avatar" :src="expertInfo.avatar" mode="aspectFill"></image>
            <view class="online-status" v-if="expertInfo.isOnline"></view>
          </view>
        </view>
        
        <view class="basic-info">
          <view class="expert-name">{{ expertInfo.name }}</view>
          <view class="expert-title">{{ expertInfo.title }}</view>
          <view class="expert-unit">{{ expertInfo.unit }}</view>
          
          <view class="stats-row">
            <view class="stat-item">
              <text class="stat-number">{{ expertInfo.rating }}</text>
              <text class="stat-label">评分</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">{{ expertInfo.consultCount }}</text>
              <text class="stat-label">咨询数</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">{{ expertInfo.experience }}</text>
              <text class="stat-label">从业年限</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 擅长领域 -->
    <view class="expertise-card">
      <view class="card-title">
        <text>擅长领域</text>
      </view>
      <view class="expertise-tags">
        <view 
          class="expertise-tag"
          v-for="(tag, index) in expertInfo.expertise"
          :key="index"
        >
          {{ tag }}
        </view>
      </view>
    </view>

    <!-- 专家简介 -->
    <view class="introduction-card">
      <view class="card-title">
        <text>专家简介</text>
      </view>
      <view class="introduction-content">
        <text class="introduction-text">{{ expertInfo.introduction }}</text>
      </view>
    </view>

    <!-- 服务时间 -->
    <view class="service-time-card">
      <view class="card-title">
        <text>服务时间</text>
      </view>
      <view class="service-time-content">
        <view class="time-item">
          <text class="time-label">工作日：</text>
          <text class="time-value">{{ expertInfo.serviceTime.weekday }}</text>
        </view>
        <view class="time-item">
          <text class="time-label">周末：</text>
          <text class="time-value">{{ expertInfo.serviceTime.weekend }}</text>
        </view>
      </view>
    </view>

    <!-- 底部咨询按钮 -->
    <view class="bottom-action-bar">
      <view class="action-btn" @click="startConsult">
        <text class="btn-text">在线咨询</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      expertId: '',
      expertInfo: {
        id: '',
        name: '',
        title: '',
        unit: '',
        avatar: '',
        expertise: [],
        introduction: '',
        isOnline: false,
        rating: 0,
        consultCount: 0,
        experience: 0,
        serviceTime: {
          weekday: '',
          weekend: ''
        }
      }
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.expertId = options.id;
      this.loadExpertDetail();
    }
  },
  
  methods: {
    // 加载专家详情
    loadExpertDetail() {
      uni.showLoading({ title: '加载中...' });
      
      // 模拟API调用，实际应用中需要根据expertId从API获取数据
      setTimeout(() => {
                 const mockData = {
           id: this.expertId,
           name: '张教授',
           title: '研究员',
           unit: '农业科学院植物保护研究所',
           avatar: '/static/icons/professor.png',
           expertise: ['水稻种植', '病虫害防治', '土壤改良', '绿色防控', '有机农业'],
          introduction: '农业技术推广研究员，从事农作物病虫害防治和绿色种植技术研究20余年。主持完成国家和省部级科研项目10余项，发表学术论文50多篇，获得农业技术推广奖3项。擅长水稻、小麦等主要粮食作物的病虫害综合防治，在生物防治、绿色防控等方面有丰富的实践经验。',
          isOnline: true,
          rating: 4.9,
          consultCount: 156,
          experience: 20,
          serviceTime: {
            weekday: '09:00-18:00',
            weekend: '09:00-17:00'
          }
        };
        
        this.expertInfo = mockData;
        
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: `${mockData.name} - 专家详情`
        });
        
        uni.hideLoading();
      }, 1000);
    },
    
    // 开始咨询
    startConsult() {
      uni.navigateTo({
        url: `/pages/service/expert-chat?expertId=${this.expertInfo.id}&expertName=${encodeURIComponent(this.expertInfo.name)}`
      });
    }
  }
}
</script>

<style lang="scss">
.expert-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

// 专家信息卡片
.expert-info-card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.expert-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.avatar-section {
  flex-shrink: 0;
}

.avatar-container {
  position: relative;
}

.expert-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #f0f0f0;
}

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

.basic-info {
  flex: 1;
}

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

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

.expert-unit {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.stats-row {
  display: flex;
  gap: 24rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #4CAF50;
}

.stat-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}

// 通用卡片样式
.expertise-card,
.introduction-card,
.service-time-card {
  margin: 0 20rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

// 擅长领域
.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.expertise-tag {
  padding: 8rpx 16rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 26rpx;
  border-radius: 16rpx;
  white-space: nowrap;
}

// 专家简介
.introduction-content {
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  border-left: 4rpx solid #4CAF50;
}

.introduction-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

// 服务时间
.service-time-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.time-item {
  display: flex;
  align-items: center;
}

.time-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
}

.time-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

// 底部操作按钮
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  width: 100%;
  height: 88rpx;
  background-color: #4CAF50;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  
  &:active {
    background-color: #45a049;
  }
}

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