complate v1.0

src/assets/style/main.css

@@ -63,7 +63,3 @@ main {
   width: 100%;
   bottom: 0;
 }
-
-a{
-  color: black;
-}

src/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: fish119 
  * @Date: 2017-05-19 13:22:28 
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-23 12:08:02
+ * @Last Modified time: 2017-05-23 14:24:21
  */
 <template>
   <div>
@@ -37,9 +37,13 @@ export default {
   },
   computed: {
     title: function () {
-      return this.$store.state.titleMap.get(this.$route.path)
+      if (this.$route.path.indexOf('/user/') == -1) {
+        return this.$store.state.titleMap.get(this.$route.path);
+      } else {
+        return this.$store.state.titleMap.get('/user');
+      }
     },
-    isTopic:function(){
+    isTopic: function () {
       return this.$route.path == '/content'
     }
   },
@@ -59,7 +63,7 @@ export default {
       return styleEl
     },
     goBack() {
-      if(this.isTopic)
+      if (this.isTopic)
         this.$router.go(-1)
     }
   }

src/filter/index.js

@@ -2,7 +2,7 @@
  * @Author: fish119 
  * @Date: 2017-05-19 13:22:49 
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-22 15:28:43
+ * @Last Modified time: 2017-05-23 14:13:42
  */
 
 import timeAgo from 'timeago.js'
@@ -22,6 +22,9 @@ export default {
       } else if (val === 'job') {
         return '招聘'
       }
+    }),
+    Vue.filter('comment',function(val){
+      return val.replace('<a href="/user','<a href="#/user');
     })
   }
 }

src/main.js

@@ -1,8 +1,8 @@
 /*
  * @Author: fish119 
  * @Date: 2017-05-19 13:21:53 
- * @Last Modified by:   fish119 
- * @Last Modified time: 2017-05-22 13:21:53 
+ * @Last Modified by: fish119
+ * @Last Modified time: 2017-05-23 13:27:11
  */
 import Vue from 'vue'
 import App from './App'
@@ -16,7 +16,7 @@ import VueAxios from 'vue-axios'
 import filters from './filter/index'
 
 Vue.use(MuseUI)
-Vue.use(VueAxios,axios)
+Vue.use(VueAxios, axios)
 Vue.use(filters)
 Vue.config.productionTip = false
 

src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: fish119 
  * @Date: 2017-05-19 13:21:16 
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-22 15:40:56
+ * @Last Modified time: 2017-05-23 14:15:11
  */
 
 import Vue from 'vue'
@@ -12,6 +12,7 @@ import Publish from '../views/Publish'
 import Messages from '../views/Messages'
 import Person from '../views/Person'
 import Content from '../views/Content'
+import User from '../views/User'
 
 
 Vue.use(Router)
@@ -22,6 +23,7 @@ export default new Router({
     { path: '/publish', name: 'Publish', component: Publish },
     { path: '/messages', name: 'Messages', component: Messages },
     { path: '/person', name: 'Person', component: Person },
-    { path: '/content', name: 'Content', component: Content }
+    { path: '/content', name: 'Content', component: Content },
+    { path: '/user/:id', name: 'User', component: User }
   ]
 })

src/store/index.js

@@ -1,8 +1,8 @@
 /*
  * @Author: fish119 
  * @Date: 2017-05-19 13:23:18 
- * @Last Modified by:   fish119 
- * @Last Modified time: 2017-05-22 13:23:18 
+ * @Last Modified by: fish119
+ * @Last Modified time: 2017-05-23 14:19:33
  */
 
 import Vue from 'vue'
@@ -11,7 +11,7 @@ import mutations from './mutations'
 import actions from './actions'
 
 Vue.use(Vuex);
