添加：消息中心相关内容

src/components/new_diy/membertop.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="user-info">
             <div class="user-name name-one">
-              <span class="name-a nickname" @click="toEditAvatar">{{ datas.data&&datas.data.nickname }} 
+              <span class="name-a nickname" @click="toEditAvatar">{{ datas.data&&datas.data.nickname }}
                 <span @click.stop="TapEdit" class="TapEditClass" v-if="datas.data&&datas.data.member_team">{{datas.data&&datas.data.member_team.team_name}}</span>
               </span>
               <span class="name-b idStyle" v-if="datas.show_ID">ID:{{ datas.data&&datas.data.member_id }} </span>
@@ -341,6 +341,13 @@
                 </div>
                 <div class="name-b-b" style="font-size: 12px; max-width: 7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{datas.data&&datas.data.level_name}}</div>
               </div>
+              <div class="notice-content" @click="goToMessage">
+                <div class="notice-img">
+                  <img src="../../assets/images/member/message-icon.png" />
+                </div>
+                <div class="notice-title">消息</div>
+                <div class="top-drop" v-if="datas.data.unread_message > 0"></div>
+              </div>
             </div>
             <div class="name_invite">
               <div class="name-c idStyle" v-if="datas.show_ID">ID：{{ datas.data&&datas.data.member_id }}</div>
@@ -616,6 +623,11 @@ export default {
         duration: 1000
       });
     },
+    // 进入消息
+    goToMessage(){
+      this.$router.push(this.fun.getUrl('message_center_index'));
+    }
+
   },
 };
 </script>
@@ -1860,6 +1872,41 @@ export default {
               z-index: 0;
             }
           }
+
+          .notice-content{
+            position: absolute;
+            right: 30px;
+            top: 16px;
+            display: inline-flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            height: 30px;
+
+            .notice-img{
+              width: 17px;
+              height: 15px;
+              line-height: 15px;
+              img{
+                max-width: 100% !important;
+                max-height: 100% !important;
+              }
+            }
+            .notice-title{
+              font-size: 14px;
+            }
+            .top-drop{
+              position: absolute;
+              top: 2px;
+              right: -1px;
+              width: 6px;
+              height: 6px;
+              background: #fb3146;
+              border-radius: 50%;
+              border: 1px solid #f6e1e8;
+            }
+          }
         }
 
         .name_invite {
@@ -1887,6 +1934,8 @@ export default {
         }
       }
     }
+
+
   }
 
   .header-four-center {

src/router/index.js

@@ -10414,6 +10414,16 @@ const routes = [
       foot: true
     }
   },
+  // 消息中心
+  {
+    path: "/member/message_center/index",
+    name: "message_center_index",
+    component:()=>import("../views/member/message_center/index"),
+    meta: {
+      title: "消息中心",
+      foot: true
+    }
+  },
 
 
 ]

