代码：
<!--右上角点击头像之后，跳转到【我的】页面-->
<!--在本页面点击【编辑资料】之后。跳转到编辑资料-->
<!--在本页面点击【问题列表】之后。跳转到问题详情页-->
<template>
<el-container direction="vertical">
<sys-header/>
<div class="user-center">
<!--上面头像栏-->
<div class="user-info">
<div class="info-left">
<el-avatar :size="140" :src="userInfo.userPic" class="my-avatar"></el-avatar>
<div class="info-middle">
<div class="user-name">{
{ userInfo.userName }}</div>
<div class="user-intro">{
{ userInfo.userIntroduction }}</div>
<div class="follow-and-chat" v-if="!isMe">
<button
v-if="userInfo.attend"
class="followed-icon-box"
type="button"
@click="deleteAttention(userInfo.userId)"
>
<a>已关注</a>
</button>
<button
v-else
class="follow-icon-box"
type="button"
@click="attendUser(userInfo.userId)"
>
<img src="@/assets/images/add-attention-icon.png" class="follow-icon"/>
<a>关注</a>
</button>
<router-link :to="'/im/' + userInfo.userId">
<button class="chat-icon-box" type="button">
<img src="@/assets/images/chat.png" class="answer-icon"/>
<a>发私聊</a>
</button>
</router-link>
</div>
</div>
</div>
<div class="info-right">
<div v-if="isMe" class="edit-my-info-box">
<router-link :to="'/settings'">
<el-button class="edit-btn">
<i class="iconfont"></i>
<span>编辑个人资料</span>
</el-button>
</router-link>
</div>
<div v-else class="show-follow-and-fans">
<div class="follow-sum-box">
<span>关注</span>
<p>{
{ userInfo.numMap.followNum }}</p>
</div>
<div class="fans-sum-box">
<span>粉丝</span>
<p>{
{ userInfo.numMap.fansNum }}</p>
</div>
</div>
</div>
</div>
<el-container class="wrap">
<el-main class="main-box">
<!--下面左侧主体-->
<el-tabs v-model="activeName" :before-leave="tabBeforeLeave" @tab-click="tabClick">
<el-tab-pane label="动态" name="my-dynamic">
<div class="el-tab-inner">
<div class="inner-title">我的动态</div>
<ul class="dynamic-list" v-if="dynamicList.length">
<li v-for="(item,index) in dynamicList" :key="index">
<router-link :to="'/issuedetail/' + item.question.questionId">
<div class="inner-flex inner-default inner-pdb15">
<div>
<span v-if="item.actionType===2">关注</span>
<span v-if="item.actionType===4">收藏</span>
<span v-if="item.actionType===7">赞同</span>
<span v-if="item.actionType===11">回答</span>
<span v-if="item.actionType===12">发布</span>
<span v-if="item.actionContentType === 1">了问题</span>
<span v-if="item.actionContentType === 2">了回答</span>
</div>
<span class="my-dynamic-time">{
{ setTimeFormat(item.addTime) }}</span>
</div>
<div class="inner-strong">{
{ item.question.questionTitle }}</div>
</router-link>
</li>
</ul>
<div class="empty" v-else>没有动态信息~</div>
</div>
</el-tab-pane>
<el-tab-pane label="提问" name="my-ask">
<div class="el-tab-inner">
<div class="inner-title">我的提问</div>
<ul class="my-ask-list" v-if="questionList.length">
<li v-for="(item,index) in questionList" :key="index">
<router-link :to="'/issuedetail/' + item.questionId">
<div class="inner-strong inner-pdb15">{
{ item.questionTitle }}</div>
<div class="inner-third">
<span>
{
{ setTimeFormat(item.addTime) }} {
{ item.answerSum }}个回答 {
{
item.followSum
}}个关注
</span>
</div>
</router-link>
</li>
</ul>
<div class="empty" v-else>你没有任何提问哦~</div>
</div>
</el-tab-pane>
<el-tab-pane label="回答" name="my-answer">
<div class="el-tab-inner">
<div class="inner-title">我的回答</div>
<ul class="answer-list" v-if="answerList.length">
<li v-for="(item,index) in answerList" :key="index">
<router-link :to="'/issuedetail/' + item.questionId">
<div class="inner-strong inner-pdb15">{
{ item.questionTitle }}</div>
</router-link>
<!-- <div class="inner-pdb15" v-if="!item.showAll">{
{ item.questionContent }}</div> -->
<div class="question-content inner-pdb15">
{
{ item.questionContent | ellipsis(140) }}
<el-button
class="read-whole-btn"
v-if="item.questionContent && item.questionContent.length > 140"
>
<span>阅读全文</span>
<i class="iconfont"></i>
</el-button>
</div>
<div class="inner-third">编辑于{
{ setTimeFormat(item.updateTime) }}</div>
<div class="inner-bottom">
<el-button class="bg-btn">
<i class="iconfont"></i>
<span>赞同</span>
</el-button>
<el-button>
<i class="iconfont"></i>
<span>{
{ item.commentSum }}条评论</span>
</el-button>
<share :type="1" :id="toString(item.questionId)" :title="item.questionTitle"/>
<el-button>
<i class="iconfont"></i>
<span>收藏</span>
</el-button>
<el-button>
<i class="iconfont"></i>
<span>喜欢</span>
</el-button>
<el-button
class="read-more"
@click="item.showAll=!item.showAll"
v-show="!item.showAll"
>
<span>收起</span>
<i class="iconfont"></i>
</el-button>
</div>
</li>
</ul>
<div class="empty" v-else>你没有回答~</div>
</div>
</el-tab-pane>
<!--如果是自己的主页才显示关注列表-->
<el-tab-pane label="关注" name="my-follow" v-if="isMe">
<div class="el-tab-inner">
<div class="inner-title">我关注的</div>
<ul class="follow-list" v-if="attentionList.length">
<li v-for="(item,index) in attentionList" :key="index">
<div class="inner-flex">
<router-link :to="{path:'/user',query:{userId: item.attentioneduid}}">
<el-avatar
:src="item.attentionedAvatar"
:size="66"
class="other-user-avatar"
></el-avatar>
<div class="inner-flex1">
<div class="inner-strong inner-pdb10">{
{ item.attentionedNickName }}</div>
<div class="inner-third inner-small">
<!--接口里面没有回答数和关注数，暂时不显示-->
<!--{
{ item.answerSum }}回答 / {
{ item.followSum }}关注者-->
</div>
</div>
</router-link>
<div
:key="index"
@mouseover="item.focus=true"
@mouseleave="item.focus=false"
@click="item.followed=!item.followed"
class="follow-box"
>
<template v-if="item.followed">
<button
v-if="item.focus"
class="delete-follow"
@click="deleteAttention(item.attentioneduid)"
>
<a>取消关注</a>
</button>
<button v-else class="already-follow-icon-box">
<a v-if="item.mutual">互相关注</a>
<a v-else>已关注</a>
</button>
</template>
<template v-else>
<button
class="begin-follow-icon-box"
@click="attendUser(item.attentioneduid)"
>
<img
src="@/assets/images/add-attention-icon.png"
class="begin-follow-icon"
/>
<a>关注他</a>
</button>
</template>
</div>
</div>
</li>
</ul>
<div class="empty" v-else>你还没有关注~</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="bottom-line" v-if="showBottomLine">—— 我也是有底线的 ——</div>
</el-main>
<!-- 下面右侧侧边栏-->
<sys-aside/>
</el-container>
</div>
</el-container>
</template>
<script>
import apiRequest from "@/utils/request";
import sysHeader from "../../components/header";
import sysAside from "../Aside/aside";
import Share from "@/components/share";
import {onlyNeedsYearMonthAndDay} from "../../utils/format";
import {attendUser, deleteAttention} from "../../api/user";
export default {
name: "User",
components: {sysAside, sysHeader, Share},
data() {
return {
activeName: "my-dynamic",
isMe: false,
userInfo: {
userId: "",
userName: "",
userPic: "",
userIntroduction: "",
numMap: {
followNum: "",
fansNum: "",
},
attend: "",
},
dynamicList: [],
questionList: [],
answerList: [],
attentionList: [],
dataList: [],
pageCount: 1,
currentPage: 1,
showBottomLine: false,
};
},
watch: {
$route(to, from) {
// 监听路由的变化，做你想做的一些事情...
this.getUserInfo(this.$route.query.userId);
console.log(this.$route.query.name)
},
'$route.query.name': {
handler(v) {
this.activeName = v || 'my-dynamic'
switch (v) {
case "my-dynamic":
this.getMyDynamic(1);
break;
case "my-ask":
this.getMyQuestion(1);
break;
case "my-answer":
this.getMyAnswer(1);
break;
case "my-follow":
this.getMyAttention(1);
break;
}
},
immediate: true,
}
},
created() {
this.getUserInfo(this.$route.query.userId);
this.getMyDynamic(1);
this.activeName = this.$route.query.name ? this.$route.query.name : 'my-dynamic'
console.log(this.activeName)
},
destroyed() {
window.removeEventListener("scroll", this.loadNextPage);
},
methods: {
// 获取用户信息
getUserInfo(attentioneduid) {
let _this = this;
apiRequest("post", "/qas/api/action/myInformation", {
attentioneduid: attentioneduid, //被查询用户id
attentionuid: localStorage.getItem("userid"), //操作用户id
}).then((res) => {
_this.userInfo = res.data;
// 如果传入的用户id和缓存里的用户id是一样的就为true显示编辑按钮
_this.isMe =
_this.userInfo.userId === localStorage.getItem("userid")
? true
: false;
sessionStorage.setItem("userinfo", JSON.stringify(res.data));
});
},
tabBeforeLeave() {
window.removeEventListener("scroll", this.loadNextPage);
},
// 标签切换
tabClick(tab) {
this.dynamicList = [];
this.questionList = [];
this.answerList = [];
this.attentionList = [];
this.showBottomLine = false;
this.loadDown();
this.$router.replace({
query: {
userId: this.$route.query.userId,
name: tab.paneName || 'my-dynamic'
}
});
switch (tab.name) {
case "my-dynamic":
this.getMyDynamic(1);
break;
case "my-ask":
this.getMyQuestion(1);
break;
case "my-answer":
this.getMyAnswer(1);
break;
case "my-follow":
this.getMyAttention(1);
break;
}
},
// 获取用户动态
getMyDynamic(pageNumber = 1) {
let _this = this;
apiRequest("post", "qas/api/action/userDynamic", {
actionUserId: _this.$route.query.userId,
pageNumber: pageNumber,
pageSize: 15,
}).then((res) => {
res.data.pageRecords.forEach((key) => {
_this.dynamicList.push(key);
});
_this.currentPage = pageNumber;
_this.pageCount = res.data.pageCount;
});
},
// 获取我的提问
getMyQuestion(pageNumber) {
let _this = this;
apiRequest("post", "qas/api/action/getMyQuestion", {
actionUserId: _this.$route.query.userId,
pageNumber: pageNumber,
pageSize: 10,
}).then((res) => {
// _this.dataList = res.data.pageRecords;
res.data.pageRecords.forEach((key) => {
_this.questionList.push(key);
});
_this.currentPage = pageNumber;
_this.pageCount = res.data.pageCount;
});
},
// 获取我的回答
getMyAnswer(pageNumber) {
let _this = this;
apiRequest("post", "qas/api/action/getMyAnswer", {
actionUserId: _this.$route.query.userId,
pageNumber: pageNumber,
pageSize: 10,
}).then((res) => {
// _this.answerList = res.data.pageRecords;
res.data.pageRecords.forEach((key) => {
key.showAll = false;
_this.answerList.push(key);
});
_this.currentPage = pageNumber;
_this.pageCount = res.data.pageCount;
});
},
// 获取关注列表
getMyAttention(pageNumber) {
let _this = this;
apiRequest("post", "qas/api/action/getAttentionList", {
attentionuid: _this.$route.query.userId,
pageNumber: pageNumber,
pageSize: 10,
}).then((res) => {
// _this.dataList = res.data.list;
res.data.list.forEach((key) => {
key.focus = false;
key.followed = true;
_this.attentionList.push(key);
});
_this.currentPage = pageNumber;
_this.pageCount = res.data.pageCount;
});
},
// 关注用户
async attendUser(attentioneduid) {
await attendUser(attentioneduid);
this.getUserInfo(this.userInfo.userId);
},
// 取消关注用户
async deleteAttention(attentioneduid) {
await deleteAttention(attentioneduid);
this.getUserInfo(this.userInfo.userId);
},
// 格式化时间，只要年月日
setTimeFormat(time) {
return onlyNeedsYearMonthAndDay(time);
},
// 滚动加载下一页
loadDown() {
let _this = this;
_this.loadNextPage = function () {
let bottomOfWindow =
document.documentElement.offsetHeight -
document.documentElement.scrollTop -
window.innerHeight <=
1;
if (bottomOfWindow) {
if (_this.currentPage < _this.pageCount) {
switch (_this.activeName) {
case "my-dynamic":
_this.getMyDynamic(_this.currentPage + 1);
break;
case "my-ask":
_this.getMyQuestion(_this.currentPage + 1);
break;
case "my-answer":
_this.getMyAnswer(_this.currentPage + 1);
break;
case "my-follow":
_this.getMyAttention(_this.currentPage + 1);
break;
}
// _this.getHotList(_this.currentPage + 1);
} else {
if (!_this.showBottomLine) {
_this.showBottomLine = true;
window.removeEventListener("scroll", _this.loadNextPage);
}
}
}
};
window.addEventListener("scroll", _this.loadNextPage);
},
},
};
</script>
<style lang="scss" scoped>
.follow-box {
color: #ffffff;
//已经关注
.already-follow-icon-box {
@include follow-btn-color;
border: none;
background: #bcbccb;
}
.already-follow-icon-box:active {
background: red;
}
//取消关注
.delete-follow {
@include follow-btn-color;
}
//未关注
.un-follow {
@include follow-btn-color;
}
//开始点击关注
.begin-follow-icon-box {
@include follow-btn-color;
img {
width: 14px;
height: 14px;
}
a {
font-size: 14px;
}
}
}
.user-center {
@include maxwidth;
width: 100%;
.user-info {
@include box;
@include flex-center-sb;
padding: 35px 30px;
margin-bottom: 20px;
height: 140px;
.info-left {
flex: 1;
@include flex-start-center;
.my-avatar {
float: left;
margin-right: 30px;
}
.info-middle {
float: left;
width: 288px;
.user-name {
font-size: 24px;
font-weight: bold;
}
.user-intro {
@include text-ellipsis-multi(2);
font-size: 16px;
color: #666666;
padding: 15px 0;
}
.follow-and-chat {
color: rgba(188, 188, 203, 1);
font-size: 14px;
line-height: 19px;
margin-top: 20px;
.follow-icon-box {
@include follow-btn-color;
display: inline-block;
width: 90px;
height: 30px;
margin-right: 20px;
img {
width: 14px;
height: 14px;
}
}
.followed-icon-box {
@include follow-btn-color;
background-color: gray;
display: inline-block;
border: none;
width: 90px;
height: 30px;
margin-right: 20px;
img {
width: 14px;
height: 14px;
}
}
.chat-icon-box {
@include follow-btn-colourless;
display: inline-block;
width: 90px;
height: 30px;
img {
width: 14px;
height: 14px;
}
}
}
}
}
.info-right {
.edit-my-info-box {
.edit-btn {
@include activeBtn;
padding: 12px 10px;
a {
color: #fff;
}
}
}
.show-follow-and-fans {
//background-color: red;
width: 310px;
height: 140px;
margin-right: 45px;
.follow-sum-box {
float: left;
height: 60px;
margin: 40px auto;
span {
display: block;
font-size: 14px;
color: #666666;
text-align: center;
}
p {
display: block;
padding: 0;
font-size: 26px;
font-weight: bold;
line-height: 35px;
color: #222222;
}
}
.fans-sum-box {
float: right;
height: 60px;
margin: 40px auto;
span {
display: block;
font-size: 14px;
color: #666666;
text-align: center;
}
p {
display: block;
padding: 0;
font-size: 26px;
font-weight: bold;
line-height: 35px;
color: #222222;
}
}
}
}
}
.main-box {
@include box;
padding: 30px;
/deep/ .el-tabs {
.el-tabs__header {
.el-tabs__nav-wrap::after {
height: 1px;
background: #f2f4f7;
}
.el-tabs__active-bar {
display: none;
}
.el-tabs__item {
height: auto;
padding: 0 0 22px;
margin-right: 50px;
color: $base-color;
line-height: initial;
font-size: $default-font;
&.is-active {
font-weight: bold;
color: $theme-color;
font-size: $max-font;
}
}
}
}
}
}
.el-tab-inner {
.inner-title {
padding: 10px 0;
font-size: $max-font;
font-weight: bold;
}
ul {
li {
padding: 20px 0;
border-bottom: 1px solid #f2f4f7;
.inner-flex {
@include flex-center-sb;
}
.other-user-avatar {
float: left;
}
.inner-flex1 {
float: left;
flex: 1;
padding-left: 15px;
}
.inner-strong {
font-weight: bold;
}
.inner-pdb15 {
padding-bottom: 15px;
}
.question-content-box {
@include flex-start-center;
.question-image {
width: 190px;
height: 105px;
margin-right: 20px;
border-radius: 6px;
overflow: hidden;
}
.question-content {
@include text-ellipsis-multi(4);
position: relative;
flex: 1;
color: $default-color;
padding-bottom: 30px;
line-height: $default-lh;
}
}
.read-more {
color: rgba(64, 123, 255, 1);
cursor: pointer;
.icon-bottom {
font-size: 14px;
height: 7px;
}
}
.inner-pdb10 {
padding-top: 8px;
padding-bottom: 10px;
}
.inner-default {
color: $default-color;
}
.inner-third {
color: $third-color;
span {
font-size: 16px;
}
}
.inner-small {
font-size: $small-font;
}
.inner-bottom {
@include flex-start-center;
padding-top: 20px;
.share-btn {
margin-right: 40px;
}
.el-button {
// padding: 8px 10px;
padding: 0;
margin-right: 40px;
margin-left: 0;
color: $third-color;
font-size: $small-font;
border: 0;
border-radius: 4px;
&.bg-btn {
padding: 8px;
margin-right: 40px;
background: rgba(255, 191, 0, 0.24);
color: $theme-color;
}
&.read-more {
margin-left: 280px;
}
}
}
}
}
}
.clearfix {
clear: both;
}
</style>