feat(health+miniprogram): 预约/报告/随访/资讯/家庭管理 — Chunk 4-6
后端: - 添加 articles 表迁移 + Entity + Service + Handler - 健康数据趋势 API (get_mini_trend) 注册路由 - article CRUD (list/get) + DTO 前端 (11个新页面 + 5个服务): - 预约挂号: 列表/创建向导/详情页 - 报告管理: 列表/详情页 - 随访管理: 任务列表/记录详情页 - 资讯文章: 文章详情页 - 个人中心: 就诊人管理/新增/我的报告/我的随访/用药提醒/设置 - 更新 app.config.ts 注册全部路由 - 更新 profile/article 页面为真实功能
This commit is contained in:
iven
98
apps/miniprogram/src/pages/article/detail/index.scss
Normal file
98
apps/miniprogram/src/pages/article/detail/index.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
|
||||
.article-detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
background: $card;
|
||||
padding: 32px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-category {
|
||||
font-size: 22px;
|
||||
color: $pri;
|
||||
background: $pri-l;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.article-author {
|
||||
font-size: 24px;
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.article-summary {
|
||||
background: $card;
|
||||
padding: 24px 32px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-size: 26px;
|
||||
color: $tx2;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
background: $card;
|
||||
padding: 32px;
|
||||
|
||||
// RichText 内部样式优化
|
||||
h1, h2, h3 {
|
||||
font-weight: bold;
|
||||
color: #134E4A;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #134E4A;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
font-size: 28px;
|
||||
color: $tx3;
|
||||
}
|
||||
76
apps/miniprogram/src/pages/article/detail/index.tsx
Normal file
76
apps/miniprogram/src/pages/article/detail/index.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, RichText } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import { getArticleDetail, Article } from '../../../services/article';
|
||||
import './index.scss';
|
||||
|
||||
export default function ArticleDetail() {
|
||||
const router = useRouter();
|
||||
const id = router.params.id || '';
|
||||
|
||||
const [article, setArticle] = useState<Article | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
getArticleDetail(id)
|
||||
.then((data) => setArticle(data))
|
||||
.catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='article-detail-page'>
|
||||
<View className='loading-state'>
|
||||
<Text className='loading-text'>加载中...</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!article) {
|
||||
return (
|
||||
<View className='article-detail-page'>
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-text'>文章不存在</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='article-detail-page'>
|
||||
{/* 文章头部 */}
|
||||
<View className='article-header'>
|
||||
<Text className='article-title'>{article.title}</Text>
|
||||
<View className='article-meta'>
|
||||
{article.category && (
|
||||
<Text className='article-category'>{article.category}</Text>
|
||||
)}
|
||||
{article.author && (
|
||||
<Text className='article-author'>{article.author}</Text>
|
||||
)}
|
||||
{article.published_at && (
|
||||
<Text className='article-date'>{article.published_at.slice(0, 10)}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 摘要 */}
|
||||
{article.summary && (
|
||||
<View className='article-summary'>
|
||||
<Text className='summary-text'>{article.summary}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 正文 */}
|
||||
<View className='article-content'>
|
||||
<RichText
|
||||
nodes={article.content || ''}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1 +1,108 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.article-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding: 24px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
display: flex;
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.article-card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.article-card-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.article-card-summary {
|
||||
font-size: 26px;
|
||||
color: $tx2;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.article-card-tag {
|
||||
font-size: 22px;
|
||||
color: $pri;
|
||||
background: $pri-l;
|
||||
padding: 2px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.article-card-date {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.article-card-cover {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: $r-sm;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.loading-hint {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,95 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import '../health/index.scss';
|
||||
import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
|
||||
import { listArticles, Article } from '../../services/article';
|
||||
import './index.scss';
|
||||
|
||||
export default function ArticleList() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchData = useCallback(async (p: number, append = false) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listArticles(p);
|
||||
const list = res.data || [];
|
||||
setArticles(append ? (prev) => [...prev, ...list] : list);
|
||||
setTotal(res.total);
|
||||
setPage(p);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useDidShow(() => {
|
||||
fetchData(1);
|
||||
}, [fetchData]);
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
fetchData(1).finally(() => {
|
||||
Taro.stopPullDownRefresh();
|
||||
});
|
||||
});
|
||||
|
||||
useReachBottom(() => {
|
||||
if (!loading && articles.length < total) {
|
||||
fetchData(page + 1, true);
|
||||
}
|
||||
});
|
||||
|
||||
const goToDetail = (id: string) => {
|
||||
Taro.navigateTo({ url: `/pages/article/detail/index?id=${id}` });
|
||||
};
|
||||
|
||||
export default function Article() {
|
||||
return (
|
||||
<View className='placeholder-page'>
|
||||
<Text className='placeholder-icon'>📰</Text>
|
||||
<Text className='placeholder-title'>健康资讯</Text>
|
||||
<Text className='placeholder-desc'>科普文章、健康知识</Text>
|
||||
<View className='article-page'>
|
||||
<View className='article-list'>
|
||||
{articles.map((a) => (
|
||||
<View
|
||||
className='article-card'
|
||||
key={a.id}
|
||||
onClick={() => goToDetail(a.id)}
|
||||
>
|
||||
<View className='article-card-body'>
|
||||
<Text className='article-card-title'>{a.title}</Text>
|
||||
{a.summary && (
|
||||
<Text className='article-card-summary'>{a.summary}</Text>
|
||||
)}
|
||||
<View className='article-card-meta'>
|
||||
{a.category && (
|
||||
<Text className='article-card-tag'>{a.category}</Text>
|
||||
)}
|
||||
{a.published_at && (
|
||||
<Text className='article-card-date'>
|
||||
{a.published_at.slice(0, 10)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{a.cover_image && (
|
||||
<View className='article-card-cover'>
|
||||
<image className='cover-img' src={a.cover_image} mode='aspectFill' />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{articles.length === 0 && !loading && (
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-text'>暂无资讯文章</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<View className='loading-hint'>
|
||||
<Text className='loading-text'>加载中...</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user