吉安感知网项目-前端
chenyao
2026-01-09 aaad8ac4e5a68ea9c0dfc79a20fd704db7af0078
uniapps/work-wx/src/pages/page/index.vue
@@ -13,27 +13,31 @@
            <text class="grid-text">{{baseListItem.title}}</text>
        </u-grid-item>
    </u-grid>
    <u-tabs :list="tabs" class="tabs">
      <template #right>
            <view
                style="padding-left: 4px;"
                @tap="$u.toast('插槽被点击')"
            >
                更多
            </view>
        </template>
    </u-tabs>
    <view class="card" v-for="(item,index) in announcementList" :key="index">
      <view class="left">
        <u-image :src="lbPng" :width="20" :height="20"></u-image>
      </view>
      <view class="right">
        <view class="c-top">{{ item.airspaceName }}</view>
        <view class="c-middle">{{ item.remarks || '暂无' }}</view>
        <view class="c-bottom">
          <view>{{ item.createTime }}</view>
          <view>{{ item.num || 0 }}</view>
          <view>{{ item.like || 0 }}</view>
    <view class="tabs-container">
      <u-tabs :list="tabs" @click="tabClick">
        <template #right>
              <view
                  style="padding-left: 4px;"
                  @tap="$u.toast('插槽被点击')"
              >
                  更多
              </view>
          </template>
      </u-tabs>
    </view>
    <view class="content">
      <view class="card" v-for="(item,index) in announcementList" :key="index">
        <view class="left">
          <u-image :src="docSvg" :width="30" :height="36"></u-image>
        </view>
        <view class="right">
          <view class="r-top">{{ item.title }}</view>
          <view class="r-middle">{{ item.description || '暂无' }}</view>
          <view class="r-bottom">
            <view>{{ item.time }}</view>
            <!-- <view>{{ item.num || 0 }}</view>
            <view>{{ item.like || 0 }}</view> -->
          </view>
        </view>
      </view>
    </view>
@@ -47,6 +51,7 @@
  import fxsqPng from '@/static/images/fxsq.svg'
  import flfgPng from '@/static/images/flfg.svg'
  import zczdPng from '@/static/images/zczd.svg'
  import docSvg from '@/static/images/doc.png'
  import { sysNoticePageInfoApi, flightAirspacePageInfoApi } from '@/api/index'
const lbList = reactive([]);
// lbPng 轮播图 5次
@@ -127,7 +132,14 @@
      current: 1,
      size: 10,
    })
    announcementList.value = res.data.data.records
    announcementList.value = res.data.data.records.map(item => ({
      ...item,
      title: item.airspaceName,
      description: item.remark,
      time: item.createTime,
      num: item.num,
      like: item.like,
    }))
  } catch (error) {
    uni.showToast({
      title: error.message,
@@ -137,23 +149,39 @@
  }
}
// 获取通知公告列表
async function getSysNoticeList() {
  try {
    const res = await sysNoticePageInfoApi({
      current: 1,
      size: 10,
      noticeType: 2,
    })
    if (res.code === 200) {
      announcementList.value = res.data.records
  // 获取通知公告列表
  async function getSysNoticeList(val) {
    try {
      const res = await sysNoticePageInfoApi({
        current: 1,
        size: 10,
        noticeType: val,
      })
      announcementList.value = res.data.data.records.map(item => ({
        ...item,
        title: item.noticeTitle,
        description: item.remark,
        time: item.pubDate,
        num: item.num,
        like: item.like,
      }))
    } catch (error) {
      uni.showToast({
        title: error.message,
        icon: 'none',
        duration: 2000,
      })
    }
  } catch (error) {
    uni.showToast({
      title: error.message,
      icon: 'none',
      duration: 2000,
    })
  }
function tabClick(value) {
  announcementList.value = []
  if (value.index === 0) {
    getFlightAirspaceList()
  } else if (value.index === 1) {
    getSysNoticeList(2)
  } else if (value.index === 2) {
    getSysNoticeList(1)
  }
}
@@ -166,6 +194,8 @@
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .u-grid {
    margin-top: 20px;
    .grid-text {
@@ -173,30 +203,66 @@
      font-weight: 500;
      font-size: 14px;
      color: #222324;
      margin-top: 10px;
    }
  }
  .tabs {
    background-color: white;
    border-radius: 10px;
    padding: 0 10px;
    margin-top: 20px;
  .tabs-container {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #4E5969;
    background: #FFFFFF;
    border-radius: 12px 12px 6px 6px;
    padding: 0 20rpx;
    margin-top: 10px;
  }
  .content {
    width: 100%;
    height: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 0 40rpx 40rpx 40rpx;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .card {
    background-color: white;
    padding: 0 10px;
    padding-top: 10px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EBEEF3;
    padding: 40rpx 0 30rpx 0;
    width: 100%;
    box-sizing: border-box;
    .left {
      width: 20px;
      height: 20px;
      .u-image {
          width: 60rpx;
          height: 72rpx;
        }
    }
    .right {
      flex: 1;
      margin-left: 10px;
      .c-bottom {
      width: calc(100% - 80rpx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .r-top {
        font-weight: 500;
        font-size: 14px;
        color: #1D2129;
      }
      .r-middle {
        font-weight: 400;
        font-size: 13px;
        color: #86909C;
      }
      .r-bottom {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 13px;
        color: #86909C;
        margin-top: 10rpx;
      }
    }
  }