guangan-mp/pages/user/info.vue

<template>
	<view class="flex flex-column">
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-text">账号昵称</text>
				<input type="nickname" class="list-input" v-model="form.nickname" @nicknamereview="changeName" @confirm="changeName">
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item" @click="setAvatar">
				<text class="list-text">修改头像</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { TaAjax, TaPost, baseUrl } from '../../common/ajax';
	import { TaCache } from '../../common/cache';
	import { TaImageToBase64 } from '../../common/image';

	export default {
		data() {
			return {
				userInfo: {},
				form: {
					nickname: "",
				}
			}
		},
		onShow() {
			const userInfo = TaCache.get('auth.user');
			if (userInfo) {
				this.userInfo = userInfo;
				if (!this.userInfo.phone) {
					uni.navigateTo({
						url: '/pages/user/bind/bind'
					})
				}
				this.form.nickname = this.userInfo.nickname || this.userInfo.extra.nickName
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}
		},
		methods: {
			changeName() {
				uni.showLoading({
					title: "修改中..."
				})
				TaAjax.post('/plugin-account/api.auth.center/set', {
					nickname: this.form.nickname,
					extra: {
						nickName: this.form.nickname
					}
				}, {
					header: {
						'Content-Type': 'application/json'
					}
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title: "修改成功",
							icon: "success"
						})
						TaCache.set('auth.user', res.data);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}).finally()
			},
			setAvatar() {
				uni.chooseImage({
					count: 1, 
					sourceType: ['album'], 
					success: (res) => {
						uni.showLoading({
							title: "上传中..."
						})
						uni.uploadFile({
							url: baseUrl + '/custom/api.Upload/file',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								const responseStr = res.data;
								const response = JSON.parse(res.data);
								const data = response.data;
								const url = data.url;
								TaPost('/plugin-account/api.auth.center/set', {
									headimg: url
								}).then().finally(() => uni.hideLoading())
							},
							complete() {
								uni.hideLoading()
							},
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	.go-login-navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20upx;
	}

	.center-list {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
	}

	.center-list-item {
		height: 90upx;
		width: 690upx;
		display: flex;
		flex-direction: row;
		padding: 0upx 20upx;
		border-radius: 10upx;
		box-shadow: #55555555 1rpx 0rpx 2rpx 0rpx;
		justify-content: space-between;
	}

	.list-text,.list-input {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
	}
	.list-input {
		text-align: right;
	}

</style>