nongxiaoyu/pages/dashboard/index.vue

<template>
  <view class="dashboard-container">
    <!-- 顶部 TopBar -->
    <view class="top-bar">
      <text class="greeting">农事有序，心里有数</text>
      <text class="top-sub-guide">从今天的田间环境开始</text>
    </view>

    <!-- 田间环境/天气区域 (降级为扁平状态块) -->
    <view class="environmental-status-block" @click="showWeatherDetail">
      <view class="status-main">
        <view class="main-info">
          <text class="main-text">{{ weatherData.infos.temperature }}° · {{ weatherData.infos.weather }}</text>
          <text class="fixed-subtitle">田间环境概览</text>
        </view>
      </view>

      <view class="metrics-row">
        <view class="metric-item">
          <text class="label">湿度</text>
          <text class="value">{{ weatherData.infos.humidity }}%</text>
        </view>
        <view class="metric-item">
          <text class="label">风力</text>
          <text class="value">{{ weatherData.infos.wind_power_v2 }}</text>
        </view>
        <view class="metric-item">
          <text class="label">气压</text>
          <text class="value">{{ weatherData.infos.air_pressure }} hPa</text>
        </view>
      </view>
    </view>

    <!-- AI 主卡 -->
    <view class="card ai-card">
      <view class="ai-header">
        <view class="ai-pill">AI 农小禹</view>
        <text class="ai-subtitle">今天安排从这里开始</text>
      </view>
      <view class="ai-body">
        <text class="ai-title">{{ aiQuestion.title }}</text>
        <text class="ai-desc">问问 AI 农小禹，给你具体建议</text>
      </view>
      <view class="ai-footer">
        <view class="ai-cta">
          <u-button 
            type="primary" 
            color="#2F7D32"
            shape="round"
            :custom-style="{
              height: '60rpx',
              width: 'auto',
              minWidth: '200rpx',
              borderRadius: '30rpx',
              padding: '0 32rpx',
              fontSize: '28rpx',
              fontWeight: '600',
              margin: '0'
            }"
            @click="goToAI"
          >
            立即提问
            <u-icon name="arrow-right" color="white" size="16" style="margin-left: 8rpx;"></u-icon>
          </u-button>
        </view>
      </view>
      <!-- 玻璃感噪点纹理 -->
      <view class="ai-texture"></view>
    </view>

    <!-- 农资精选 -->
    <view class="card">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农资精选</text>
        </view>
        <view class="more-btn" @click="goToMall">
          <text>去农资</text>
          <u-icon name="arrow-right" color="#3BB44A" size="14"></u-icon>
        </view>
      </view>
      <view class="products-grid">
        <view 
          class="product-card" 
          v-for="(product, index) in products" 
          :key="index"
          @click="showProductDetail(product)"
        >
          <image 
            :src="product.image" 
            mode="aspectFill" 
            class="product-image"
            lazy-load
          ></image>
          <view class="product-info">
            <text class="product-title">{{ product.title }}</text>
            <text class="product-desc">{{ product.desc }}</text>
            <view class="price-row">
              <text class="price">¥{{ product.price }}</text>
              <text class="unit">/{{ product.unit }}</text>
            </view>
            <u-button 
              type="primary" 
              color="linear-gradient(135deg, #3BB44A, #66CC6A)"
              size="mini"
              shape="round"
            >
              了解更多
            </u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 农技推荐 -->
    <view class="card">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农技推荐</text>
        </view>
        <view class="more-btn" @click="goToKnowledge">
          <text>更多</text>
          <u-icon name="arrow-right" color="#3BB44A" size="14"></u-icon>
        </view>
      </view>
      <view class="articles-list">
        <view 
          class="article-card" 
          v-for="(article, index) in articles" 
          :key="index"
          @click="showArticleDetail(article)"
        >
          <view class="article-image-wrapper">
            <image 
              :src="article.image" 
              mode="aspectFill" 
              class="article-image"
              lazy-load
            ></image>
            <view class="article-tag">文章</view>
          </view>
          <view class="article-info">
            <text class="article-title">{{ article.title }}</text>
            <text class="article-source">{{ article.source }}</text>
            <view class="article-stats">
              <u-icon name="eye" color="#999" size="12"></u-icon>
              <text class="read-count">{{ article.readCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 天气详情弹窗 -->
    <u-popup 
      :show="showWeatherPopup" 
      mode="bottom" 
      round="20"
      @close="showWeatherPopup = false"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">今日农事详情</text>
          <u-icon name="close" color="#999" size="20" @click="showWeatherPopup = false"></u-icon>
        </view>
        <view class="weather-detail">
          <view class="detail-item">
            <text class="detail-label">天气状况</text>
            <text class="detail-value">{{ weatherData.weatherText }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">当前温度</text>
            <text class="detail-value">{{ weatherData.tempNow }}°C</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">湿度</text>
            <text class="detail-value">{{ weatherData.humidity }}%</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">风力</text>
            <text class="detail-value">{{ weatherData.windScale }}级</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">降水量</text>
            <text class="detail-value">{{ weatherData.precipMm }}mm</text>
          </view>
          <view class="advice-detail">
            <text class="advice-label">今日建议：</text>
            <text class="advice-content">{{ weatherData.adviceText }}</text>
          </view>
        </view>
        <u-button 
          type="primary" 
          color="linear-gradient(135deg, #3BB44A, #66CC6A)"
          shape="round"
          @click="askAIAboutWeather"
        >
          去问 AI
        </u-button>
      </view>
    </u-popup>

    <!-- 文章详情弹窗 -->
    <u-popup 
      :show="showArticlePopup" 
      mode="bottom" 
      round="20"
      @close="showArticlePopup = false"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">文章详情</text>
          <u-icon name="close" color="#999" size="20" @click="showArticlePopup = false"></u-icon>
        </view>
        <view class="article-detail" v-if="currentArticle">
          <text class="article-detail-title">{{ currentArticle.title }}</text>
          <text class="article-detail-time">{{ currentArticle.time }}</text>
          <view class="article-detail-content">
            <text class="content-paragraph">{{ currentArticle.content }}</text>
            <text class="content-subtitle">主要要点：</text>
            <view class="content-list">
              <text class="list-item" v-for="(item, index) in currentArticle.points" :key="index">
                • {{ item }}
              </text>
            </view>
          </view>
        </view>
        <u-button 
          type="primary" 
          color="linear-gradient(135deg, #3BB44A, #66CC6A)"
          shape="round"
          @click="askAIAboutArticle"
        >
          去问 AI
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

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

// Mock 数据
const weatherData = reactive({
  infos: {
    weather: "晴朗",
    temperature: 28,
    humidity: 65,
    wind_power_v2: "3级",
    air_pressure: 1008
  },
  update_time: "10:20" // 暗桩：保留字段供后续对接
})

const aiQuestions = [
  {
    title: '叶片发黄该从哪查？',
    recommend: '最近阴雨天多，管理要点？'
  },
  {
    title: '水稻分蘖期怎么管理？',
    recommend: '如何提高分蘖成穗率？'
  },
  {
    title: '玉米倒伏了怎么办？',
    recommend: '预防玉米倒伏的措施？'
  }
]

const aiQuestion = ref(aiQuestions[0])

const products = ref([
  {
    title: '优质玉米种子',
    desc: '高产抗病品种',
    price: '68',
    unit: '袋',
    image: '/static/images/products/corn-seeds-new.jpg'
  },
  {
    title: '有机肥料',
    desc: '纯天然环保',
    price: '128',
    unit: '袋',
    image: '/static/images/products/organic-fertilizer-new.jpg'
  },
  {
    title: '杀虫剂',
    desc: '广谱高效',
    price: '45',
    unit: '瓶',
    image: '/static/images/products/insecticide.jpg'
  },
  {
    title: '农用地膜',
    desc: '保湿保温',
    price: '89',
    unit: '卷',
    image: '/static/images/products/plastic-film.jpg'
  }
])

const articles = ref([
  {
    title: '春季水稻种植技术要点',
    source: '农技知识',
    readCount: '1.2k',
    image: '/static/images/rice-farming/rice-field1.jpg',
    time: '2024-03-15',
    content: '春季是水稻种植的关键时期，需要掌握以下技术要点：首先，选择适宜的品种，根据当地气候条件选择抗病性强、产量高的品种。其次，做好秧田准备，确保土壤肥力充足，排水良好。',
    points: [
      '选择适宜品种，抗病高产',
      '秧田准备，土壤肥力充足',
      '合理密植，通风透光',
      '水肥管理，分蘖期关键'
    ]
  },
  {
    title: '玉米病虫害防治指南',
    source: '植保技术',
    readCount: '856',
    image: '/static/images/rice-farming/rice-field2.jpg',
    time: '2024-03-14',
    content: '玉米病虫害防治是确保产量的重要环节。常见的病虫害包括玉米螟、蚜虫、叶斑病等。防治应遵循"预防为主，综合防治"的原则。',
    points: [
      '定期巡查，早发现早处理',
      '生物防治与化学防治结合',
      '合理轮作，减少病虫害发生',
      '选择抗病品种，提高抗性'
    ]
  },
  {
    title: '现代农业机械化作业规范',
    source: '农机管理',
    readCount: '2.1k',
    image: '/static/images/rice-farming/rice-field3.jpg',
    time: '2024-03-13',
    content: '提升农业机械化作业水平是现代农业发展的必然要求。本规范涵盖了整地、播种、植保及收获等环节的机械化操作标准。',
    points: [
      '机具调试，状态良好',
      '标准化作业，保证质量',
      '安全生产，预防事故',
      '效率优化，降低成本'
    ]
  },
  {
    title: '土壤肥力提升与改良方案',
    source: '土肥管理',
    readCount: '1.5k',
    image: '/static/images/rice-farming/rice-field4.jpg',
    time: '2024-03-12',
    content: '健康的土壤是丰收的基础。通过增施有机肥、秸秆还田以及科学轮作，可以有效改善土壤结构，提升肥力水平。',
    points: [
      '测土配方，科学施肥',
      '增加有机质，改良结构',
      '酸碱度调理，平衡养分',
      '生态修复，持久肥力'
    ]
  }
])

// 弹窗控制
const showWeatherPopup = ref(false)
const showArticlePopup = ref(false)
const currentArticle = ref(null)

// 方法
const showTip = () => {
  uni.showToast({
    title: '建议先看今日农事，再去问 AI',
    icon: 'none',
    duration: 2000
  })
}

const showWeatherDetail = () => {
  showWeatherPopup.value = true
}

const showArticleDetail = (article) => {
  currentArticle.value = article
  showArticlePopup.value = true
}

const showProductDetail = (product) => {
  uni.showToast({
    title: '后续接入商品详情',
    icon: 'none',
    duration: 2000
  })
}

const goToAI = () => {
  uni.navigateTo({
    url: '/pages/knowledge/ai-chat/index'
  })
}


const goToMall = () => {
  uni.switchTab({
    url: '/pages/service/mall'
  })
}

const goToKnowledge = () => {
  uni.switchTab({
    url: '/pages/knowledge/index'
  })
}

const askAIAboutWeather = () => {
  showWeatherPopup.value = false
  uni.navigateTo({
    url: '/pages/knowledge/ai-chat/index?question=' + encodeURIComponent('今日天气适宜哪些农事活动？')
  })
}

const askAIAboutArticle = () => {
  showArticlePopup.value = false
  if (currentArticle.value) {
    uni.navigateTo({
      url: '/pages/knowledge/ai-chat/index?question=' + encodeURIComponent('关于' + currentArticle.value.title + '有什么建议？')
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 24rpx;
  background-color: #F6FDF9;
  min-height: 100vh;
}

// 顶部 TopBar
.top-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 12rpx;
  padding: 0 8rpx;

  .greeting {
    font-size: 32rpx;
    font-weight: 600;
    color: #1A3026;
    letter-spacing: 1rpx;
    line-height: 1.4;
  }

  .top-sub-guide {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 4rpx;
  }
}

// Card 基础样式（复用旧首页）
.card {
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04), 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
  margin-bottom: 24rpx;
  overflow: hidden;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 28rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

    .title-section {
      display: flex;
      align-items: center;

      .title-line {
        width: 4rpx;
        height: 28rpx;
        border-radius: 0;
        background: linear-gradient(180deg, #3BB44A, #66CC6A);
        margin-right: 16rpx;
      }

      .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }

    .tag {
      background: linear-gradient(135deg, #3BB44A, #66CC6A);
      color: white;
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
    }

    .more-btn {
      display: flex;
      align-items: center;
      color: #3BB44A;
      font-size: 24rpx;

      text {
        margin-right: 6rpx;
      }
    }
  }
}

// 田间环境状态块 (降级为扁平化背景块)
.environmental-status-block {
  position: relative;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4FAF7 100%);
  border: 1rpx solid rgba(59, 180, 74, 0.08);
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  overflow: hidden;

  .status-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20rpx;

    .main-info {
      display: flex;
      flex-direction: column;

      .main-text {
        font-size: 48rpx;
        font-weight: 800;
        color: #1A3026;
        line-height: 1;
      }

      .fixed-subtitle {
        font-size: 24rpx;
        color: #7A9086;
        margin-top: 8rpx;
      }
    }
  }

  .metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16rpx;
    border-top: 1rpx solid rgba(0, 0, 0, 0.03);

    .metric-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8rpx;

      .label {
        font-size: 22rpx;
        color: #8EAC9D;
      }

      .value {
        font-size: 24rpx;
        font-weight: 600;
        color: #2D4035;
      }
    }
  }
}

// AI 主卡
.ai-card {
  position: relative;
  background: linear-gradient(135deg, rgba(59, 180, 74, 0.18), rgba(102, 204, 106, 0.10));
  border: 1rpx solid rgba(59, 180, 74, 0.08);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04), 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
  margin-bottom: 24rpx;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:active {
    transform: scale(0.99);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  }

  // 多层背景光斑效果 (底层氛围)
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 85% 25%, rgba(59, 180, 74, 0.22), transparent 60%),
      radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.14), transparent 55%);
    pointer-events: none;
    z-index: 1;
  }

  // 抽象 AI 设计母题层 (右侧增强设计感)
  &::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 80%;
    height: 140%;
    background: 
      radial-gradient(circle at 75% 35%, rgba(59, 180, 74, 0.06) 0%, transparent 45%),
      radial-gradient(circle at 85% 65%, rgba(76, 175, 80, 0.04) 0%, transparent 40%),
      radial-gradient(circle at 60% 85%, rgba(59, 180, 74, 0.03) 0%, transparent 50%);
    filter: blur(30rpx);
    pointer-events: none;
    z-index: 2;
  }

  .ai-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2rpx,
      rgba(255, 255, 255, 0.03) 2rpx,
      rgba(255, 255, 255, 0.03) 4rpx
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
  }

  .ai-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 32rpx 28rpx 16rpx;

    .ai-pill {
      background: #FFFFFF;
      color: #3BB44A;
      font-size: 24rpx;
      font-weight: 600;
      padding: 8rpx 24rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
      margin-bottom: 0;
    }

    .ai-subtitle {
      font-size: 28rpx;
      color: #5C6A70;
      font-weight: 500;
    }
  }

  .ai-body {
    position: relative;
    z-index: 3;
    padding: 12rpx 28rpx 20rpx;

    .ai-title {
      font-size: 40rpx;
      font-weight: 700;
      color: #2C3E50;
      line-height: 1.3;
      margin-bottom: 12rpx;
      display: block;
    }

    .ai-desc {
      font-size: 26rpx;
      color: rgba(44, 62, 80, 0.6);
      line-height: 1.4;
      display: block;
    }
  }

  .ai-footer {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    padding: 16rpx 28rpx 24rpx;

    .ai-cta {
      display: flex;
      align-items: center;
    }
  }
}

