feat: 分页

src/api/communications.js

@@ -0,0 +1,14 @@
+import {axios} from "@/requests/axios.config";
+
+const prefix = "/communications";
+
+function getAllCommunications(payload) {
+    const {userId, page, size, sort} = payload;
+    return axios.get("https://www.fastmock.site/mock/7626b3aeb545b939cbf526e8fcfda744/api/communications", {params: {userId, page, size, sort}});
+}
+
+const communicationsAPIs = {
+    getAllCommunications,
+};
+
+export default communicationsAPIs;

src/api/index.js

@@ -8,6 +8,7 @@ import messageAPIs from "@/api/message";
 import groupAPIS from  "@/api/group";
 import projectAPIs from "@/api/project";
 import courseWareAPIs from "@/api/courseWare";
+import communicationsAPIs from "@/api/communications";
 
 const api = {
   ...userAPIs,
@@ -19,7 +20,8 @@ const api = {
   ...messageAPIs,
   ...groupAPIS,
   ...projectAPIs,
-  ...courseWareAPIs
+  ...courseWareAPIs,
+  ...communicationsAPIs
 };
 
 export default api;

src/views/CommunicationPage/CommunicationPage.vue

@@ -1,37 +1,61 @@
 <template>
-    <div id="communication-page">
-        <div class="communication-page-aside">
-            <div class="communication-page-menu">
-                <el-button class="menu-button" round @click="toPage('CommunicationExplore')"
-                           :class="$route.name==='CommunicationExplore'?'current':''">发现
-                </el-button>
-                <el-button class="menu-button" round @click="toPage('CommunicationPublish')"
-                           :class="$route.name==='CommunicationPublish'?'current':''">发布
-                </el-button>
-                <el-button class="menu-button" round @click="toPage('CommunicationManage')"
-                           :class="$route.name==='CommunicationManage'?'current':''">我的
-                </el-button>
-            </div>
-        </div>
-        <router-view/>
-    </div>
+  <el-row id="test-page-body">
+    <el-col :span="3">
+      <el-card style="position: fixed;">
+        <el-menu default-active="1">
+          <el-menu-item index="0" @click="toPage('Portal')">
+            <el-icon>
+              <Back/>
+            </el-icon>
+            <span style="padding-left: 20px">返回首页</span>
+          </el-menu-item>
+          <el-menu-item index="1" @click="toPage('CommunicationExplore')">
+            <el-icon>
+              <Search/>
+            </el-icon>
+            <span style="padding-left: 20px">发现交流</span>
+          </el-menu-item>
+          <el-menu-item index="2" @click="toPage('CommunicationPublish')">
+            <el-icon>
+              <Edit/>
+            </el-icon>
+            <span style="padding-left: 20px">发布交流</span>
+          </el-menu-item>
+          <el-menu-item index="3" @click="toPage('CommunicationManage')">
+            <el-icon>
+              <User/>
+            </el-icon>
+            <span style="padding-left: 20px">我的发布</span>
+          </el-menu-item>
+        </el-menu>
+      </el-card>
+    </el-col>
+    <el-col :span="2"/>
+    <el-col :span="18">
+      <router-view/>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 export default {
   name: "Communication",
+  data(){
+    return{
+      activeIndex: "1",
+    };
+  },
   mounted() {
-    window.addEventListener("scroll", this.handleMenuScroll);
+    // window.addEventListener("scroll", this.handleMenuScroll);
   },
   methods: {
     toPage(name) {
       this.$router.push({name});
     },
-
-    handleMenuScroll(e){
-      const menu = document.getElementsByClassName("communication-page-menu")[0];
-      menu.style.top = window.pageYOffset + "px";
-    }
+    // handleMenuScroll(e){
+    //   const menu = document.getElementsByClassName("communication-page-menu")[0];
+    //   menu.style.top = window.pageYOffset + "px";
+    // }
   }
 };
 </script>
@@ -57,4 +81,16 @@ export default {
     width: 200px;
     margin: 15px auto auto;
 }
+
+#test-page-body {
+  margin: 40px 60px 80px 0;
+  min-height: calc(100vh - 340px);
+  position: relative;
+}
+
+.test-page-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 20px;
+}
 </style>

src/views/CommunicationPage/ExplorePage/ExploreItem.vue

@@ -1,9 +1,15 @@
 <template>
     <el-card class="explore-item" shadow="never">
