chunwan/pages/users/personal/index.vue

<template>
	<view class="user">
		<view class="user-navbar">
			<u-navbar :title="title" back-icon-color="#333333" :immersive="true" :background="background"></u-navbar>
		</view>
		<view class="user-pic">
			<image mode="widthFix" v-if="userInfo.faceFlag==0" :src="baseUrl+userInfo.img"></image>
			<image mode="widthFix" v-else :src="userInfo.faceImage"></image>
		</view>
		<view class="user-hd">
			<view class="a">
				<view class="title">{{userInfo.realname?userInfo.nickname:userInfo.nickname}}</view>
				<view class="vip" v-if="userInfo.memberflag>=1">VIP{{userInfo.memberflag}}</view>
				<image class="sex" v-if="userInfo.sex ==2" src="@/static/peiwan-nv.png"></image>
				<image class="sex" v-else src="@/static/peiwan-nan.png"></image>
				<view class="city" v-if="userInfo.province"><image class="location" src="@/static/dingwei2.png"></image>{{userInfo.province+"-"+userInfo.city}}</view>
			</view>
			<view class="b">
				<view class="tag" v-if="userInfo.age">{{userInfo.age}}岁</view>
				<view class="tag" v-if="userInfo.height">{{userInfo.height}}</view>
				<view class="tag" v-if="userInfo.weight">{{userInfo.weight}}</view>
				<view class="tag" v-if="userInfo.post">{{userInfo.post}}</view>
			</view>
			<view class="c" v-if="userInfo.declaration">
				#交友宣言：{{userInfo.declaration}}
			</view>
			<view class="d" :class="isPlay?'d-on':''" v-if="userInfo.voice" @click="toToggle()">
				{{userInfo.voiceTime}}″
			</view>
		</view>
		<view class="user-tab">
			<view class="tab">
				<u-tabs :list="list" bg-color="transparent" :is-scroll="false" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
			</view>
		</view>
		<view class="user-bd" v-if="current == 0">
			<view class="xiangce" v-if="userInfo.xiangce && userInfo.xiangce.length > 0">
				<view class="title">相册
					<view class="more" v-if="userInfo.xiangce && userInfo.xiangce.length > 0" @click="openPage(7,userInfo.id)">{{userInfo.xiangce.length}}张<image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="list" v-if="userInfo.xiangce && userInfo.xiangce.length > 0">
					<image v-for="(a,i) in userInfo.xiangce" @click="openPage(8,i)" :key="i" :src="a"></image>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">认证状态
				</view>
				<view class="list">
					<view class="tag" v-if="userInfo.phoneFlag == 1">手机号认证</view>
					<view class="tag" v-if="userInfo.realnameFlag == 1">实名认证</view>
					<view class="tag" v-if="userInfo.faceFlag == 1">真人认证</view>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">情感喜好
				</view>
				<view class="qinggan">
					<view class="dd">情感状态：<text>{{userInfo.emotion}}</text></view>
					<view class="dd">喜欢什么样的异性：
						<view class="b">
							<view class="tag" v-for="(a,i) in userInfo.sexFlag" :key="i">{{a}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">个人信息
				</view>
				<view class="qinggan">
					<view class="li">年收入：<text>{{userInfo.annualIncome}}</text></view>
					<view class="li">家乡：<text>{{userInfo.home}}</text></view>
					<view class="li">学历：<text>{{userInfo.xueli}}</text></view>
					<view class="li">星座：<text>{{userInfo.constellation}}</text></view>
				</view>
			</view>
		</view>
		<view class="user-bd" v-if="current==1">
			<view class="yuewan">
				<view class="title">约玩项目</view>
				<view class="list">
					<view class="item" :class="clickIndex == idx?'item-active':(a.type==1?'item-on':'')" v-for="(a,idx) in sellerServiceList" :key="idx">
						<view class="name">{{a.name}}</view>
						<view class="price">{{a.price}}起</view>
					</view>
					<view class="empty" v-if="isShow">
						<image src="@/static/empty.png"></image>
						<view class="txt">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-bd" v-if="current==2">
			<view class="dongtai">
				<view class="empty" v-if="isShow">
					<image src="@/static/empty.png"></image>
					<view class="txt">暂无数据</view>
				</view>
				<view class="item" v-for="(a,i) in articleList" :key="i" @click="openPage(5,a.id)">
					<view class="a">
						<view class="fl">
							<image :src="a.faceImage?a.faceImage:a.img"></image>
							<view class="info">
								<view class="name">{{a.nickname}}</view>
								<view class="desc">{{a.createTime}}</view>
							</view>
						</view>
					</view>
					<view class="b">{{a.content}}</view>
					<view class="c">
						<image mode="aspectFill" v-for="(b,idx) in a.imgurl" :key="idx" :src="b"></image>
					</view>
					<view class="d">
						<view class="fl">
							<view class="li">
								<image src="@/static/xiaoxi.png"></image>{{a.pinglun}}
							</view>
							<view class="li">
								<image v-if="a.isUserZan == 0" src="@/static/dianzan.png"></image>
								<image v-else src="@/static/zandin2.png"></image>{{a.zan}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="user-fd">
			<view class="item" @click="openPage(1)">编辑资料</view>
		</view>
		<dashan :isDashan="isDashan" :info="{}" />
		<share :isShare="isShare" :info="{}" />
		<insufficient :isCoins="isCoins" />
	</view>
</template>

<script>
	const systemInfoSync=uni.getSystemInfoSync();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				baseUrl: "",
				userInfo: {},
				clickIndex: -1,
				isShare: false,
				isCollect: false,
				isDashan: false,
				isPlay: false,
				isCoins: false,
				title: "",
				isScroll: false,
				isShow: false,
				background: {
					// 导航栏背景图
					background: 'transparent',
				},
				current: 0,
				statusBarHeight: 0,
				list:[{'name': '资料'},{'name': '陪玩'},{'name': '动态'}],
				activeStyle: {'fontSize': '35rpx'},
				articleList: [],
				distance: 0,
				sellerServiceList: []
			};
		},
		onPageScroll(e) {
			if(e.scrollTop<=10){
				this.background = {
					// 导航栏背景图
					background: 'transparent',
				}
				this.title =""
			}else{
				const t = e.scrollTop>=44?1:(e.scrollTop/44).toFixed(2)
				this.title = (this.userInfo.realname?this.userInfo.nickname:this.userInfo.nickname)+"主页"
				this.background = {
					// 导航栏背景图
					background: 'rgba(255,255,255,'+t+')',
				}
			}
		},
		onLoad() {
			this.statusBarHeight = systemInfoSync.statusBarHeight;
			this.baseUrl = this.$baseUrl;
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			async userSellerServiceList() {
				const { code, data , msg } = await this.$api.userSellerServiceList({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: "",
					lat: uni.getStorageSync("jingweiInfo").latitude,
					lon: uni.getStorageSync("jingweiInfo").longitude
				});
				if(code == 200){
					this.sellerServiceList = data.serviceList;
					this.isShow = data.serviceList.length == 0?true:false;
					this.distance = data.distance;
				}else{
					uni.showToast({
						title: mgs,
						position: "bottom",
						icon: "none",
					})
				}
			},
			async userArticleList() {
				const { code, data , msg } = await this.$api.userArticleList({userId: uni.getStorageSync("userInfo").id,limit:100,page:1});
				if(code == 200){
					let arr = [];
					if(data.list && data.list.length > 0){
						data.list.map(a=>{
							if(a.imgurl){
								a.imgurl = a.imgurl.split(",")
							}
							arr.push(a)
						})
					}
					this.articleList = arr;
					this.isShow = data.totalCount == 0?true:false;
				}else{
					uni.showToast({
						title: mgs,
						position: "bottom",
						icon: "none",
					})
				}
			},
			async getUserInfo() {
				const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					this.userInfo = data;
					this.userInfo.xiangce = []
					if(data.reserved1){
						this.userInfo.xiangce = data.reserved1.split(",")
					}
					if(data.home){
						this.userInfo.home = data.home.split("-")[0]+"-"+data.home.split("-")[1]
					}
					this.getDictDataByType();
				}else{
					uni.showToast({
						title: mgs,
						position: "bottom",
						icon: "none",
					})
				}
			},
			//字典查询
			async getDictDataByType() {
				const that = this;
				let res1 = await that.$api.getDictDataByType({dictType: 'salary_type'});
				let res2 = await that.$api.getDictDataByType({dictType: 'education_type'});
				let res3 = await that.$api.getDictDataByType({dictType: 'constellation_type'});
				let res4 = await that.$api.getDictDataByType({dictType: 'marriage_type'});
				let res5 = await that.$api.getDictDataByType({dictType: that.userInfo.sex == 1?'sex_type_2':'sex_type_1'});
				if(res1.data && res1.data.length > 0){
					res1.data.map((a,index)=>{
						if(that.userInfo.annualIncome == a.dictValue){
							that.userInfo.annualIncome = a.dictLabel
						}
					})
				}
				if(res2.data && res2.data.length > 0){
					res2.data.map((a,index)=>{
						if(that.userInfo.xueli == a.dictValue){
							that.userInfo.xueli = a.dictLabel
						}
					})
				}
				if(res3.data && res3.data.length > 0){
					res3.data.map((a,index)=>{
						if(that.userInfo.constellation == a.dictValue){
							that.userInfo.constellation = a.dictLabel;
						}
					})
				}
				if(res4.data && res4.data.length > 0){
					res4.data.map((a,index)=>{
						if(that.userInfo.emotion == a.dictValue){
							that.userInfo.emotion = a.dictLabel;
						}
						
					})
				}
				let sexFlag = "",arr=[],arr1=[];
				if(res5.data && res5.data.length > 0){
					res5.data.map(a=>{
						if(that.userInfo.sexFlag ){
							sexFlag = that.userInfo.sexFlag.split(",")
							sexFlag.map(b=>{
								if(b== a.dictValue){
									arr.push(a.dictLabel) 
								}
							})
						}
					})
				}
				if(that.userInfo.sexFlag ){
					that.userInfo.sexFlag = arr;
				}
			},
			openPage(index,id){
				if(index == 1){
					uni.navigateTo({
						url: "/pages/users/edit/index"
					})
				}else if(index == 2){
					this.isShare = !this.isShare
				}else if(index == 3){
					this.isDashan = !this.isDashan
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/peiwan/confirm?id="+id
					})
				}else if(index == 5){
					uni.navigateTo({
						url: "/pages/dongtai/detail?id="+id
					})
				}else if(index == 7){
					uni.navigateTo({
						url: "/pages/peiwan/xiangce?id="+id
					})
				}else if(index == 8){
					uni.previewImage({
						urls: this.userInfo.xiangce,
						count: id
					})
				}
			},
			changeTabs(index){
				this.current = index
				if(index == 1){
					this.userSellerServiceList();
				}else if(index == 2){
					this.userArticleList();
				}
			},
			toToggle () {
				this.isPlay = !this.isPlay
				if(this.isPlay){
					innerAudioContext.src = this.userInfo.voice;
					innerAudioContext.play();
				}else{
					innerAudioContext.pause();
				}
			},
		},
		destroyed() {
			if (innerAudioContext) {
			  try {
			    innerAudioContext.pause();
			    innerAudioContext.destroy()
			    innerAudioContext = null
			  } catch (e) {
			    
			  }
			}
		}
	}
