我的关注页面

config/index.js

@@ -16,7 +16,7 @@ if(process.env.NODE_ENV === 'development'){
 	oldApiBaseUrl = '/uboeApi';
 	statApiBaseUrl='/statApi';
 	socialApiBaseUrl='/socialApi';
-	fileUrl = 'http://localhost:9090/cdn/upload';
+	fileUrl = 'http://192.168.0.11:9090/cdn/upload';
 	loginPath='/pages/login/login';
 }else if(process.env.NODE_ENV === 'preview'){
     // 预发布环境，当前配置未使用上

pages/my/follow.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="follow-info-page">
+		<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>
@@ -7,54 +8,219 @@
 			</view>
 		</view>
 		<view class="follow-list-box" v-show="tab == 1">
-			<view class="follow-info-list" v-for="item in 5">
+			<view class="follow-info-list" v-for="(item,idx) in followMe.list">
 				<view class="img-info">
-					<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
+					<author-img :avatar="item.userFollow.authorInfo.avatar" :sex="item.userFollow.authorInfo.sex"></author-img>
 				</view>
 				<view class="name-and-sign">
-					<view class="name-text">李沐沐</view>
+					<view class="name-text">{{item.userFollow.authorInfo.name}}</view>
-					<view class="name-sign">相信美好的事情即将发生</view>
+					<view class="name-sign">{{item.userFollow.authorInfo.sign}}</view>
 				</view>
 				<view class="isFollow-btn">
-					<!-- <view class="on-follow">关注</view> -->
+					<view class="is-follow" v-if="item.has" @click="showPopup(item,idx,1)">已关注</view>
-					<view class="is-follow">已关注</view>
+					<view class="on-follow" v-else @click="toFollow(item,idx)">关注</view>
+					
 				</view>
 			</view>
 		</view>
 		<view class="follow-list-box" v-show="tab == 2">
-			<view class="follow-info-list" v-for="item in 5">
+			<view class="follow-info-list" v-for="(follow,index) in follow.list">
 				<view class="img-info">
-					<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
+					<author-img :avatar="follow.userFollow.authorInfo.avatar" :sex="follow.userFollow.authorInfo.sex"></author-img>
+					<!-- <image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image> -->
 				</view>
 				<view class="name-and-sign">
-					<view class="name-text">李沐沐</view>
+					<view class="name-text">{{follow.userFollow.authorInfo.name}}</view>
-					<view class="name-sign">相信美好的事情即将发生</view>
+					<view class="name-sign">{{follow.userFollow.authorInfo.sign}}</view>
 				</view>
 				<view class="isFollow-btn">
-					<view class="on-follow">关注</view>
+					<view class="is-follow" @click="showPopup(follow,index,2)">已关注</view>
-					<!-- <view class="is-follow">已关注</view> -->
+					<!-- <view class="on-follow" v-else>关注</view> -->
 				</view>
 			</view>
 		</view>
+		<u-popup :show="show">
+		    <view class="cancel-pop">
+		        <view class="btn" @click="cancel()">
+		        	停止关注 {{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:''
+						}
+					}
+				},
+				cancelIndex:0,
+				cancelIdx:0,
+				show:false,
 				tab:1,
+				userInfo:{},
+				followMe:{
+					aid:'',
+					pageIndex:1,
+					pageSize:10,
+					list:[],
+				},
+				follow:{
+					aid:'',
+					pageIndex:1,
+					pageSize:10,
+					list:[],
+				}
+				
 			}
 		},
+		onLoad(options) {
+			this.$store.dispatch('GetUserInfo').then(rs => {
+				this.userInfo = rs;
+				this.getMyPage();
+				this.getPage();
+			});
+			
+		},
 		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;
+			        } else {
+					   $this.follow.list.splice(this.cancelIdx,1);
+			        }
+					this.$refs.messager.show({message:'停止关注成功',type:'success'});
+			       }
+			    })
+			},
+			toFollow(item,index) {
+				 let $this=this;
+			      apiFollow.save(item.userFollow.aid).then(res=>{
+			        if(res.status == 200) {
+					  $this.followMe.list[index].has = true;
+			        } else {
+			          this.$message.error(res.message);
+			        }
+			      })
+			},
 			ubtab(num){
 				this.tab = num
-			}
+			},
+			getMyPage() {//关注我的，关注他的
+			    this.followMe.aid = this.userInfo.aid;
+			    let $this=this;
+			    apiFollow.mypage(this.followMe).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;
+			           this.getUserData(res.result.list,1);
+			        }else{
+			          console.log('加载关注我数据错误:'+res.message);
+			        }
+			    })
+			},
+			getPage() { //我关注的，他关注的
+			     this.follow.aid = this.userInfo.aid;
+			    // this.page.aid = this.pageId;
+			    // this.page.pageIndex=this.follow.pageIndex;
+			    // this.page.pageSize=this.follow.pageSize;
+			    let $this=this;
+			    apiFollow.page(this.follow).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,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;
+		}
+		.btn2{
+			margin-top: 22upx;
+			border-radius: 44upx;
+			
+		}
+	}
 	.follow-info-page{
 		
 		background-color: #fff;
@@ -114,6 +280,11 @@
 				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{
@@ -131,6 +302,7 @@
 			}
 			.is-follow{
 				width: 130upx;
+				// padding: 0 30upx;
 				height: 52upx;
 				line-height: 52upx;
 				border-radius: 26upx;

pages/my/rankingList.vue

@@ -200,7 +200,6 @@
 		onLoad(options) {
 			this.$store.dispatch('GetUserInfo').then(rs => {
 				this.userInfo = rs;
-				console.log(rs,'rs')
 				this.getExperience();
 				this.getDuration();
 				this.getDays();