公告详细和公告列表的修改

pages/notice/detail/index.vue

@@ -120,19 +120,35 @@
         <text class="loading-text">加载中...</text>
       </view>
     </scroll-view>
+    
+    <!-- 管理员操作按钮（固定在底部） -->
+    <view class="admin-actions" v-if="isAdmin && !loading && noticeDetail.id">
+      <uv-button type="warning" size="normal" @click="handleEdit">修改</uv-button>
+      <uv-button type="error" size="normal" @click="handleDelete">删除</uv-button>
+    </view>
   </view>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
-import { getNoticeDetail } from '@/api';
+import { storeToRefs } from 'pinia';
+import { getNoticeDetail, deleteNotice } from '@/api';
+import { useUserStore } from '@/store/user';
 
 // 页面参数
 const noticeId = ref('');
 const noticeDetail = ref({});
 const loading = ref(false);
 
+// 用户角色判断
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const isAdmin = computed(() => {
+  if (!userInfo.value || !Array.isArray(userInfo.value.roles)) return false;
+  return userInfo.value.roles.some((role) => ['admin', 'sys_admin'].includes(role));
+});
+
 // 计算是否有接收信息
 const hasReceiveInfo = computed(() => {
   return (noticeDetail.value.receiveUserList && noticeDetail.value.receiveUserList.length > 0) ||
@@ -322,6 +338,72 @@ const previewAttachment = (attach) => {
     }
   });
 };
