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 setup>
import { ref, onMounted } from 'vue'

const expertId = ref('')
const expertInfo = ref({
  id: '',
  name: '',
  title: '',
  unit: '',
  avatar: '',
  expertise: [],
  introduction: '',
  isOnline: false,
  rating: 0,
  consultCount: 0,
  experience: 0,
  serviceTime: {
    weekday: '',
    weekend: ''
  }
})

// 页面加载
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.id) {
    expertId.value = options.id
    loadExpertDetail()
  }
})

// 加载专家详情
const loadExpertDetail = () => {
  uni.showLoading({ title: '加载中...' })
  
  // 模拟API调用，实际应用中需要根据expertId从API获取数据
  setTimeout(() => {
    const mockData = {
      id: expertId.value,
      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'
      }
    }
    
    expertInfo.value = mockData
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: `${mockData.name} - 专家详情`
    })
    
    uni.hideLoading()
  }, 1000)
}

// 开始咨询
const startConsult = () => {
  uni.navigateTo({
    url: `/pages/service/expert-chat?expertId=${expertInfo.value.id}&expertName=${encodeURIComponent(expertInfo.value.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>