ChronicDisease_UniApp/src/pages/doctor/manage/news.vue

<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>