starwork-uniapp/src/pages/info-publish/notice.vue

<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 = () => {
    // 跳转到发布公告页面
    uni.navigateTo({
      url: '/pages/info-publish/announce-notice'
    })
  }
</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>