yicangzongtai_app_240321/pages/research/community/homepage.vue

	<template>
	<view class="container" style="background-color: #F5F5F5;">
			<view class="navbar">
				<navbar ref="navbar" :config="config"></navbar>
			</view>
		<!-- <顶部> -->
		<view class="top">	
			<!-- <背景图> -->
			<!-- <image :src="imgUrl+'/my-top-bgImg.png'"></image> -->
			<div class="bg"></div>
			<view class="head-login u-FFF">
				<!-- <view class="u-text-center u-font36 top-title">个人中心</view> -->
				<view class="item" style="margin-top: 50rpx;">
					<image v-if="myMsg.head_photo" class="image" :src="myMsg.head_photo" mode=""></image>
					<image v-else class="image" :src="imgUrl+'/head-on.png'" mode=""></image>
					<view class="name-box">
						<view  style="display: flex;align-items: center;">
						<view class="name" align-items="center">
							
								{{myMsg.nickname}}
						</view>
							 <view v-if="myMsg.is_celebrity==true">
							 	<image :src="imgUrl+'/delImg/celebrity.png'" style="width: 40rpx;height: 40rpx;margin-left: 14rpx;" mode=""></image>				
							 </view>	

						</view>
						
						<view class="simple" style="display: flex;" >简介：{{myMsg.resume}}
						<image v-if="isme==true" @click="modifyItem" :src="imgUrl+'/pen.png'" style="width: 34rpx;margin-top: 6rpx;display: block; height: 28rpx; margin-left: 20rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<uni-popup ref="popup" type="center">
						<view class="popup-msg">
							<view class="msg-top">
								请修改你的简介
							</view>
							<textarea class="introduce-item"maxlength="30" :value="myMsg.resume" @input="getTextMsg" placeholder="" />
							<button class="introduce-button" type="default" @click="submit">确定</button>
							<text class="iconfont" @click="cancel">&#xe623;</text>
						</view>
				</uni-popup>
				
			</view>
			<view class="bgImg">
				<image :src="imgUrl+'/my-list-bgImg.png'"></image>
				<view class="position-ab">
					<view class="middle" >
						<view class="block" @click="goTodetail('/pages/research/community/myfollow?user_id='+params.userId)">
							<view v-if="isme==true">
								<view class="number">
									{{myCommunityMsg.concern_num}}
								</view>
								<view class="content">
									我的关注
								</view>
							</view>
							<view v-if="isme==false">
								<view class="number">
									{{myCommunityMsg.concern_num}}
								</view>
								<view class="content">
									关注
								</view>
							</view>
						
						</view>
						<view class="block">
								<view v-if="isme==true">
							<view class="number" @click="goTodetail('/pages/research/community/myfans?user_id='+params.userId)">
								{{myCommunityMsg.fans_num}}
							</view>
							<view class="content">
								我的粉丝
							</view>
							</view>
							<view v-if="isme==false">
							<view class="number" @click="goTodetail('/pages/research/community/myfans?user_id='+params.userId)">
								{{myCommunityMsg.fans_num}}
							</view>
							<view class="content">
								粉丝
							</view>
							</view>
							
						</view>
						<view class="block">
							<view v-if="isme==true">
								<view class="number" @click="goTodetail('/pages/research/community/myfabulous?user_id='+params.userId)">
									{{myCommunityMsg.like_sum}}
								</view>
								<view class="content">
									我的点赞
								</view>
							</view>
								<view v-if="isme==false">
							<view class="number" @click="goTodetail('/pages/research/community/myfabulous?user_id='+params.userId)">
								{{myCommunityMsg.like_sum}}
							</view>
							<view class="content">
								点赞
							</view>
								</view>
						</view>
						<view class="block">
						<view v-if="isme==true">
							<view class="number" @click="goTodetail('/pages/research/community/mycomment?user_id='+params.userId)">
								{{myCommunityMsg.comment_sum}}
							</view>
							<view class="content">
								我的评论
							</view>
						</view>
						<view v-if="isme==false">
							<view class="number" @click="goTodetail('/pages/research/community/mycomment?user_id='+params.userId)">
								{{myCommunityMsg.comment_sum}}
							</view>
							<view class="content">
								评论
							</view>
						</view>

						</view>
						<!-- <view class="block">
							<view class="number" @click="goTodetail('/pages/research/community/collection')">
								{{myCommunityMsg.collect_sum}}
							</view>
							<view class="content">
								我的收藏
							</view>
						</view> -->
					</view>
					
				<waterfall 
				ref="wfp" 
				v-if="flowList.length>0"
				:colunmNumber="colunmNumber" 
				:flowList="flowList" 
				:columnGap="10"
				:status="status"></waterfall>
				<loadMore v-if="flowList.length>0" :status="status"></loadMore>
				<nodata v-else :config="{ top: 15, content: '暂无数据~' }"></nodata>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import waterfall from "../../../components/waterfall/shwaterfall.vue"
	import {myStatistics} from "@/api/userInfo.js"
	import {myInfo,getAccountInfo,updateResume} from "@/api/login.js"
	import loadMore from "../../../components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '个人主页',
					color: '#ffffff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, '#ffffff'],
					statusBarFontColor: '#ffffff',
					fixed:false,
				},
				colunmNumber: 2,
				index: 19,
				flowList: [],
				//微信小程序用户信息
				
				hiddenLink:true,
				loginNo:false,//判断显示邀请码
				
				//微信小程序用户信息
				userInfo:{
					head_photo:"",
					nickname:"登录/注册"
				},
				hiddenLink:true,
				loginNo:false,//判断显示邀请码
				myMsg:{},	//个人信息
				myCommunityMsg:{} 	,//社区信息
				introduceItem:'',
				newIntroduceItem:'',
			
				status:"more",
				id:null,
				isme:false,
				params:{
					userId:null,
					page:1,
					limit:10,
				},
				imgUrl: this.$mConfig.staticUrl,
			}
		},
		onLoad(options){
			let shop =  uni.getStorageSync("personal")
			this.params.userId = options.user_id
			if(this.params.userId ==shop.id){
				this.isme=true
			}else{
				this.isme=false
			}
					// this.getMsg()
					// this.getMyMsg()
					// this.getList()
					console.log('px:'+240/(uni.upx2px(100)/100))
		},
		onShow() {
			this.flowList = []
			this.getList()
			this.getMsg()
			this.getMyMsg()
		},
		//下拉加载
		onPullDownRefresh() {
			this.params.page=1;
			this.flowList=[],
			this.getList()
			this.getMyMsg()
			this.getMsg()
		},
		onReachBottom() {
			if(this.status=="more"){
				this.params.page++
				this.getList()
			}
		},
		methods:{
			//跳转修改信息
			goToEdit(){
				uni.navigateTo({
					url:"../setup/edit"
				})
			},
			getList(){
				this.$http.get("/opus/my-release",this.params).then(res=>{
					if(res&&res.code==200){
						uni.stopPullDownRefresh()
						this.flowList = this.flowList.concat(res.page.list)
						if(res.page.totalPage<=res.page.currPage){
							this.status="noMore"
						}else{
							this.status="more"
						}
					}
				})
			},
			//获取内容
			getTextMsg(e){
				this.newIntroduceItem=e.detail.value
			},			
			//取消
			cancel(){
				this.$refs.popup.close()
			},
			//修改简介
			modifyItem(){
				this.$refs.popup.open()
				// console.log(666)
			},
			//跳转页面
			goTodetail(url){
				uni.navigateTo({
					url:url
				})
			},
			//获取个人信息
			getMsg(){
				this.$http.get(myInfo,this.params).then(res=>{
					if(res&&res.code==200){
						// console.log(res)
						this.myMsg=res.data
						
					}
				})
			},
			//获取社区信息
			getMyMsg(){
			this.$http.get(myStatistics,this.params).then(res=>{
				if(res&&res.code==200){
					this.myCommunityMsg=res.data
					// console.log(this.myCommunityMsg,"123123")
				}
			})
			},
			//提交信息
			submit(){			
				if(this.newIntroduceItem==""){
					this.$mUtil.toast("请输入您想修改的内容")
					return false
				}
				let  params={
					resume:this.newIntroduceItem
				}
				this.$http.put(updateResume,params).then(res=>{
					if(res&&res.code==200){
						this.myMsg.resume=this.newIntroduceItem
						this.$refs.popup.close()
						this.$mUtil.toast("修改成功")
					}
				})
			},
			
		},


		components:{
			waterfall
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
	</style>

<style lang="scss" scoped>
	.popup-msg{
		width: 600rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		position: relative;
		.iconfont{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			font-size: 40rpx;
			color: #000000;
		}
		.msg-top{
			color: #000000;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.introduce-item{
			width: 95%;
			margin: 0 auto;
			background-color: #f3f3f3;
			margin-top: 20rpx;
			color: black;
		}
		.introduce-button{
			padding:  0 30rpx;
			margin: 20rpx;
			background-color: #0B844A;
			color: #FFFFFF;
		}
	}
	.navbar {
		position: absolute;
		top: 0;
		left: 0;
	}
	.top {
		position: relative;
		min-height: 100vh;
		background-color: #F5F5F5;
		// overflow: hidden;
		.bg {
			width: 100%;
			height: 436rpx;
			background-color: #0B844A;
		}
		.head-login {
			position: absolute;
			width: 100%;
			top: 128rpx;
			left: 0;
			.item{
				z-index: 10;
				padding: 0 30rpx;
				display: flex;
				// flex-wrap: wrap;
				.name-box{
					margin-left: 22rpx;
					flex: 1;
					.simple{
						height: 100rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						color: rgba(173,188,182,1);
						font-size: 28rpx;
						font-weight: 400;
						width: 100%;
						opacity: 1;
					}
					.name{
						color: rgba(255,255,255,1);
						font-size: 40rpx;
						// margin-left: 22rpx;
						line-height: 57rpx;
						font-size: 40rpx;
						color: #FFFFFF;
						font-weight: 400;
						width: 400rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.image{
					
					width: 114rpx;
					height: 114rpx;
					border-radius: 999rpx;
					// margin-left: 30rpx;
				}
			}
			.top-title {
				height: 88rpx;
				line-height: 88rpx;
			}
			.head image {
				width: 106rpx;
				height: 106rpx;
			}
			.login{
			line-height: 106rpx;	
			}
		}
	}

	.order {
		position: absolute;
		top: 320rpx;
		width: 84%;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 18rpx 30rpx 40rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		z-index: 99999;

		.pd-bt18 {
			padding-bottom: 18rpx;
		}

		.u-icon-bg {
			font-size: 52rpx;
			background: linear-gradient(180deg, #78df6a, #11d688);
			-webkit-background-clip: text;
			color: transparent;
		}

		.u-icon-bg2 {
			font-size: 50rpx;
			background: linear-gradient(180deg, #dc9c56, #ff7303);
			-webkit-background-clip: text;
			color: transparent;
		}

		.u-icon-bg3 {
			font-size: 52rpx;
			background: linear-gradient(180deg, #05d3a9, #06b806);
			-webkit-background-clip: text;
			color: transparent;
		}

		.u-icon-bg4 {
			font-size: 52rpx;
			background: linear-gradient(180deg, #ff5475, #fd4303);
			-webkit-background-clip: text;
			color: transparent;
		}

		.u-icon-bg5 {
			font-size: 48rpx;
			background: linear-gradient(180deg, #b175f0, #3db3fd);
			-webkit-background-clip: text;
			color: transparent;
		}
	}

	.bgImg {
		position: absolute;
		top: 400rpx;
		width: 100%;
	}

	.bgImg image {
		width: 100%;
		height: 75vh;
		position: relative;
	}

	.position-ab {
		position: absolute;
		top: -90rpx;
		width: 100%;
		
		.middle{
			padding: 42rpx 30rpx;
			background-color: white;
			margin: 20rpx 30rpx 0 30rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			.block{
				.content{
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #1a1a1a;
				}
				.number{
					color: rgba(255,0,0,1);
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					margin-bottom: 18rpx;
				}
			}
		}
		.wallet-bg {
			position: relative;
			height: 138rpx;
		}

		.wallet-bg .bigBg {
			position: absolute;
			z-index: 0;
			padding: 0 15rpx;
			box-sizing: border-box;
			width: 100%;
			height: 138rpx;
		}

		.wallet image {
			width: 32rpx;
			height: 34rpx;
		}

		.my-wallet {
			position: relative;
			z-index: 1;
			height: 138rpx;
		}
	}
</style>