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" @click="toLogin">
						{{is_login?info.nickname:'点击登录'}} <image src="../../static/profile/8@2x.png" mode="" v-show="info.vip_level==0"></image>
					</view>
					<view class="info" >
						资料完成度{{info.progress||0}}% <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" v-if="isShow!=0">
				<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="tosuqiu">
				<view class="item u-flex u-col-center">
					<image src="../../static/profile/zeou.png" mode=""></image>
					<text>择偶条件</text>
					<image src="../../static/profile/tan.png" mode="" style="width: 20rpx;height: 20rpx;vertical-align: middle;margin: 0 4rpx;"></image>
					<text style="font-size: 16rpx;color: #777777;">此项内容为智能推荐功能重要依据，请认真填写</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 54rpx;" @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="tofankui">
				<view class="item">
					<image src="../../static/profile/contact.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="tofenxiang">
				<view class="item">
					<image src="../../static/profile/contact.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>
		<Showtoast @canceltoast='canceltoast' :showtoast='showtoast' />
	</view>
</template>

<script>
	import Showtoast from'../../components/Showtoast.vue'
	export default {
		components:{
			Showtoast
		},
		data() {
			return {
				is_login:false,
				showtoast:false,
				isShow:0,
				info:{},
				is_info:0,
			}
		},
		onPullDownRefresh() {
				this.getInfo()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		onShow() {
			if (!uni.getStorageSync('token')) {
				this.is_login=false
			}else{
				this.is_login=true
				this.getInfo()
			}
			if(uni.getStorageSync('is_info')){
				this.is_info=uni.getStorageSync('is_info')
			}
			
			this.isShow=getApp().globalData.isShow
				
		},
		methods: {
			tosuqiu(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/profile/suqiu'
				})
			},
			tofenxiang(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
					uni.navigateTo({
						url:'/pages/index/recommend'
					})
			},
			toLogin(){
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url:'/pages/profile/login'
					})
				} 
			},
			
			canceltoast(){
					this.showtoast=false
			},
			tofankui(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
					uni.navigateTo({
						url:'./fankuiList'
					})
			},
			tozixun(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
					uni.navigateTo({
						url:'./zixunList'
					})
			},
			contact(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/index/contactour'
				})
			},
			toliaotian(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				if(this.info.vip_level==0){
					this.showtoast=true
					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(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./myPage'
				})
			},
			tostatus(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./personStatus'
				})
			},
			toreport(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./reportList'
				})
			},
			toactivity(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				// if(this.info.vip_level==0){
				// 	this.showtoast=true
				// 	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.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				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(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./ganxingqu'
				})
			},
			todianzan(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./dianzan'
				})
			},
			tofensi(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./fensi'
				})
			},
			toguanzhu(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				if (this.is_info != 2) {
					uni.navigateTo({
						url: '/pages/index/base'
					})
					return
				}
				uni.navigateTo({
					url:'./guanzhu'
				})
			},
			toset(){
				if(!this.is_login){
					this.toLogin()
					return
				}
				// if (this.is_info != 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/index/base'
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url:'./set'
				})
			}
		}
	}
</script>

<style lang="scss">
	// #ifdef H5
	page{
		background: url(/static/bg.png) no-repeat;
	}
	//#endif
	.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>