修复几处样式，添加帖子热帖，发帖添加markdown预览，通知添加一键已读和点击已读

Author: flytam

README.md

@@ -12,6 +12,8 @@ API来自于[cnode社区](https://cnodejs.org/api)
 
 线上版本更新日志
 
+v0.0.4 修复几处样式，添加帖子热帖，发帖添加markdown预览，通知添加一键已读和点击已读  // markdown发布的预览有bug。。。没发布
+
 v0.0.3 添加扫码登陆
 
 v0.0.2  帖子评论框修复、通知点击详情跳转修复
@@ -57,8 +59,6 @@ npm run dev
 
 todo
 
-  - 帖子收藏和取消收藏功能 // API字段有问题
-  - 评论点赞和收藏的UI同步 // API那个字段有点问题
   - 编辑自己发过的主题
   - 展示未读消息数和消息已读
 

src/components/card.vue

@@ -6,6 +6,7 @@
         <span>{{item.author.loginname}}</span>
         <span class='time' v-if='!hidden'>{{formatCreateAt}}</span>
       </div>
+      <span class="top" v-if="item.top">置顶</span>
     </div>
     <div class='body'>
       <p>{{item.title}}</p>
@@ -82,6 +83,11 @@ export default {
         color: $borderColor;
       }
     }