src/views/member/message_center/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <c-title :hide="false" text="消息中心" tolink="detailed"></c-title>
+    <div class="content-box">
+      <!--消息列表-->
+      <div class="message-content" ref="messageContent">
+        <div class="message-list" ref="messageList" v-if="Object.keys(list).length > 0">
+          <div class="message-block" v-for="(item,index) in list" :key="index" :id="'block_id_' + item.read_id">
+            <div class="message-block-content">
+              <div class="message-block-top">
+                <div class="message-block-top-image">
+                  <img class="top-image" src="../../../assets/images/member/notice.png" />
+                  <div class="top-drop" v-if="parseInt(item.is_see) === 0"></div>
+                </div>
+                <div class="message-block-top-title">通知消息</div>
+              </div>
+              <div class="message-block-message">{{ item.message_title }}</div>
+              <div class="message-block-bottom" @click="seeDetails(item)">
+                <div class="message-block-bottom-left">查看详情</div>
+                <div class="message-block-bottom-right">
+                  {{ item.created_at }}<i class="fa fa-angle-right"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <van-empty description="暂无新消息" v-else />
+      </div>
+      <!--消息详细弹框-->
+      <van-popup v-model="show" position="bottom" :style="{ 'min-height': '100%' }" closeable>
+        <div class="show-content">
+          <div class="show-title">{{ show_title }}</div>
+          <div class="show-text" v-html="show_content"></div>
+        </div>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 弹框内容
+      show: false,
+      show_title: '',
+      show_content: '',
+      // 分页信息
+      list: [],
+      page: 1,
+      total_page: 0,
+      // 上拉加载更多
+      is_load_more: false,
+    };
+  },
+  activated() {
+    this.getList();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
+  },
+  methods: {
+    // 其他列表获取
+    getList() {
+      let _this = this;
+      let loading = _this.loading('加载中...');
+      let params = {
+        page: _this.page
+      };
+      $http.get("plugin.message-center.api.index.index", params).then((res) => {
+        if (parseInt(res.result) === 1) {
+          let data = res.data;
+          _this.page = data.current_page;
+          _this.total_page = data.last_page;
+          if(data.current_page == 1){
+            _this.list = data.data;
+            _this.$nextTick(() => {
+              let messageContent = _this.$refs.messageContent;
+              messageContent.scrollIntoView({block: "end", inline: "nearest",behavior: 'instant'});
+              setTimeout(function() {
+                loading.close();
+                _this.is_load_more = true;
+              }, 500);
+            });
+          }
+          else{
+            let _list = Object.assign({},_this.list);
+            let lastId = _list[Object.values(_list).length - 1].read_id;
+            _this.list = _this.list.concat(data.data);
+            _this.$nextTick(() => {
+              let idName = 'block_id_' + lastId;
+              document.getElementById(idName).scrollIntoView({block: "start", inline: "nearest",behavior: 'instant'});
+              // 处理完成
+              setTimeout(function() {
+                loading.close();
+                _this.is_load_more = true;
+              }, 500);
+            });
+          }
+        }else{
+          loading.close();
+        }
+      }).catch((error) => {
+        loading.close();
+      });
+    },
+    // 查看详情
+    seeDetails(item){
+      let _this = this;
+      let params = {
+        id: item.id,
+        read_id: item.read_id
+      };
+      $http.get("plugin.message-center.api.index.get-content", params, "加载中...").then((res) => {
+        if (parseInt(res.result) === 1) {
+          _this.show_title = item.message_title;
+          _this.show_content = res.data;
+          _this.show = true;
+        }
+      }).catch((error) => {});
+    },
+    // 加载动画
+    loading(message){
+      return this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        message,
+        forbidClick: true,
+        overlay: true,
+      });
+    },
+    // 监听滚动事件
+    handleScroll(event) {
+      let _this = this;
+      if(_this.is_load_more){
+        _this.is_load_more = false;
+        _this.$nextTick(() => {
+          let messageContent = _this.$refs.messageContent.getBoundingClientRect().top;
+          if((messageContent < 50 && messageContent > 0)&& _this.page < _this.total_page){
+            _this.page++;
+            _this.getList();
+          }else{
+            _this.is_load_more = true;
+          }
+        });
+      }
+    },
+
+
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-box {
+  width: 100vw !important;
+  //min-height: calc(100vh - 40px);
+  height: calc(100vh - 40px);
+  overflow: auto;
+
+  .message-content {
+    padding: 0 15px 60vh 15px;
+    width: 100%;
+
+    .message-list {
+      transform: rotateX(180deg);
+
+      .message-block {
+        padding-bottom: 15px;
+        .message-block-content{
+          background: #fff;
+          border-radius: 10px;
+          padding: 15px 15px 10px 15px;
+          //margin-bottom: 15px;
+          transform: rotateX(180deg);
+
+          .message-block-top {
+            --top-height--: 30px;
+            height: var(--top-height--);
+            width: 100%;
+            display: inline-flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-items: center;
+
+            .message-block-top-image {
+              height: var(--top-height--);
+              width: var(--top-height--);
+              position: relative;
+
+              .top-image {
+                width: 100% !important;
+                height: 100% !important;
+              }
+
+              .top-drop {
+                position: absolute;
+                top: 0;
+                right: 2px;
+                width: 5px;
+                height: 5px;
+                background: #fb3146;
+                border-radius: 50%;
+                border: 1px solid #f6e1e8;
+              }
+            }
+
+            .message-block-top-title {
+              font-size: 16px;
+              font-weight: bold;
+              color: #353535;
+              margin-left: 10px;
+            }
+          }
+
+          .message-block-message {
+            height: 40px;
+            line-height: 20px;
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            margin: 10px 0;
+            color: #828282;
+            text-align: left;
+          }
+
+          .message-block-reply {
+            color: #c0c0c0;
+          }
+
+          .message-block-bottom {
+            display: inline-flex;
+            width: 100%;
+            height: 30px;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: flex-end;
+            padding-top: 5px;
+            border-top: 1px solid #ededed;
+
+            .message-block-bottom-left {
+              font-size: 14px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            .message-block-bottom-right {
+              height: 30px;
+              line-height: 30px;
+              font-size: 13px;
+              color: #bababa;
+              display: inline-flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              justify-content: flex-end;
+              align-items: baseline;
+
+              i {
+                height: 30px;
+                line-height: 30px;
+                font-size: 16px;
+                margin-left: 5px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.show-content {
+  width: 100vw;
+  padding: 15px 20px;
+
+  .show-title {
+    height: 35px;
+    line-height: 24px;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .show-text {
+    text-align: left;
+  }
+}
+</style>