DaoDao/DaoDaoFrontend/pages/tabbar/tabbar-5/userInfo.vue

<template>
	<view class="page">
		<view class="avatar" @click="showAvatarPopup()">
			<image class="avatar-image" :src="user.avatar" mode="aspectFill"></image>
		</view>
		<h6>(点击修改头像)</h6>

		<view>
			<uni-popup ref="popup" type="center" background-color="#fff" borderRadius="10px 10px 10px 10px"
				padding="40upx">
				<view class="popup-content">
					<view class="avatar-list">
						<block v-for="(item, index) in avatars" :key="index">
							<image :src="item" mode="aspectFill" @click="selectAvatar(item)"></image>
						</block>
					</view>
				</view>
			</uni-popup>
		</view>

		<view class="input-container">
			<view class="input">
			        <label class="label">邮箱</label>
			        <label class="label-new">{{ user.email }}</label>
			    </view>
			    <view class="input">
			        <label class="label">用户名</label>
			        <label class="label-new">{{ user.username }}</label>
			    </view>
			<view class="input">
				<label class="label">个性签名</label>
				<view class="input-field-bio">
					<textarea v-model="user.bio" placeholder="请输入个性签名" />
				</view>
			</view>
		</view>

		<view class="button-container">
			<button class="return-button" type="primary" @click="onReturnBtnClick">返回</button>
			<button class="modify-button" type="primary" @click="onModifyBtnClick">保存修改</button>
		</view>
	</view>
</template>

<script>
	import {
		storeJwtInfo2User
	} from '@/utils/storage.js';
	export default {
		data() {
			return {
				user: {
					avatar: '',
					email: '',
					username: '',
					bio: '',
					userId: ''
				},
				password_prompt: '******',
				avatars: [
					'https://afanai.top:8088/imgs/default_avatar_1.jpeg',
					'https://afanai.top:8088/imgs/default_avatar_2.jpeg',
					'https://afanai.top:8088/imgs/default_avatar_3.jpeg',
					'https://afanai.top:8088/imgs/default_avatar_4.jpeg',
					'https://afanai.top:8088/imgs/default_avatar_5.jpeg',
					'https://afanai.top:8088/imgs/default_avatar_6.jpeg',
					// 更多头像url...
				],
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.user = {
					...userInfo
				};
			}
		},
		methods: {
			onReturnBtnClick() {
				uni.$emit("refreshData",{});
				uni.navigateBack();
			},
			async onModifyBtnClick() {
				// if (!this.validateEmail() || !this.validateUsername()) {
				// 	uni.showToast({
				// 		title: '用户名和邮箱不能为空',
				// 		mask: true // 可选，显示加载遮罩
				// 	});
				// 	return;
				// }

				// 显示加载提示
				uni.showLoading({
					title: '修改中...',
					mask: true // 可选，显示加载遮罩
				});

				const item = {
					avatar_url: this.user.avatar,
					bio: this.user.bio
				};

				try {
					// 调用修改接口
					const res = await uni.request({
						url: 'https://afanai.top:8089/v1/user/modify/' + this.user.userId,
						method: 'PUT',
						data: item,
						header: {
							'content-type': 'application/json'
						}
					});

					// 关闭加载提示
					uni.hideLoading();

					// 成功响应处理
					if (res.statusCode === 201) {
						// 如果状态码为201，表示请求成功
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							icon: 'success'
						});
						const jwt = res.data.token; // 后端返回的JWT字段名为token
						uni.setStorageSync('jwt', jwt);
						storeJwtInfo2User(jwt);
					} else {
						try {
							// 确保 res.data 是一个对象且包含 error 键
							if (res.data && typeof res.data === 'object' && 'error' in res.data) {
								uni.showToast({
									title: res.data.error,
									duration: 2000,
									icon: 'none'
								});
							}
						} catch (e) {
							// 如果尝试处理 res.data 时出错，显示默认错误信息
							uni.showToast({
								title: '处理服务器响应时出错',
								duration: 2000,
								icon: 'none'
							});
							console.error('Error processing response data:', e);
						}
					}
				} catch (error) {
					// 关闭加载提示
					uni.hideLoading();
					// 错误处理
					uni.showToast({
						title: '网络错误，请检查网络',
						duration: 2000,
						icon: 'none'
					});
					console.error('修改请求出错：', error);
				}
			},
			validateEmail() {
				// 邮箱验证逻辑
				if (this.user.email) {
					return true;
				}
				return false;
			},
			validateUsername() {
				// 用户名验证逻辑
				if (this.user.email) {
					return true;
				}
				return false;
			},
			selectAvatar(avatarUrl) {
				this.user.avatar = avatarUrl;
			},
			showAvatarPopup() {
				// console.log("showAvatarPopup :", this.showPopup);
				this.$refs.popup.open();
			}
		}
	}
</script>

<style scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40upx;
	}

	.avatar-image {
		width: 320rpx;
		height: 320rpx;
		border-radius: 12rpx;
		border: 3px solid #abb0b6;
	}

/* 合并后的纯CSS样式 */
.input-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.input {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.label {
	margin-bottom: 5rpx;
	font-size: 48upx;
	font-weight: bold;
	color: #333;
}

.label-new {
	font-size: 36upx;
}

.input-field, .input-field-bio {
	width: 100%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5rpx;
	box-sizing: border-box;
	font-size: 64upx;
	height: 60upx;
}

.input-field-bio {
	height: 200upx;
	display: flex;
	align-items: center;
	overflow: auto;
}

.input-field-bio textarea {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	resize: none;
	font-size: inherit;
	padding: 0;
	padding: 0.5rem; /* 从SCSS代码中 */
	border-radius: 4px; /* 从SCSS代码中 */
	border-color: #ddd; /* 从SCSS代码中 */
	background-color: #fff; /* 从SCSS代码中 */
	color: #333; /* 从SCSS代码中 */
	font-size: 1rem;
	line-height: 1.5; /* 从SCSS代码中 */

	/* 为聚焦状态添加样式 */
	&:focus {
		outline: none;
		border-color: #007bff; /* 聚焦时的边框颜色 */
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时的阴影效果 */
	}
}


	.button-container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 20px;
	}

	.button {
		width: 48%;
		border-radius: 5px;
	}

	.popup-content {
		width: 620upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}

	.avatar-list image {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx;
		border: 1px solid #ccc;
		/* 简约边框 */
		border-radius: 20%;
		/* 圆形头像，更简约 */
	}
</style>