</script>

<style scoped lang="scss">
.user{
	padding-bottom: 130rpx;
	overflow: hidden;
	.empty{
		padding: 150rpx 0;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
		image{
			display: block;
			width: 460rpx;
			height: 400rpx;
			margin: 0 auto;
		}
	}
	&-pic{
		width: 100%;
		image{
			width: 100%;
		}
	}
	&-fd{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 21;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.item{
			flex: 1;
			display: flex;
			line-height: 70rpx;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			background: #FCFCFC;
			border-radius: 70rpx;
			border: 1px solid #000000;
			color: #000000;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			&-on{
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				color: #FFFFFF;
			}
		}
		.items{
			width: 462rpx;
			display: flex;
			line-height: 70rpx;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			border-radius: 70rpx;
			border: 1px solid #000000;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			color: #FFFFFF;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
	&-bd{
		padding: 0 25rpx;
		overflow: hidden;
		.xiangce{
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				.more{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.list{
				width: 100%;
				display: flex;
				align-items: center;
				image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
				.tag{
					padding: 0 30rpx;
					line-height: 50rpx;
					height: 50rpx;
					background: #000000;
					border-radius: 50rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					margin-top: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
			}
			.qinggan{
				background: #F7F7F7;
				border-radius: 20rpx;
				padding: 0 30rpx 30rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 20rpx;
				overflow: hidden;
				text{
					color: #222222;
				}
				.dd{
					margin-top: 30rpx;
				}
				.li{
					width: 50%;
					float: left;
					margin-top: 30rpx;
				}
				.b{
					display: flex;
					align-items: center;
					.tag{
						padding: 0 20rpx;
						height: 50rpx;
						font-weight: 500;
						border-radius: 50rpx;
						font-size: 24rpx;
						line-height: 50rpx;
						color: #FFFFFF;
						margin-top: 20rpx;
						margin-left: 20rpx;
						&:first-child{
							margin-left: 0;
						}
						&:nth-child(1){
							background: linear-gradient(0deg, #A348DA, #F090F2);
						}
						&:nth-child(2){
							background: linear-gradient(0deg, #017CF9, #10D9F2);
						}
						&:nth-child(3){
							background: linear-gradient(0deg, #7C58DB, #9AA4FF);
						}
						&:nth-child(4){
							background: linear-gradient(0deg, #EC1C71, #FF8CAC);
						}
						&:nth-child(5){
							background: linear-gradient(0deg, #FA7B0B, #F7D345);
						}
					}
				}
			}
		}
		.yuewan{
			overflow: hidden;
			margin-top: 20rpx;
			.list{
				width: 110%;
				overflow: hidden;
				margin-top: 20rpx;
				.item{
					width: 240rpx;
					height: 140rpx;
					background: url(@/static/icon-xianxia.png) center top no-repeat;
					background-size: contain;
					float: left;
					text-align: left;
					padding: 30rpx;
					box-sizing: border-box;
					border: 1px solid #F3F4F5;
					&-on{
						background: url(@/static/icon-xianshang.png) center top no-repeat;
						background-size: contain;
					}
					&-active{
						border: 1px solid #000;
					}
					.name{
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
						white-space: nowrap;
						overflow: hidden;
					}
					.price{
						font-weight: 500;
						font-size: 24rpx;
						color: #E70C0C;
						margin-top: 10rpx;
					}
				}
			}
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				.location{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
					image{
						width: 22rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.dongtai{
			padding-bottom: 20rpx;
			overflow: hidden;
			.item{
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.d{
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 42rpx;
					margin-top: 20rpx;
					text-align: left;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fl{
						flex: 1;
						display: flex;
						align-items: center;
						.li{
							display: flex;
							align-items: center;
							width: 120rpx;
							image{
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
							}
						}
					}
					.fr{
						width: 90rpx;
						line-height: 44rpx;
						background: #000000;
						border-radius: 44rpx;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.c{
					width: 110%;
					margin-top: 20rpx;
					overflow: hidden;
					image{
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}
				.b{
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					line-height: 42rpx;
					margin-top: 20rpx;
					text-align: left;
				    display: -webkit-box;
				    -webkit-box-orient: vertical;
				    -webkit-line-clamp: 2; /* 定义文本的行数 */
				    overflow: hidden;
				    text-overflow: ellipsis;
				}
				.a{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fl{
						flex: 1;
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						image{
							width: 80rpx;
							height: 80rpx;
							background: #E6E9ED;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.info{
							flex: 1;
						}
						.name{
							font-weight: 400;
							font-size: 30rpx;
							color: #222222;
						}
						.desc{
							font-weight: 400;
							font-size: 22rpx;
							color: #B6BCC2;
							margin-top: 10rpx;
						}
					}
					.fr{
						width: 32rpx;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}
	&-tab{
		display: flex;
		margin-top: 10rpx;
		overflow: hidden;
		.tab{
			width: 400rpx;
		}
	}
	&-hd{
		width: 100%;
		background: #FFFFFF;
		border-radius: 0px 0px 20rpx 20rpx;
		padding: 25rpx;
		box-sizing: border-box;
		position: relative;
		.d{
			width: 165rpx;
			height: 95rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			background: url(@/static/icon-bofang.png) center top no-repeat;
			background-size: contain;
			line-height: 88rpx;
			text-indent: 90rpx;
			position: absolute;
			right: 0;
			top: 5rpx;
			z-index: 2;
			&-on{
				background: url(@/static/icon-zanting.png) center top no-repeat;
				background-size: contain;
			}
		}
		.b{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.tag{
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
			}
		}
		.c{
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			text-align: left;
			margin-top: 30rpx;
		}
		.a{
			width: 100%;
			display: flex;
			align-items: center;
			.name{
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
			}
			.vip{
				width: 60rpx;
				line-height: 32rpx;
				background: url(@/static/vip-bg.png) center top no-repeat;
				background-size: contain;
				text-align: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				overflow: hidden;
				margin-left: 20rpx;
			}
			.sex{
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.city{
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>