通知列表

wwf

昨天 34f5733bc1f126c572580fa849b9403dfcddd84b

 src/views/main/notice/list.vue

@@ -1,3 +1,197 @@
<template>
  <div class="main-content">列表</div>
</template>
  <div>
    <div class="content-bg">
      <div class="main-content">
        <ReturnBtn></ReturnBtn>

        <el-row class="mt-6">
          <el-text class="text-title">通知公告</el-text>
        </el-row>

        <el-row class="mt-5">
          <el-input 
            v-model="filter.keyword" 
            style="width: 739px;height: 70px;"
            placeholder="输入关键字搜索" 
          >
            <template #append>
              <el-button class="append-btn" type="primary">
                <el-text class="text-white text-xl">搜 索</el-text>
              </el-button>
            </template>
          </el-input>
        </el-row>
      </div>
    </div>
    <div class="main-content py-4">
      <el-row class="mb-6">
        <el-select v-model="filter.area" placeholder="筛选所属地区" style="width: 240px">
          <el-option
            v-for="item in areaItems"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-row>

      <el-card 
        v-for="(notice,index) in filterNoticeList" 
        :key="`notice${index}`"
        class="mt-3 p-4 py-3"
        shadow="never"
      >
        <el-row justify="space-between" align="middle">
          <div>
            <el-row><el-text class="text-lg text-black font-medium">{{ notice.title }}</el-text></el-row>
            <el-row class="mt-2">
              <el-text style="margin-right: 40px;">发布时间：{{ notice.publishTime }}</el-text>
              <el-text>所属地区：{{ notice.area }}</el-text>
            </el-row>
          </div>
          <div>
            <el-button text type="primary" @click="goNoticeDetail(notice.id)">点击查看详情>></el-button>
          </div>
        </el-row>
      </el-card>

      <el-row justify="end" class="my-7" v-if="noticeList.length > 0">
        <el-text class="mr-4 text-note">共{{ totalCount }}项数据</el-text>
        <el-pagination
          v-model:current-page="filter.pageNo"
          v-model:page-size="filter.pageSize"
          background 
          layout="prev, pager, next" 
          :total="totalCount" 
        />
      </el-row>

      <el-row class="mt-5" v-if="noticeList.length == 0" justify="center">
        <el-text>暂无公告~</el-text>
      </el-row>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 5,
      filter: {
        pageNo: 1,
        pageSize: 5,
        keyword: '',
        area: '',
      },
      areaItems: [
        { label: '广东省', value: '' },
        { label: '广州市', value: '广州市' },
        { label: '深圳市', value: '深圳市' }
      ],
      noticeList: [],
    }
  },
  computed: {
    filterNoticeList() {
      return this.noticeList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
    }
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    getNoticeList() {
      setTimeout(() => {
        this.noticeList = 
        [
          {
            id: '1',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知1",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '2',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知2",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '3',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知3",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '4',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知4",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '5',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知5",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '6',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知6",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '7',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知7",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '8',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知8",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '9',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知9",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
          {
            id: '10',
            title: "关于公布2024年广东省产教评技能生态链链主培育单位入选名单的通知10",
            publishTime: '2024-07-12 14:24:33',
            area: '广东省',
          },
        ]
        this.totalCount = 10
      }, 400)
    },
    goNoticeDetail(id) {
      this.$router.push(`/main/noticeDetail/${id}`)
    },
  }
}

</script>
<style scoped>
.content-bg {
  height: 240px;
  background-image: url('@/assets/images/contentBg.png');
  background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
  background-size: cover;
}
:deep(.el-input__inner) {
  padding-left: 10px;
  font-size: 18px;
}
.append-btn {
  width: 114px;
  height: 100%;
  background-color: var(--el-color-primary) !important;
}
</style>