uniappshell/pages/myCenter/personalData/personalData.vue

<template>
	<view class="wrap">
		<view class="info-wrap">
			<view class="avatar-container">
				<template>
					<image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" @error="ImageError"></image>
					<image v-else class="avatar" :src="defaultAvatar" mode="widthFix"></image>
				</template>
				<view class="edit" @click="editAvart">编辑</view>
			</view>			
			<uni-list v-if="userType===1">
				<uni-list-item title="姓名" :rightText="form.name" clickable  @click="handle('name')" showArrow></uni-list-item>
				<uni-list-item title="性别" :rightText="form.gender" clickable  @click="handle('gender')" showArrow></uni-list-item>
				<uni-list-item title="年龄" :rightText="form.age" clickable  @click="handle('age')" showArrow></uni-list-item>
				<uni-list-item title="邮箱" :rightText="form.email" clickable  @click="handle('email')" showArrow></uni-list-item>
				<uni-list-item title="手机号码" :rightText="form.phone"   @click="handle('phone')"></uni-list-item>
				<uni-list-item title="住址" :rightText="form.address"   @click="handle('address')"></uni-list-item>
			</uni-list>	
			<uni-list v-else>
				<uni-list-item title="学校" :rightText="form.school" clickable  @click="handle('school')" showArrow></uni-list-item>
				<uni-list-item title="学院" :rightText="form.college" clickable  @click="handle('college')" showArrow></uni-list-item>
				<uni-list-item title="专业" :rightText="form.major" clickable  @click="handle('major')" showArrow></uni-list-item>
				<uni-list-item title="学号" :rightText="form.studentId" clickable  @click="handle('studentId')" showArrow></uni-list-item>
			</uni-list>				
			<div class="submit-BT" @click="submit">保存</div>
		</view>		
		<uni-popup ref="popup" type="dialog" style="top">
			<div class="uni-popup-modal">
				<view class="uni-popup-title">请输入修改内容</view>
				<div class="uni-popup-content">
					<uni-easyinput type="text" v-model="updateValue" trim 
					@confirm="confirm(updateValue)"
					placeholder="请输入内容"></uni-easyinput>					
				</div>
				<div class="handle-wrap">
					<div class="cancel bt" @click="close">取消</div>
					<div class="confirm bt" @click="confirm(updateValue)">确认</div>
				</div>
			</div>
		</uni-popup>				
	</view>
</template>

<script>	
	import {isEmpty} from '@/libs';
	export default {
		data() {
			return {
				defaultAvatar:require("@/static/components/avatar.png"),
				avatar:"",
				updateValue:"",
				userType:undefined,
				form:{
					name:"",
					age:"",
					gender:"",
					phone:"",
					email:"",	
					birthday:"",
					address:"",
					school:"",
					college:"",
					major:"",
					studentId:""					
				}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getDetailById();
			},
			getDetailById(){
				let user=uni.getStorageSync('accountInfo');
				if(user){user=JSON.parse(user)}
				let userId=user.userId;
			},
			handle(type){
				if(type==='avatar'){
					this.updateAvatar();
				}else{
					this.updateValue=this.isEmpty(this.form[type])?'':this.form[type];
					this.type=type;
					this.open();
				}
			},
			updateAvatar(){
				uni.chooseImage({
					complete() {
						
					}
				})
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close()
			},
			ImageError(){
				this.avatar=this.defaultAvatar
			},
			editAvart(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album',"camera"], //从相册选择
					success:(res)=>{
						this.avatar=res.tempFilePaths[0]						
					}
				});		
			},
			confirm(value) {
				if(isEmpty(value)){
					uni.showToast({
						icon:"none",
						title:'请填写修改内容'
					})
					return;
				}
				this.form[this.type]=value
				this.updateValue=""
				this.close();		
			},
			submit(){
				let params={};
				if(this.userType===1){
					params={
						name:this.form.name,
						age:this.form.age,
						gender:this.form.gender,
						phone:this.form.phone,
						email:this.form.email,	
						birthday:this.form.birthday,
						address:this.form.address				
					}	
				}else{
					params={
						school:this.form.school,
						college:this.form.college,
						major:this.form.major,
						studentId:this.form.studentId							
					}					
					
				}
				console.log({
					params
				})
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.info-wrap{
			background-color: #f8f8f8;
			.avatar-container{
				&{
					margin: 32rpx auto;
					width: 156rpx;
					height: 156rpx;
					background: rgba(255,255,255,0.39);
					border: 2rpx solid #707070;
					border-radius: 50%;	
					position: relative;
					overflow: hidden;
				}
				.avatar{
					width: 156rpx;
					height: 156rpx;
					border-radius: 50%;	
					display: block;
				}
				.edit{
					width: 100%;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: rgba(0,0,0,0.6);
				}
			}
			.uni-list-item-custom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12rpx 15px;
				padding-left: 15px;	
				border-bottom: 1px solid #e7e7e7;
				.headline{
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;					
				}
			}
		}
		.uni-popup-dialog-wrap{
			margin-top: -180upx;
		}
		.submit-BT{
			width: 424rpx;
			height: 72rpx;
			line-height: 72rpx;	
			text-align: center;			
			position: fixed;
			bottom: 120rpx;
			left: 50%;
			transform: translateX(-50%);					
			background:#3D90F4;
			border-radius: 42rpx;	
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 999;			
		}
		.uni-popup-modal{
			width: 500rpx;
			background-color: #fff;
			box-shadow: 0 0 6rpx rgba(0,0,0,0.6);
			border-radius: 16rpx;
			.uni-popup-title{
				color: #000;
				font-size: 32rpx;
				line-height: 1;
				text-align: center;
				padding: 30rpx 0;
			}
			.uni-popup-content{
				padding: 20rpx 20rpx 80rpx;			
			}
			.handle-wrap{
				.bt{
					display: inline-block;
					width: 50%;
					height: 80rpx;
					line-height: 60rpx;
					color: #333;
					font-size: 32rpx;
					text-align: center;
					&.confirm{
						color:#007aff;
					}
				}				
			}
		}
	}
</style>