user
This commit is contained in:
parent
3ecdb64351
commit
1dc41d79f3
@ -2,7 +2,7 @@
|
||||
.post-list
|
||||
ul(v-if="data.length")
|
||||
li(v-for="item in data", :key="item._id")
|
||||
.avatar
|
||||
NuxtLink.avatar(:to="`/user/${item.user._id}`")
|
||||
.content
|
||||
.title {{ item.user.name }}
|
||||
.info
|
||||
|
||||
@ -2,14 +2,12 @@
|
||||
.thread-list
|
||||
ul(v-if="data.length")
|
||||
li(v-for="item in data", :key="item._id")
|
||||
NuxtLink(:to="'/thread/' + item._id")
|
||||
.avatar
|
||||
.content
|
||||
.title {{ item.title }}
|
||||
.info
|
||||
span {{ item.user.name }}
|
||||
span {{ item.createdAt }}
|
||||
span {{ item.updatedAt }}
|
||||
NuxtLink.avatar(:to="'/user/' + item.user._id")
|
||||
NuxtLink.content(:to="'/thread/' + item._id")
|
||||
.title {{ item.title }}
|
||||
.info
|
||||
span {{ item.user.name }}
|
||||
span {{ rwdate(item.createdAt) }}
|
||||
.thread-none(v-else) 没有内容~
|
||||
</template>
|
||||
|
||||
@ -26,14 +24,13 @@
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
li a
|
||||
li
|
||||
display: flex
|
||||
align-items: center
|
||||
border-radius: .5rem
|
||||
height: 48px
|
||||
margin: 0
|
||||
padding: 8px 0
|
||||
color: #222222
|
||||
.avatar
|
||||
width: 48px
|
||||
height: 48px
|
||||
@ -41,18 +38,25 @@
|
||||
border-radius: 50%
|
||||
overflow: hidden
|
||||
.content
|
||||
flex: 1
|
||||
.title
|
||||
font-size: 1.1rem
|
||||
font-weight: 600
|
||||
.info
|
||||
span
|
||||
margin-right: .5rem
|
||||
li a:hover
|
||||
li:hover
|
||||
background: rgba(0, 0, 0, .025)
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["data"],
|
||||
methods: {
|
||||
rwdate(utc) {
|
||||
let t = new Date(utc);
|
||||
return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -6,7 +6,7 @@
|
||||
NuxtLink.navbar-item(to="/") 主页
|
||||
.expnone
|
||||
.navbar-user(v-if="account.online")
|
||||
span {{ account.name }}
|
||||
NuxtLink.username(to="/account") {{ account.name }}
|
||||
.navbar-sign(v-else)
|
||||
NuxtLink.button(to="/account/signin") Signin
|
||||
NuxtLink.button(to="/account/create") Login
|
||||
@ -84,12 +84,21 @@ header.header
|
||||
color: #fff
|
||||
.expnone
|
||||
flex: 1
|
||||
.username
|
||||
color: #ffffff
|
||||
font-weight: 600
|
||||
footer.footer
|
||||
text-align: center
|
||||
margin: 4rem
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
a:link // 未访问的
|
||||
color: #222222
|
||||
a:visited
|
||||
color: #223388
|
||||
a:active // 点击时
|
||||
color: #2233cc
|
||||
a.button
|
||||
border: none
|
||||
border-radius: .25rem
|
||||
|
||||
72
pages/account/index.vue
Normal file
72
pages/account/index.vue
Normal file
@ -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>
|
||||
4
pages/account/message.vue
Normal file
4
pages/account/message.vue
Normal file
@ -0,0 +1,4 @@
|
||||
<template lang="pug">
|
||||
.account-message
|
||||
p 消息盒子
|
||||
</template>
|
||||
8
pages/account/setting.vue
Normal file
8
pages/account/setting.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template lang="pug">
|
||||
.account-setting
|
||||
p setting
|
||||
p 1. 消息设置
|
||||
p 2. 订阅设置
|
||||
p 3. 通信设置
|
||||
p 4. 数据管理
|
||||
</template>
|
||||
@ -13,7 +13,6 @@
|
||||
.expnone
|
||||
nuxt-link.thread-create(to="/thread/create") 发新帖
|
||||
.content
|
||||
p {{ data }}
|
||||
ThreadList(:data="data")
|
||||
aside
|
||||
.card
|
||||
|
||||
@ -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}`)
|
||||
|
||||
39
pages/user/_id.vue
Normal file
39
pages/user/_id.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user