JP-ChargeTeam51/pages/user/data.vue

<template>
	<view>
		<u-navbar title="个人资料"></u-navbar>
		<view class="data">
			<view class="data-img">
				<view class="data-icon">
					<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="32"></u-icon>
				</view>
				<u-avatar :src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="216" @click="uploadPhoto"></u-avatar>
			</view>
			<view class="data-input">
				<u-form :model="form" ref="uForm" >
					<u-form-item label-position="top" label="昵称" :label-style="elderStatus ? {fontSize: '16px'} : {}"><u-input v-model="form.nickName" /></u-form-item>
				</u-form>
			</view>
			<u-button class="login-btn" type="success" shape="circle" @click="submit">保存</u-button>
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import * as loginApi from '@/apis/login.js'
	
	export default {
		data() {
			return {
				userId: '',
				form: {
					nickName: '',
					headImg: '',
				},
				elderStatus: false,
			}
		},
		onReady() {
			this.getUserInfo();
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		methods: {
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					this.form.nickName = res.data.regUser.nickName;
					this.form.headImg = res.data.regUser.headImg;
				}).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) => {
						console.log(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
						console.log(`filePath=${filePath}`)
						
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/user/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif
						
						//返回 base64 图片
						console.log(fileData);
						
						var token = _self.carhelp.getToken()
						
						uni.showLoading({
							title: '上传中'
						});
						
						uni.request({
						    url: process.car.BASE_URL + "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;
								
								uni.hideLoading();
						    }
						});
					}
				});
			},
			submit() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.updatePersonInformation(this.form).then((res) => {
					uni.hideLoading();
					uni.navigateBack({
						url: '/pages/user/index'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.data-icon{
		height: 28px;
		width: 28px;
		background-color: #00B962;
		border-radius: 14px;
		border: 2px solid #fff;
		text-align: center;
		line-height: 24px;
		position: absolute;
		z-index: 999;
		right: 0;
		bottom:0px
	}
	.data-img{
		margin: 30px auto;
		height: 108px;
		width: 108px;
		position: relative;
	}
	.data-input{
		margin: 0 40px;
	}
	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>