feat: 新增信息发布、广播、公告入口及公告页面部分布局UI

1. 首页新增信息发布、广播、公告入口
2. 信息发布模块新增公告页面部分布局UI

src/pages.json

@@ -78,6 +78,26 @@
         "disableScroll": true
       }
     },
+    {
+      "path": "pages/info-publish/info-publish",
+      "type": "page"
+    },
+    {
+      "path": "pages/info-publish/notice-details",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/info-publish/notice",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/login/login",
       "type": "page",

src/pages/home/home.vue

@@ -180,21 +180,21 @@
       ]
     },
     {
-      title: '其他',
+      title: '信息发布',
       list: [
         {
-          id: 0,
+          id: 70,
-          title: '其他中心',
+          title: '广播',
           icon: '/static/logo.png'
         },
         {
-          id: 1,
+          id: 71,
-          title: '其他中心',
+          title: '公告',
           icon: '/static/logo.png'
         },
         {
-          id: 2,
+          id: 72,
-          title: '其他中心',
+          title: '信息发布',
           icon: '/static/logo.png'
         }
       ]
@@ -241,8 +241,26 @@
     })
   }
 
+  const toNotice = () => {
+    uni.navigateTo({
+      url: '/pages/info-publish/notice'
+    })
+  }
+
+  const toInfoPublish = () => {
+    uni.navigateTo({
+      url: '/pages/info-publish/info-publish'
+    })
+  }
+
   const clickItem = item => {
     console.log(item)
+    if (item.id === 71) {
+      toNotice()
+    }
+    if (item.id === 72) {
+      toInfoPublish()
+    }
   }
 </script>
 

src/pages/info-publish/info-publish.vue

@@ -0,0 +1,7 @@
+<template>
+  <view></view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/pages/info-publish/notice-details.vue

