mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
378 lines
15 KiB
Vue
378 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="follow-top-tabs">
|
|
<li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'TA关注的人'}}<span v-if="active == 1" class="line"></span></li>
|
|
<li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注TA的人'}}<span v-if="active == 2" class="line"></span></li>
|
|
</ul>
|
|
<div v-show="active ==1">
|
|
<div class="follow-list" v-for="(item,index) in follow.list" :key="item.userFollow.id">
|
|
<div style="width:60px;height:60" @click="toHome(item.userFollow.authorInfo)">
|
|
<el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+item.userFollow.authorInfo.avatar" v-if="item.userFollow.authorInfo.avatar"></el-avatar>
|
|
<div v-else class="uavatar">
|
|
<div v-if="item.userFollow.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
|
|
<div v-else>
|
|
<div v-if="item.userFollow.authorInfo.sex === 1 "><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarman.png`" alt=""></div>
|
|
<div v-else><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarwoman.png`" alt=""></div>
|
|
</div>
|
|
</div>
|
|
<!-- <img style="width:60px;height:60" :src="item.authorInfo.avatar"/> -->
|
|
</div>
|
|
<div class="follow-center">
|
|
<p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">{{item.userFollow.authorInfo.name}}
|
|
<!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
|
|
</p>
|
|
<p class="portal-summary-text">{{item.userFollow.authorInfo.sign}}</p>
|
|
</div>
|
|
<div>
|
|
<followButton :data="index" :has="item.has" :aid="item.userFollow.followId" @cancel="myCancelFollow" @add="myAddFollow"></followButton>
|
|
</div>
|
|
<!--
|
|
<div v-if="pageId == userInfo.aid">
|
|
<el-button plain class="btn" icon="el-icon-check" @click="cancel(item)">取消关注</el-button>
|
|
</div>
|
|
<div v-else>
|
|
<el-button class="btn" icon="el-icon-check" v-if="item.has" @click="cancel(item)">取消关注</el-button>
|
|
<el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(item)">关注TA</el-button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
<!--分页没有加-->
|
|
<div style="text-align: center; margin-top:57px;" v-show="follow.count > follow.pageSize">
|
|
<el-pagination
|
|
background
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="follow.pageIndex"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="follow.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="follow.count">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<div v-if="showEmpty" class="home-no-list">
|
|
<img class="img" style="width:186px;height:160px" :src="`${webBaseUrl}/images/homeWu/no-follow.png`" alt="" srcset="">
|
|
<p class="text">还没有关注的人</p>
|
|
</div>
|
|
<div v-show="active == 2">
|
|
<div class="follow-list" v-for="(maPage,index) in followMe.list" :key="index">
|
|
<div style="width:60px;height:60" @click="toHome(maPage.userFollow.authorInfo)">
|
|
<el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+maPage.userFollow.authorInfo.avatar" v-if="maPage.userFollow.authorInfo.avatar"></el-avatar>
|
|
<div v-else class="uavatar">
|
|
<div v-if="maPage.userFollow.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
|
|
<div v-else>
|
|
<div v-if="maPage.userFollow.authorInfo.sex === 1 "><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarman.png`" alt=""></div>
|
|
<div v-else><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarwoman.png`" alt=""></div>
|
|
</div>
|
|
</div>
|
|
<!-- <img style="width:60px;height:60" :src="item.authorInfo.avatar"/> -->
|
|
</div>
|
|
<div class="follow-center">
|
|
<p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">{{maPage.userFollow.authorInfo.name}}
|
|
<!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
|
|
</p>
|
|
<p class="portal-summary-text">{{maPage.userFollow.authorInfo.sign}}</p>
|
|
</div>
|
|
<div>
|
|
<followButton data="maPage.userFollow" :has="maPage.has" :aid="maPage.userFollow.aid" @add="myFollowAdd" @cancel="myFollowCancel"></followButton>
|
|
</div>
|
|
<!--
|
|
<div v-if="pageId == userInfo.aid">
|
|
|
|
<el-button class="btn" icon="el-icon-check" v-if="maPage.has">已关注</el-button>
|
|
<el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
|
|
</div>
|
|
<div v-else>
|
|
<el-button plain class="btn" icon="el-icon-check" v-if="maPage.has" @click="cancel(maPage,2)">取消关注</el-button>
|
|
<el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
<!--分页没有加-->
|
|
<div style="text-align: center; margin-top:57px;" v-show="followMe.count > followMe.pageSize">
|
|
<el-pagination
|
|
background
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="followMe.pageIndex"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="followMe.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="followMe.count">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import followButton from "@/components/Follow/button.vue";
|
|
import interactBar from "@/components/Portal/interactBar.vue";
|
|
import author from "@/components/Portal/authorInfo.vue";
|
|
import apiFollow from "@/api/phase2/userfollow.js"
|
|
import { mapGetters,mapActions } from 'vuex';
|
|
import apiUser from "@/api/system/user.js";
|
|
export default{
|
|
name:"followList",
|
|
components: {
|
|
interactBar,
|
|
followButton,
|
|
author
|
|
},
|
|
computed:{
|
|
...mapGetters(['userInfo']),
|
|
avatarText(){
|
|
return userAvatarText(this.userInfo.name);
|
|
},
|
|
showEmpty(){ //是否显示空信息内容
|
|
if(this.active==1 && this.follow.list.length==0){
|
|
return true;
|
|
}else if(this.active==2 && this.followMe.list.length==0){
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
|
active:1,
|
|
pageId:'',
|
|
follow:{
|
|
list:[],
|
|
count:0,
|
|
pageIndex:1,
|
|
pageSize:10
|
|
},
|
|
followMe:{
|
|
list:[],
|
|
count:0,
|
|
pageIndex:1,
|
|
pageSize:10
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.pageId = this.$xpage.getHomeId(this.$route);
|
|
this.$bus.$on('followIndex',(num)=>{
|
|
this.active = num;
|
|
})
|
|
},
|
|
methods:{
|
|
toHome(ava) {
|
|
this.$router.push({path:this.$xpage.getHomePath(ava.aid)})
|
|
},
|
|
myCancelFollow(aid,delIdx){ //我关注的，取消关注操作
|
|
this.followMe.pageIndex=1;
|
|
this.getMyPage();
|
|
// console.log(aid,delIdx,'参数值');
|
|
// //先从我关注的人中员列表中移除
|
|
// //this.$nextTick(()=>{
|
|
// this.follow.list.splice(delIdx,1);
|
|
// //})
|
|
|
|
// // this.follow.list.forEach(one=>{
|
|
// // console.log(one.has,one.followId,'存在的用户');
|
|
// // })
|
|
// //检查“关注我的”人列表中是否有此人，有此设置设置关注状态
|
|
// this.followMe.list.some((fme,idx)=>{
|
|
// //console.log('关注我的:',fme.userFollow.aid,aid);
|
|
// if(fme.userFollow.aid==aid){
|
|
// fme.has=false;
|
|
// //console.log('设置关注状态');
|
|
// //this.$forceUpdate();
|
|
// return true
|
|
// }
|
|
// return false;
|
|
// });
|
|
|
|
},
|
|
myAddFollow(data){ //我关注的，添加关注
|
|
this.followMe.pageIndex=1;
|
|
this.getMyPage();
|
|
//检查“关注我的”人列表中是否有此人，有此设置设置关注状态
|
|
// this.followMe.list.some((item,idx)=>{
|
|
// //console.log('我关注的用户:'+item.userFollow.followId);
|
|
// if(item.userFollow.aid==data.userFollow.followId){
|
|
// item.has=true;
|
|
// return true
|
|
// }
|
|
// return false;
|
|
// });
|
|
},
|
|
myFollowAdd(data) { //关注我的，添加关注
|
|
//直接刷新“我关注的”人员列表
|
|
this.follow.pageIndex=1;
|
|
this.getPage();
|
|
// 因为转移到新的列表，所以这里需要转化一下
|
|
// let check=this.follow.list.some((item,idx)=>{
|
|
// console.log('我关注的用户:'+item.userFollow.followId,data.userFollow.followId);
|
|
// if(item.userFollow.followId==data.userFollow.followId){
|
|
// item.has=true;
|
|
// return true
|
|
// }
|
|
// return false;
|
|
// });
|
|
// if(!check){
|
|
// this.follow.list.push(data);//同步添加“我关注的”列表中
|
|
// }
|
|
|
|
},
|
|
myFollowCancel(aid){ //关注我的，取消关注
|
|
//同步，从我关注的列表中移除
|
|
this.follow.pageIndex=1;
|
|
this.getPage();
|
|
//console.log('移除用户:'+aid);
|
|
// let delIdx=-1;
|
|
// this.follow.list.forEach((item,idx)=>{
|
|
// //console.log('我关注的用户:'+item.userFollow.followId);
|
|
// if(item.userFollow.followId==aid){
|
|
// delIdx=idx;
|
|
// }
|
|
// });
|
|
// if(delIdx>-1){
|
|
// this.follow.list.splice(delIdx,1);
|
|
// }
|
|
},
|
|
resetActive(){
|
|
// this.active=1;
|
|
this.follow={list:[],count:0,pageIndex:1,pageSize:10},
|
|
this.followMe={list:[],count:0,pageIndex:1,pageSize:10},
|
|
this.tagTab(this.active);
|
|
},
|
|
tagTab(num) {
|
|
this.active = num;
|
|
if(num == 1) {
|
|
if(this.follow.list.length==0){
|
|
this.getPage()
|
|
}
|
|
|
|
} else {
|
|
if(this.followMe.list.length==0){
|
|
this.getMyPage()
|
|
}
|
|
}
|
|
},
|
|
handleSizeChange(val) {
|
|
if(this.active==1){
|
|
this.follow={list:[],count:0,pageIndex:1,pageSize:val};
|
|
this.getPage()
|
|
}else{
|
|
this.followMe={list:[],count:0,pageIndex:1,pageSize:val};
|
|
this.getMyPage()
|
|
}
|
|
|
|
},
|
|
handleCurrentChange(val) {
|
|
if(this.active==1){
|
|
this.follow.pageIndex=val;
|
|
this.getPage()
|
|
}else{
|
|
this.followMe.pageIndex=val;
|
|
this.getMyPage()
|
|
}
|
|
|
|
},
|
|
getMyPage() {//关注我的，关注他的
|
|
let params={
|
|
aid:this.pageId,
|
|
pageIndex:this.followMe.pageIndex,
|
|
pageSize:this.followMe.pageSize
|
|
}
|
|
let $this=this;
|
|
apiFollow.mypage(params).then(res=>{
|
|
if(res.status== 200) {
|
|
$this.followMe.count = res.result.count;
|
|
res.result.list.forEach(item=>{
|
|
item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
|
|
})
|
|
$this.followMe.list = res.result.list;
|
|
//console.log(this.mypageList,'this.mypageList');
|
|
$this.getUserData(res.result.list,2);
|
|
}else{
|
|
console.log('加载关注我数据错误:'+res.message);
|
|
}
|
|
})
|
|
},
|
|
getPage() { //我关注的，他关注的
|
|
let params={
|
|
aid:this.pageId,
|
|
pageIndex:this.follow.pageIndex,
|
|
pageSize:this.follow.pageSize
|
|
}
|
|
let $this=this;
|
|
apiFollow.page(params).then(res=>{
|
|
if(res.status== 200) {
|
|
$this.follow.count = res.result.count;
|
|
res.result.list.forEach(item=>{
|
|
item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
|
|
})
|
|
$this.follow.list = res.result.list;
|
|
$this.getUserData(res.result.list, 1);
|
|
}
|
|
})
|
|
},
|
|
// num 判断是哪个接口
|
|
getUserData(list,num) {
|
|
let ids = [];
|
|
if(num == 2) {
|
|
ids = list.map(item=> item.userFollow.aid);
|
|
} else {
|
|
ids = list.map(item=> item.userFollow.followId);
|
|
}
|
|
apiUser.getByIds(ids).then(res => {
|
|
if (res.status == 200) {
|
|
list.forEach((item, index) => {
|
|
res.result.some(author => {
|
|
if (num == 1 && author.aid == item.userFollow.followId) {
|
|
item.userFollow.authorInfo = author;
|
|
return true;
|
|
} else if(num == 2 && author.aid == item.userFollow.aid){
|
|
item.userFollow.authorInfo = author;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
this.$forceUpdate()
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.follow-top-tabs{
|
|
display: flex;
|
|
padding: 4px 0;
|
|
.tabs-index{
|
|
padding:0 60px 10px 10px;
|
|
cursor: pointer;
|
|
.line{
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #0060FF;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
.follow-list{
|
|
display: flex;
|
|
border-top: 1px solid rgba($color: #999999, $alpha: 0.2);
|
|
padding: 36px 0 38px 0;
|
|
.follow-center{
|
|
flex: 100%;
|
|
margin-left: 20px
|
|
}
|
|
.btn{
|
|
margin-top: 18px;
|
|
height: 40px;
|
|
width: 140px;
|
|
}
|
|
}
|
|
</style>
|