340 lines
8.9 KiB
Vue
340 lines
8.9 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="header">
|
|
<img class="portrait" :src="'http://lawpro.earnest.pro' + userimg" alt />
|
|
<div class="introduce">
|
|
<p class="name">{{username}}</p>
|
|
<div class="follow">
|
|
<p>
|
|
<span>{{attention}}</span>
|
|
关注我的
|
|
</p>
|
|
<p>
|
|
<span>{{myfollow}}</span>
|
|
我关注的
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="classification">
|
|
<div class="page">
|
|
<div :class="types == 4?'select':''" @click="types=4">动态</div>
|
|
<div :class="types == 3?'select':''" @click="types=3">回答</div>
|
|
<div :class="types == 1?'select':''" @click="types=1">文章</div>
|
|
<div :class="types == 2?'select':''" @click="types=2">提问</div>
|
|
<div :class="types == 5?'select':''" @click="types=5">收藏</div>
|
|
</div>
|
|
<div class="list">
|
|
<div v-for="(item,index) in dynamiclist" :key="index">
|
|
<follow
|
|
v-if="item.status == 3 "
|
|
:operation="type[item.type] + '了该' + status[item.status]"
|
|
:day="item.time + '前'"
|
|
:title="item.title"
|
|
:nickname="item.nickname"
|
|
:userimg="'http://lawpro.earnest.pro' + item.avatar"
|
|
:num="item.islike"
|
|
:img="'http://lawpro.earnest.pro' + item.img"
|
|
:text="item.text"
|
|
:comment="item.comment"
|
|
:sid="item.id"
|
|
:type="item.status"
|
|
></follow>
|
|
<answer
|
|
v-if="item.status == 1 || item.status == 2"
|
|
:operation="type[item.type] + '了该' + status[item.status]"
|
|
:day="item.time + '前'"
|
|
:title="item.title"
|
|
:types="item.status"
|
|
:id="item.id"
|
|
:sid="item.id"
|
|
:type="item.status"
|
|
></answer>
|
|
<follow
|
|
v-if="types == 3"
|
|
operation="我发布了该回答"
|
|
:day="item.time"
|
|
:title="item.title"
|
|
:nickname="item.nickname"
|
|
:userimg="'http://lawpro.earnest.pro' + userimg"
|
|
:num="item.islike"
|
|
:img="'http://lawpro.earnest.pro' + item.avatar"
|
|
:text="item.text"
|
|
:comment="item.comment"
|
|
:sid="item.id"
|
|
:type="item.status"
|
|
></follow>
|
|
<answer
|
|
v-if="types==1"
|
|
operation="我发布了该文章"
|
|
:day="item.time"
|
|
:title="item.title"
|
|
types="1"
|
|
:sid="item.id"
|
|
:type="item.status"
|
|
></answer>
|
|
<answer
|
|
v-if="types==2"
|
|
operation="我发布了该问题"
|
|
:day="item.time"
|
|
:title="item.title"
|
|
types="2"
|
|
:sid="item.id"
|
|
:type="item.status"
|
|
></answer>
|
|
<follow
|
|
v-if="types == 5 && item.type==3"
|
|
:operation="'我收藏了该'+ status[item.type]"
|
|
:day="item.time"
|
|
:title="item.title"
|
|
:nickname="item.nickname"
|
|
:userimg="'http://lawpro.earnest.pro' + userimg"
|
|
:num="item.islike"
|
|
:img="'http://lawpro.earnest.pro' + item.avatar"
|
|
:text="item.text"
|
|
:comment="item.comment"
|
|
:sid="item.id"
|
|
:type="item.type"
|
|
:types="item.type"
|
|
></follow>
|
|
<answer
|
|
v-if="types==5 && (item.type == 1|| item.type == 2)"
|
|
:operation="'我收藏了该'+ status[item.type]"
|
|
:day="item.time"
|
|
:title="item.title"
|
|
:types="item.type"
|
|
:sid="item.id"
|
|
:type="item.type"
|
|
|
|
></answer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
background-color: #f6f6f6;
|
|
min-height: 100vh;
|
|
.header {
|
|
width: 100%;
|
|
height: 227px;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 51px 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
.portrait {
|
|
width: 126px;
|
|
height: 126px;
|
|
border-radius: 50%;
|
|
margin-right: 31px;
|
|
}
|
|
.introduce {
|
|
height: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.name {
|
|
margin: 0;
|
|
font-size: 36px;
|
|
color: #333;
|
|
font-weight: 400;
|
|
margin-bottom: 29px;
|
|
}
|
|
.follow {
|
|
display: flex;
|
|
color: #999;
|
|
font-size: 28px;
|
|
|
|
> p {
|
|
display: flex;
|
|
margin-right: 69px;
|
|
> span {
|
|
color: #333;
|
|
display: block;
|
|
min-width: 23px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.classification {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
// min-height: 300px;
|
|
box-sizing: border-box;
|
|
padding: 30px 30px;
|
|
.page {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 62px;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
> div {
|
|
width: 100%;
|
|
font-size: 28px;
|
|
text-align: center;
|
|
}
|
|
.select {
|
|
border-bottom: 4px solid #6b9147;
|
|
}
|
|
}
|
|
.list {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import follow from "./components/PersonafFollow";
|
|
// import follows from "./components/PersonafFollows"
|
|
import answer from "./components/PersonalAnswer";
|
|
// import { log } from 'util';
|
|
export default {
|
|
name: "Personal-homepage",
|
|
data() {
|
|
return {
|
|
userimg: "",
|
|
username: "",
|
|
myfollow: "",
|
|
attention: "",
|
|
dynamiclist: [],
|
|
status: ["", "文章", "问题", "回答"],
|
|
type: ["", "我点赞", "我收藏", "我关注", "我评论", "我回答"],
|
|
types: 4,
|
|
page: 1,
|
|
lock: false
|
|
};
|
|
},
|
|
components: {
|
|
follow,
|
|
answer
|
|
},
|
|
methods: {
|
|
wzs(a, b) {
|
|
// console.log(a,b,12)
|
|
// this.$router.replace('/')
|
|
|
|
this.$router.push({
|
|
path: "/articledetail?id=" + b
|
|
});
|
|
},
|
|
getlist() {
|
|
if (this.lock) {
|
|
return;
|
|
}
|
|
this.lock = true;
|
|
this.page += 1;
|
|
this.axios
|
|
.post("https://lawpro.earnest.pro/api/login_main/getUserListDetails", {
|
|
token: localStorage.getItem("token"),
|
|
type: this.types,
|
|
page: this.page
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
if (res.data.code == 200) {
|
|
if (res.data.data.length == 0) {
|
|
// alert(1)
|
|
|
|
return;
|
|
}
|
|
this.dynamiclist = res.data.data;
|
|
this.lock = false;
|
|
}
|
|
});
|
|
},
|
|
getlists() {
|
|
if (this.lock) {
|
|
return;
|
|
}
|
|
this.lock = true;
|
|
this.page += 1;
|
|
this.axios
|
|
.post("https://lawpro.earnest.pro/api/login_main/getCollectList", {
|
|
token: localStorage.getItem("token"),
|
|
page: this.page
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
if (res.data.code == 200) {
|
|
// if(res.data.data.length == 0){
|
|
|
|
// return ;
|
|
// }
|
|
// alert(1)
|
|
|
|
this.dynamiclist = res.data.data;
|
|
this.lock = false;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
document.title= "个人中心"
|
|
|
|
if (localStorage.getItem("token") == "") {
|
|
this.$router.push({ path: "/login" });
|
|
}
|
|
this.axios
|
|
.post("https://lawpro.earnest.pro/api/login_main/getUserDetails", {
|
|
token: localStorage.getItem("token")
|
|
})
|
|
.then(res => {
|
|
// window.console.log(res.data)
|
|
if (res.data.code == 200) {
|
|
(this.userimg = res.data.data.user.avatar),
|
|
(this.username = res.data.data.user.nickname),
|
|
(this.myfollow = res.data.data.myfollow),
|
|
(this.attention = res.data.data.user.attention);
|
|
}
|
|
});
|
|
this.axios
|
|
.post("https://lawpro.earnest.pro/api/login_main/getUserListDetails", {
|
|
token: localStorage.getItem("token"),
|
|
type: 4,
|
|
page: 1
|
|
})
|
|
.then(res => {
|
|
window.console.log(res);
|
|
if (res.data.code == 200) {
|
|
this.dynamiclist = res.data.data;
|
|
}
|
|
});
|
|
var t = this;
|
|
window.$(window).scroll(() => {
|
|
var windowH = window.$(window).height(); //设备可见区域高度
|
|
var documentH = window.$(document).height(); //整个网页的高度（包括未显示的部分）
|
|
var scrollH = window.$(window).scrollTop(); //滚动条滚动上去的高度
|
|
//或者 scrollH = $(document).scrollTop();
|
|
if (windowH + scrollH >= documentH) {
|
|
// do something
|
|
// alert(2);
|
|
window.console.log(1);
|
|
if (this.types == 5) {
|
|
t.getlists(0);
|
|
} else {
|
|
t.getlist();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
watch: {
|
|
types() {
|
|
this.page = 0;
|
|
this.dynamiclist = [];
|
|
this.lock = false;
|
|
if (this.types == 5) {
|
|
this.getlists(0);
|
|
} else {
|
|
this.getlist();
|
|
}
|
|
}
|
|
},
|
|
beforeRouteLeave(a, b, c) {
|
|
window.$(window).scroll(() => {});
|
|
c();
|
|
}
|
|
};
|
|
</script> |