HaniBlindBox/honey_box/pages/user/change.vue

<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="个人资料" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>

		<view class="user-avatar">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
				@click="onClickAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<text class="avatar-title">修改头像</text>
			<image class="camera-icon" :src="$img1('my/camera.png')" mode="aspectFill"></image>
		</view>

		<view class="form-container">
			<view class="form-item">
				<view class="form-label">昵称:</view>
				<view class="form-input">
					<input type="nickname" v-model="nickname" placeholder="请输入您的昵称" @blur="getnickname" />
				</view>
			</view>

			<view class="form-item">
				<view class="form-label">UID:</view>
				<view class="form-input">
					<input disabled :value="uid" />
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="updateUserInfo">确认修改</view>
	</view>
</template>

<script>
	import { updateUserInfo } from '@/common/server/user.js';
	
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				avatarUrl: "",
				nickname: "",
				headimg_status: false,
				id: "",
				uid: "",
				imageBase64: "",
			};
		},

		onLoad() {
			this.initUserInfo();
		},

		methods: {
			onClickAvatar() {
				//#ifdef APP
				uni.chooseImage({
					count: 1,
					sourceType: ["album"],
					success: async (res) => {
						console.log(res);
						// this.
						this.avatarUrl = res.tempFilePaths[0];
						this.headimg_status = true;
						const rrrrr = await this.imageToBase64Plus(this.avatarUrl);
						console.log(rrrrr, "rrrrr");
						this.imageBase64 = rrrrr;
						// this.convertToBase64(this.avatarUrl);
					}
				})
				//#endif


			},
			/**
			 * 初始化用户信息
			 */
			initUserInfo() {
				const userInfo = uni.getStorageSync("userinfo");
				if (userInfo) {
					this.avatarUrl = userInfo.headimg || "";
					this.nickname = userInfo.nickname || "";
					this.id = userInfo.ID;
					this.uid = userInfo.uid;
				}
			},

			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack();

			},

			/**
			 * 获取昵称
			 */
			getnickname(e) {
				this.nickname = e.detail.value;
			},

			/**
			 * 选择头像
			 */
			onChooseAvatar(e) {
				if (e && e.detail && e.detail.avatarUrl) {
					this.avatarUrl = e.detail.avatarUrl;
					this.headimg_status = true;
					this.convertToBase64(this.avatarUrl);
				}
			},

			/**
			 * 将图片转换为Base64
			 */
			convertToBase64(filePath) {
				console.log(filePath);
				uni.getFileSystemManager().readFile({
					filePath: filePath,
					encoding: "base64",
					success: (res) => {
						this.imageBase64 = "data:image/png;base64," + res.data;
					},
					fail: (err) => {
						console.error("读取文件失败:", err);
						uni.showToast({
							title: "图片处理失败",
							icon: "none",
						});
					},
				});
			},
			imageToBase64Plus(filePath) {
				return new Promise((resolve, reject) => {
					//#ifdef APP
					plus.io.resolveLocalFileSystemURL(filePath, entry => {
						entry.file(file => {
							const fileReader = new plus.io.FileReader();
							fileReader.onloadend = function(e) {
								const base64 = e.target.result;
								resolve(base64);
							};
							fileReader.readAsDataURL(file);
						}, reject);
					}, reject);
					//#endif
				});
			},

			/**
			 * 更新用户信息
			 */
			async updateUserInfo() {
				if (!this.nickname) {
					uni.showToast({
						title: "请输入昵称",
						icon: "none",
					});
					return;
				}

				const data = {
					nickname: this.nickname,
					headimg: this.avatarUrl,
					imagebase: this.imageBase64,
				};

				try {
					const res = await updateUserInfo(data);
					if (res.status === 1) {
						// 更新本地存储的用户信息
						const userInfo = uni.getStorageSync("userinfo") || {};
						userInfo.nickname = this.nickname;
						userInfo.headimg = this.avatarUrl;
						uni.setStorageSync("userinfo", userInfo);

						uni.showToast({
							title: "修改成功",
							icon: "success",
						});

						// 延迟返回
						setTimeout(() => {
							this.$customRouter.navigateTo("./index", {}, 'redirectTo');
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg || "修改失败",
							icon: "none",
						});
					}
				} catch (err) {
					uni.showToast({
						title: "网络请求失败",
						icon: "none",
					});
					console.error(err);
				}
			},
		},
	};
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		color: #fff;
		display: flex;
		background-color: #FFFFFF;
		flex-direction: column;
	}

	.user-avatar {
		padding: 80rpx 0 60rpx 0;
		text-align: center;
		position: relative;

		.avatar-title {
			font-size: 24rpx;
			color: #8A8A8A;
			position: absolute;
			top: 280rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.avatar-wrapper {
			width: 165rpx;
			height: 165rpx;
			margin: auto;
			border-radius: 128rpx;
			overflow: hidden;
			border: 1rpx solid #F3F3F3;
			background-color: transparent;
			padding: 0;
			line-height: normal;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				border: none;
			}

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}

		.camera-icon {
			width: 42rpx;
			height: 42rpx;
			position: relative;
			bottom: 40rpx;
			left: 60rpx;
		}
	}

	.form-container {
		width: 690rpx;
		margin: 0 auto;
	}

	.form-item {
		display: flex;
		padding: 30rpx 0;
		position: relative;

		&::after {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 2rpx;
			background: #F3F3F3;
		}

		.form-label {
			width: 120rpx;
			font-size: 24rpx;
			color: #8A8A8A;
		}

		.form-input {
			flex: 1;

			input {
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.submit-btn {
		width: 244rpx;
		height: 72rpx;
		background: #03D8F4;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #404040;
		margin: 200rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>