-const path_title_array = [['/', 'Vue.js 中文社区'], ['/publish', '发布'], ['/messages', '消息中心'], ['/person', '个人中心'], ['/content', '阅读帖子'], ['/login', '登录']];
+const path_title_array = [['/', 'Vue.js 中文社区'], ['/publish', '发布'], ['/messages', '消息中心'], ['/person', '个人中心'], ['/content', '阅读帖子'], ['/login', '登录'],['/user', '用户信息']];
 const state = {
   svrUrl: 'https://www.vue-js.com/api/v1/',
   // titles: ['Vue.js 中文社区', '发布话题', '消息中心', '个人中心'],

src/views/Content.vue

@@ -2,7 +2,7 @@
  * @Author: fish119 
  * @Date: 2017-05-22 15:06:19 
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-23 12:02:37
+ * @Last Modified time: 2017-05-23 14:17:47
  */
  
 <template>
@@ -30,7 +30,7 @@
       <li class="reply" v-for="(list,index) in data.replies" :key="list.id">
         <section class="msg">
           <div class="author">
-            <router-link :to="{path:'/user',query:{user:list.author.loginname}}" :src="list.author.avatar_url" tag="img" alt="user">
+            <router-link :to="'/user/'+list.author.loginname" :src="list.author.avatar_url" tag="img" alt="user">
             </router-link>
             <span class="name">{{list.author.loginname}}</span>
             <span class="timer">{{index+1}}楼 • {{list.create_at | time_ago}}</span>
@@ -47,7 +47,7 @@
             <mu-icon @click="showReplyToComment(index,true)" class="textsms" value="textsms" :size="16" />
           </div>
         </section>
-        <p v-html="list.content"></p>
+        <p v-html="$options.filters.comment(list.content)"></p>
         <div v-if="accesstoken" class="reply_show" v-show="list.reply_show">
           <textarea v-model="single_reply" class="reply" placeholder="请输入回复内容..." rows="5"></textarea>
           <mu-raised-button @click="replyToComment(index)" label="回复" class="demo-raised-button" primary/>
@@ -71,42 +71,42 @@
   </div>
 </template>
 
-<<script>
+<script>
 export default {
   data() {
     return {
-      accesstoken:'',
+      accesstoken: '',
       data: {
-        author:{},
-        replies:{}
+        author: {},
+        replies: {}
       },
-      favorite:false,
-      single_reply:'',
-      reply:'',
-      tips:'',
-      showReplyDialog:false
-    } 
+      favorite: false,
+      single_reply: '',
+      reply: '',
+      tips: '',
+      showReplyDialog: false
+    }
   },
-  computed:{
-    favorite_txt:function(){
-      return this.favorite?'取消收藏':'收藏';
+  computed: {
+    favorite_txt: function () {
+      return this.favorite ? '取消收藏' : '收藏';
     },
   },
   methods: {
     //获取帖子内容
-    getTopic(){
+    getTopic() {
       const id = this.$route.query.id;
       let that = this;
-      let url = this.$store.state.svrUrl+'/topic/' + id;
+      let url = this.$store.state.svrUrl + '/topic/' + id;
       this.axios.get(url).then(function (response) {
         that.data = response.data.data;
-        that.data.replies.map(function(item) {
-            item.reply_show = false;
+        that.data.replies.map(function (item) {
+          item.reply_show = false;
         })
       }).catch(function (err) {
-        
+
       });
-      if(this.accesstoken){
+      if (this.accesstoken) {
         this.isFavorited();
       }
     },
@@ -118,36 +118,37 @@ export default {
       this.showReplyDialog = false;
     },
     // 添加评论
-    submit_reply(){
-      if(this.reply&&this.reply.length>0){        
+    submit_reply() {
+      if (this.reply && this.reply.length > 0) {
         let id = this.$route.query.id;
         let that = this;
-        this.axios.post(this.$store.state.svrUrl+'topic/'+id+'/replies',{
+        this.axios.post(this.$store.state.svrUrl + 'topic/' + id + '/replies', {
           accesstoken: that.accesstoken,
-          content: that.reply})
-          .then(function(res){
+          content: that.reply
+        })
+          .then(function (res) {
             console.log(res);
-            if(res.status==200&&res.data.success==true){
-              that.showReplyMsg(that,'回复成功');
+            if (res.status == 200 && res.data.success == true) {
+              that.showReplyMsg(that, '回复成功');
               that.getTopic();
               that.reply = '';
-            }else{
-              that.showReplyMsg(that,'回复失败，请确认无误后再试');
+            } else {
+              that.showReplyMsg(that, '回复失败，请确认无误后再试');
             }
           })
-          .catch(function(err){
-            that.showReplyMsg(that,'回复失败，请确认无误后再试');
+          .catch(function (err) {
+            that.showReplyMsg(that, '回复失败，请确认无误后再试');
           });
-      }else{
-        this.showReplyMsg(this,'请输入回复内容...');
+      } else {
+        this.showReplyMsg(this, '请输入回复内容...');
       }
     },
     //收藏主题
-    favorTopic(){
+    favorTopic() {
       let id = this.$route.query.id;
       let that = this;
-      let f_method = +this.favorite?'de_collect':'collect';
-      this.axios.post(this.$store.state.svrUrl+'topic/'+f_method,{
+      let f_method = +this.favorite ? 'de_collect' : 'collect';
+      this.axios.post(this.$store.state.svrUrl + 'topic/' + f_method, {
         accesstoken: that.accesstoken,
         topic_id: id
       })
@@ -156,70 +157,70 @@ export default {
     isFavorited() {
       //收藏
       let that = this;
-      this.axios.get(this.$store.state.svrUrl+'user/' + that.loginname)
-      .then(function(response) {
+      this.axios.get(this.$store.state.svrUrl + 'user/' + that.loginname)
+        .then(function (response) {
           // 获取收藏主题数组
           let arr = response.data.data.collect_topics;
-              //本页主题id
+          //本页主题id
           let collect_id = that.data.id;
-              //find 本页主题是否在已收藏列表
-          arr.find(function(item) {
-              if (item.id === collect_id) {
-                  that.favorite = true;
-              }
+          //find 本页主题是否在已收藏列表
+          arr.find(function (item) {
+            if (item.id === collect_id) {
+              that.favorite = true;
+            }
           })
-      })
+        })
     },
     //为评论点赞
-    like(index){
+    like(index) {
       //data.replies
       let that = this;
-      this.axios.post(this.$store.state.svrUrl+'reply/'+that.data.replies[index].id+'/ups',{
-        accesstoken : that.accesstoken
-      }).then(function(res){
-        if(res.data.error_msg){
-          that.showReplyMsg(that,res.data.error_msg);
-        }else{
-          if(res.data.action=='down'){
-            that.data.replies[index].ups.splice(0,1);
-          }else{
+      this.axios.post(this.$store.state.svrUrl + 'reply/' + that.data.replies[index].id + '/ups', {
+        accesstoken: that.accesstoken
+      }).then(function (res) {
+        if (res.data.error_msg) {
+          that.showReplyMsg(that, res.data.error_msg);
+        } else {
+          if (res.data.action == 'down') {
+            that.data.replies[index].ups.splice(0, 1);
+          } else {
             that.data.replies[index].ups.push('-1');
           }
         }
       });
     },
     //显示/关闭 对评论进行回复的对话框
-    showReplyToComment(index,isShow) {
-        this.single_reply = isShow?'@' + this.data.replies[index].author.loginname + ' ':'';        
-        let arr = this.data.replies;
-        arr[index].reply_show = isShow;
-        this.$set(arr, index, arr[index]);
+    showReplyToComment(index, isShow) {
+      this.single_reply = isShow ? '@' + this.data.replies[index].author.loginname + ' ' : '';
+      let arr = this.data.replies;
+      arr[index].reply_show = isShow;
+      this.$set(arr, index, arr[index]);
     },
     //对评论进行回复
-    replyToComment(reply){
+    replyToComment(reply) {
       let id = this.$route.query.id;
       let that = this;
-      this.axios.post(this.$store.state.svrUrl+'topic/'+id+'/replies',{
-        accesstoken : that.accesstoken,
-        content : that.single_reply,
-        reply_id : reply.id
-      }).then(function(response){
-        that.showReplyMsg(that,'回复成功');
+      this.axios.post(this.$store.state.svrUrl + 'topic/' + id + '/replies', {
+        accesstoken: that.accesstoken,
+        content: that.single_reply,
+        reply_id: reply.id
+      }).then(function (response) {
+        that.showReplyMsg(that, '回复成功');
         that.getTopic();
         that.single_reply = '';
-      }).catch(function(error) {
-        that.showReplyMsg(that,'回复失败，请确认无误后重试');
+      }).catch(function (error) {
+        that.showReplyMsg(that, '回复失败，请确认无误后重试');
       });
     },
-    showReplyMsg(that,msg){      
+    showReplyMsg(that, msg) {
       that.tips = msg;
       that.showReplyDialog = true;
-      setTimeout(function() {
-          that.showReplyDialog = false;
+      setTimeout(function () {
+        that.showReplyDialog = false;
       }, 1500)
     }
   },
-  created () {
+  created() {
     this.accesstoken = localStorage.getItem("accesstoken");
     this.loginname = localStorage.getItem("loginname");
     this.getTopic();
@@ -353,20 +354,6 @@ export default {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 

src/views/Home.vue

@@ -2,7 +2,7 @@
  * @Author: fish119 
  * @Date: 2017-05-19 13:21:06 
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-22 15:48:24
+ * @Last Modified time: 2017-05-23 15:04:12
  */
 
 <template>
@@ -21,7 +21,7 @@
       <mu-list style="padding: 0;">
         <div v-if="topics" v-for="(topic,idx) in topics" :key="topic.id">
           <mu-list-item style="padding:0">
-            <mu-avatar :src="topic.author.avatar_url" slot="left" style="margin-bottom: -4px;" />
+            <mu-avatar :src="topic.author.avatar_url" @click="toUser(topic.author.loginname)" slot="left" style="margin-bottom: -4px;" />
             <router-link :to="{path:'/content',query:{id:topic.id}}">
               <div class="mu-item-title">
                 <span v-if="topic.top">
@@ -126,6 +126,9 @@ export default {
     hideToast() {
       this.toast = false
       if (this.toastTimer) clearTimeout(this.toastTimer)
+    },
+    toUser(val) {
+      this.$router.push('/user/' + val);
     }
   },
   mounted: function () {
@@ -139,6 +142,9 @@ export default {
 </script>
 
 <style scoped>
+a {
+  color: black;
+}
 
 .tab-content {
   padding-top: 48px;

src/views/Person.vue

@@ -2,7 +2,7 @@
  * @Author: fish119
  * @Date: 2017-05-22 09:21:33
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-22 15:43:40
+ * @Last Modified time: 2017-05-23 16:24:56
  */
 /**
 <template>

src/views/User.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="content">
+    <main>
+      <!-- 个人信息 -->
+      <img :src="user_info.avatar_url" alt="user">
+      <span class="name">{{user_info.loginname}}</span>
+      <div class="timer">
+        <span>积分：{{user_info.score}}</span>
+        <span>注册时间：{{user_info.create_at | time_ago}}</span>
+      </div>
+      <!-- 最近主题、回复、收藏 -->
+      <section class="info_list">
+        <mu-list>
+          <!--最近主题-->
+          <mu-list-item class="list" v-if="user_info.recent_topics" title="最近主题" toggleNested :open="false">
+            <mu-icon class="icon" slot="left" value="insert_drive_file" />
+            <mu-list-item :to="{path:'/content',query:{id:item.id}}" v-for="item in user_info.recent_topics" :key="item.id" slot="nested" :title="item.title">
+              <mu-icon class="icon" slot="left" value="description" />
+            </mu-list-item>
+            <span class="count">{{user_info.recent_topics.length}}个</span>
+          </mu-list-item>
+          <!--最近回复-->
+          <mu-list-item class="list" v-if="user_info.recent_replies" title="最近回复" toggleNested :open="false">
+            <mu-icon class="icon" slot="left" value="drafts" />
+            <mu-list-item :to="{path:'/content',query:{id:item.id}}" v-for="item in user_info.recent_replies" :key="item.id" slot="nested" :title="item.title">
+              <mu-icon class="icon" slot="left" value="insert_comment" />
+            </mu-list-item>
+            <span class="count">{{user_info.recent_replies.length}}个</span>
+          </mu-list-item>
+          <!--最近收藏-->
+          <mu-list-item class="list" v-if="user_info.collect_topics" title="收藏主题" toggleNested :open="false">
+            <mu-icon class="icon" slot="left" value="folder" />
+            <mu-list-item :to="{path:'/content',query:{id:item.id}}" v-for="item in user_info.collect_topics" :key="item.id" slot="nested" :title="item.title">
+              <mu-icon class="icon" slot="left" value="folder_open" />
+            </mu-list-item>
+            <span class="count">{{user_info.collect_topics.length}}个</span>
+          </mu-list-item>
+        </mu-list>
+      </section>
+      <!-- 退出登录按钮 -->
+      <mu-raised-button @click="goBack" label="返 回" class="vueco-btn" primary/>
+    </main>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      user_info: {}
+    }
+  },
+  methods: {
+    getUser() {
+      let that = this
+      let author_name = this.$route.query.user
+      let url = 'https://www.vue-js.com/api/v1' + this.$route.path;
+      this.axios.get(url).then(function (response) {
+        that.user_info = response.data.data
+      })
+    },
+    goBack() {
+      this.$router.go(-1);
+    }
+  },
+  created() {
+    this.getUser();
+  }
+}
+</script>
+
+<style scoped>
+.name {
+  color: #009688;
+  font-weight: 700;
+  font-size: 24px;
+}
+
+.timer {
+  display: flex;
+  justify-content: space-around;
+  width: 60%;
+  margin: 1rem 0;
+}
+
+main {
+  background-color: #f8f8f8;
+}
+
+main>img {
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  margin: 1rem 0;
+}
+
+.info_list {
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+  border-top: 1px solid #009688;
+}
+
+.icon {
+  color: #009688;
+}
+
+.count {
+  background-color: #009688;
+  color: #fff;
+  padding: 0.1rem 0.6rem;
+  border-radius: 0.2rem;
+  margin-top: 2rem;
+}
+</style>