Complete the "message" module

package.json

@@ -19,7 +19,8 @@
     "vue": "^2.2.6",
     "vue-axios": "^2.0.2",
     "vue-router": "^2.3.1",
-    "vuex": "^2.3.1"
+    "vuex": "^2.3.1",
+    "marked": "^0.3.6"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/App.vue

@@ -1,3 +1,9 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:22:02 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:22:02 
+ */
 <template>
   <div id="app">
     <app-header class="header"></app-header>

src/components/BottomNavigation.vue

@@ -1,3 +1,9 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:22:15 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:22:15 
+ */
 <template>
   <mu-paper>
     <mu-bottom-nav :value="bottomNav" @change="handleChange">

src/components/Header.vue

@@ -1,3 +1,9 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:22:28 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:22:28 
+ */
 <template>
   <div>
     <mu-appbar class="title" :title="title">

src/components/Hello.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

src/filter/index.js

@@ -1,6 +1,10 @@
-/**
- * Created by fish119 on 2017/5/22.
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:22:49 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:22:49 
  */
+
 import timeAgo from 'timeago.js'
 
 export default{

src/main.js

@@ -1,3 +1,9 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:21:53 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:21:53 
+ */
 import Vue from 'vue'
 import App from './App'
 import MuseUI from 'muse-ui'

src/router/index.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:21:16 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:21:16 
+ */
+
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '../views/Home'

src/store/actions.js

@@ -1,6 +1,10 @@
-/**
- * Created by fish119 on 2017/5/18.
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:23:07 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:23:07 
  */
+
 export default {
   ['changeTabValue']({ commit },val){
     commit('changeTabValue',val);

src/store/index.js

@@ -1,5 +1,8 @@
-/**
- * Created by fish119 on 2017/5/18.
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:23:18 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:23:18 
  */
 
 import Vue from 'vue'

src/store/mutations.js

@@ -1,6 +1,10 @@
-/**
- * Created by fish119 on 2017/5/18.
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:23:28 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:23:28 
  */
+
 export default {
   ['changeTabValue'](state,val){
     state.tabValue = val;

src/views/Content.vue

@@ -0,0 +1,6 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-22 13:16:31 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:16:31 
+ */

src/views/Home.vue

@@ -1,3 +1,10 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-19 13:21:06 
+ * @Last Modified by:   fish119 
+ * @Last Modified time: 2017-05-22 13:21:06 
+ */
+
 <template>
   <div class="content" style="height: 100vh;">
     <mu-toast style="bottom:50%;text-align: center;" v-if="toast" :message="toastMsg" @close="hideToast"/>

src/views/Messages.vue

@@ -1,17 +1,173 @@
+/*
+ * @Author: fish119
+ * @Date: 2017-05-20 13:20:45
+ * @Last Modified by: fish119
+ * @Last Modified time: 2017-05-22 13:44:33
+ */
 <template>
   <div class="content">
-    <h1>Messages</h1>
+    <mu-tabs class="tabs box-shadow" :value="activeTab" @change="handleTabChange">
+      <mu-tab value="unread" title="未读消息" />
+      <mu-tab value="readed" title="已读消息" />
+    </mu-tabs>
+    <div  class="tab-content" style=" position: relative;">
+    <!-- 未读消息列表 -->
+    <ul v-if="accesstoken" class="lists" v-show="activeTab === 'unread'">
+      <router-link :to="{path:'/content',query:{id:item.topic.id}}" tag="li" class="list" v-for="item in unread_messages" :key="item.id">
+        <div class="user">
+          <img :src="item.author.avatar_url" alt="user">
+          <span>{{item.author.loginname}}</span>
+        </div>
+        <div class="message_content">
+          <h2 v-html="markdownChange(item.reply.content)"></h2>
+          <p>来自：《{{item.topic.title}}》</p>
+        </div>
+        <div class="timer">
+          <span>{{item.reply.create_at | timeago}}</span>
+        </div>
+      </router-link>
+      <li v-if="!unread_messages.length">暂无消息</li>
+    </ul>
+    <!-- 已读消息列表 -->
+    <ul v-if="accesstoken" class="lists" v-show="activeTab === 'readed'">
+      <router-link :to="{path:'/vuecommunitytest/content',query:{id:item.topic.id}}" tag="li" class="list" v-for="item in readed_messages" :key="item.id">
+        <div class="user">
+          <img :src="item.author.avatar_url" alt="user">
+          <span>{{item.author.loginname}}</span>
+        </div>
+        <div class="message_content">
+          <h2 v-if="item.reply.content" v-html="markdownChange(item.reply.content)"></h2>
+          <h2 v-if="!item.reply.content">此内容已被作者删除</h2>
+          <p>来自：《{{item.topic.title}}》</p>
+        </div>
+        <div v-if="item.reply.content" class="timer">
+          <span>{{item.reply.create_at | timeago}}</span>
+        </div>
+      </router-link>
+      <li v-if="!readed_messages.length">暂无消息</li>
+    </ul>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-      mounted(){
-        this.$store.dispatch('changeTabValue', '消息');
-      }
+import marked from 'marked'
+export default {
+  data() {
+    return {
+      activeTab: 'unread',
+      accesstoken: '',
+      count: null,
+      unread_messages: [],
+      readed_messages: []
+    }
+  },
+  methods: {
+    handleTabChange(val) {
+      this.activeTab = val;
+    },
+    getMessages() {
+      const self = this;
+      let url = this.$store.state.svrUrl + 'messages?accesstoken=' + this.accesstoken;
+      this.axios.get(url).then(function (response) {
+        if (res.state == 200) {
+          self.unread_messages = response.data.data.hasnot_read_messages
+          self.readed_messages = response.data.data.has_read_messages
+        }
+      }).catch(function (err) {
+        console.log(err)
+      });
+    },
+    markdownChange(val) {
+      return marked(val);
+    }
+  },
+  mounted() {
+    this.$store.dispatch('changeTabValue', '消息');
+    this.accesstoken = localStorage.getItem("accesstoken");
+    if (this.accesstoken) {
+      this.getMessages();
+    }
   }
+}
 </script>
 
 <style>
+.tab-content {
+    padding-top: 48px;
+  }
+.title {
+    text-align: center;
+    height: 5rem;
+}
+.count {
+    position: absolute;
+    left: 10%;
+    top:20%;
+    background-color: #ff5252;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    text-align: center;
+    border-radius: 50%;
+}
+
+.lists {
+    padding: 1rem;
+    overflow-y: auto;
+}
+.list {
+    justify-content: space-between;
+    background-color: #f8f8f8;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.user {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 6rem;
+}
+
+.user>img {
+    height: 4rem;
+    width: 4rem;
+    border-radius: 50%;
+}
+
+.user>span {
+    text-align: center;
+    max-width: 100%;
+    word-wrap: break-word;
+    word-break: normal;
+}
+.message_content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.message_content>h2 {
+    font-weight: 700;
+    font-size: 16px;
+}
+
+.message_content>p {
+    color: #999;
+    font-size: 12px;
+}
+
+.timer {
+    margin-left: 1rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
 
+.tips {
+    padding: 1rem;
+}
 </style>

src/views/Person.vue

@@ -1,3 +1,10 @@
+/*
+ * @Author: fish119
+ * @Date: 2017-05-22 09:21:33
+ * @Last Modified by:   fish119
+ * @Last Modified time: 2017-05-22 13:21:33
+ */
+/**
 <template>
   <div class="content">
     <main v-if="isLogin">
@@ -96,7 +103,6 @@
           } else {
             console.log(res.status)
           }
-          console.log(self.user_info)
         }).catch(function (err) {
           console.log(err)
         });