+    .top {
+      position: absolute;
+      right: 40rpx;
+      color: red;
+    }
   }
   .body {
     color: $color;

src/pages/detail/index.vue

@@ -76,12 +76,14 @@ export default {
 
   methods: {
     async getData() {
+      const accesstoken = wx.getStorageSync("accesstoken");
       //this.id = wx.getStorageSync("topicid");
       wx.showLoading({
         title: "加载中"
       });
       const res = await this.$http.get(`${api}/topic/${this.id}`, {
-        mdrender: false
+        mdrender: false,
+        accesstoken
       });
       wx.hideLoading();
       if (res.data.success) {
@@ -150,7 +152,7 @@ export default {
     },
     async upOrCancel(e) {
       // / todo 防抖
-      // console.log(e);
+       console.log(e);
       const accesstoken = wx.getStorageSync("accesstoken");
       if (accesstoken) {
         try {
@@ -166,8 +168,10 @@ export default {
               icon: "none",
               duration: 2000
             });
+           // e.currentTarget.dataset.originindex
+           this.currentReplies[e.currentTarget.dataset.originindex].is_uped = res.data.action === 'up';
           }
-          this.getData();
+         // this.getData();
         } catch (e) {
           wx.showToast({
             title: e.response.data.error_msg,
@@ -245,6 +249,9 @@ export default {
         width: 64rpx;
         height: 64rpx;
       }
+      .name{
+        margin-left: 20rpx;
+      }
     }
     .list {
       display: flex;

src/pages/notice/index.vue

@@ -3,10 +3,11 @@
      <login :visible='visible' v-on:modalClose='closeModalEvent'></login>
      <div class='body'>
        <div class='tabs'>
-         <div :class='{selected:tab==="unread"}' @click.stop='changeTab($event)' data-tab='unread'>未读消息</div>
+         <div :class='{selected:tab==="unread"}' @click.stop='changeTab($event)' data-tab='unread'>未读消息:{{unread.length}}</div>
          <div :class='{selected:tab==="read"}' @click.stop='changeTab($event)' data-tab='read'>已读消息</div>
        </div>
        <div>
+         <button  v-show="tab==='unread'" class='read-all' @click.stop='readAll'>一键已读</button>
         <div class='notice' v-for='item in currentData' :key='item.id' :data-id='item.id'>
           <div>
             {{item.author.loginname}}在<span style='color:$color;' @click.stop='goDetail($event)' :data-topicid='item.topic.id'>{{item.topic.title}}</span>回复了你
@@ -78,6 +79,19 @@ export default {
     }
   },
   methods: {
+    async readAll() {
+      const accesstoken = wx.getStorageSync("accesstoken");
+      const res = await this.$http.post(`${api}/message/mark_all`, {
+        accesstoken
+      });
+      if (res.data.success) {
+        wx.showToast({
+          title: "全部已读成功",
+          icon: "none",
+          duration: 2000
+        });
+      }
+    },
     closeModalEvent() {
       this.visible = false;
       this.getData();
@@ -132,6 +146,18 @@ export default {
         margin: 10rpx 0;
       }
     }
+    .read-all {
+      color: $color;
+      border: 2rpx solid $color;
+      font-size: 20rpx;
+      width: 99rpx;
+      border-radius: 20rpx;
+      height: 46rpx;
+      line-height: 46rpx;
+      text-align: center;
+      padding: 0;
+      margin: 10rpx;
+    }
   }
 }
 .selected {

src/pages/publish/index.vue

@@ -5,34 +5,55 @@
       <span>标题:</span>
       <input class='input' type="text" placeholder="最少10个字" v-model="title">
     </div>
-      <picker  class='picker' @change="bindPickerChange($event)" :value="index" :range="pickerData">
-        <span>选择主题:</span><span style='margin-left:400rpx;'>{{pickerData[index]}}</span>
-      </picker>
-    <textarea class='textarea' v-model="content" ></textarea>
+    <picker class='picker' @change="bindPickerChange($event)" :value="index" :range="pickerData">
+      <span>选择主题:</span><span style='margin-left:400rpx;'>{{pickerData[index]}}</span>
+    </picker>
+    <div class='tabs'>
+      <div :class='{selected:tab==="markdown"}' @click.stop='changeTab($event)' data-tab='markdown'>markdown</div>
+      <div :class='{selected:tab==="preview"}' @click.stop='changeTab($event)' data-tab='preview'>预览</div>
+    </div>
+    <textarea v-show="tab==='markdown'" class='textarea' v-model="content"></textarea>
+    <div v-show="tab==='preview'" style="min-height:500rpx;background-color:white;margin-top:-20rpx;margin-bottom:30rpx;">
+     <wemark mdData='bug待修复'></wemark>
+     </div>
     <button @click.stop="handle">发帖</button>
   </div>
 </template>
+
 <script>
 import login from "../../components/login";
+//import wemark from "mpvue-wemark";
+import wemark from "mpvue-wemark";
 import { api } from "../../const";
 export default {
   components: {
-    login
+    login,
+    wemark
+  },
+
+  watch: {
+    content(next) {
+      console.log(next);
+    }
   },
   data() {
     return {
       pickerData: ["提问", "招聘", "分享", "开发"],
       index: "3",
       title: "",
       content: "",
-      visible: false
+      visible: false,
+      tab: "markdown" // or preview
     };
   },
   methods: {
     bindPickerChange(e) {
       // console.log(e)
       this.index = e.mp.detail.value;
     },
+    changeTab(e) {
+      this.tab = e.target.dataset.tab;
+    },
     async handle() {
       const trans = ["ask", "job", "share", "dev"];
       const accesstoken = wx.getStorageSync("accesstoken");
@@ -72,38 +93,52 @@ export default {
   }
 };
 </script>
+
 <style lang='scss' scoped>
 .container {
   height: 100vh;
   background-color: rgb(245, 245, 249);
+  .list {
+    display: flex;
+    justify-content: space-between;
+    background-color: white;
+    margin-bottom: 30rpx;
+    height: 90rpx;
+    padding: 0 30rpx;
+    line-height: 90rpx;
+    .input {
+      height: 90rpx;
+      line-height: 90rpx;
+    }
+  }
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    background-color: white;
+    margin-bottom: 30rpx;
+    height: 90rpx;
+    line-height: 90rpx;
+    padding: 0 30rpx;
+  }
+  .tabs {
+    display: flex;
+    background-color: white;
+    & > div {
+      width: 50%;
+      text-align: center;
+    }
+  }
+  .textarea {
+    width: 100%;
+    background-color: white;
+    margin-bottom: 30rpx;
+    height: 500rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+  }
 }
-.list {
-  display: flex;
-  justify-content: space-between;
-  background-color: white;
-  margin-bottom: 30rpx;
-  height: 90rpx;
-  padding: 0 30rpx;
-  line-height: 90rpx;
-}
-.picker {
-  display: flex;
-  justify-content: space-between;
-  background-color: white;
-  margin-bottom: 30rpx;
-  height: 90rpx;
-  line-height: 90rpx;
-  padding: 0 30rpx;
-}
-.input {
-  height: 90rpx;
-  line-height: 90rpx;
-}
-.textarea {
-  width: 100%;
-  background-color: white;
-  margin-bottom: 30rpx;
-  height: 500rpx;
-  padding: 0 30rpx;
+.selected {
+  color: $color;
+  border-bottom: 2rpx solid $color;
 }
 </style>