user

pages/account/index.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+.account
+  .main-width
+    img.avatar(:src="account.avatar")
+    span.name {{ account.name }}
+    //input.upload(type="file", name="photos", multiple, @change="setAvatar()")
+    .banner_item.add
+      label.img_add(for="img_add") +
+      input#img_add(
+        type="file",
+        accept="image/*",
+        multiple="multiple",
+        @change="upload($event)"
+      )
+  p account
+  NuxtLink.button(to="/account/setting") 账户设置
+</template>
+
+<script>
+export default {
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
+  methods: {
+    upload(event) {
+      let data = new FormData();
+      data.append("img", event.target.files[0]);
+      this.$axios
+        .post("/api/account", data, {
+          headers: { "Content-Type": "multipart/form-data" },
+        })
+        .then((res) => {
+          console.log(res.data);
+          //res.data.forEach((item) => this.list.push(item));
+        });
+    },
+    //setAvatar() {
+    //  let myForm = new FormData();
+    //  let files = document.querySelector("[type=file]").files;
+    //  for (var i = 0; i < files.length; i++) {
+    //    myForm.append("photos", files[i]);
+    //  }
+    //  //this.$axios.post("/api/account", myForm).then((res) => {
+    //  //  console.log(res.data);
+    //  //});
+    //  console.log(myForm);
+    //  fetch("/api/account", {
+    //    method: "POST",
+    //    //headers: { "Content-Type": "multipart/form-data" },
+    //    body: myForm,
+    //  })
+    //    .then((Response) => Response.json())
+    //    .then((data) => {
+    //      console.log(data);
+    //    });
+    //},
+  },
+};
+</script>
+
+<style lang="sass">
+.account
+  .avatar
+    height: 64px
+    width: 64px
+    border: none
+    border-radius: 50%
+    background: #ff1414
+    overflow: hidden
+</style>

pages/account/message.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+.account-message
+  p 消息盒子
+</template>

pages/account/setting.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+.account-setting
+  p setting
+  p 1. 消息设置
+  p 2. 订阅设置
+  p 3. 通信设置
+  p 4. 数据管理
+</template>

pages/index.vue

@@ -13,7 +13,6 @@
         .expnone
         nuxt-link.thread-create(to="/thread/create") 发新帖
       .content
-        p {{ data }}
         ThreadList(:data="data")
   aside
     .card

pages/thread/_id.vue

@@ -4,8 +4,8 @@
     h1.title {{ thread.title }}
     .info
       span.user {{ thread.user.name }}
-      span.date 2021-01-01
-      span.view 1933
+      span.date {{ rwdate(thread.createdAt) }}
+      span.view {{ thread.views }}
     .tags
       span.tag test
       span.tag demo
@@ -40,6 +40,10 @@ export default {
     },
   },
   methods: {
+    rwdate(utc) {
+      let t = new Date(utc);
+      return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
+    },
     loadpostlist() {
       this.$axios
         .get(`/api/post?attach=thread&aid=${this.post.aid}`)

pages/user/_id.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+.user
+  .header
+    img.avatar(:src="user.avatar")
+    h1
+      span.name {{ user.name }}
+      span.admin(v-if="user.gid === 1") Admin
+  .content
+    p USER
+    p {{ user }}
+</template>
+
+<script>
+export default {
+  asyncData({ $axios, params }) {
+    return $axios.get(`/api/user/${params.id}`).then((res) => {
+      return { user: res.data };
+    });
+  },
+};
+</script>
+
+<style lang="sass">
+.user
+  >.header
+    background: rgba(0, 0, 0, .5)
+    height: 200px
+    margin: 0
+    padding: 4rem
+    text-align: center
+    .avatar
+      height: 64px
+      width: 64px
+      border-radius: 50%
+      background-color: #ffffff
+      overflow: hidden
+    .name
+      color: #ffffff
+</style>