scocial-management-platform-frontend/src/views/main/notice-pop-list.vue

<template>
  <div class="notice-pop-list">
    <ul class="npl-box">
      <li v-for="(item, index) in listData" :key="index" @click="gotoDetail(item)">
        <div class="nplb-l">
          <div class="nplb-type">【通知】</div>
          <div class="nplb-icon"></div>
          <div class="nplb-title">
            {{ item.title }}
          </div>
        </div>
        <div class="nplb-r">
          {{ item.sendTime }}
        </div>
      </li>
    </ul>
    <el-pagination
      background
      class="smp-pagination"
      layout="prev, pager, next"
      :pager-count="5"
      :page-size="pagingConfig.perPageNum"
      :total="pagingConfig.totalNum"
      @current-change="pagingChange"
    >
    </el-pagination>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="true"
      :append-to-body="true">
      <div class="npl-detail">
        <div class="npld-summary">{{detail}}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // config: {
    //   default () {
    //     return {}
    //   }
    // }
  },
  data () {
    return {
      didNum: '',
      listData: [],
      url: 'http://124.225.17.80:8146/odae/clue/supervisionTask/pressTaskList',
      pagingConfig: {
        perPageNum: 10,
        totalNum: 0,
        currentPage: 1
      },
      dialogVisible: false,
      detail: {}
    }
  },
  mounted () {
    // this.getData()
  },
  methods: {
    getData () {
      this.getList(this.didNum)
    },
    getList () {
      this.$http.get(
        '/sys/notice/list'
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.setData(res.noticeList)
      }).catch(() => {

      })
    },
    pagingChange (num) {
      this.pagingConfig.currentPage += 1
      this.getData()
    },
    setData (d) {
      this.listData = d.map((e) => {
        return {
          ...e
        }
      })
      // this.listData
    },
    gotoDetail (item) {
      this.getDetail(item)
      // this.dialogVisible = true
      // this.detail = item
      // console.log(item.id)
      // if (this.didNum === 0) {
      //   this.pressRead(item)
      // }
    },
    getDetail (item) {
      this.$http.get(
        '/sys/notice/detail',
        {
          params: {
            id: item.id
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dialogVisible = true
        this.detail = res.detail
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.smp-list-time {
  // padding: 0!important;
}
</style>