|
|
@@ -0,0 +1,433 @@
|
|
|
+<template>
|
|
|
+ <CustomNav title="健康资讯管理" leftType="back" />
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="action-bar">
|
|
|
+ <view class="search-wrap">
|
|
|
+ <input class="search-input" placeholder="搜索标题或概要" v-model="searchKey" @confirm="onSearch" />
|
|
|
+ <view class="search-btn" @click="onSearch">
|
|
|
+ <uni-icons type="search" size="22" color="#fff" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="isLoading" class="skeleton-list">
|
|
|
+ <view v-for="i in 3" :key="i" class="skeleton-card">
|
|
|
+ <view class="skeleton-cover" />
|
|
|
+ <view class="skeleton-meta">
|
|
|
+ <view class="skeleton-title" />
|
|
|
+ <view class="skeleton-summary" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="news-card" v-for="item in filteredList" :key="item.id">
|
|
|
+ <view class="news-content">
|
|
|
+ <view v-if="item.coverImage" class="news-image-container">
|
|
|
+ <image class="news-image" :src="item.coverImage" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view v-else class="news-placeholder">
|
|
|
+ <image class="placeholder-icon" src="/static/icons/remixicon/image-line.svg" />
|
|
|
+ </view>
|
|
|
+ <view class="meta">
|
|
|
+ <text class="title">{{ item.title }}</text>
|
|
|
+ <text class="summary">{{ item.summary }}</text>
|
|
|
+ <text class="time">发布时间: {{ item.publishTime }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="action-buttons">
|
|
|
+ <button class="action-btn primary" @click="viewNews(item)">查看</button>
|
|
|
+ <button class="action-btn secondary" @click="editNews(item)">编辑</button>
|
|
|
+ <button class="action-btn danger" @click="removeNews(item)">删除</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="empty-state" v-if="filteredList.length === 0">
|
|
|
+ <view class="news-placeholder">
|
|
|
+ <image class="placeholder-icon" src="/static/icons/remixicon/image-line.svg" />
|
|
|
+ </view>
|
|
|
+ <text class="empty-text">暂无资讯</text>
|
|
|
+ <button class="create-cta" @click="onCreateNews">现在创建</button>
|
|
|
+ </view>
|
|
|
+ <view class="loadmore" v-if="hasMore">
|
|
|
+ <button class="load-btn" @click="loadMore">加载更多</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 悬浮新建按钮（样式参考 physical.vue） -->
|
|
|
+ <view class="fab" @click="onCreateNews" role="button" aria-label="新建资讯">
|
|
|
+ <view class="fab-inner">+</view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
|
+import CustomNav from '@/components/custom-nav.vue'
|
|
|
+
|
|
|
+interface NewsItem {
|
|
|
+ id: string
|
|
|
+ title: string
|
|
|
+ summary?: string
|
|
|
+ content?: string
|
|
|
+ coverImage?: string
|
|
|
+ publishTime?: string
|
|
|
+}
|
|
|
+
|
|
|
+const newsList = ref<NewsItem[]>([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '如何管理血压：日常监测要点',
|
|
|
+ summary: '本文介绍了家庭血压监测的常见问题及注意事项。',
|
|
|
+ publishTime: '2025-01-01 10:00:00'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '糖尿病饮食小贴士',
|
|
|
+ summary: '5条简单饮食建议，助你在日常生活中控制血糖。',
|
|
|
+ publishTime: '2025-01-05 14:30:00'
|
|
|
+ }
|
|
|
+])
|
|
|
+const searchKey = ref('')
|
|
|
+const defaultCover = '/static/icons/remixicon/image-line.svg'
|
|
|
+const pageSize = ref(10)
|
|
|
+const currentPage = ref(1)
|
|
|
+const hasMore = ref(false)
|
|
|
+const isLoading = ref(false)
|
|
|
+
|
|
|
+const onCreateNews = () => {
|
|
|
+ // 跳转到编辑/新建页（新建时不带 id）
|
|
|
+ uni.navigateTo({ url: `/pages/doctor/manage/news-edit` })
|
|
|
+}
|
|
|
+
|
|
|
+const fetchNews = async () => {
|
|
|
+ // 模拟网络请求，真实场景使用 API 请求
|
|
|
+ isLoading.value = true
|
|
|
+ await new Promise(resolve => setTimeout(resolve, 350))
|
|
|
+ isLoading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const viewNews = (item: NewsItem) => {
|
|
|
+ // 跳转到详情页（已迁移到 `pages/public/news-detail`）
|
|
|
+ uni.navigateTo({ url: `/pages/public/news-detail?id=${item.id}` })
|
|
|
+}
|
|
|
+
|
|
|
+const editNews = (item: NewsItem) => {
|
|
|
+ // 带 id 跳转到编辑页
|
|
|
+ uni.navigateTo({ url: `/pages/doctor/manage/news-edit?id=${item.id}` })
|
|
|
+}
|
|
|
+
|
|
|
+const removeNews = (item: NewsItem) => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '确认删除',
|
|
|
+ content: `确定删除资讯《${item.title}》吗？`,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ const idx = newsList.value.findIndex(i => i.id === item.id)
|
|
|
+ if (idx >= 0) {
|
|
|
+ newsList.value.splice(idx, 1)
|
|
|
+ uni.showToast({ title: '删除成功', icon: 'success' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onSearch = () => {
|
|
|
+ // 简单的本地过滤，后续可替换为后端搜索API
|
|
|
+ currentPage.value = 1
|
|
|
+}
|
|
|
+
|
|
|
+const filteredList = computed(() => {
|
|
|
+ const key = searchKey.value.trim().toLowerCase()
|
|
|
+ let list = newsList.value
|
|
|
+ if (key) {
|
|
|
+ list = list.filter(i => i.title.toLowerCase().includes(key) || (i.summary || '').toLowerCase().includes(key))
|
|
|
+ }
|
|
|
+ // 分页处理：简单模拟
|
|
|
+ const start = 0
|
|
|
+ const end = currentPage.value * pageSize.value
|
|
|
+ hasMore.value = list.length > end
|
|
|
+ return list.slice(start, end)
|
|
|
+})
|
|
|
+
|
|
|
+const loadMore = () => {
|
|
|
+ currentPage.value += 1
|
|
|
+}
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ const token = uni.getStorageSync('token')
|
|
|
+ if (!token) {
|
|
|
+ uni.reLaunch({ url: '/pages/public/login/index' })
|
|
|
+ }
|
|
|
+ fetchNews()
|
|
|
+})
|
|
|
+
|
|
|
+onPullDownRefresh(() => {
|
|
|
+ // 下拉刷新
|
|
|
+ currentPage.value = 1
|
|
|
+ fetchNews().then(() => uni.stopPullDownRefresh())
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding-top: calc(var(--status-bar-height) + 44px);
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+}
|
|
|
+.action-bar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 18rpx;
|
|
|
+ padding: 28rpx 20rpx;
|
|
|
+}
|
|
|
+.create-btn {
|
|
|
+ background-color: #2d8cf0;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 18rpx 26rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ min-width: 140rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12rpx;
|
|
|
+ flex: 1; /* 自动撑满剩余空间 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 悬浮按钮 */
|
|
|
+.fab {
|
|
|
+ position: fixed;
|
|
|
+ right: 28rpx;
|
|
|
+ bottom: 160rpx; /* 类似 physical.vue 的位置 */
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: linear-gradient(180deg, #4a90e2, #2d8cf0); /* 蓝色渐变 */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 1200;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.fab:active { transform: translateY(2rpx); }
|
|
|
+.fab:focus { outline: none; }
|
|
|
+.fab-inner { color: #fff; font-size: 56rpx; line-height: 56rpx }
|
|
|
+.search-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border: 1rpx solid #e6e6e6;
|
|
|
+ font-size: 28rpx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.search-btn {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background-color: #4a90e2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.news-card {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 18rpx 20rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
|
+}
|
|
|
+.news-card:hover {
|
|
|
+ transform: translateY(-4rpx);
|
|
|
+ box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.12);
|
|
|
+}
|
|
|
+.news-content {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+.news-image-container {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.news-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+.news-placeholder {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.placeholder-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+/* empty-placeholder removed to keep strict parity with patient/index styles */
|
|
|
+.meta {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #222;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.summary {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.6;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2; /* limit to 2 lines */
|
|
|
+ line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ padding: 12rpx 18rpx;
|
|
|
+ border-top: 1rpx solid #f5f5f5;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.action-btn {
|
|
|
+ padding: 10rpx 22rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ min-width: 110rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ background: #fff;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: 1rpx solid #e6e6e6;
|
|
|
+ box-shadow: none;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
|
+}
|
|
|
+.action-btn:active { transform: translateY(2rpx); }
|
|
|
+.action-btn:hover { box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
+.primary {
|
|
|
+ background: linear-gradient(180deg,#6fb7ff,#2d8cf0);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 10rpx 28rpx rgba(45,140,240,0.12);
|
|
|
+}
|
|
|
+.danger {
|
|
|
+ background: linear-gradient(180deg,#ff8a8a,#ff6b6b);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 10rpx 28rpx rgba(255,107,107,0.12);
|
|
|
+}
|
|
|
+
|
|
|
+/* 次要按钮样式：比主按钮弱一点，但比纯白更协调 */
|
|
|
+.secondary {
|
|
|
+ background: linear-gradient(180deg,#cfeeff,#9fd7ff); /* 更明显的浅蓝填充 */
|
|
|
+ color: #063a7a; /* 深蓝文字，保持可读性 */
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba(45,140,240,0.08);
|
|
|
+}
|
|
|
+.secondary:hover {
|
|
|
+ transform: translateY(-2rpx);
|
|
|
+ box-shadow: 0 12rpx 28rpx rgba(45,140,240,0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 100rpx 40rpx;
|
|
|
+}
|
|
|
+.empty-icon {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+}
|
|
|
+.empty-text {
|
|
|
+ font-size: 36rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-list {
|
|
|
+ padding: 18rpx 18rpx;
|
|
|
+}
|
|
|
+.skeleton-card {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ gap: 18rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.skeleton-cover {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: linear-gradient(90deg, #eee, #f6f6f6);
|
|
|
+}
|
|
|
+.skeleton-meta {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.skeleton-title {
|
|
|
+ width: 60%;
|
|
|
+ height: 22rpx;
|
|
|
+ background: linear-gradient(90deg, #eee, #f6f6f6);
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+}
|
|
|
+.skeleton-summary {
|
|
|
+ width: 80%;
|
|
|
+ height: 16rpx;
|
|
|
+ background: linear-gradient(90deg, #eee, #f6f6f6);
|
|
|
+ border-radius: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.create-cta {
|
|
|
+ margin-top: 18rpx;
|
|
|
+ background-color: #2d8cf0;
|
|
|
+ color: #fff;
|
|
|
+ padding: 16rpx 28rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.loadmore {
|
|
|
+ padding: 24rpx 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.load-btn {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1rpx solid #e6e6e6;
|
|
|
+ padding: 12rpx 30rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+</style>
|
mcbaiyun