ec.uniapp-master/pages/user/my/my.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F3F8F8" title="个人主页"></lf-nav>
		<view class="user-top" v-if="$isRight(discover_info)">
			<view class="lf-row-between lf-w-100">
				<view class="lf-flex">
					<view class="tag-father">
						<image :src="discover_info.avatar" mode="widthFix" class="head-img"></image>
						<view class="head-tag">V</view>
					</view>
					<view class="lf-flex-column lf-m-l-20">
						<text class="lf-font-42 lf-color-black lf-font-bold">{{discover_info.username}}</text>
						<text class="lf-font-28 lf-color-black">{{discover_info.my_follow_count}}关注 | {{discover_info.follow_me_count}}粉丝</text>
					</view>
				</view>
				<view>
					<button class="head-btn" v-if="discover_info.is_follow == true" @click="payAttention()">已关注</button>
					<button class="head-btn" v-if="discover_info.is_follow == false" @click="payAttention()">关注</button>
					<view v-if="discover_info.is_follow == -1"></view>
				</view>
			</view>
		</view>
		<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
			@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
			<view class="lf-m-32" v-for="(item,index) in list" :key="index" @click="goDetails(item.id)">
				<view class="lf-font-48 lf-color-black lf-font-bold">
					{{item.create_time[0]}}
				</view>
				<view class="lf-color-777 lf-font-24">
					{{item.create_time[1]}}
				</view>
				<view class="lf-flex-wrap lf-m-t-20">
					<image v-for="(picture,index2) in item.attachs" :key="index2" class="qzone-img" :src="picture.url" mode="aspectFill"></image>
				</view>
				<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
					<view class="lf-row-center" @click.stop="addLike(item.id)">
						<text class="lf-iconfont icon-xihuanlike lf-color-price" v-if="item.is_like"></text>
						<text class="lf-iconfont icon-xihuan" v-else></text>
						<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.likes_count}}</text>
					</view>
					<view class="lf-row-center">
						<text class="lf-iconfont icon-chakan"></text>
						<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.view_count}}</text>
					</view>
					<view class="lf-row-center">
						<text class="lf-iconfont icon-pinglun-"></text>
						<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.comments_count}}</text>
					</view>
				</view>
			</view>
			<!-- 空数据的情况 -->
			<view class="loading-more">
				<text v-if="list.length"
					:class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
				<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
			</view>
		</scroll-view>
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: 0,
				page: 1,
				page_size: 15,
				discover_info: '',
				isPage: true,
				loadingClass: true,
				loadingText: '正在加载中',
				isRefresher: false,
				scrollH: 0,
				nav_height: 0,
				list: []
			}
		},
		onLoad(e) {
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.user_id = e.user_id;
			this.loginList();
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 460rpx)`;
			}
		},
		methods: {
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.isRefresher = true;
				this.refreshFn({type: 'scrollRefresh'});
			},
			//关注
			payAttention() {
				this.$http
				    .post({
				        api: 'api/discover/add_follow',
						data: {
							user_id: this.user_id
						},
						header: {
						   Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.$msg(res.data.data);
								this.loginList();
				            } else {
				                wx.showModal({
				                    content: res.data.message,
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message,
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			// 下拉刷新处理
			refreshFn(options){
				this.page = 1;
				this.isPage = true;
				this.loadingClass = true;
				this.list = [];
				this.loadingText = '正在加载中';
				this.loginList(options);
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				if(this.isPage){
					this.page = this.page + 1;
					this.loginList();
				}
			},
			//点赞发现
			addLike(id) {
				let user_info = this.$cookieStorage.get('user_token');
				if(user_info) {
					this.$http
					    .post({
					        api: 'api/discover/like',
							data: {
								discover_id: id
							},
							header: {
							   Authorization: this.$cookieStorage.get('user_token')
							},
					    })
					    .then(res => {
					        if (res.data.code == 200) {
					            if (res.data.status) {
									this.refreshFn({type: 'scrollRefresh'});
					            } else {
					                wx.showModal({
					                    content: res.data.message || '请下拉页面刷新重试',
					                    showCancel: false
					                });
					            }
					        } else {
					            wx.showModal({
					                content: res.data.message || '请下拉页面刷新重试',
					                showCancel: false
					            });
					        }
					        wx.hideLoading();
					    })
					    .catch(() => {
					        wx.hideLoading();
					        wx.showModal({
					            content: '请求失败',
					            showCancel: false
					        });
					    });
				}else {
					this.$msg('你还未登录,请前往登录!');
				}
			},
			goDetails(id) {
				this.$url('/pages/discover/discoverdetails?discover_id='+id)
			},
			//登录时的发现列表
			loginList(options = {}) {
				this.$http
				    .get({
				        api: 'api/discover/user/'+this.user_id,
						data: {
							page: this.page,
							page_size: this.page_size
						},
						header: {
						   Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
								this.discover_info = res.data.data;
								let isPage = res.data.data.list.last_page  == this.page?false:true;
								this.isPage = isPage;
								if(!isPage) {
									this.loadingClass = false;
									this.loadingText = '没有更多数据啦~';
								}
								if(options.type == 'pageRefresh') {
									uni.stopPullDownRefresh();
								}else if(options.type == 'scrollRefresh') {
									this.isRefresher = false;
								}
								if(this.page == 1) {
									this.list = res.data.data.list.data;
								}else {
									this.list.push(...res.data.data.list.data);
								}
								console.log('登录时的发现列表',this.discover_info);
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.tag-father {
		position: relative;
	}
	.head-tag {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #15716E;
		border: 1rpx solid #FFFFFF;
		position: absolute;
		left: 76rpx;
		top: 86rpx;
		z-index: 99;
	}
	.qzone-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		&:nth-child(n + 4) {
			margin-top: 12rpx;
		}
	}
	.user-top {
		background-color: #F3F8F8;
		height: 236rpx;
		padding: 60rpx;
		display: flex;
		align-items: center;
	}
	.head-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.head-btn {
		width: 160rpx;
		height: 70rpx;
		background: #15716E;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: white;
		justify-content: center;
		border-radius: 35rpx;
	}
</style>