diff --git a/miniapp/src/api/knowledge.ts b/miniapp/src/api/knowledge.ts index ec06440..c30c72c 100644 --- a/miniapp/src/api/knowledge.ts +++ b/miniapp/src/api/knowledge.ts @@ -29,8 +29,23 @@ export interface KnowledgeArticle { sortOrder?: number; } +export interface StageDiseaseHint { + id: string; + name: string; + reason: string; +} + +export interface StageHint { + stage: string; + label: string; + summary: string; + diseases: StageDiseaseHint[]; +} + export const listDiseases = () => get('/knowledge/diseases'); export const getDisease = (id: string) => get(`/knowledge/diseases/${id}`); export const listAIGuides = () => get('/knowledge/articles', { kind: 'ai_guide' }); export const listLAMPGuides = () => get('/knowledge/articles', { kind: 'lamp_guide' }); export const getArticle = (id: string) => get(`/knowledge/articles/${id}`); +export const getStageHints = (stage?: string) => + get('/knowledge/stage-hints', stage ? { stage } : undefined); diff --git a/miniapp/src/pages/knowledge/index.module.scss b/miniapp/src/pages/knowledge/index.module.scss index 2ed229c..c91f452 100644 --- a/miniapp/src/pages/knowledge/index.module.scss +++ b/miniapp/src/pages/knowledge/index.module.scss @@ -58,6 +58,78 @@ margin: $spacing-lg 0 $spacing-md; } +.stageChips { + display: flex; + flex-wrap: wrap; + gap: $spacing-sm; + margin-bottom: $spacing-md; +} + +.stageChip { + padding: 8rpx $spacing-md; + border-radius: $radius-round; + background: $color-bg-card; + border: 1rpx solid rgba(0, 0, 0, 0.08); +} + +.stageChipActive { + background: $color-primary; + border-color: $color-primary; +} + +.stageChipText { + font-size: $font-size-xs; + color: $color-text-secondary; +} + +.stageChipActive .stageChipText { + color: $color-text-white; +} + +.stageHintCard { + background: $color-bg-card; + border-radius: $radius-md; + padding: $spacing-lg; + box-shadow: $shadow-card; + margin-bottom: $spacing-md; +} + +.stageHintLabel { + display: block; + font-size: $font-size-md; + font-weight: $font-weight-semibold; + color: $color-primary; + margin-bottom: $spacing-xs; +} + +.stageHintSummary { + display: block; + font-size: $font-size-xs; + color: $color-text-secondary; + line-height: $line-height-normal; + margin-bottom: $spacing-sm; +} + +.stageDiseaseRow { + padding: $spacing-sm 0; + border-top: 1rpx solid rgba(0, 0, 0, 0.06); +} + +.stageDiseaseName { + display: block; + font-size: $font-size-md; + font-weight: $font-weight-medium; + color: $color-text-primary; +} + +.stageDiseaseReason { + display: block; + font-size: $font-size-xs; + color: $color-text-secondary; + line-height: $line-height-normal; + margin-top: 4rpx; +} + .diseaseList { display: flex; flex-direction: column; diff --git a/miniapp/src/pages/knowledge/index.tsx b/miniapp/src/pages/knowledge/index.tsx index 16b7dd8..8fb5f2d 100644 --- a/miniapp/src/pages/knowledge/index.tsx +++ b/miniapp/src/pages/knowledge/index.tsx @@ -6,8 +6,10 @@ import { listAIGuides, listLAMPGuides, listDiseases, + getStageHints, type Disease, type KnowledgeArticle, + type StageHint, } from '@/api/knowledge'; const GUIDE_LABELS: Record = { @@ -15,6 +17,13 @@ const GUIDE_LABELS: Record = { lamp_guide: 'LAMP 教程', }; +const STAGE_OPTIONS = [ + { key: 'young', label: '小蚕期(1-3龄)' }, + { key: 'grown', label: '大蚕期(4-5龄)' }, + { key: 'late5', label: '5龄后期' }, + { key: 'pupa', label: '蛹期' }, +]; + const CATEGORY_LABELS: Record = { viral: '病毒性', fungal: '真菌性', @@ -27,7 +36,20 @@ const KnowledgePage: React.FC = () => { const [diseases, setDiseases] = useState([]); const [guides, setGuides] = useState([]); const [lampGuides, setLampGuides] = useState([]); + const [stage, setStage] = useState('young'); + const [stageHints, setStageHints] = useState([]); const [loading, setLoading] = useState(true); + const [stageLoading, setStageLoading] = useState(false); + + const fetchStageHints = useCallback(async (key: string) => { + setStageLoading(true); + try { + const res = await getStageHints(key).catch(() => [] as StageHint[]); + setStageHints(res); + } finally { + setStageLoading(false); + } + }, []); const fetchData = useCallback(async () => { try { @@ -54,8 +76,12 @@ const KnowledgePage: React.FC = () => { fetchData(); }, [fetchData]); + useEffect(() => { + fetchStageHints(stage); + }, [stage, fetchStageHints]); + usePullDownRefresh(() => { - fetchData().then(() => Taro.stopPullDownRefresh()); + Promise.all([fetchData(), fetchStageHints(stage)]).then(() => Taro.stopPullDownRefresh()); }); const openGuide = (a: KnowledgeArticle) => { @@ -90,6 +116,43 @@ const KnowledgePage: React.FC = () => { ))} + 饲养阶段风险提示 + + {STAGE_OPTIONS.map((opt) => ( + setStage(opt.key)} + > + {opt.label} + + ))} + + {stageLoading ? ( + 加载中... + ) : ( + stageHints.map((h) => ( + + {h.label} + {h.summary} + {h.diseases.map((d) => ( + { + if (d.id) { + Taro.navigateTo({ url: `/pages/knowledge/detail/index?kind=disease&id=${d.id}` }); + } + }} + > + {d.name} + {d.reason} + + ))} + + )) + )} + 蚕病百科 {diseases.map((d) => (