up

src/views/msg/component/msg2.vue

@@ -4,7 +4,8 @@
       {{ info.msgContent }}
     </span>
     <el-button class="ml-20" size="mini" type="text" plain @click="download"
-      >立即下栽</el-button
+    >立即查看
+    </el-button
     >
   </div>
 </template>

src/views/msg/index.vue

@@ -2,30 +2,41 @@
   <el-card shadow="hover">
     <div>
       <el-empty description="暂无数据" v-if="data.length === 0"></el-empty>
-      <el-collapse @change="change" accordion v-else>
-        <el-collapse-item v-for="i in data" :name="i.id" :key="i.id">
-          <template #title>
-            <div class="flex flex-center flex-justify-between full-width">
-              <div
-                class="padding-left flex flex-align-center flex-justify-start"
-              >
+      <div class="flex flex-col" v-else>
+        <el-collapse @change="change" accordion>
+          <el-collapse-item v-for="i in data" :name="i.id" :key="i.id">
+            <template #title>
+              <div class="flex flex-center flex-justify-between full-width">
                 <div
-                  class="dot"
-                  :style="i.readFlag === 0 ? '' : 'background-color: #d6d6d6'"
-                />
-                <span>{{ i.titile }}</span>
+                    class="padding-left flex flex-align-center flex-justify-start"
+                >
+                  <div
+                      class="dot"
+                      :style="i.readFlag === 0 ? '' : 'background-color: #d6d6d6'"
+                  />
+                  <span>{{ i.titile }}</span>
+                </div>
+                <span class="padding-right">{{ i.createTime }}</span>
               </div>
-              <span class="padding-right">{{ i.createTime }}</span>
-            </div>
-          </template>
-          <div class="full-width flex flex-justify-start padding">
+            </template>
+            <div class="full-width flex flex-justify-start padding">
             <span v-if="i.msgCategory === 1" class="ml-20">{{
-              i.msgContent
-            }}</span>
-            <msg2 v-else-if="i.msgCategory === 2" :info="i" />
+                i.msgContent
+              }}</span>
+              <msg2 v-else-if="i.msgCategory === 2" :info="i"/>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <div class="full-width flex flex-justify-between mt-20">
+          <div></div>
+          <div class="flex flex-center">
+            <span class="mr-15">共{{ total }}条</span>
+            <el-pagination layout="prev, pager, next" :total="total" :page-size="page.size"
+                           @current-change="changePage" :current-page.sync='page.current'
+            />
           </div>
-        </el-collapse-item>
-      </el-collapse>
+        </div>
+      </div>
     </div>
   </el-card>
 </template>
@@ -48,8 +59,9 @@ export default {
       data: [],
       page: {
         current: 1,
-        size: 10
-      }
+        size: 15
+      },
+      total: '',
     }
   },
   created() {
@@ -60,15 +72,20 @@ export default {
       this.$api.msg.list(this.page).then(res => {
         if (res.code === 200) {
           this.data = res.data.records
+          this.total = res.data.total
         }
       })
     },
+    changePage(val) {
+      this.page.current = val
+      this.list()
+    },
     change(row) {
       const tmp = this.data.find(ele => ele.id === row)
       if (tmp && tmp.readFlag === 1) {
         return
       }
-      this.$api.msg.markRead({ id: row }).then(res => {
+      this.$api.msg.markRead({id: row}).then(res => {
         if (res.code === 200) {
           this.data = this.data.map(ele => {
             if (ele.id === row) {