phone_uni_xiongan_LBG/pages/personcenter/EditProfile/EditProfile.vue

<template>
	<view>
		<uni-row class="demo-uni-row">
			<view class="demo-uni-col dark">头像</view>

			<view class="demo-uni-col light">
				<button class="btn_dzhi" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="pers_box" :src="url" mode="aspectFill"></image>
				</button>
			</view>
		</uni-row>
		<uni-row class="demo-uni-row">
			<view class="demo-uni-col dark">昵称</view>

			<view class="demo-uni-col light">
				<input type="nickname" v-model="usernames" @blur="blurname" class="nickname" placeholder="请输入昵称" />
			</view>
		</uni-row>

		<button class="saveBtn" type="primary" @tap="saveProfile">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			usernames: '',
			url: '',
			pic: ''
		};
	},
	onShow() {
		let this_ = this;
		console.log(uni.getStorageSync('nickname'), uni.getStorageSync('headimgurl'));
		this_.username = uni.getStorageSync('nickname');
		this_.usernames = this_.$util.entitiestoUtf16(this_.username);
		this_.url = uni.getStorageSync('headimgurl');
	},
	methods: {
		onChooseAvatar(e) {
			console.log(e);
			let this_ = this;
			const avatarUrl = e.detail.avatarUrl;
			this_.url = avatarUrl;
			uni.uploadFile({
				url: this_.$config.fileUpload,
				filePath: avatarUrl,
				name: 'file',
				success(res) {
					console.log(res, '山川了');
					if (res.statusCode != 200) {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
					var obj = JSON.parse(res.data);
					var flag = this_.$util.isSuccess(obj);
					if (!flag) {
						return;
					}
					obj = obj.data;
					this_.pic = this_.$config.ROOTPATH + obj.path;
					console.log(this_.pic, ';');
				},
				fail(res) {
					console.log('失败了', res);
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			});
		},
		blurname(e) {
			let this_ = this;
			this_.username = this_.$util.utf16toEntities(e.detail.value);
			this_.usernames = e.detail.value;
			console.log(this_.username, this_.usernames);
		},
		saveProfile() {
			let this_ = this;
			if (this_.pic && this_.pic != '') {
				uni.setStorageSync('headimgurl', this_.pic);
			} else {
				this_.pic = uni.getStorageSync('headimgurl');
			}
			uni.setStorageSync('nickname', this_.username);
			uni.setStorageSync('oauthTime', new Date().getTime());
			const obj = {
				headimgurl: this_.pic,
				openid: uni.getStorageSync('unionid'),
				nickname: this_.username
			};
			console.log(obj, '请求参数');
			var data = {
				data: JSON.stringify(obj),
				userkey: this_.$param.userkey
			};
			this_.$Request.post(this_.$config.saveUser, data).then((res) => {
				var flag = this_.$util.isSuccess(res);
				if (!flag) {
					return;
				}
				var userid = res.data;
				console.log(userid, '保存返回');
			});
			uni.showToast({
				icon: 'success',
				title: '保存成功！',
				duration: 1500,
				success: () => {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.demo-uni-row {
	display: flex;
	justify-content: space-between;
	width: 95%;
	height: 100rpx;
	align-items: center;
	margin: 20rpx 2.5%;

	.pers_box {
		width: 100rpx;
		height: 100rpx;
	}
	.btn_dzhi {
		padding: 0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}
.saveBtn {
	width: 70%;
	margin: 30rpx auto;
	position: fixed;
	bottom: 3vh;
	left: 15%;
}
.nickname {
	text-align: right;
}
</style>