feat: 百科页面

pages/wiki/detail/index.js

@@ -1,5 +1,5 @@
 // pages/wiki/detail/index.js
-import { MOCK_WIKI } from '../../../utils/mockData';
+import request from '../../../utils/request';
 
 Page({
     data: {
@@ -15,38 +15,105 @@ Page({
     },
 
     loadPlantDetail(id) {
-        // Find plant in MOCK_WIKI
-        const plant = MOCK_WIKI.find(p => p.id === id);
-        if (plant) {
+        // Fetch detail via wiki/page with specific ID
+        // Since there's no /wiki/detail endpoint, we use /wiki/page to get it
+        request.post('/wiki/page', {
+            current: 1,
+            pageSize: 1,
+            id: id
+        }).then(res => {
+            const data = res || {};
+            const list = data.list || [];
+            const item = list.length > 0 ? list[0] : null;
+
+            if (!item) {
+                wx.showToast({ title: '未找到该植物', icon: 'none' });
+                return;
+            }
+
             // Set Page Title
-            wx.setNavigationBarTitle({
-                title: plant.name
-            });
+            wx.setNavigationBarTitle({ title: item.name });
 
-            // Prepare swiper list
-            const swiperList = (plant.images || []).map(img => {
-                return (img.indexOf('http') === 0 || img.indexOf('wxfile') === 0) ? img : `/assets/${img}`;
-            });
+            // Prepare swiper list from imgList
+            const swiperList = (item.imgList || []).map(img => img.url);
 
-            // Ensure some default values if missing
-            const enrichedPlant = {
-                ...plant,
-                light: plant.light || { level: '中等', description: '适合明亮的散射光' },
-                water: plant.water || { frequency: '每周1-2次', description: '保持土壤微润' },
-                temperature: plant.temperature || '15-28℃',
-                humidity: plant.humidity || '50%-70%',
-                soil: plant.soil || '疏松透气的营养土',
-                fertilizer: plant.fertilizer || '生长季每月施一次薄肥',
-                toxicity: plant.toxicity || '无毒',
-                commonPests: plant.commonPests || ['红蜘蛛'],
-                careTips: plant.careTips || ['注意通风', '定期清洁叶面']
+            // Parse pest/disease list
+            const commonPests = item.pestsDiseases
+                ? item.pestsDiseases.split(',').map(s => s.trim()).filter(Boolean)
+                : [];
+
+            // Parse aliases
+            const aliasesList = item.aliases
+                ? item.aliases.split(/[,，、]/).map(s => s.trim()).filter(Boolean)
+                : [];
+
+            // Parse reproduction methods
+            const reproductionList = item.reproductionMethod
+                ? item.reproductionMethod.split(/[,，、]/).map(s => s.trim()).filter(Boolean)
+                : [];
+
+            // Difficulty label
+            const diffLabels = { 1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '专家' };
+
+            // Map API data to display model
+            const plant = {
+                id: item.id,
+                name: item.name,
+                latinName: item.latinName || '',
+                aliases: item.aliases || '',
+                aliasesList: aliasesList,
+                genus: item.genus || '',
+                distributionArea: item.distributionArea || '',
+                difficulty: item.difficulty || 0,
+                difficultyLabel: diffLabels[item.difficulty] || '未知',
+                isHot: item.isHot === 1,
+                lifeCycle: item.lifeCycle || '',
+                growthHabit: item.growthHabit || '',
+                reproductionMethod: item.reproductionMethod || '',
+                reproductionList: reproductionList,
+
+                // Light
+                lightIntensity: item.lightIntensity || '',
+                lightType: item.lightType || '',
+
+                // Temperature
+                optimalTempPeriod: item.optimalTempPeriod || '',
+
+                // Morphology
+                stem: item.stem || '',
+                foliageType: item.foliageType || '',
+                foliageColor: item.foliageColor || '',
+                foliageShape: item.foliageShape || '',
+                height: item.height || 0,
+
+                // Flowering
+                floweringPeriod: item.floweringPeriod || '',
+                floweringColor: item.floweringColor || '',
+                floweringShape: item.floweringShape || '',
+                flowerDiameter: item.flowerDiameter || 0,
+
+                // Fruit
+                fruit: item.fruit || '',
+
+                // Pests
+                pestsDiseases: item.pestsDiseases || '',
+                commonPests: commonPests,
+
+                // Classes
+                classes: (item.classes || []).map(c => c.name),
+
+                // Images
+                imgList: item.imgList || []
             };
 
             this.setData({
-                plant: enrichedPlant,
+                plant: plant,
                 swiperList: swiperList
             });
-        }
+        }).catch(err => {
+            console.error('Load plant detail failed', err);
+            wx.showToast({ title: '加载失败', icon: 'none' });
+        });
     },
 
     onSwiperChange(e) {

pages/wiki/detail/index.wxml

@@ -1,5 +1,5 @@
 <!--pages/wiki/detail/index.wxml-->
-<view class="wiki-detail">
+<view class="wiki-detail" wx:if="{{plant}}">
   <!-- Header Area -->
   <view class="wd-header">
     <view class="wd-gallery-container">
@@ -11,7 +11,6 @@
         list="{{swiperList}}"
         navigation="{{ { type: '' } }}"
       />
-      <!-- Gradient applied externally to match plant-detail if needed or just rely on image -->
       <view class="wd-gradient-overlay"></view>
     </view>
     
@@ -28,12 +27,12 @@
     <view class="wd-overlay">
       <view class="wd-title">
         <text class="wd-name">{{plant.name}}</text>
-        <text class="wd-scientific">{{plant.scientificName}}</text>
+        <text class="wd-scientific">{{plant.latinName}}</text>
       </view>
       <view class="wd-badges">
-        <text class="wd-badge">{{plant.family}}</text>
-        <text class="wd-badge">{{plant.category}}</text>
-        <text class="wd-badge">难度: {{plant.difficulty || 'Easy'}}</text>
+        <text class="wd-badge" wx:if="{{plant.genus}}">{{plant.genus}}</text>
+        <text class="wd-badge" wx:for="{{plant.classes}}" wx:key="*this">{{item}}</text>
+        <text class="wd-badge">难度: {{plant.difficultyLabel}}</text>
       </view>
     </view>
   </view>
@@ -41,10 +40,11 @@
   <!-- Content Area -->
   <view class="wd-content-wrapper">
     <scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
-      <!-- Description Section -->
-      <section class="wd-section">
+
+      <!-- Growth Habit Section -->
+      <section class="wd-section" wx:if="{{plant.growthHabit}}">
         <view class="wd-card">
-          <text class="wd-text">{{plant.description}}</text>
+          <text class="wd-text">{{plant.growthHabit}}</text>
         </view>
       </section>
 
@@ -56,13 +56,21 @@
         </view>
         <view class="wd-card">
           <view class="wd-grid">
-            <view class="wd-stat-item">
-              <text class="wd-label">原产地</text>
-              <text class="wd-value">{{plant.origin}}</text>
+            <view class="wd-stat-item" wx:if="{{plant.distributionArea}}">
+              <text class="wd-label">分布区域</text>
+              <text class="wd-value">{{plant.distributionArea}}</text>
             </view>
-            <view class="wd-stat-item">
-              <text class="wd-label">毒性</text>
-              <text class="wd-value">{{plant.toxicity}}</text>
+            <view class="wd-stat-item" wx:if="{{plant.aliases}}">
+              <text class="wd-label">别名</text>
+              <text class="wd-value">{{plant.aliases}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.lifeCycle}}">
+              <text class="wd-label">生命周期</text>
+              <text class="wd-value">{{plant.lifeCycle === 'perennial' ? '多年生' : (plant.lifeCycle === 'annual' ? '一年生' : plant.lifeCycle)}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.height}}">
+              <text class="wd-label">株高</text>
+              <text class="wd-value">约 {{plant.height}} cm</text>
             </view>
           </view>
         </view>
@@ -71,79 +79,121 @@
       <!-- Care Guide Section -->
       <section class="wd-section">
         <view class="section-title">
-          <t-icon name="sprout" size="40rpx" color="#558B2F" />
+          <t-icon name="sunny" size="40rpx" color="#558B2F" />
           <text>养护指南</text>
         </view>
         <view class="wd-card">
           <!-- Light -->
-          <view class="requirement-item">
+          <view class="requirement-item" wx:if="{{plant.lightIntensity}}">
             <view class="req-icon">
               <t-icon name="sunny" size="40rpx" color="#558B2F" />
             </view>
             <view class="req-content">
-              <text class="req-title">光照 ({{plant.light.level}})</text>
-              <text class="req-desc">{{plant.light.description}}</text>
+              <text class="req-title">光照</text>
+              <text class="req-desc">{{plant.lightIntensity}}</text>
             </view>
           </view>
 
-          <!-- Water -->
-          <view class="requirement-item">
+          <!-- Temperature -->
+          <view class="requirement-item" wx:if="{{plant.optimalTempPeriod}}">
             <view class="req-icon">
-              <t-icon name="water" size="40rpx" color="#558B2F" />
+              <t-icon name="pin" size="40rpx" color="#558B2F" />
             </view>
             <view class="req-content">
-              <text class="req-title">水分 ({{plant.water.frequency}})</text>
-              <text class="req-desc">{{plant.water.description}}</text>
+              <text class="req-title">适宜温度</text>
+              <text class="req-desc">{{plant.optimalTempPeriod}}</text>
             </view>
           </view>
 
-          <!-- Environment -->
-          <view class="requirement-item">
+          <!-- Reproduction -->
+          <view class="requirement-item" wx:if="{{plant.reproductionMethod}}">
             <view class="req-icon">
-              <t-icon name="temperate" size="40rpx" color="#558B2F" />
+              <t-icon name="fork-node" size="40rpx" color="#558B2F" />
             </view>
             <view class="req-content">
-              <text class="req-title">环境</text>
-              <text class="req-desc">温度: {{plant.temperature}}</text>
-              <text class="req-desc" style="display: block; margin-top: 4rpx;">湿度: {{plant.humidity}}</text>
-            </view>
-          </view>
-
-          <!-- Soil & Fertilizer -->
-          <view class="requirement-item">
-            <view class="req-icon">
-              <t-icon name="layers" size="40rpx" color="#558B2F" />
-            </view>
-            <view class="req-content">
-              <text class="req-title">土壤与肥料</text>
-              <text class="req-desc">土: {{plant.soil}}</text>
-              <text class="req-desc" style="display: block; margin-top: 4rpx;">肥: {{plant.fertilizer}}</text>
+              <text class="req-title">繁殖方式</text>
+              <text class="req-desc">{{plant.reproductionMethod}}</text>
             </view>
           </view>
         </view>
       </section>
 
-      <!-- FAQ Section -->
-      <section class="wd-section">
+      <!-- Morphology Section -->
+      <section class="wd-section" wx:if="{{plant.stem || plant.foliageShape || plant.foliageColor}}">
         <view class="section-title">
-          <t-icon name="error-circle" size="40rpx" color="#558B2F" />
-          <text>常见问题</text>
+          <t-icon name="tree-round-dot" size="40rpx" color="#558B2F" />
+          <text>形态特征</text>
         </view>
         <view class="wd-card">
-          <view class="pest-section">
-            <text class="wd-label" style="display: block; margin-bottom: 16rpx;">易发病虫害</text>
-            <view class="pest-tags">
-              <text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
+          <view class="wd-grid">
+            <view class="wd-stat-item" wx:if="{{plant.stem}}">
+              <text class="wd-label">茎</text>
+              <text class="wd-value">{{plant.stem}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.foliageShape}}">
+              <text class="wd-label">叶形</text>
+              <text class="wd-value">{{plant.foliageShape}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.foliageColor}}">
+              <text class="wd-label">叶色</text>
+              <text class="wd-value">{{plant.foliageColor}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.foliageType}}">
+              <text class="wd-label">叶质</text>
+              <text class="wd-value">{{plant.foliageType}}</text>
             </view>
           </view>
-          <view class="tips-section">
-            <text class="wd-label" style="display: block; margin-bottom: 16rpx; margin-top: 32rpx;">专家提示</text>
-            <view class="care-tips-list">
-              <view wx:for="{{plant.careTips}}" wx:key="*this" class="tip-item">
-                <view class="tip-dot"></view>
-                <text class="tip-text">{{item}}</text>
-              </view>
+        </view>
+      </section>
+
+      <!-- Flowering Section -->
+      <section class="wd-section" wx:if="{{plant.floweringPeriod || plant.floweringColor}}">
+        <view class="section-title">
+          <t-icon name="flower" size="40rpx" color="#558B2F" />
+          <text>开花信息</text>
+        </view>
+        <view class="wd-card">
+          <view class="wd-grid">
+            <view class="wd-stat-item" wx:if="{{plant.floweringPeriod}}">
+              <text class="wd-label">花期</text>
+              <text class="wd-value">{{plant.floweringPeriod}}</text>
             </view>
+            <view class="wd-stat-item" wx:if="{{plant.floweringColor}}">
+              <text class="wd-label">花色</text>
+              <text class="wd-value">{{plant.floweringColor}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.floweringShape}}">
+              <text class="wd-label">花型</text>
+              <text class="wd-value">{{plant.floweringShape}}</text>
+            </view>
+            <view class="wd-stat-item" wx:if="{{plant.flowerDiameter}}">
+              <text class="wd-label">花径</text>
+              <text class="wd-value">约 {{plant.flowerDiameter}} mm</text>
+            </view>
+          </view>
+        </view>
+      </section>
+
+      <!-- Fruit Section -->
+      <section class="wd-section" wx:if="{{plant.fruit}}">
+        <view class="section-title">
+          <t-icon name="apple" size="40rpx" color="#558B2F" />
+          <text>果实</text>
+        </view>
+        <view class="wd-card">
+          <text class="wd-text">{{plant.fruit}}</text>
+        </view>
+      </section>
+
+      <!-- Pests & Diseases Section -->
+      <section class="wd-section" wx:if="{{plant.commonPests.length > 0}}">
+        <view class="section-title">
+          <t-icon name="error-circle" size="40rpx" color="#558B2F" />
+          <text>常见病虫害</text>
+        </view>
+        <view class="wd-card">
+          <view class="pest-tags">
+            <text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
           </view>
         </view>
       </section>
@@ -153,3 +203,8 @@
     </scroll-view>
   </view>
 </view>
+
+<!-- Loading State -->
+<view wx:if="{{!plant}}" class="wiki-detail-loading">
+  <t-loading theme="circular" size="64rpx" text="加载中..." />
+</view>

pages/wiki/detail/index.wxss

@@ -313,3 +313,11 @@ t-swiper {
   color: #4B5563;
   line-height: 1.5;
 }
+
+.wiki-detail-loading {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F9FAFB;
+}