jp-education-student/pages/parents/mine/editProfile.vue

<template>
	<view>
		<u-navbar title="编辑个人信息" >
			<view class="slot-wrap" @click="save">
				保存
			</view>
		</u-navbar>
		<view class="photo" @click="uploadPhoto">
			<u-avatar v-if="form.headImg != null" class="avatar"
				:src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="160">
				<img src="" alt="">
			</u-avatar>
			<view class="edit-photo">
				<img src="../../../assets/img/md-camera_alt@1x(1).png" alt="">
			</view>
		</view>
		<view class="change">
			点击更换头像
		</view>
		
		<view class="pet-name">
			<view class="title">
				昵称
			</view>
			<view class="name">
				<input type="text" name="" id="" v-model="form.nickName" style="text-align: right;">
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as mineApi from '@/apis/parents/mine.js'
	
	export default {
		data() {
			return {
				form: {
					headImg: '',
					nickName: ''
				}
			}
		},
		onReady() {
			this.getParentsInfo();
		},
		methods: {
			getParentsInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.form.headImg = response.data.regUser.headImg;
					this.form.nickName = response.data.regUser.nickName;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			save() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.updateRegUser(this.form).then((response) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			uploadPhoto() {
				let _self = this;
				
				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};
				
				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]
							
						// #ifndef APP-PLUS
						//(`filePath=${filePath}`)
						
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/components/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif
						
						//返回 base64 图片
						//(fileData);
						
						var token = _self.carhelp.getToken()
						
						uni.showLoading({
							title: '上传中'
						});
						
						uni.request({
						    url: process.car.BASE_URL + "/mobile/student/uploadBase64",
							method: 'POST',
						    data: {
						        photoBase64Data: fileData
						    },
						    header: {
						        'Authorization': token,
								'content-type': 'application/x-www-form-urlencoded'
						    },
						    success: (res) => {
								let jsonData = res.data;
						        _self.form.headImg = jsonData.data;
										// _self.save();
								uni.hideLoading();
						    }
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	/deep/.u-slot-content{
		   justify-content: end;
		   margin-right: 32rpx;
		   color: rgba(13, 186, 199, 1);
	}
	.photo{
		margin: 20px auto 8px;
		width: 160rpx;
		height: 160rpx;
		position: relative;
		
		img{
			width: 100%;
			height: 100%;
			border-radius: 999px;
		}
		
	}
	.edit-photo{
		width: 56rpx;
		height: 56rpx;
		background-color: rgba(78, 141, 246, 1);
		border: 4rpx solid rgba(255, 255, 255, 1);
		text-align: center;
		border-radius: 999px;
		z-index: 999;
		position: absolute;
		right: 0;
		bottom: 0;
		
		img{
			
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
		}
	}
   .change{
	   color: rgba(13, 186, 199, 1);
	   text-align: center;
   }
   .pet-name{
	   margin-top: 20px;
	   padding: 15px;
	   border-bottom: 1px solid rgba(244, 244, 244, 1);
	   display: flex;
	   justify-content: space-between;
	   .title{
		   color: rgba(16, 16, 16, 1);
		   font-weight: bold;
	   }
	   .name{
		   color: rgba(136, 136, 136, 1);
	   }
   }
</style>