src/api/notice/notice.js

@@ -2,9 +2,9 @@
 import request from '@/utils/request'
 
 //获取公告列表
-export function getNotice(){
+export function getNotice(pageNum){
     return request({
-        url:'/post/bulletin/list',
+        url:'/post/bulletin/list?pageNum=' +pageNum,
         method:'get'
     })
 }

src/views/notice/noticeList.vue

@@ -71,11 +71,12 @@
     </div>
     <!-- 分页 -->
     <div class="pageMenu">
-      <div id="dataNum">共0条</div>
+      <div id="dataNum">共{{ this.total }}条</div>
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="total"
+        :total="this.total"
+        @current-change="handleCurrentChange"
         :page-size="pageSize"
       >
       </el-pagination>
@@ -187,32 +188,41 @@ export default {
       value1: "",
       tableData: [],
       mockNoticeList: [],
-      total: 0,
-      pageSize: 5,
-      totalNum: "",
+      total: 1,
+      pageSize: 10,
+      pageNum: 1,
       row_ : "1",
-      noticeTime_: "1"
+      noticeTime_: "1",
+      currentPageData: [],
+      currentPage: 1,
     };
   },
   mounted() {
     //获取总条目的id
-    this.totalNum = document.querySelector("#dataNum");
+    // this.totalNum = document.querySelector("#dataNum");
     this.getMockNoticeList();
     // this.getTableList();
   },
 
   methods: {
     getMockNoticeList() {
-      getNotice().then((res) => {
+      getNotice(this.pageNum).then((res) => {
         //获取数据
         this.tableData = res.rows;
-        console.log(res);
+        this.total = res.total
 
-        //获取数据总数
-        this.totalNum.innerHTML = `共：${res.rows.length}条`;
-        this.total = res.rows.length;
+        console.log(res);
+        console.log(res.rows)
       });
     },
+    //分页
+    handleCurrentChange(val) {
+      getNotice(val).then((res) => {
+        this.tableData = res.rows
+        this.total = res.total
+        // console.log(res)
+      })
+    },
     // 删除按钮
     deleteNotice(row) {
       console.log(row);

src/views/publisher/publisherList.vue

@@ -1,3 +1,193 @@
 <template>
-    <h1>发行方管理</h1>
+  <div class="app">
+    <!-- 头部 -->
+    <div class="search-menu">
+      <div class="search-head">
+        <div>
+          <i id="search-head-text" class="el-icon-search"> 筛选搜索</i>
+        </div>
+        <div class="search-head-btn">
+          <el-button plain>重置</el-button>
+          <el-button type="primary">查询搜索</el-button>
+        </div>
+      </div>
+      <!-- 筛选发行方名称 -->
+      <div class="publisher-search">
+        <div class="publisher-name">发行方名称</div>
+        <div>
+          <el-input
+            class="search-input"
+            v-model="input"
+            placeholder="筛选发行方名称"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+    <!-- 发行方列表 -->
+    <div class="publisher-list">
+      <i class="el-icon-tickets"> 发行方列表</i>
+      <el-button id="addBtn" size="small">添加</el-button>
+    </div>
+    <!-- 数据栏 -->
+    <div class="data-list">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="id" label="ID"> </el-table-column>
+        <el-table-column prop="headPortrait" label="头像"> </el-table-column>
+        <el-table-column prop="publisherName" label="发行方名称">
+        </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template >
+            <el-button size="mini" type="text">修改</el-button>
+            <el-popconfirm title="你确定删除本条消息吗？">
+              <el-button id="deleteBtn" size="mini" type="text" slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="pageMenu">
+      <div id="dataNum">共{{ this.total }}条</div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+      >
+      </el-pagination>
+    </div>
+  </div>
 </template>
+
+
+
+<script>
+export default {
+  data() {
+    return {
+      input: "",
+        tableData: [],
+      total: 10,
+      pageSize: 10,
+      pageNum: 1,
+      mockPublisher:[]
+    };
+  },
+  mounted(){
+    this.getMockPublisher();
+    this.getTableList();
+  },
+  methods: {
+    getMockPublisher() {
+      var Mock = require("mockjs");
+      var data = Mock.mock({
+        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
+        "list|1-10": [
+          {
+            // 属性 id 是一个自增数，起始值为 1，每次增 1
+            "id|+1": 1,
+            headPortrait:'@word(3, 5)',
+            publisherName:'@word(5, 10)',
+          },
+        ],
+      });
+      this.mockPublisher = data;
+    },
+    //获取数据
+    getTableList(){
+      this.tableData = this.mockPublisher.list;
+    }
+  },
+};
+</script>
+
+
+
+<style scoped>
+.search-menu {
+  /* background: red; */
+  width: 1250px;
+  height: 150px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+}
+.search-head {
+  display: flex;
+  justify-content: space-between;
+}
+#search-head-text {
+  margin-top: 20px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+.search-head-btn {
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.publisher-search {
+  display: flex;
+  margin-left: 58px;
+}
+.publisher-name {
+  font-size: 13px;
+  font-family: PingFang SC;
+  color: #333333;
+  margin-top: 8px;
+  margin-right: 5px;
+}
+.search-input {
+  width: 200px;
+}
+
+.publisher-list {
+  width: 1250px;
+  height: 50px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-top: 30px;
+  line-height: 17px;
+  display: flex;
+  justify-content: space-between;
+}
+.el-icon-tickets {
+  margin-top: 17px;
+  margin-left: 20px;
+  font-family: PingFang SC;
+  font-size: 15px;
+}
+#addBtn {
+  width: 60px;
+  height: 30px;
+  margin-top: 10px;
+  margin-right: 32px;
+}
+.data-list {
+  width: 1250px;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.data-table {
+  margin: 0 auto;
+}
+#deleteBtn {
+  margin-left: 10px;
+}
+.pageMenu {
+  width: 1283px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+#dataNum {
+  font-size: 13px;
+  font-family: PingFang SC;
+  margin-top: 7px;
+  margin-right: 5px;
+}
+</style>