// 农资精选
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  padding: 16rpx;

  .product-card {
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);

    .product-image {
      width: 100%;
      height: 160rpx;
      background: #f5f5f5;
    }

    .product-info {
      padding: 16rpx;

      .product-title {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 6rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .product-desc {
        font-size: 22rpx;
        color: #8C9396;
        margin-bottom: 12rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price-row {
        display: flex;
        align-items: baseline;
        margin-bottom: 12rpx;

        .price {
          font-size: 32rpx;
          font-weight: 700;
          color: #3BB44A;
        }

        .unit {
          font-size: 22rpx;
          color: #8C9396;
          margin-left: 4rpx;
        }
      }
    }
  }
}

// 农技推荐
.articles-list {
  padding: 16rpx;

  .article-card {
    display: flex;
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 16rpx;

    .article-image-wrapper {
      position: relative;
      width: 200rpx;
      height: 140rpx;
      flex-shrink: 0;

      .article-image {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
      }

      .article-tag {
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        background: #2196F3;
        color: white;
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        border-radius: 6rpx;
      }
    }

    .article-info {
      flex: 1;
      padding: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .article-title {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 6rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .article-source {
        font-size: 22rpx;
        color: #8C9396;
        margin-bottom: 8rpx;
      }

      .article-stats {
        display: flex;
        align-items: center;

        .read-count {
          font-size: 22rpx;
          color: #999;
          margin-left: 6rpx;
        }
      }
    }
  }
}

// 弹窗样式
.popup-content {
  padding: 32rpx;
  max-height: 80vh;
  overflow-y: auto;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #2C3E50;
    }
  }

  .weather-detail {
    margin-bottom: 32rpx;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);

      .detail-label {
        font-size: 26rpx;
        color: #8C9396;
      }

      .detail-value {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }

    .advice-detail {
      margin-top: 24rpx;
      padding: 20rpx;
      background: rgba(59, 180, 74, 0.05);
      border-radius: 16rpx;

      .advice-label {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 8rpx;
      }

      .advice-content {
        font-size: 26rpx;
        color: #2C3E50;
        line-height: 1.4;
      }
    }
  }

  .article-detail {
    margin-bottom: 32rpx;

    .article-detail-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #2C3E50;
      margin-bottom: 12rpx;
    }

    .article-detail-time {
      font-size: 22rpx;
      color: #8C9396;
      margin-bottom: 24rpx;
    }

    .article-detail-content {
      .content-paragraph {
        font-size: 26rpx;
        color: #2C3E50;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }

      .content-subtitle {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 12rpx;
      }

      .content-list {
        .list-item {
          font-size: 26rpx;
          color: #2C3E50;
          line-height: 1.5;
          margin-bottom: 8rpx;
        }
      }
    }
  }
}
</style>