uniappshell/pages/myCenter/personalData/personalData.vue

<template>
	<view class="wrap">
		<view class="info-wrap">
			<view class="avatar-container" @click="editAvart">
				<template>
					<image v-if="form.accountAvatar" class="avatar" :src="form.accountAvatar" mode="widthFix" @error="ImageError"></image>
					<image v-else class="avatar" :src="defaultAvatar" mode="widthFix"></image>
				</template>
				<view class="edit">编辑</view>
			</view>			
			<uni-list>
				<uni-list-item title="帐号名称" :rightText="form.accountName" clickable  @click="handle('accountName')" showArrow></uni-list-item>
				<uni-list-item title="手机号码" :rightText="form.accountPhone" clickable  @click="handle('accountPhone')" showArrow></uni-list-item>
				<uni-list-item title="个人姓名" :rightText="form.accountRealName" clickable  @click="handle('accountRealName')" showArrow></uni-list-item>
				<uni-list-item title="工    号" :rightText="form.accountStaffNo" clickable  @click="handle('accountStaffNo')" showArrow></uni-list-item>
				<uni-list-item title="介    绍" :rightText="form.accountIntro" clickable   @click="handle('accountIntro')" 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';
	import { getUserProfile, updateUserProfile } from '@/api/system/user.js'
	import { upload } from '@/api/system/upload.js'
	export default {
		data() {
			return {
				defaultAvatar:require("@/static/components/avatar.png"),
				avatar:"",
				updateValue:"",
				form:{
					accountId: undefined,
					accountName: '',
					accountRealName: '',
					accountAvatar: '',
					accountPhone: '',
					accountStaffNo: '',
					accountIntro: ''				
				}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getUserProfile();
			},
			getUserProfile(){
				getUserProfile().then((res)=>{
					this.form=res.data
				})
			},
			handle(type){
				if(type==='avatar'){
					this.updateAvatar();
				}else{
					this.updateValue=this.isEmpty(this.form[type])?'':this.form[type];
					this.type=type;
					this.open();
				}
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close()
			},
			ImageError(){
				this.avatar=this.defaultAvatar
			},
			editAvart(){
				const self=this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album',"camera"], //从相册选择
					success:(res)=>{
						let filePath=res.tempFilePaths[0]
						upload({filePath}).then((resq)=>{
							var fileResq=JSON.parse(resq)
							self.form.accountAvatar=fileResq.data.fileUrl;
						})
					}
				});		
			},
			confirm(value) {
				if(isEmpty(value)){
					uni.showToast({
						icon:"none",
						title:'请填写修改内容'
					})
					return;
				}
				this.form[this.type]=value
				this.updateValue=""
				this.close();		
			},
			submit(){
				updateUserProfile(this.form).then(()=>{
					uni.showToast({
						title:"修改成功！",
						icon:"none",
						duration:1000
					})				
					setTimeout(()=>{
						uni.hideToast()
						uni.reLaunch({
							url:'/pages/myCenter/myCenter'
						})	
					},1000)
				})
			},
			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;
			padding-top: 36rpx;			
			.avatar-container{
				&{
					margin: 0 auto;
					width: 156rpx;
					height: 156rpx;
					background: rgba(255,255,255,0.39);
					border: 2rpx solid #707070;
					border-radius: 50%;	
					position: relative;
					overflow: hidden;
					margin-bottom: 36rpx;
				}
				.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>