消息

pages/home/component/unreadMessage.vue

-
-
 <template>
   <Card class="todolist-u">
     <p class="row_head">
       <Icon type="ios-chatbubbles" class="f20" />
-      <Badge :count="3" :offset="[9,-5]">
+      <Badge :count="unreadMessage" :offset="[9,-5]">
         <span class="ml10">未读消息</span>
       </Badge>
-      <a href class="row_more fr">更多</a>
+      <a href class="row_more fr" @click="link">更多</a>
     </p>
     <div class="msg">
-      <Row v-for="(item,index) in listTask" :key="index" class="row-text">
-        <Col :span="2">
-          <div></div>
-        </Col>
-        <Col :span="6">{{index+1}}&nbsp&nbsp {{item.creator}}</Col>
-        <Col :span="9">
+      <Row v-for="(item,index) in messageList" :key="index" class="row-text">
+        <Col :span="1">{{index+1}}</Col>
+        <Col :span="8">
+          <Icon :type="item.icon||'md-mail'" />
+          &nbsp;
           {{item.title}}
-          <Icon type="md-link" />
         </Col>
-        <Col :span="7">{{item.creationTime}}</Col>
+        <Col :span="7" class="sender">
+          <User :value="item.senderId" />
+        </Col>
+        <Col :span="8" class="sender-time">{{item.creationTime}}</Col>
       </Row>
     </div>
   </Card>
 </template>
 <script>
 import Api from "../api";
+import { mapState } from "vuex";
 export default {
   name: "UnreadMessage",
   data() {
     return {
       imgUrl: iconImg,
-      listTask: [],
+      // listTask: [],
+      messageList: [],
     };
   },
+  async fetch({ store, params }) {
+    await store.dispatch("loadMessages"); // 加载数据字典
+  },
   mounted() {
-    this.getInfo();
+    // this.getInfo();
+    this.load();
   },
-  methods: {
-    link() {
-      console.log("路径");
+  computed: {
+    ...mapState({ messages: "messages" }),
+    unreadMessage() {
+      let unread = 0;
+      this.messageList.forEach((item) => {
+        if (item.status != 1) unread++;
+      });
+      return unread;
     },
-    getInfo() {
-      let conditions = [];
-      Api.list({ conditions: conditions }).then((r) => {
-        this.listTask = r.result;
+  },
+  methods: {
+    load() {
+      this.$store.dispatch("loadMessages");
+      this.messageList = this.messages.filter((u) => {
+        return true;
       });
+      // console.log("message55", this.messageList);
+    },
+
+    link() {
+      this.$router.push("/home/msgRecord");
     },
+    // getInfo() {
+    //   let conditions = [];
+    //   Api.list({ conditions: conditions }).then((r) => {
+    //     this.listTask = r.result;
+    //   });
+    // },
   },
 };
 </script>
@@ -73,6 +96,15 @@ export default {
     height: 40px;
     line-height: 40px;
     border-bottom: 1px solid #eee;
+    .sender {
+      text-align: center;
+    }
+    .sender-time {
+      text-align: right;
+    }
+    .ivu-icon-md-mail {
+      color: #2680eb;
+    }
   }
 }
 </style>
\ No newline at end of file

pages/home/index.vue

@@ -13,7 +13,13 @@
         </p>
       </div>
       <div class="incon-carousel">
-        <Icon type="ios-arrow-back" class="bg-b" @click="clickLeft" :class="num1<0?'bg-b1':'bg-b'" />
+        <Icon
+          type="ios-arrow-back"
+          class="bg-b"
+          @click="clickLeft"
+          :class="num1<0?'bg-b1':'bg-b'"
+          v-if="collect.length>0"
+        />
         <div class="list-shoucang" :style="{'margin-left': num1 * 230 + 'px',width :'990px',}">
           <div class="bg" v-for="(item,i) in collect" :key="i" @click="toPage(item)">
             <Icon :type="item.icon||'md-mail'" />
@@ -25,9 +31,10 @@
           class="bg-l"
           @click="clickRight"
           :class="collect.length>8 && showIcon ?'bg-l1':'bg-l'"
+          v-if="collect.length>0"
         />
         <a class="down-delete" @click="setDelete">
-          <Icon type="md-settings" class="f20" />
+          <Icon type="md-settings" class="f20" v-if="collect.length>0" />
         </a>
       </div>
     </div>