+
+// 编辑公告
+const handleEdit = () => {
+  if (!noticeId.value) {
+    uni.showToast({
+      title: '公告ID无效',
+      icon: 'none'
+    });
+    return;
+  }
+  
+  uni.navigateTo({
+    url: `/pages/notice/edit/index?id=${noticeId.value}`
+  });
+};
+
+// 删除公告
+const handleDelete = async () => {
+  if (!noticeId.value) {
+    uni.showToast({
+      title: '公告ID无效',
+      icon: 'none'
+    });
+    return;
+  }
+  
+  uni.showModal({
+    title: '删除确认',
+    content: '删除后将无法恢复，确认删除该公告吗？',
+    confirmText: '删除',
+    confirmColor: '#f56c6c',
+    success: async (res) => {
+      if (!res.confirm) return;
+      try {
+        await deleteNotice([noticeId.value]);
+        uni.showToast({
+          title: '删除成功',
+          icon: 'success'
+        });
+        // 延迟返回，让用户看到成功提示
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1500);
+      } catch (error) {
+        console.error('删除公告失败:', error);
+        uni.showToast({
+          title: error?.message || '删除失败',
+          icon: 'none'
+        });
+      }
+    }
+  });
+};
+
+// 监听公告更新事件
+const handleNoticeUpdated = () => {
+  loadNoticeDetail();
+};
+
+onMounted(() => {
+  uni.$on('notice:updated', handleNoticeUpdated);
+});
+
+onBeforeUnmount(() => {
+  uni.$off('notice:updated', handleNoticeUpdated);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -336,6 +418,7 @@ const previewAttachment = (attach) => {
 .content-scroll {
   flex: 1;
   width: 100%;
+  padding-bottom: 80px; /* 为底部按钮留出空间 */
 }
 
 .notice-header {
@@ -612,5 +695,30 @@ const previewAttachment = (attach) => {
   font-size: 14px;
   color: #999;
 }
+
+/* 管理员操作按钮区域 */
+.admin-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 12px 16px;
+  display: flex;
+  gap: 12px;
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  justify-content: space-evenly;
+}
+
+.admin-actions::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #f0f0f0;
+}
 </style>
 

pages/notice/list/index.vue

@@ -1,101 +1,5 @@
 <template>
   <view class="notice-list-page">
-    <!-- 搜索筛选区域 -->
-    <view class="search-filter-section">
-      <view class="search-row">
-        <view class="search-item">
-          <text class="search-label">标题</text>
-          <uv-input
-            v-model="searchForm.title"
-            placeholder="请输入标题"
-            border="none"
-            :custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
-          />
-        </view>
-        <view class="search-item">
-          <text class="search-label">创建人</text>
-          <uv-input
-            v-model="searchForm.userName"
-            placeholder="请输入创建人"
-            border="none"
-            :custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
-          />
-        </view>
-      </view>
-      
-      <view class="filter-row">
-        <view class="filter-item">
-          <text class="filter-label">重要程度</text>
-          <view class="picker-trigger" @click="showLevelPicker = true">
-            <text :class="['picker-text', !searchForm.level && 'placeholder']">
-              {{ getLevelText(searchForm.level) || '请选择重要程度' }}
-            </text>
-            <text class="picker-arrow">▼</text>
-          </view>
-        </view>
-        
-        <!-- 重要程度选择弹窗 -->
-        <view v-if="showLevelPicker" class="modal-mask" @click="showLevelPicker = false">
-          <view class="modal-content" @click.stop>
-            <view class="modal-title">选择重要程度</view>
-            <view class="picker-options">
-              <view 
-                v-for="item in levelOptions" 
-                :key="item.value"
-                class="picker-option"
-                :class="{ active: searchForm.level === item.value }"
-                @click="selectLevel(item.value)"
-              >
-                <text>{{ item.label }}</text>
-                <text v-if="searchForm.level === item.value" class="check">✓</text>
-              </view>
-            </view>
-            <view class="modal-buttons">
-              <button class="modal-btn" @click="showLevelPicker = false">取消</button>
-              <button class="modal-btn primary" @click="showLevelPicker = false">确定</button>
-            </view>
-          </view>
-        </view>
-        
-        <view class="filter-item">
-          <text class="filter-label">是否置顶</text>
-          <view class="radio-group">
-            <view 
-              class="radio-item" 
-              :class="{ active: searchForm.top === '' }"
-              @click="searchForm.top = ''"
-            >
-              <text class="radio-text">全部</text>
-            </view>
-            <view 
-              class="radio-item" 
-              :class="{ active: searchForm.top === true }"
-              @click="searchForm.top = true"
-            >
-              <text class="radio-text">是</text>
-            </view>
-            <view 
-              class="radio-item" 
-              :class="{ active: searchForm.top === false }"
-              @click="searchForm.top = false"
-            >
-              <text class="radio-text">否</text>
-            </view>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 操作按钮 -->
-      <view class="action-buttons">
-        <uv-button type="primary" size="small" @click="handleSearch">搜索</uv-button>
-        <uv-button  type="primary" :plain="true" size="small" @click="handleReset">重置</uv-button>
-        <template v-if="isAdmin">
-          <uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
-          <uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
-          <uv-button type="error" size="small"  @click="handleDelete">删除</uv-button>
-        </template>
-      </view>
-    </view>
 
     <!-- 列表区域 -->
     <scroll-view 
@@ -109,29 +13,11 @@
           class="notice-card" 
           v-for="notice in notices" 
           :key="notice.id"
-          :class="{
-            'admin-selectable': isAdmin,
-            'selected': isAdmin && isNoticeSelected(notice.id)
-          }"
           @click="goToNoticeDetail(notice)"
         >
-
-
           <!-- 标题和标签行 -->
           <view class="notice-header">
-
             <view class="notice-title-row">
-              <template v-if="isAdmin">
-                <view
-                    class="card-select-btn"
-                    @click.stop="toggleNoticeSelection(notice.id)"
-                >
-                  <view
-                      class="checkbox-indicator"
-                      :class="{ checked: isNoticeSelected(notice.id) }"
-                  ></view>
-                </view>
-              </template>
               <text class="notice-title" :class="{ 'pinned': notice.top }">
                 {{ notice.title }}
               </text>
@@ -218,6 +104,9 @@
         </view>
       </view>
     </scroll-view>
+    
+    <!-- 新增公告悬浮球 -->
+    <FabPlus v-if="isAdmin" @click="handleCreate" />
   </view>
 </template>
 
@@ -228,6 +117,7 @@ import { getNoticeList, deleteNotice } from '@/api';
 import { usePagination } from '@/composables';
 import { truncateText } from '@/utils/textSolve/truncateText';
 import { useUserStore } from '@/store/user';
+import FabPlus from '@/components/FabPlus.vue';
 
 // 搜索表单
 const searchForm = ref({
@@ -297,50 +187,6 @@ const {
 // 公告列表
 const notices = computed(() => list.value);
 
-// 表格选择
-const selectedNoticeIds = ref([]);
-const isAllSelected = computed(() => {
-  const data = notices.value;
-  if (!data.length) return false;
-  return data.every((notice) => selectedNoticeIds.value.includes(notice.id));
-});
-
-const isNoticeSelected = (noticeId) => selectedNoticeIds.value.includes(noticeId);
-
-const toggleNoticeSelection = (noticeId) => {
-  if (!noticeId) return;
-  if (isNoticeSelected(noticeId)) {
-    selectedNoticeIds.value = selectedNoticeIds.value.filter((id) => id !== noticeId);
-  } else {
-    selectedNoticeIds.value = [...selectedNoticeIds.value, noticeId];
-  }
-};
-
-const handleSelectAll = () => {
-  if (isAllSelected.value) {
-    selectedNoticeIds.value = [];
-  } else {
-    selectedNoticeIds.value = notices.value.map((notice) => notice.id);
-  }
-};
-
-const clearTableSelection = () => {
-  selectedNoticeIds.value = [];
-};
-
-watch(
-  notices,
-  (newList) => {
-    if (!newList?.length) {
-      selectedNoticeIds.value = [];
-      return;
-    }
-    const ids = newList.map((item) => item.id);
-    selectedNoticeIds.value = selectedNoticeIds.value.filter((id) => ids.includes(id));
-  },
-  { immediate: true }
-);
-
 // 用户角色判断
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
@@ -356,7 +202,6 @@ const selectLevel = (value) => {
 
 // 搜索
 const handleSearch = () => {
-  clearTableSelection();
   reset();
   getList();
 };
@@ -369,7 +214,6 @@ const handleReset = () => {
     level: '',
     top: ''
   };
-  clearTableSelection();
   reset();
   getList();
 };
@@ -407,76 +251,6 @@ const handleCreate = () => {
     url: '/pages/notice/create/index'
   });
 };
-const handleEdit = () => {
-  if (!selectedNoticeIds.value.length) {
-    uni.showToast({
-      title: '请先选择要修改的公告',
-      icon: 'none'
-    });
-    return;
-  }
-
-  if (selectedNoticeIds.value.length > 1) {
-    uni.showToast({
-      title: '一次只能修改一条公告',
-      icon: 'none'
-    });
-    return;
-  }
-
-  const id = selectedNoticeIds.value[0];
-  if (!id) {
-    uni.showToast({
-      title: '请选择有效的公告',
-      icon: 'none'
-    });
-    return;
-  }
-
-  uni.navigateTo({
-    url: `/pages/notice/edit/index?id=${id}`
-  });
-};
-const handleDelete = async () => {
-  if (!selectedNoticeIds.value.length) {
-    uni.showToast({
-      title: '请先选择要删除的公告',
-      icon: 'none'
-    });
-    return;
-  }
-
-  const ids = selectedNoticeIds.value;
-
-  uni.showModal({
-    title: '删除确认',
-    content:
-      ids.length === 1
-        ? '删除后将无法恢复，确认删除该公告吗？'
-        : `已选择 ${ids.length} 条公告，删除后将无法恢复，确认删除吗？`,
-    confirmText: '删除',
-    confirmColor: '#f56c6c',
-    success: async (res) => {
-      if (!res.confirm) return;
-      try {
-        await deleteNotice(ids);
-        uni.showToast({
-          title: '删除成功',
-          icon: 'success'
-        });
-        clearTableSelection();
-        reset();
-        getList();
-      } catch (error) {
-        console.error('删除公告失败:', error);
-        uni.showToast({
-          title: error?.message || '删除失败',
-          icon: 'none'
-        });
-      }
-    }
-  });
-};
 
 // 管理员视图接收对象描述
 const formatReceiveInfo = (notice) => {
@@ -494,7 +268,6 @@ const formatReceiveInfo = (notice) => {
 };
 
 const handleNoticeUpdated = () => {
-  clearTableSelection();
   reset();
   getList();
 };
@@ -519,8 +292,10 @@ onBeforeUnmount(() => {
 }
 
 .search-filter-section {
+  position: fixed;
+  bottom: 0px;
   background: #fff;
-  padding: 16px;
+  padding: 6px;
   margin-bottom: 8px;
 }
 
@@ -618,11 +393,6 @@ onBeforeUnmount(() => {
   font-weight: 500;
 }
 
-.action-buttons {
-  display: flex;
-  gap: 12px;
-  margin-top: 12px;
-}
 
 .notice-scroll {
   flex: 1;
@@ -636,39 +406,6 @@ onBeforeUnmount(() => {
   gap: 12px;
 }
 
-.admin-action-row {
-  display: flex;
-  gap: 12px;
-
-}
-
-.checkbox-indicator {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 2px solid #c0c4cc;
-  background: #fff;
-  transition: all 0.2s;
-}
-
-.checkbox-indicator.checked {
-  border-color: #2885ff;
-  background: #2885ff;
-  position: relative;
-}
-
-.checkbox-indicator.checked::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 4px;
-  width: 5px;
-  height: 9px;
-  border: 2px solid #fff;
-  border-top: 0;
-  border-left: 0;
-  transform: rotate(45deg);
-}
 
 .notice-card {
   background: #fff;
@@ -686,33 +423,6 @@ onBeforeUnmount(() => {
   opacity: 0.9;
 }
 
-.notice-card.admin-selectable {
-  position: relative;
-  padding-top: 32px;
-}
-
-.notice-card.selected {
-  box-shadow: 0 4px 18px rgba(40, 133, 255, 0.18);
-}
-
-.card-select-btn {
-
-  top: 12px;
-  left: 12px;
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.98);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  z-index: 1;
-}
-
-.card-select-btn:active {
-  transform: scale(0.92);
-}
 
 .notice-header {
   display: flex;