mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-07 01:46:44 +08:00
383 lines
10 KiB
Vue
383 lines
10 KiB
Vue
<template>
|
|
<view class="follow-info-page">
|
|
<page-title :showBack="true">关注列表</page-title>
|
|
<u-toast ref="messager"></u-toast>
|
|
<view class="ub-content">
|
|
<view>
|
|
<view class="ub-tab" @click="ubtab(1)" :class="tab == 1 ? 'ub-tabactive' : ' ' ">关注我的<text></text></view>
|
|
<view class="ub-tab" @click="ubtab(2)" :class="tab == 2 ? 'ub-tabactive' : ' ' ">我关注的<text></text></view>
|
|
</view>
|
|
</view>
|
|
<view class="follow-list-box" v-show="tab == 1" >
|
|
<view v-if="followMe.list.length > 0">
|
|
<view class="follow-info-list" v-for="(item,idx) in followMe.list">
|
|
<view class="img-info">
|
|
<author-img :avatar="item.userFollow.authorInfo.avatar" :sex="item.userFollow.authorInfo.sex"></author-img>
|
|
</view>
|
|
<view class="name-and-sign">
|
|
<view class="name-text">{{item.userFollow.authorInfo.name}}</view>
|
|
<view class="name-sign">{{item.userFollow.authorInfo.sign}}</view>
|
|
</view>
|
|
<view class="isFollow-btn">
|
|
<view class="is-follow" v-if="item.has" @click="showPopup(item,idx,1)">已关注</view>
|
|
<view class="on-follow" v-else @click="toFollow(item,idx)">关注</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-else
|
|
text="还没有人关注你哦～"
|
|
icon="../../static/images/follow-empt.png">
|
|
</u-empty>
|
|
</view>
|
|
<view class="follow-list-box" v-show="tab == 2">
|
|
<view v-if="follow.list.length > 0">
|
|
<view class="follow-info-list" v-for="(follow,index) in follow.list">
|
|
<view class="img-info">
|
|
<author-img :avatar="follow.userFollow.authorInfo.avatar" :sex="follow.userFollow.authorInfo.sex"></author-img>
|
|
</view>
|
|
<view class="name-and-sign">
|
|
<view class="name-text">{{follow.userFollow.authorInfo.name}}</view>
|
|
<view class="name-sign">{{follow.userFollow.authorInfo.sign}}</view>
|
|
</view>
|
|
<view class="isFollow-btn">
|
|
<view class="is-follow" @click="showPopup(follow,index,2)">已关注</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-else
|
|
text="您还没有关注人哦～"
|
|
icon="../../static/images/follow-empt.png">
|
|
</u-empty>
|
|
</view>
|
|
|
|
<view >
|
|
<!-- <uni-load-more :status="loadStatus"></uni-load-more> -->
|
|
</view>
|
|
<u-popup :show="show">
|
|
<view class="cancel-pop">
|
|
<view class="btn" @click="cancel()">
|
|
<image style="width:32upx;height:32upx;vertical-align: middle;margin-right: 20upx;" src="../../static/images/icon/follow-stop.png" mode=""></image>
|
|
停止关注 {{cancelData.userFollow.authorInfo.name}}
|
|
</view>
|
|
<view class="btn btn2" @click="show = false">
|
|
取消
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiFollow from "@/api/phase2/userfollow.js"
|
|
import apiUser from "@/api/system/user.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
cancelData:{
|
|
userFollow:{
|
|
authorInfo:{
|
|
name:''
|
|
}
|
|
}
|
|
},
|
|
loadStatus: 'more',
|
|
cancelIndex:0,
|
|
cancelIdx:0,
|
|
show:false,
|
|
tab:1,
|
|
userInfo:{},
|
|
followMe:{
|
|
aid:'',
|
|
pageIndex:1,
|
|
pageSize:10,
|
|
list:[],
|
|
count:0
|
|
},
|
|
follow:{
|
|
aid:'',
|
|
pageIndex:1,
|
|
pageSize:10,
|
|
list:[],
|
|
count:0
|
|
}
|
|
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.onReachBottom();
|
|
},
|
|
onReachBottom() {
|
|
if(this.tab == 1 && this.followMe.list.length<this.followMe.count) {//关注我的
|
|
this.followMe.pageIndex ++;
|
|
this.getMyPage(false);
|
|
} else if(this.tab == 2 && this.follow.list.length<this.follow.count){//我关注的
|
|
this.follow.pageIndex ++;
|
|
this.getPage(false);
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.tab = options.type;
|
|
this.$store.dispatch('GetUserInfo').then(rs => {
|
|
this.userInfo = rs;
|
|
this.getMyPage(true);
|
|
this.getPage(true);
|
|
});
|
|
|
|
},
|
|
methods: {
|
|
showPopup(item,index,idx) {
|
|
this.cancelData = item;
|
|
this.cancelIndex = index;
|
|
this.cancelIdx = idx;
|
|
this.show = true;
|
|
},
|
|
// index 列表下标
|
|
// idx 哪个列表
|
|
cancel() {
|
|
let $this=this;
|
|
let id = '';
|
|
if(this.cancelIdx == 1) {
|
|
id = this.cancelData.userFollow.aid;
|
|
} else {
|
|
id = this.cancelData.userFollow.followId;
|
|
}
|
|
apiFollow.remove(id).then(res=>{
|
|
if(res.status == 200) {
|
|
this.show = false;
|
|
if(this.cancelIdx == 1) {
|
|
$this.followMe.list[this.cancelIndex].has = false;
|
|
this.getPage(true);
|
|
} else {
|
|
this.getMyPage(true)
|
|
$this.follow.list.splice(this.cancelIndex,1);
|
|
}
|
|
uni.showToast({
|
|
title:'停止关注成功'
|
|
})
|
|
// this.$refs.messager.show({message:'停止关注成功',type:'info'});
|
|
}
|
|
})
|
|
},
|
|
toFollow(item,index) {
|
|
let $this=this;
|
|
apiFollow.save(item.userFollow.aid).then(res=>{
|
|
if(res.status == 200) {
|
|
$this.followMe.list[index].has = true;
|
|
// 手动把关注成功的数据push进我关注的列表
|
|
this.getPage(true);
|
|
// let data = {
|
|
// has:true,
|
|
// userFollow:{
|
|
// aid:res.result.aid,
|
|
// followId:res.result.followId,
|
|
// followTime:res.result.followTime,
|
|
// id:res.result.id,
|
|
// authorInfo:item.userFollow.authorInfo,
|
|
// }
|
|
|
|
// }
|
|
// // $this.follow.list.push(data);
|
|
} else {
|
|
// this.$message.error(res.message);
|
|
}
|
|
})
|
|
},
|
|
ubtab(num){
|
|
this.tab = num;
|
|
},
|
|
getMyPage(flag) {//关注我的，关注他的
|
|
if(flag) {
|
|
this.followMe.pageIndex =1;
|
|
this.followMe.list = [];
|
|
}
|
|
this.followMe.aid = this.userInfo.aid;
|
|
let $this=this;
|
|
uni.showLoading({title:'加载中...'});
|
|
apiFollow.mypage(this.followMe).then(res=>{
|
|
setTimeout(function(){ uni.hideLoading() },100);
|
|
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.push(...res.result.list);
|
|
this.getUserData(res.result.list,1);
|
|
}else{
|
|
console.log('加载关注我数据错误:'+res.message);
|
|
}
|
|
})
|
|
},
|
|
getPage(falg) { //我关注的，他关注的
|
|
if(falg) {
|
|
this.follow.pageIndex = 1;
|
|
this.follow.list = [];
|
|
}
|
|
this.follow.aid = this.userInfo.aid;
|
|
let $this=this;
|
|
uni.showLoading({title:'加载中...'});
|
|
apiFollow.page(this.follow).then(res=>{
|
|
setTimeout(function(){ uni.hideLoading() },100);
|
|
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.push(...res.result.list);
|
|
this.getUserData(res.result.list,2);
|
|
}
|
|
})
|
|
},
|
|
getUserData(list,tab) {
|
|
let ids = [];
|
|
if(tab == 1) {
|
|
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 (tab == 2 && author.aid == item.userFollow.followId) {
|
|
item.userFollow.authorInfo = author;
|
|
return true;
|
|
} else if(tab == 1 && 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>
|
|
.cancel-pop{
|
|
// height: 142px;
|
|
background: #F8F8F8;
|
|
border-radius: 32upx 32upx 0 0;
|
|
padding: 44upx 36upx 40upx 36upx;
|
|
.btn{
|
|
height: 88upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 88upx;
|
|
box-shadow: 0 4upx 14upx 2upx rgba(104,102,102,0.08);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 1;
|
|
word-break:break-all;
|
|
}
|
|
.btn2{
|
|
margin-top: 22upx;
|
|
border-radius: 44upx;
|
|
|
|
}
|
|
}
|
|
.follow-info-page{
|
|
|
|
background-color: #fff;
|
|
.ub-content{
|
|
// background-color: #fff;
|
|
margin: 0 140upx;
|
|
border-radius: 12upx;
|
|
padding: 45upx 30upx;
|
|
.ub-tab{
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
float: left;
|
|
font-size: 32upx;
|
|
margin: 0 36upx;
|
|
position: relative;
|
|
text{
|
|
width: 84upx;
|
|
height: 8upx;
|
|
background: linear-gradient(180deg, #007DFF 0%, #007DFF 100%);
|
|
border-radius: 26upx;
|
|
position: absolute;
|
|
left: 15%;
|
|
top: 120%;
|
|
display: none;
|
|
margin-top: 10upx;
|
|
}
|
|
}
|
|
.ub-tabactive{
|
|
font-weight: 500;
|
|
color: #333333;
|
|
text{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
.follow-list-box{
|
|
margin-top: 26upx;
|
|
padding: 0 36upx 0 40upx;
|
|
}
|
|
.follow-info-list{
|
|
padding: 40upx 0 32upx 0;
|
|
display: flex;
|
|
border-bottom:2upx solid rgba(153,153,153,0.1);
|
|
.img-info{
|
|
width: 80upx;
|
|
}
|
|
.name-and-sign{
|
|
margin-left: 30upx;
|
|
width: 100%;
|
|
.name-text{
|
|
font-size: 28upx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
.name-sign{
|
|
margin-top: 4upx;
|
|
font-size: 24upx;
|
|
color: #999999;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 1;
|
|
word-break:break-all;
|
|
}
|
|
}
|
|
.isFollow-btn{
|
|
width: 130upx;
|
|
margin-top: 14upx;
|
|
.on-follow{
|
|
width: 130upx;
|
|
height: 52upx;
|
|
line-height: 52upx;
|
|
border-radius: 26upx;
|
|
border: 2upx solid #007DFF;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: #387DF7;
|
|
}
|
|
.is-follow{
|
|
width: 130upx;
|
|
// padding: 0 30upx;
|
|
height: 52upx;
|
|
line-height: 52upx;
|
|
border-radius: 26upx;
|
|
border: 2upx solid #DCDCDC;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color:#999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|