@@ -0,0 +1,151 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <TopNavigation title="公告详情"></TopNavigation>
+  <view class="notice-details-page">
+    <!-- 公告列表 -->
+    <view class="notice-list">
+      <view class="list-item" v-for="item in notices" :key="item.id">
+        <view class="item-title">{{ item.title }}</view>
+        <view class="item-content">{{ item.content }}</view>
+        <view class="item-info">
+          <text class="item-author">{{ item.author }}</text>
+          <text class="item-date">{{ item.date }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-btns">
+      <button class="recall-btn" @click="handleRecall">撤回</button>
+      <button class="share-btn" @click="handleShare">分享到微信</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 当前激活的标签页
+  const activeTab = ref('manage')
+
+  // 公告列表数据
+  const notices = ref([
+    {
+      id: 1,
+      title: '1',
+      content: '公告1内容',
+      author: 'HikMall_30013234A',
+      date: '2024-12-17'
+    }
+  ])
+
+  // 处理撤回按钮点击
+  const handleRecall = () => {}
+
+  // 处理分享到微信按钮点击
+  const handleShare = () => {}
+</script>
+
+<style lang="scss" scoped>
+  .notice-details-page {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+  }
+
+  .nav-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    background-color: #fff;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .notice-list {
+    padding: 15px;
+    list-style-type: none; /* 移除列表左侧的黑点 */
+
+    .list-item {
+      position: relative; /* 为绝对定位提供参考 */
+      padding: 15px;
+      margin-bottom: 10px;
+      background-color: #fff;
+      border-radius: 8px;
+
+      .item-title {
+        margin-bottom: 8px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+      .item-content {
+        margin-bottom: 8px;
+        color: #666;
+      }
+
+      .item-info {
+        display: flex;
+        gap: 10px;
+        font-size: 12px;
+        color: #999;
+      }
+
+      .item-status {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-weight: bold;
+        color: white; /* 白色字体 */
+        background-color: green; /* 绿色背景 */
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .bottom-btns {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: 10px 15px;
+    background-color: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .recall-btn,
+  .share-btn {
+    flex: 1;
+    flex-basis: 50%; /* 确保按钮等宽 */
+    height: 40px;
+    font-size: 14px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 4px;
+  }
+
+  .recall-btn {
+    margin-right: 10px;
+    color: #333;
+    background-color: #f5f5f5;
+  }
+
+  .share-btn {
+    color: #fff;
+    background-color: #007aff;
+  }
+</style>

src/pages/info-publish/notice.vue

@@ -0,0 +1,288 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <TopNavigation title="公告管理"></TopNavigation>
+  <view class="notice-page">
+    <!-- 标签页 -->
+    <view class="tabs">
+      <view
+        class="tab-item"
+        :class="{ active: activeTab === 'manage' }"
+        @click="activeTab = 'manage'"
+      >
+        公告管理
+      </view>
+      <view class="tab-item" :class="{ active: activeTab === 'list' }" @click="activeTab = 'list'">
+        公告栏
+      </view>
+    </view>
+
+    <!-- 提示信息 -->
+    <view class="tip-box">
+      <text>若需发布图片、视频公告，请在web端发布</text>
+      <button class="copy-btn" @click="copyWebUrl">复制地址</button>
+    </view>
+
+    <!-- 公告管理列表 -->
+    <view v-if="activeTab === 'manage'" class="notice-list">
+      <view class="list-item" v-for="item in listNotice" :key="item.id" @click="clickItem(item)">
+        <view class="item-title">{{ item.title }}</view>
+        <view class="item-content">{{ item.content }}</view>
+        <view class="item-info">
+          <text class="item-author">{{ item.author }}</text>
+          <text class="item-date">{{ item.date }}</text>
+        </view>
+        <view class="item-status">{{ item.status }}</view>
+      </view>
+    </view>
+
+    <!-- 公告栏列表 -->
+    <view v-if="activeTab === 'list'" class="notice-list">
+      <view class="list-item" v-for="item in listNotice" :key="item.id" @click="clickItem(item)">
+        <view class="item-title">{{ item.title }}</view>
+        <view class="item-content">{{ item.content }}</view>
+        <view class="item-info">
+          <text class="item-author">{{ item.author }}</text>
+          <text class="item-date">{{ item.date }}</text>
+        </view>
+        <view class="item-status">{{ item.status }}</view>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-btns">
+      <button class="draft-btn" @click="handleDraft">草稿箱</button>
+      <button class="publish-btn" @click="handlePublish">发布公告</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 当前激活的标签页
+  const activeTab = ref('manage')
+
+  const listNotice = ref([
+    {
+      id: 3,
+      title: '公告栏公告1',
+      content: '公告栏公告1内容',
+      author: 'HikMall_30013234C',
+      date: '2024-12-18',
+      status: '已发布'
+    },
+    {
+      id: 4,
+      title: '公告栏公告2',
+      content: '公告栏公告2内容',
+      author: 'HikMall_30013234D',
+      date: '2024-12-18',
+      status: '已发布'
+    }
+  ])
+
+  // 公告列表数据
+  const notices = ref([
+    {
+      id: 1,
+      title: '1',
+      content: '公告1内容',
+      author: 'HikMall_30013234A',
+      date: '2024-12-17',
+      status: '已发布'
+    },
+    {
+      id: 2,
+      title: '2',
+      content: '公告2内容',
+      author: 'HikMall_30013234B',
+      date: '2024-12-17',
+      status: '已发布'
+    }
+  ])
+
+  // 复制Web地址
+  const copyWebUrl = () => {
+    uni.setClipboardData({
+      data: 'https://your-web-url.com',
+      success: () => {
+        uni.showToast({
+          title: '复制成功',
+          icon: 'success'
+        })
+      }
+    })
+  }
+
+  const clickItem = item => {
+    console.log(item)
+    uni.navigateTo({
+      url: `/pages/info-publish/notice-details?id=${item.id}`
+    })
+  }
+
+  // 处理草稿箱按钮点击
+  const handleDraft = () => {
+    // 跳转到草稿箱页面
+  }
+
+  // 处理发布公告按钮点击
+  const handlePublish = () => {
+    // 跳转到发布公告页面
+  }
+</script>
+
+<style lang="scss" scoped>
+  .notice-page {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+  }
+
+  .nav-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    background-color: #fff;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* 居中显示 */
+  }
+
+  .tab-item {
+    flex: 1; /* 平均分布 */
+    padding: 10px 0;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .tab-item.active {
+    position: relative;
+    font-weight: 500;
+    color: #007aff;
+  }
+
+  .tab-item.active::after {
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    align-items: center;
+    width: 50%; /* 调整宽度 */
+    height: 2px; /* 调整高度 */
+    content: '';
+    background-color: #007aff;
+  }
+  .tip-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    font-size: 14px;
+    color: #999;
+    background-color: #fff7e6;
+
+    .copy-btn {
+      padding: 0;
+      margin: 0;
+      font-size: 14px;
+      color: #007aff;
+      background: none;
+      border: none;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+
+  .notice-list {
+    padding: 15px;
+    list-style-type: none; /* 移除列表左侧的黑点 */
+
+    .list-item {
+      position: relative; /* 为绝对定位提供参考 */
+      padding: 15px;
+      margin-bottom: 10px;
+      background-color: #fff;
+      border-radius: 8px;
+
+      .item-title {
+        margin-bottom: 8px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+      .item-content {
+        margin-bottom: 8px;
+        color: #666;
+      }
+
+      .item-info {
+        display: flex;
+        gap: 10px;
+        font-size: 12px;
+        color: #999;
+      }
+
+      .item-status {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-weight: bold;
+        color: white; /* 白色字体 */
+        background-color: green; /* 绿色背景 */
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .bottom-btns {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: 10px 15px;
+    background-color: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    .draft-btn,
+    .publish-btn {
+      flex: 1;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 4px;
+    }
+
+    .draft-btn {
+      margin-right: 10px;
+      color: #333;
+      background-color: #f5f5f5;
+    }
+
+    .publish-btn {
+      color: #fff;
+      background-color: #007aff;
+    }
+  }
+</style>

src/types/uni-pages.d.ts

@@ -8,6 +8,9 @@ interface NavigateToOptions {
        "/pages/application-list/application-list" |
        "/pages/code/code" |
        "/pages/get-code/get-code" |
+       "/pages/info-publish/info-publish" |
+       "/pages/info-publish/notice-details" |
+       "/pages/info-publish/notice" |
        "/pages/login/login" |
        "/pages/mine/mine" |
        "/pages/notification/notification" |