mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 21:36:42 +08:00
349 lines
13 KiB
Vue
349 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="follow-top-tabs">
|
|
<li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'他关注的人'}}<span v-if="active == 1" class="line"></span></li>
|
|
<li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注他的人'}}<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="index">
|
|
<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 > 0">
|
|
<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 :has="maPage.has" :aid="maPage.userFollow.aid"></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="page.count > 0">
|
|
<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
|
|
},
|
|
page:{
|
|
pageIndex:1,
|
|
pageSize:10,
|
|
aid:'',
|
|
count:0
|
|
}
|
|
}
|
|
},
|
|
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(dataIndex){ //我关注的，我取消关注
|
|
//this.follow.list.splice(dataIndex,1);
|
|
},
|
|
myAddFollow(dataIndex){ //我关注的，我取消关注
|
|
//this.follow.list.splice(dataIndex,1);
|
|
},
|
|
toFollow(item) {
|
|
let id = '';
|
|
if(this.active == 2) {
|
|
id = item.userFollow.aid;
|
|
} else {
|
|
id = item.userFollow.followId;
|
|
}
|
|
apiFollow.save(id).then(res=>{
|
|
if(res.status == 200) {
|
|
// this.$message.success("关注成功");
|
|
this.getMyPage();
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
})
|
|
},
|
|
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);
|
|
},
|
|
cancel(item,idx) {
|
|
let $this=this;
|
|
let id = '';
|
|
if(idx == 2) {
|
|
id = item.userFollow.aid;
|
|
} else {
|
|
id = item.userFollow.followId;
|
|
}
|
|
apiFollow.remove(id).then(res=>{
|
|
if(res.status == 200) {
|
|
if(idx == 2) {
|
|
this.getMyPage()
|
|
} else {
|
|
this.getPage();
|
|
}
|
|
|
|
// $this.follow.list.splice(idx,1);
|
|
}
|
|
})
|
|
},//展示全部
|
|
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() {//关注我的，关注他的
|
|
this.page.aid = this.pageId;
|
|
this.page.pageIndex=this.followMe.pageIndex;
|
|
this.page.pageSize=this.followMe.pageSize;
|
|
let $this=this;
|
|
apiFollow.mypage(this.page).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() { //我关注的，他关注的
|
|
this.page.aid = this.pageId;
|
|
this.page.pageIndex=this.follow.pageIndex;
|
|
this.page.pageSize=this.follow.pageSize;
|
|
let $this=this;
|
|
apiFollow.page(this.page).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;
|
|
}
|
|
});
|
|
});
|
|
} 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>
|