hospital-inspect/pages/myCenter/personalData/personalData.vue

<template>
	<view class="wrap">
		<view class="info-wrap">
			<uni-list>
				<view class="uni-list-item-custom" @click="handle('avatar')">
					<view class="headline">头像</view>
					<image class="slot-image" :src="avatar" mode="widthFix" @error="avatar=defaultAvatar"></image>
				</view>
				<uni-list-item title="姓名" :rightText="name" clickable  @click="handle('name')" showArrow></uni-list-item>
				<uni-list-item title="职称" :rightText="doctorTitle" clickable  @click="handle('doctorTitle')" showArrow></uni-list-item>
				<uni-list-item title="所属医院" :rightText="hospital" clickable  @click="handle('hospital')" showArrow></uni-list-item>
				<uni-list-item title="邮箱" :rightText="email" clickable  @click="handle('email')" showArrow></uni-list-item>
								<uni-list-item title="手机号码" :rightText="phone"   @click="handle('phone')"></uni-list-item>
<!-- 				<uni-list-item title="生日" :rightText="birthday" clickable  @click="handle('birthday')"></uni-list-item> -->			
			</uni-list>				
		</view>		
		<uni-popup ref="popup" type="dialog" style="top">
			<view class="uni-popup-dialog-wrap">
				<uni-popup-dialog mode="input" 
					class="uni-popup-dialog"
					v-model="updateValue"
					:duration="2000" 
					:before-close="true" 
					placeholder="请输入修改信息"
					@close="close"
					@confirm="confirm">
				</uni-popup-dialog>				
			</view>
		</uni-popup>		
	</view>
</template>

<script>	
	import {isEmpty} from '@/libs';
	import {getDetailByIdApi,updateDoctor} from '@/api/doctor';
	export default {
		data() {
			return {
				defaultAvatar:"/static/components/avatar.png",
				avatar:"",
				name:"",
				doctorTitle:"",
				hospital:"",
				phone:"",
				email:"",	
				birthday:"",
				updateValue:"",
				form:{}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getDetailById();
			},
			getDetailById(){
				let user=uni.getStorageSync('accountInfo');
				if(user){user=JSON.parse(user)}
				let userId=user.userId;
				getDetailByIdApi(userId).then((res)=>{
					let {email,birthday,doctorTitle,name,avatar,phone,hospital}=res.data;
					this.avatar=avatar||this.defaultAvatar;
					this.name=name;	
					this.doctorTitle=doctorTitle;					
					this.birthday=birthday;	
					this.phone=phone;
					this.hospital=hospital;
					this.email=email;
					this.form=res.data;
				})
			},
			handle(type){
				if(type==='avatar'){
					this.updateAvatar();
				}else{
					this.updateValue=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()
			},
			confirm(value) {
				if(isEmpty(value)){
					uni.showToast({
						icon:"none",
						title:'请填写修改内容'
					})
					return;
				}
				let params={...this.form};
				params[this.type]=value;
				updateDoctor(params).then((res)=>{
					uni.showToast({
						icon:"none",
						title:'修改成功！',
						complete: () => {
							this.getDetailById();
							this.close();
						}
					})				
				})			
			}		
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.info-wrap{
			// margin-top: 20upx;
			background-color: #f8f8f8;
			.slot-image{
				display: block;
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
			.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;
		}
	}
</style>