公告通知

src/pages/integrated/notice/detail.vue

@@ -1,15 +1,19 @@
 <template>
   <view class="notice-detail">
     <view class="detail-header">
-      <view class="title">{{ detail.title }}</view>
+      <view class="title">
+        <text v-if="detail.isTop === '1'" class="top-tag">置顶</text>
+        {{ detail.title }}
+      </view>
       <view class="meta">
         <text class="type-tag" :class="getTypeClass(detail.type)">{{ getTypeLabel(detail.type) }}</text>
         <text class="time">{{ formatTime(detail.createTime) }}</text>
+        <text class="view-count">浏览 {{ detail.viewCount }}</text>
       </view>
     </view>
     
     <view class="detail-content">
-      <view class="content-text">{{ detail.content }}</view>
+      <rich-text :nodes="detail.description || ''"></rich-text>
     </view>
     
     <view v-if="detail.attachments && detail.attachments.length > 0" class="attachments">
@@ -30,7 +34,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import meetingRoomApi from '@/sheep/api/meetingRoom'
+import { noticeApi } from '@/sheep/api'
 
 const detail = ref<any>({})
 
@@ -94,7 +98,10 @@ onLoad(async (options: any) => {
   if (!id) return
   
   try {
-    const response: any = await meetingRoomApi.getNoticeDetail(id)
+    // 增加浏览量
+    await noticeApi.addNoticeView(id)
+    // 获取详情
+    const response: any = await noticeApi.getNoticeDetail(id)
     if (response.code === 0 && response.data) {
       detail.value = response.data
     }
@@ -123,39 +130,30 @@ onLoad(async (options: any) => {
     font-weight: bold;
     color: #333;
     line-height: 1.4;
-    margin-bottom: 16rpx;
+    margin-bottom: 8rpx;
+    display: flex;
+    align-items: center;
+  }
+  
+  .top-tag {
+    background: #ffebee;
+    color: #d32f2f;
+    font-size: 22rpx;
+    border-radius: 8rpx;
+    padding: 2rpx 12rpx;
+    margin-right: 12rpx;
   }
   
   .meta {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    
-    .type-tag {
-      padding: 8rpx 16rpx;
-      border-radius: 20rpx;
-      font-size: 24rpx;
-      
-      &.type-important {
-        background: #ffebee;
-        color: #d32f2f;
-      }
-      
-      &.type-general {
-        background: #f5f5f5;
-        color: #666;
-      }
-      
-      &.type-activity {
-        background: #e8f5e8;
-        color: #388e3c;
-      }
-    }
-    
-    .time {
-      font-size: 24rpx;
-      color: #999;
-    }
+    color: #999;
+    font-size: 24rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .view-count {
+    margin-left: 24rpx;
   }
 }
 
@@ -164,12 +162,9 @@ onLoad(async (options: any) => {
   border-radius: 16rpx;
   padding: 32rpx;
   margin-bottom: 24rpx;
-  
-  .content-text {
-    font-size: 30rpx;
-    color: #333;
-    line-height: 1.8;
-  }
+  font-size: 30rpx;
+  color: #333;
+  line-height: 1.8;
 }
 
 .attachments {

src/pages/integrated/notice/index.vue

@@ -1,18 +1,5 @@
 <template>
   <view class="notice-container">
-    <!-- 公告分类标签 -->
-    <view class="notice-tabs">
-      <view 
-        v-for="(tab, index) in tabs" 
-        :key="index"
-        :class="['tab-item', { active: activeTab === index }]"
-        @click="switchTab(index)"
-      >
-        {{ tab.label }}
-      </view>
-    </view>
-
-    <!-- 公告列表 -->
     <view class="notice-list">
       <view v-if="noticeList.length === 0" class="empty-tip">
         暂无公告
@@ -22,23 +9,26 @@
           v-for="item in noticeList" 
           :key="item.id" 
           class="notice-item"
-          @click="viewDetail(item)"
         >
-          <view class="item-header">
-            <view class="title">{{ item.title }}</view>
-            <view class="type-tag" :class="getTypeClass(item.type)">{{ getTypeLabel(item.type) }}</view>
+          <view class="item-main">
+            <view class="icon-area">
+              <view class="icon-bell">
+                <view class="red-dot"></view>
+                <text class="iconfont icon-lingdang"></text>
+              </view>
+            </view>
+            <view class="content-area">
+              <view class="title">{{ item.title }}</view>
+              <view class="summary">{{ item.summary || item.content }}</view>
+            </view>
           </view>
-          <view class="item-content">{{ item.content }}</view>
           <view class="item-footer">
-            <text class="time">{{ formatTime(item.createTime) }}</text>
-            <text v-if="item.isTop" class="top-tag">置顶</text>
-            <text v-if="item.isRead" class="read-tag">已读</text>
+            <view class="detail-btn" @click="viewDetail(item)">查看详情 &gt;</view>
+            <view class="date">{{ formatDate(item.createTime) }}</view>
           </view>
         </view>
       </view>
     </view>
-
-    <!-- 加载更多 -->
     <view v-if="hasMore" class="load-more" @click="loadMore">
       <text>加载更多</text>
     </view>
@@ -47,105 +37,41 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import meetingRoomApi from '@/sheep/api/meetingRoom'
+import { noticeApi } from '@/sheep/api'
 
-const tabs = [
-  { value: 'all', label: '全部' },
-  { value: 'important', label: '重要' },
-  { value: 'general', label: '一般' },
-  { value: 'activity', label: '活动' }
-]
-
-const activeTab = ref(0)
 const noticeList = ref<any[]>([])
 const currentPage = ref(1)
 const hasMore = ref(true)
 
-function switchTab(index: number) {
-  activeTab.value = index
-  currentPage.value = 1
-  hasMore.value = true
-  loadNoticeList(true)
-}
-
-function getTypeLabel(type: string) {
-  const typeMap: Record<string, string> = {
-    '1': '重要',
-    '2': '一般',
-    '3': '活动'
-  }
-  return typeMap[type] || '一般'
-}
-
-function getTypeClass(type: string) {
-  const classMap: Record<string, string> = {
-    '1': 'type-important',
-    '2': 'type-general',
-    '3': 'type-activity'
-  }
-  return classMap[type] || 'type-general'
-}
-
-function formatTime(time: string) {
+function formatDate(time: string) {
   if (!time) return ''
-  const date = new Date(time)
-  const now = new Date()
-  const diff = now.getTime() - date.getTime()
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-  
-  if (days === 0) {
-    return '今天'
-  } else if (days === 1) {
-    return '昨天'
-  } else if (days < 7) {
-    return `${days}天前`
-  } else {
-    return date.toLocaleDateString()
-  }
+  const d = new Date(time)
+  const y = d.getFullYear()
+  const m = (d.getMonth() + 1).toString().padStart(2, '0')
+  const day = d.getDate().toString().padStart(2, '0')
+  return `${y}.${m}.${day}`
 }
 
 function viewDetail(item: any) {
-  // 标记为已读
-  if (!item.isRead) {
-    markAsRead(item.id)
-  }
-  
   uni.navigateTo({
     url: `/pages/integrated/notice/detail?id=${item.id}`
   })
 }
 
-async function markAsRead(id: string) {
-  try {
-    const response: any = await meetingRoomApi.markNoticeRead(id)
-    if (response.code === 0) {
-      console.log('标记已读成功:', id)
-    }
-  } catch (error) {
-    console.error('标记已读失败:', error)
-  }
-}
-
 async function loadNoticeList(reset = false) {
   try {
     const params = {
       current: currentPage.value,
-      size: 10,
-      type: tabs[activeTab.value].value
+      size: 10
     }
-    
-    const response: any = await meetingRoomApi.getNoticeList(params)
-    
+    const response: any = await noticeApi.getNoticePage(params)
     if (response.code === 0 && response.data) {
       const records = response.data.records || []
-      
       if (reset) {
         noticeList.value = records
       } else {
         noticeList.value = [...noticeList.value, ...records]
       }
-      
-      // 检查是否还有更多数据
       hasMore.value = records.length === 10
     }
   } catch (error) {
@@ -165,145 +91,101 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import url('//at.alicdn.com/t/font_1234567_lingdang.css'); /* 替换为你的iconfont地址 */
 .notice-container {
   background: #f5f5f5;
   min-height: 100vh;
 }
-
-.notice-tabs {
-  display: flex;
-  background: #fff;
-  padding: 0 24rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  
-  .tab-item {
-    flex: 1;
-    height: 88rpx;
-    line-height: 88rpx;
-    text-align: center;
-    font-size: 28rpx;
-    color: #666;
-    position: relative;
-    
-    &.active {
-      color: #007aff;
-      font-weight: bold;
-      
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 40rpx;
-        height: 4rpx;
-        background: #007aff;
-        border-radius: 2rpx;
-      }
-    }
-  }
-}
-
 .notice-list {
   padding: 24rpx;
-  
-  .empty-tip {
-    text-align: center;
-    color: #999;
-    font-size: 28rpx;
-    padding: 120rpx 0;
-  }
-  
-  .notice-item {
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 32rpx;
-    margin-bottom: 24rpx;
-    
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 16rpx;
-      
-      .title {
-        flex: 1;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #333;
-        line-height: 1.4;
-        margin-right: 16rpx;
-      }
-      
-      .type-tag {
-        padding: 8rpx 16rpx;
-        border-radius: 20rpx;
-        font-size: 24rpx;
-        white-space: nowrap;
-        
-        &.type-important {
-          background: #ffebee;
-          color: #d32f2f;
-        }
-        
-        &.type-general {
-          background: #f5f5f5;
-          color: #666;
-        }
-        
-        &.type-activity {
-          background: #e8f5e8;
-          color: #388e3c;
-        }
-      }
-    }
-    
-    .item-content {
-      font-size: 28rpx;
-      color: #666;
-      line-height: 1.5;
-      margin-bottom: 16rpx;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
-    }
-    
-    .item-footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      .time {
-        font-size: 24rpx;
-        color: #999;
-      }
-      
-      .top-tag {
-        font-size: 24rpx;
-        color: #d32f2f;
-        background: #ffebee;
-        padding: 4rpx 12rpx;
-        border-radius: 12rpx;
-        margin-left: 12rpx;
-      }
-      
-      .read-tag {
-        font-size: 24rpx;
-        color: #999;
-        background: #f5f5f5;
-        padding: 4rpx 12rpx;
-        border-radius: 12rpx;
-        margin-left: 12rpx;
-      }
-    }
-  }
 }
-
+.notice-item {
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+  padding: 32rpx 32rpx 24rpx 32rpx;
+}
+.item-main {
+  display: flex;
+  align-items: flex-start;
+}
+.icon-area {
+  margin-right: 24rpx;
+  position: relative;
+}
+.icon-bell {
+  width: 48rpx;
+  height: 48rpx;
+  background: #e3f2fd;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.icon-bell .iconfont {
+  font-size: 32rpx;
+  color: #1976d2;
+}
+.red-dot {
+  width: 14rpx;
+  height: 14rpx;
+  background: #f44336;
+  border-radius: 50%;
+  position: absolute;
+  top: 4rpx;
+  right: 4rpx;
+  border: 2rpx solid #fff;
+}
+.content-area {
+  flex: 1;
+  min-width: 0;
+}
+.title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.summary {
+  font-size: 26rpx;
+  color: #888;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.item-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1rpx solid #f0f0f0;
+  margin-top: 18rpx;
+  padding-top: 12rpx;
+}
+.detail-btn {
+  color: #1976d2;
+  font-size: 26rpx;
+  cursor: pointer;
+}
+.date {
+  color: #999;
+  font-size: 24rpx;
+}
+.empty-tip {
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  padding: 60rpx 0;
+}
 .load-more {
   text-align: center;
-  padding: 32rpx;
   color: #007aff;
   font-size: 28rpx;
+  padding: 32rpx 0;
+  cursor: pointer;
 }
 </style> 

src/sheep/api/index.ts

@@ -33,3 +33,5 @@ export { default as flowStatisticsApi } from "./flowStatistics"
 export { default as individualOrderApi } from "./individualOrder"
 
 export { default as hardApi } from "./hard"
+
+export { default as noticeApi } from "./notice"

src/sheep/api/notice.ts

@@ -0,0 +1,23 @@
+import request from '@/sheep/utils/request'
+
+export default {
+  // 公告分页列表
+  getNoticePage: (params: { current: number; size: number }) =>
+    request({
+      url: '/integrated/notice/app/page',
+      method: 'GET',
+      params,
+    }),
+  // 公告详情
+  getNoticeDetail: (id: string) =>
+    request({
+      url: `/integrated/notice/app/${id}`,
+      method: 'GET',
+    }),
+  // 增加浏览量
+  addNoticeView: (id: string) =>
+    request({
+      url: `/integrated/notice/app/view/${id}`,
+      method: 'POST',
+    }),
+}