mall4pc-bbc/pages/notice-list.vue

<template>
  <div class="notice-list">
    <div class="content">
      <div class="crumbs">
        <nuxt-link to="/" class="item-a" v-if="shopId==0">{{$t('commonHead.home')}}</nuxt-link>
        <nuxt-link :to="`shopIndex?sid=${shopId}&shopName=${shopName}`" class="item-a" v-else>{{shopName}}-{{$t('freeShop.storeHome')}}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span">{{shopId==0 ? $t('lanhaiHeadlines') : $t('storeAnnouncement')}}</span>
      </div>
      <div class="list">
        <div class="item" v-for="item in noticeList" :key="item.id" @click="goNoticeDet(item.id)">
          <div class="tit">{{item.title}}</div>
          <div class="time">{{item.publishTime}}</div>
        </div>
      </div>
      <div v-if="!noticeList.length" class="empty-tips base">
        <img src="~/assets/images/emptyPic/not-found.png" />
        <p>{{$t('shopInfo.noData')}}</p>
      </div>
      <!-- 页码 -->
      <pagination v-model="current" :pages="pages" @changePage="getNoticeList"></pagination>
      <!-- /页码 -->
    </div>
  </div>
</template>

<script>

import Pagination from '~/components/pagination'

export default {
  components: { Pagination },
  data () {
    return {
      noticeList: [],  // 公告列表
      pages: 1, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      shopId: this.$route.query.shopId || 0,
      shopName : this.$route.query.shopName || ''
    }
  },
  mounted () {
    document.title = this.shopId == 0 ? this.$i18n.t('lanhaiHeadlines') : this.$i18n.t('storeAnnouncement')
    this.getNoticeList(1)
  },
  methods: {

    // 获取公告列表
    getNoticeList (cur) {
      this.$axios.get('/shop/notice/noticeList/' + this.shopId, {
        params: {
          current: cur,  //当前页
          size: 10
        }
      }).then(({ data }) => {
        this.noticeList = data.records
        this.pages = data.pages
      })
    },

    // 去公告详情
    goNoticeDet (id) {
      this.$router.push({
        path: '/notice-detail',
        query: {
          id: id,
          shopId: this.shopId,
          shopName: this.shopName
        }
      })
    }

  },
}
</script>

<style scoped src='~/assets/css/notice-list.css'></style>