Complate the "publish" module

src/assets/style/main.css

@@ -59,3 +59,7 @@ main {
   align-items: center;
   padding: 1rem;
 }
+.vueco-btn {
+    width: 100%;
+    bottom: 0;
+  }

src/views/Messages.vue

@@ -2,7 +2,7 @@
  * @Author: fish119
  * @Date: 2017-05-20 13:20:45
  * @Last Modified by: fish119
- * @Last Modified time: 2017-05-22 13:44:33
+ * @Last Modified time: 2017-05-22 14:33:33
  */
 <template>
   <div class="content">
@@ -70,7 +70,7 @@ export default {
       const self = this;
       let url = this.$store.state.svrUrl + 'messages?accesstoken=' + this.accesstoken;
       this.axios.get(url).then(function (response) {
-        if (res.state == 200) {
+        if (response.state == 200) {
           self.unread_messages = response.data.data.hasnot_read_messages
           self.readed_messages = response.data.data.has_read_messages
         }

src/views/Person.vue

@@ -1,8 +1,8 @@
 /*
  * @Author: fish119
  * @Date: 2017-05-22 09:21:33
- * @Last Modified by:   fish119
- * @Last Modified time: 2017-05-22 13:21:33
+ * @Last Modified by: fish119
+ * @Last Modified time: 2017-05-22 14:41:31
  */
 /**
 <template>
@@ -49,11 +49,11 @@
         </mu-list>
       </section>
       <!-- 退出登录按钮 -->
-      <mu-raised-button @click="logout" label="退出登录" class="logoutBtn" icon="power_settings_new" primary/>
+      <mu-raised-button @click="logout" label="退出登录" class="vueco-btn" icon="power_settings_new" primary/>
     </main>
     <main v-else>
       <mu-text-field v-model="userToken" label="Access Token" :errorText="error" labelFloat/>
-      <mu-raised-button @click="login" label="登录" class="demo-raised-button" primary/>
+      <mu-raised-button @click="login" label="登录" class="vueco-btn" primary/>
     </main>
   </div>
 </template>
@@ -124,18 +124,13 @@
   }
 </script>
 
-<style>
+<style scoped>
   .name {
     color: #009688;
     font-weight: 700;
     font-size: 24px;
   }
 
-  .logoutBtn {
-    width: 100%;
-    bottom: 0;
-  }
-
   .timer {
     display: flex;
     justify-content: space-around;
@@ -153,11 +148,7 @@
     border-radius: 50%;
     margin: 1rem 0;
   }
-
-  .list:first-child {
-
-  }
-
+  
   .info_list {
     flex: 1;
     width: 100%;

src/views/Publish.vue

@@ -1,27 +1,110 @@
+/*
+ * @Author: fish119 
+ * @Date: 2017-05-22 14:20:40 
+ * @Last Modified by: fish119
+ * @Last Modified time: 2017-05-22 15:02:31
+ */
 <template>
-<div class="content">
-    <h1>Publish111</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish</h1>
-    <h1>Publish222</h1>
-</div>
+  <div class="content">
+    <main>
+      <mu-select-field class="text" v-model="list" :labelFocusClass="['label-foucs']" label="选择板块">
+        <mu-menu-item v-for="text,index in lists" :key="index" :value="index" :title="text" />
+      </mu-select-field>
+      <mu-text-field v-model="title" class="text" label="标题" hintText="标题字数 10字以上" />
+      <mu-text-field v-model="content" class="text text-content" hintText="输入文本，支持markdown格式" multiLine :rows="5" :underlineShow="false" />
+      <mu-raised-button @click="pubTopic" label="发布话题" class="vueco-btn" icon="near_me" primary/>
+    </main>
+    <!--登录提示-->
+    <mu-dialog :open="!accesstoken" title="提示：">
+      请先登录
+      <mu-flat-button slot="actions" primary to="/" label="取消" />
+      <mu-flat-button slot="actions" primary to="/person" label="确定" />
+    </mu-dialog>
+    <!--发布提示-->
+    <mu-dialog :open="publish" title="提示：">
+      {{tips}}
+      <mu-flat-button slot="actions" primary @click="close" label="确定" />
+    </mu-dialog>
+  </div>
 </template>
 
 <script>
-  export default {
-    mounted(){
-      this.$store.dispatch('changeTabValue', '发布');
+import marked from 'marked';
+
+export default {
+  data() {
+    return {
+      accesstoken: '',
+      list: 0,
+      lists: ['分享', '问答', '招聘'],
+      title: '',
+      content: '',
+      publish: false,
+      tips: '请正确输入内容',
+      tab: ''
+    }
+  },
+  methods: {
+    pubTopic() {
+      if (this.list === 0) {
+        this.tab = 'share'
+      } else if (this.list === 1) {
+        this.tab = 'ask'
+      } else if (this.list === 2) {
+        this.tab = 'job'
+      }
+      if (this.title.length >= 10 && this.content && this.accesstoken) {
+        let that = this
+        that.content = marked(that.content)
+        this.axios.post(this.$store.state.svrUrl + 'topics', {
+          accesstoken: that.accesstoken,
+          title: that.title,
+          tab: that.tab,
+          content: that.content
+        }).then(function (res) {
+          that.title = ''
+          that.content = ''
+          that.tips = '发表成功！'
+          that.publish = true
+          setTimeout(function () {
+            that.publish = false
+          }, 1500)
+        }).catch(function (err) {
+          that.publish = true;
+        })
+      }else{
+        this.publish = true;
+      }
+    },
+    close() {
+      this.publish = false;
     }
+  },
+  created() {
+    this.accesstoken = localStorage.getItem("accesstoken");
+  },
+  mounted() {
+    this.$store.dispatch('changeTabValue', '发布');
   }
+}
 </script>
 
-<style>
+<style scoped>
+main {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.text {
+  width: 100%;
+}
 
+.text-content {
+  flex: 1;
+  background-color: #f7f7f7;
+  padding: 1rem;
+  overflow-y: auto;
+}
 </style>