xiangqin/pages/profile/profile.vue

<template>
	<view>
		<image src="../../static/bg.png" mode="" class="bg"></image>
		<view class="top u-flex u-row-between">
			<view class="u-flex leftBox">
				<image :src="info.headimg" mode="" class="avatar"></image>
				<view class="">
					<view class="name">
						{{info.nickname}} <image src="../../static/profile/8@2x.png" mode="" v-show="info.vip_level==0"></image>
					</view>
					<view class="info" >
						资料完成度{{info.progress}}% <text class="wanshan" v-show="info.progress!=100" @click="toPage">去完善></text>
					</view>
					<template>
						<u-line-progress :percentage="info.progress" :showText="false" activeColor="#A890FE" height="8"></u-line-progress>
					</template>
				</view>
			</view>
			<image src="../../static/profile/7@2x.png" mode="" class="set" @click="toset"></image>
		</view>
		<view class="user u-flex u-row-between">
			<view class="u-flex-col u-col-center userItem"  @click="tofensi"> 
				<text class="num">{{info.fans}}</text>
				<text class="itemName">粉丝</text>
			</view>
			<view class="u-flex-col u-col-center userItem" @click="toguanzhu">
				<text class="num">{{info.follow}}</text>
				<text class="itemName">关注</text>
			</view>
			<view class="u-flex-col u-col-center userItem" @click="todianzan">
				<text class="num">{{info.fabulous}}</text>
				<text class="itemName">点赞</text>
			</view>
			<view class="u-flex-col u-col-center userItem" @click="toxingqu">
				<text class="num">{{info.interested}}</text>
				<text class="itemName">感兴趣</text>
			</view>
		</view>
		<view class="center u-flex u-row-around">
			<view class="u-flex-col u-col-center" @click="todongtai">
				<image src="../../static/profile/2@2x.png" mode=""></image>
				<text>我的动态</text>
			</view>
			<view class="u-flex-col u-col-center" @click="toliaotian">
				<image src="../../static/profile/3@2x.png" mode=""></image>
				<text>聊天记录</text>
			</view>
			<view class="u-flex-col u-col-center"  @click="toactivity">
				<image src="../../static/profile/4@2x.png" mode=""></image>
				<text>报名活动</text>
			</view>
			<view class="u-flex-col u-col-center"  @click="toreport">
				<image src="../../static/profile/1@2x.png" mode=""></image>
				<text>举报记录</text>
			</view>
		</view>
		<view class="bottom">
			<view class="u-flex u-row-between" @click="tostatus">
				<view class="item">
					<image src="../../static/profile/5@2x.png" mode=""></image>
					<text>个人状态</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 54rpx;"  @click="toPage">
				<view class="item">
					<image src="../../static/profile/6@2x.png" mode=""></image>
					<text>个人主页</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 54rpx;"  @click="tozixun">
				<view class="item">
					<image src="../../static/profile/qinggai@2x.png" mode=""></image>
					<text>情感咨询记录</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 54rpx;"  @click="contact">
				<view class="item">
					<image src="../../static/profile/lianxi@2x.png" mode=""></image>
					<text>联系我们</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{}
			}
		},
		onPullDownRefresh() {
				this.getInfo()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		onShow() {
				this.getInfo()
		},
		methods: {
			tozixun(){
					uni.navigateTo({
						url:'./zixunList'
					})
			},
			contact(){
				uni.navigateTo({
					url:'/pages/index/contactour'
				})
			},
			toliaotian(){
				
				if(this.info.vip_level==0){
					this.$u.toast('您暂未认证')
					return
				}
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.navigateTo({
					url:'/pages/index/message'
				})
			},
			getInfo(){
				uni.$u.http.post('/api/user/userinfo').then(res => {
					if(res.code==1){
						this.info=res.data
						uni.setStorageSync('userId',res.data.id)
						uni.setStorageSync('userInfo',JSON.stringify(res.data))
					}
				})
			},
			toPage(){
				uni.navigateTo({
					url:'./myPage'
				})
			},
			tostatus(){
				uni.navigateTo({
					url:'./personStatus'
				})
			},
			toreport(){
				uni.navigateTo({
					url:'./reportList'
				})
			},
			toactivity(){
				if(this.info.vip_level==0){
					this.$u.toast('您暂未认证')
					return
				}
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.navigateTo({
					url:'../activity/activityLIst'
				})
			},
			todongtai(){
				if(this.info.vip_level==0){
					this.$u.toast('您暂未认证')
					return
				}
				if(this.info.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.info.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.navigateTo({
					url:'./mydongtai'
				})
			},
			toxingqu(){
				uni.navigateTo({
					url:'./ganxingqu'
				})
			},
			todianzan(){
				uni.navigateTo({
					url:'./dianzan'
				})
			},
			tofensi(){
				uni.navigateTo({
					url:'./fensi'
				})
			},
			toguanzhu(){
				uni.navigateTo({
					url:'./guanzhu'
				})
			},
			toset(){
				uni.navigateTo({
					url:'./set'
				})
			}
		}
	}
</script>

<style lang="scss">
	.bottom{
		box-sizing: border-box;
		padding: 36rpx 20rpx;
		margin: 0 auto;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		font-size: 28rpx;
		color: #222;
		.item{
			image{
				width: 44rpx;
				height: 44rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
		}
	}
	.center{
		font-size: 24rpx;
		margin: 0 auto 24rpx;
		width: 690rpx;
		height: 228rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		image{
			width: 76rpx;
			height: 76rpx;
			margin-bottom: 16rpx;
		}
	}
	.user{
		margin: 52rpx 0 40rpx;
		padding: 0 30rpx;
	}
	.userItem{
		color: #222222;
		font-size: 24rpx;
		.num{
			font-size: 52rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}
	page{
		
	}
	.top{
		padding: 196rpx 30rpx 0;
	}
	.set{
		width: 40rpx;
		height: 40rpx;
	}

.leftBox{
	.avatar{
		margin-right: 20rpx;
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
		border: 4rpx solid #FFFFFF;
	}
	.name{
		font-size: 32rpx;
		color: #222222;
		image{
			width: 96rpx;
			height: 32rpx;
			margin-left: 12rpx;
			vertical-align: middle;
		}
	}
	.info{
		margin: 14rpx 0 4rpx;
		font-size: 16rpx;
		color: #222222;
		.wanshan{
			color: #9887FF;
			background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}
</style>