fbySrcm_uniapp/pages/user/users/userInfo.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="user-info">
			<view class="info-box">
				<view class="left">
					<view class="head-box">
						<image class="img" :src="avatar" mode="aspectFill"></image>
					</view>
					<view class="info">
						<!-- <text class="name">{{nickName}}</text> -->
						<!-- <text class="title">{{postNames}}</text> -->
						<view>
							<text class="fs28">{{nickName}}</text>
							<text class="fs24 ml40 base-color-3">{{sex}}</text>
						</view>
						<view class="base-color-9 fs24 mt12">注册时间：{{!userinfo.createTime||userinfo.createTime.slice(0, 10)}}</view>
					</view>
				</view>
				<image v-if="!isShow" class="right" src="/static/images/icon_edit.png" mode="aspectFill" @click="editInfo"></image>
			</view>
			<!-- 公司 -->
			<view class="justify-between">
				<view class="comp-info">
					<image class="img" src="/static/images/icon_comp.png" mode="aspectFill"></image>
					<text class="fs24 base-color-6">{{deptName}}</text>
				</view>
				<view class="comp-info">
					<image class="img" src="/static/images/phone.png" mode="aspectFill"></image>
					<text class="fs24 base-color-6">{{userinfo.phonenumber}}</text>
				</view>
			</view>
			
		</view>
		<!-- 详细信息 -->
		<view class="p20 justify-between wrap">
			<view class="base-bg-sure radius12 pl20 ptb12 item">
				<view class="bold">会员总数</view>
				<view class="mt12 base-color">
					<text class="fs40 bold">98</text>
					<text class="fs28">人</text>
				</view>
			</view>
			<view class="base-bg-sure radius12 pl20 ptb12 item">
				<view class="bold">今日新增会员</view>
				<view class="mt12 base-color">
					<text class="fs40 bold">98</text>
					<text class="fs28">人</text>
				</view>
			</view>
			<view class="base-bg-sure radius12 pl20 ptb12 item">
				<view class="bold">会员红包数</view>
				<view class="mt12 base-color">
					<text class="fs40 bold">98</text>
					<text class="fs28">个</text>
				</view>
			</view>
			<view class="base-bg-sure radius12 pl20 ptb12 item">
				<view class="bold">新会员红包金额</view>
				<view class="mt12 base-color">
					<text class="fs40 bold">98</text>
					<text class="fs28">元</text>
				</view>
			</view>
		</view>
		<view class="footer-btn ">
			<view :class="shenhe?'shenhed':'notshenhe'" @click="submitshen">{{shenhe?'已审核':'待审核'}}</view>
			<view class="base-bg-false base-color-red bor-red" @click="submitjin">{{jinyong?'禁用':'未禁用'}}</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfoByUserId,getUserInfo} from '@/api/user.js';
	export default {
		data() {
			return {
				avatar:"/static/images/default.png", 
				nickName:"",
				deptName:"",
				postNames:"",
				phonenumber:"",
				email:"",
				sex:"",
				isShow:false,
				userId:undefined,
				userinfo:[],
				shenhe:false,
				jinyong:false
			}
		},
		onLoad(option) {
			// 修改顶部导航背景色
			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: '#4BC9B1',
			// 	animation: {
			// 		duration: 400,
			// 		timingFunc: 'easeIn'
			// 	}
			// })
			if(!this.utils.isEmpty(option.userId)){
				this.userId = option.userId;
				this.isShow=true;
			}
			
		},
		onShow() {
			if(this.isShow){
				this.getUserInfoByUserId(this.userId);
			}
			else{
				this.getUserInfo();
			}
		},
		methods: {
			submitshen(){
				
			},
			submitjin(){
				
			},
			bindUser(data){
				var that=this;
				that.userinfo=data.user
				console.log(that.userinfo)
				that.nickName=data.user.nickName;
				that.deptName=data.user.dept.deptName;
				that.posts=data.post;
				that.phonenumber=data.user.phonenumber;
				that.email=data.user.email;
				if(data.user.sex==0){
					that.sex="男";
				}
				else if(data.user.sex==1){
					that.sex="女";
				}
				else if(data.user.sex==2){
					that.sex="未知";
				}
				if(data.post!=null&&data.post.length>0){
					var posts=[];
					data.post.forEach( (v,i) => {
						posts.push(v);
					},this);
					that.postNames=posts.toString()
				}
				if(!that.utils.isEmpty(data.user.avatar)){
					that.avatar=uni.getStorageSync('requestPath')+data.user.avatar;
				}
			},
			getUserInfoByUserId(userId){
				var data = {userId:userId};
				var that=this;
				getUserInfoByUserId(data).then(
					res => {
						that.bindUser(res);
					},
					rej => {}
				);
			},
			getUserInfo(){
				var data = {};
				var that=this;
				getUserInfo(data).then(
					res => {
						that.bindUser(res);
					},
					rej => {}
				);
			},
			// 拨打电话
			callPhone(tel){
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			// 个人信息编辑
			editInfo() {
				uni.navigateTo({
					url: '../editUser'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.footer-btn{
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 40rpx 0;
		view{
			width: 40%;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 50rpx;
		}
	}
	.shenhed{
		background-color: rgba(64, 149,229,0.1);
		border: 2rpx solid #4095E5;
		color:#4095E5 ;
	}
	.notshenhe{
		background-color:rgba(255, 108,71,0.1) ;
		border: 2rpx solid #FF6C47;
		color: #FF6C47;
	}
	.item{
		width: calc(50% - 20rpx);
		margin-top: 20rpx;
	}
	.content{
		// 个人信息
		.user-info{
			background: linear-gradient(to right, #dae9ff, #e1e1fd);
			padding: 0 30upx;
			.info-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20upx 0;
					.head-box{
						width: 120upx;
						height: 120upx;
						line-height: 100upx;
						font-size: 30upx;
						color: #fff;
						text-align: center;
						margin-right: 20upx;
						.img{
							border-radius: 50%;
							width: 100%;
							height: 100%;
						}
					}
				}
				.right{
					width: 40upx;
					height: 40upx;
				}
			}
			.comp-info{
				padding: 20upx 0 40upx;
				display: flex;
				align-items: center;
				.img{
					width: 30upx;
					height: 30upx;
					margin-right: 20upx;
				}
				.text{
					font-size: 30upx;
					color: #fff;
				}
			}
		}
		
	}
</style>