实现排序

pages/docs.vue

@@ -3,14 +3,14 @@
   .docs.circumscription
     .outline
       ul
-        li 下载安装
-        li 接口使用
-        li 插件制作
-        li 基础开发
         li(v-for="item in list", :key="item._id")
           NuxtLink(:to="`/docs/${item._id}`") {{ item.name }}
-      .create-doc
-        button(@click="createin = !createin") Create
+          i.fas.fa-sort-numeric-up-alt(
+            @click="settop(item, true)",
+            v-if="account.gid"
+          ) {{ item.top || 0 }}
+      .create-doc(v-if="account.gid")
+        button(@click="submit()") Create
     .content
       Nuxt
 </template>
@@ -26,12 +26,38 @@ export default {
       };
     });
   },
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
+  mounted() {
+    this.listsort();
+  },
   methods: {
     submit() {
       this.$axios.post("/api/docs", this.doc).then((res) => {
+        if (res.status === 200) {
+          this.list.push(res.data);
+        }
+      });
+    },
+    settop(item, n) {
+      item.top = item.top || 0;
+      item.top = n ? item.top + 1 : item.top - 1;
+      let data = { top: item.top };
+      this.$axios.patch(`/api/docs/${item._id}`, data).then((res) => {
+        if (res.status === 200) this.listsort();
         console.log(res.data);
       });
     },
+    listsort() {
+      this.list.sort((x, y) => {
+        x.top = x.top || 0;
+        y.top = y.top || 0;
+        return y.top - x.top;
+      });
+    },
   },
 };
 </script>

pages/docs/_id.vue

@@ -1,22 +1,28 @@
 <template lang="pug">
 .docs-item
-  button.editor(@click="editor()") {{ edit ? '取消编辑' : '编辑模式' }}
+  button.editor(@click="editor()", v-if="account.gid") {{ edit ? '取消编辑' : '编辑模式' }}
   button.submit(@click="submit()", v-if="edit") 保存修改
   .contenter(v-if="!edit")
     h1.title {{ data.name }}
-    p {{ data.data }}
+    div(v-html="markdown(data.data)")
   .contenter(v-else)
     input.title(v-model="doc.name")
     textarea.data(v-model="doc.data", rows="32")
 </template>
 
 <script>
+import { marked } from "marked";
 export default {
   asyncData({ $axios, params }) {
     return $axios.get(`/api/docs/${params.id}`).then((res) => {
       return { data: res.data, edit: false, doc: { data: "", name: "" } };
     });
   },
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
   methods: {
     editor() {
       if (!this.eidt) {
@@ -35,6 +41,9 @@ export default {
         console.log(res.data);
       });
     },
+    markdown(data) {
+      return marked.parse(data);
+    },
   },
 };
 </script>

pages/docs/index.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+.docs-index
+  p Hello World!
+</template>