+        <div class="explore-item-star" >
+          <el-icon v-if="starred===true" style="font-size: 20px" @click="star()"><Star /></el-icon>
+          <el-icon v-if="starred===false" style="font-size: 25px;color: orange" @click="cancelStar()"><StarFilled /></el-icon>
+        </div>
         <div class="explore-item-description">
             <h1 class="description-title">{{ title}}</h1>
             <div style="font-size: 14px;margin-top: 5px">
-                <span style="color: var(--el-color-danger)">{{ type }}</span>
+                <span style="color: var(--el-color-danger)" v-if="type==='puzzle'">难题</span>
+              <span style="color: var(--el-color-success)" v-if="type==='event'">活动</span>
+              <span style="color: var(--el-color-primary)" v-if="type==='other'">其他</span>
                 <span style="margin-left: 14px">{{ publisherName }}</span>
                 <span style="margin-left: 14px">{{ organization }}</span>
                 <span style="margin-left: 14px">{{ email }}</span>
@@ -16,6 +22,7 @@
 </template>
 
 <script>
+import {ElMessage} from "element-plus";
 export default {
   name: "ExploreItem",
   props: {
@@ -49,7 +56,18 @@ export default {
     deadline(){
       return this.communicationVO.deadline;
     },
+    starred(){
+        return this.communicationVO.starred;
+    },
   },
+  methods: {
+    star(){
+      ElMessage.success("收藏成功");
+    },
+    cancelStar(){
+      ElMessage.success("取消收藏成功");
+    },
+  }
 };
 </script>
 
@@ -68,7 +86,7 @@ el-card {
 }
 
 .explore-item-description {
-
+  margin-left: 10px;
 }
 
 .explore-item-img {

src/views/CommunicationPage/ExplorePage/ExplorePage.vue

@@ -10,7 +10,10 @@
             </div>
 
           <div class="explore-sorter">
-            <el-select class="sort-select" style="width: 150px;" placeholder="排序方式" v-model="sort">
+            <el-select class="sort-select" style="width: 150px;" placeholder="排序方式"
+                       v-model="sort"
+                       @change="sortChange"
+            >
               <template #prefix>
                   <span style="padding-left: 5px;">
                     <i class="el-icon-sort"></i>
@@ -31,6 +34,15 @@
         <div class="explore-main">
             <ExploreItem class="explore-item" v-for="communication in communicationList" :key="communication.id" :communicationVO="communication" />
         </div>
+        <div class="pagination">
+          <el-pagination
+              layout="prev, pager, next"
+              :page-size="size"
+              :total="total"
+              @current-change="pageChange"
+          >
+          </el-pagination>
+        </div>
     </div>
 </template>
 
@@ -42,6 +54,9 @@ export default {
   components: {ExploreItem},
   data() {
     return {
+      page: 1,
+      size: 5,
+      total: 0,
       // explore-selector
       checkAll: true,
       checkedTypes: ["难题", "活动", "其他"],
@@ -49,33 +64,28 @@ export default {
       isIndeterminate: false,
       // explore-search
       content: "",
-      sort: "",
-      communicationList: [
-          {id: 1, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "赵礼菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "难题",
-            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
-            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
-            publishTime: "2022-09-10",
-            deadline: "2024-10-09"
-          },
-          {id: 2, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "礼菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "活动",
-            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
-            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
-            publishTime: "2022-09-10",
-            deadline: "2024-10-09"
-          },
-          {id: 3, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "赵菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "其他",
-            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
-                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
-                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
-                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
-            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
-            publishTime: "2022-09-10",
-            deadline: "2024-10-09"
-          },
-          ]
+      sort: "publishAsc",
+      communicationList: [],
     };
   },
+  computed: {
+    userId() {
+      return Number(this.$store.state.user.id);
+    },
+  },
   methods: {
+    fetchData(){
+      const payload = {
+        userId: this.userId,
+        page: this.page,
+        size: this.size,
+        sort: this.sort
+      };
+      this.$apis.getAllCommunications(payload).then(res=>{
+        this.communicationList = res.data.data;
+        this.total = this.communicationList.length;
+      });
+    },
     handleCheckAllChange(val) {
       this.checkedTypes = val ? this.types : [];
       this.isIndeterminate = false;
@@ -84,8 +94,18 @@ export default {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.types.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.types.length;
-    }
-  }
+    },
+    pageChange(currentPage){
+      this.page = currentPage;
+      this.fetchData();
+    },
+    sortChange(){
+      this.fetchData();
+    },
+  },
+  async mounted() {
+    this.fetchData();
+  },
 };
 </script>
 
@@ -122,4 +142,10 @@ export default {
 .explore-item{
     margin-bottom: 10px;
 }
+
+.pagination{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>