jp-education-student/pages/teacher/editProfile/editProfile.vue

<template>
	<view>
		<u-navbar title="编辑资料"></u-navbar>
		<view class="main">
			
			<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="216">
					<img src="" alt="">
				</u-avatar>
				<!-- <img src="../../../assets/img/photowoman.png" alt=""> -->
				<view class="camera">
					<img src="../../../assets/img/md-camera_alt@1x.png" alt="">
				</view>
			</view>
			<view class="infos">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="content">
						夏奕琳
					</view>
				</view>
				<view class="item">
					<view class="title">
						手机号
					</view>
					<view class="content">
						13477489404
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属学部
					</view>
					<view class="content">
						文艺部
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属项目中心
					</view>
					<view class="content">
						中国舞项目中心
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属学科
					</view>
					<view class="content">
						芭蕾舞
					</view>
				</view>
				<view class="honour">
					<view class="title">
						荣誉奖项
					</view>
					<textarea name="" id="" cols="30" rows="10" placeholder="请简短描述您所获得的荣誉奖项及教学优质案例"></textarea>
				</view>
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="btn" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					headImg: '',
				},
			}
		},
		methods: {
			save() {
				uni.navigateBack({
					
				})
			},
			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>
	.main{
		background-color: #fff;
		.photo{
			width: 108px;
			height: 108px;
			margin: auto;
			padding-top: 20px;
			position: relative;
			img{
			   
				width: 108px;
				height: 108px;
				border-radius: 999px;
			}
			.camera{
				width: 52rpx;
				height: 52rpx;
				border-radius: 999px;
				background-color: rgba(13, 186, 199, 1);
				text-align: center;
				border: 2px solid rgba(255, 255, 255, 1);
				position: absolute;
				bottom: -32rpx;
				right: 0;
				img{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
			}
		}
		.infos{
			padding: 40px 16px 20px 16px;
			.item{
				display: flex;
				justify-content: space-between;
				line-height:44px;
				border-bottom: 1px solid rgba(229, 231, 234, 1);
				.title{
					color: rgba(119, 119, 119, 1);
				}
				.content{
					color: rgba(16, 16, 16, 1);
				}
			}
			.honour{
				padding-top: 12px;
				.title{
					color: rgba(119, 119, 119, 1);
				}
				uni-textarea{
					width: 100%;
					height: 160rpx;
					 border-radius: 8px;
					 background-color: rgba(229, 231, 234, 1);
					 margin-top:8px;
					 text-indent: 14px;
				}
				
			}
		}
	}
     .bottom{
		 position: fixed;
		 left: 0;
		 right: 0;
		 bottom: 0;
		 background-color: #fff;
		 padding: 10px 0;
		 .btn{
			 width: 91.4%;
			 background-color: rgba(13, 186, 199, 1);
			 color: rgba(255, 255, 255, 1);
			 font-size: 16px;
			 line-height: 40px;
			 border-radius: 50px;
			 
		 }
	 }
</style>