totustec-unipp/pages/mine/update.vue

<template>
	<view class="contai_warp">
		<!-- Top Navigation Bar -->
		<view class="top_area_warp">
			<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="top_nav_warp">
				<view class="back_icon" @click="goBack">
					<image src="https://online.totustec.com/upload/minePage/back.png" mode="aspectFit"></image>
				</view>
				<text>个人资料</text>
			</view>
		</view>

		<!-- Profile Content -->
		<view class="profile_content">
			<!-- Avatar Section -->
			<view class="profile_item">
				<text class="item_label">头像</text>
				<view class="avatar_wrapper" @click="changeAvatar">
					<image class="avatar"
						:src="userInfo.avatar || 'https://online.totustec.com/upload/minePage/user.png'"
						mode="aspectFill"></image>
				</view>
			</view>

			<!-- Nickname Section -->
			<view class="profile_item">
				<text class="item_label">昵称</text>
				<input class="nickname_input" v-model="userInfo.nickname" placeholder="请输入昵称" />
			</view>
			<!-- Save Button -->
			<button class="save_btn" @click="saveProfile">保存修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				userInfo: {
					nickname: ""
				}
			};
		},
		onLoad() {
			// Get system info for status bar height
			const systemInfo = wx.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.getUserInfoFromCache();
		},
		methods: {
			getUserInfoFromCache() {
				const userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					this.userInfo.nickname = userInfo.nikeName;
					this.userInfo.avatar = "https://online.totustec.com/upload" + userInfo.avatar;

				}
			},

			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.userInfo.avatar = tempFilePaths[0];
						// Here you would typically upload the image to your server
					}
				});
			},
			async saveProfile() {
				if (!this.userInfo.nickname.trim()) {
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					});
					return;
				}
				try {
					const res = await uni.request({
						url: "https://online.totustec.com/api/api/front/user/update",
						method: "POST",
						data: this.userInfo,
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
							"Authorization": userInfo.token || ""
						},
					});
					console.log(res)
					if (res.statusCode == 200) {
						uni.showToast({
							title: "修改成功"
						});
					}
				} catch (error) {
					uni.showToast({
						title: "修改失败",
						icon: "none"
					});
				}
				// Here you would typically send the updated info to your server
				// uni.showToast({
					// title: '保存成功',
					// icon: 'success'
				// });
				// Simulate API call
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.contai_warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: PingFang SC, PingFang SC !important;
		min-height: 100vh;
		background-color: #f1f6fc;
		/* 保持原有背景色 */
	}

	/* Top Navigation Styles */
	.top_area_warp {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.top_status_area {
		width: 100%;
	}

	.top_nav_warp {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		position: relative;
		z-index: 5;
	}

	.back_icon {
		position: absolute;
		left: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.back_icon image {
		width: 100%;
		height: 100%;
	}

	/* Profile Content Styles */
	.profile_content {
		width: 90%;
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.profile_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item_label {
		font-size: 28rpx;
		color: #333;
	}

	.avatar_wrapper {
		position: relative;
		width: 100rpx;
		height: 100rpx;
	}

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

	.edit_icon {
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
		width: 100rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 50%;
		padding: 5rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.nickname_input {
		text-align: right;
		font-size: 28rpx;
		color: #333;
		flex: 1;
		margin-left: 20rpx;
	}

	.save_btn {
		margin-top: 60rpx;
		background-color: #0095de;
		color: white;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.save_btn:active {
		background-color: #ffffff;
	}
</style>