个人中心+流程管理

src/views/system/processManage/runningProcess/module/detail.vue

@@ -32,6 +32,7 @@
           <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">任务列表</li>
           <li :class="{'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">审批列表</li>
         </ul>
+        <div v-if="activeIndex == 1 || activeIndex == 2" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div>
         <component :is="comName" class="component-cont" />
       </div>
       <div slot="footer" class="dialog-footer">
@@ -84,6 +85,9 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.detail-tab{
+  position: relative;
+}
 .detail-dialog{
   .detail-info,
   .detail-list{
@@ -154,5 +158,23 @@ export default {
       }
     }
   }
+  .double-click-btn{
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    line-height: 26px;
+    span{
+      display: inline-block;
+      font-size: 12px;
+      color: #545B65;
+    }
+    i{
+      display: inline-block;
+      color: #0348F3;
+    }
+  }
 }
 </style>

src/views/system/user/messageCenter/module/list.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="message-center-list">
-    <div class="more-btn"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
-    <div class="message-item" @click="handleDetail(isIndex)">
+    <div v-if="hasMore" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
+    <div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(isIndex)">
       <div class="message-date">2020-10-01 10:00:00</div>
       <div class="message-cont">
         <div class="message-cont-info">
           <span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ title }}</span>
           <span class="is-read-tip">未读</span>
-          <div class="message-title">这是系统通知标题</div>
+          <div class="message-title">{{ item.name }}</div>
           <ul class="message-list-info">
             <li>创建人：admin</li>
             <li>创建时间：2020-10-01 10:00:00</li>
@@ -52,7 +52,12 @@ export default {
       isIndex: 0,
       title: '系统通知',
       messageVisible: false,
-      opinionTxt: ''
+      opinionTxt: '',
+      loading: false, // 是否正在加载中
+      hasMore: true, // 是否还有更多数据
+      items: [],
+      currentPage: 1,
+      pageSize: 10
     }
   },
   watch: {
@@ -62,11 +67,38 @@ export default {
     }
   },
   created() {
+    this.loadData()
   },
   mounted() {
-
   },
   methods: {
+    // 加载数据方法
+    loadData() {
+      this.loading = true
+      setTimeout(() => {
+        const newData = Array.from(Array(this.pageSize), (_, index) => {
+          const key = (this.currentPage - 1) * this.pageSize + index
+          return {
+            key,
+            name: `这是消息标题${key}`,
+            age: 18 + key
+          }
+        })
+        this.items = [...newData, ...this.items]
+        console.log(this.items)
+        this.currentPage++
+        this.loading = false
+        if (this.currentPage > 2) {
+          this.hasMore = false
+        }
+      }, 1000)
+    },
+    loadMore() {
+      if (this.loading) {
+        return
+      }
+      this.loadData()
+    },
     getIndex() {
       console.log(this.isIndex)
       switch (this.isIndex) {
@@ -113,6 +145,37 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+[data-theme=dark] .message-center-list{
+  background-color: transparent;
+  .more-btn{
+    color: #339cff;
+  }
+  .message-item{
+    .message-cont{
+      background-color: #02255f;
+      .message-cont-info{
+        color: #fff;
+        .is-read-tip{
+          color: #1890ff;
+          border: 1px solid #339cff;
+          background-color: #02255f;
+        }
+      }
+      .message-more{
+        color: #3a99fd;
+        border-top: 1px solid #113d72;
+        i{
+          color: #3a99fd;
+        }
+      }
+    }
+  }
+  .message-title{
+    font-weight: 600;
+    color: #3a99fd;
+  }
+}
+
 .message-center-list{
   height: calc(100% - 90px);
   padding: 16px 30px;