pet-front-order/pages/personalCenter/userInfo.vue

<template>
	<view class="user-info-container container">
		<view class="user-avatar-section">
			<view class="user-info-title">
				用户头像
			</view>
			<view class="avatar-container">
				<button class="choose-avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="avatar-wrapper">
						<image 
							:src="avatarUrl" 
							class="avatar-image"
							mode="aspectFill"
						></image>
					</view>
				</button>
			</view>
		</view>
		
		<view class="user-info-section">
			<view class="user-info-title">
				基本信息
			</view>
			<view class="user-info-form">
				<view class="user-info-item">
					<view class="user-info-label">昵称</view>
					<view class="user-info-input">
						<u-input v-model="nickname" placeholder="请输入昵称" :border="false" />
					</view>
				</view>
				<!-- <view class="user-info-item">
					<view class="user-info-label">会员等级</view>
					<view class="user-info-value">
						<text>{{userLevel}}</text>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="user-info-btns">
			<view class="user-info-btn" @click="save">
				<u-button color="#FFBF60" :loading="loading">
					<view style="color: #fff;">
						保存
					</view>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { updateInfo } from '@/api/system/user'
	import {getPersonalInfo} from "@/api/system/personal.js"
	
	export default {
		data() {
			return {
				loading: false,
				fileList: [],
				avatarUrl: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png',
				nickname: '',
				userLevel: '',
				userInfoForm: {
					headImage: ''
				}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				getPersonalInfo().then(res => {
					if (res && (res.id || res.id === 0)) {
						this.nickname = res.nickname || ''
						this.userLevel = res.level || ''
						if (res.avatar) {
							this.avatarUrl = res.avatar
							this.userInfoForm.headImage = res.avatar
							this.fileList = [{url: res.avatar}]
						}
					}
				})
			},
			// 微信小程序头像选择
			async onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				try {
					// 上传头像到服务器
					const result = await this.uploadFilePromise(avatarUrl)
					this.avatarUrl = result
					this.userInfoForm.headImage = result
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					})
				} catch (error) {
					uni.showToast({
						title: '头像上传失败',
						icon: 'none'
					})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								if(res && res.data){
									let resData = JSON.parse(res.data);
									resolve(resData.url);
								}
								reject("上传失败");
							}, 1000)
						}
					});
				})
			},
			// 保存用户信息
			save() {
				if (!this.nickname) {
					this.$modal.showToast('请输入昵称!')
					return
				}
				
				this.loading = true
				let params = {
					nickname: this.nickname,
					avatar: this.avatarUrl
				}
				
				updateInfo(params).then(res => {
					if (res && res.code == 200) {
						uni.showToast({
							title: '保存成功',
							duration: 3000,
							icon: "none"
						})
						setTimeout(() => {
							this.loading = false
							let len = getCurrentPages().length
							if (len >= 2) {
								uni.navigateBack()
							} else {
								uni.redirectTo({url: '/pages/personalCenter/index'})
							}
						}, 1000)
					} else {
						this.loading = false
						uni.showToast({
							title: '更新用户信息失败',
							duration: 3000,
							icon: "none"
						})
					}
				}).catch(() => {
					this.loading = false
					uni.showToast({
						title: '更新用户信息失败',
						duration: 3000,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-info-container {
		position: relative;
		height: 100%;
		padding-bottom: 90px;
		
		.user-avatar-section {
			width: 100%;
			background-color: #fff;
			padding: 15px 20px;
			margin-bottom: 10px;
		}
		
		.user-info-section {
			width: 100%;
			background-color: #fff;
			padding: 15px 20px;
		}
		
		.user-info-title {
			font-size: 14px;
			color: #333;
			font-weight: bold;
			padding-bottom: 15px;
		}
		
		.user-info-form {
			width: 100%;
		}
		
		.user-info-item {
			display: flex;
			align-items: center;
			padding: 12px 0;
			border-bottom: 1px solid #efefef;
			
			&:last-child {
				border-bottom: none;
			}
		}
		
		.user-info-label {
			width: 80px;
			color: #333;
			font-size: 14px;
		}
		
		.user-info-input {
			flex: 1;
		}
		
		.user-info-value {
			flex: 1;
			color: #666;
			font-size: 14px;
		}
		
		.user-info-btns {
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
			text-align: center;
			
			.user-info-btn {
				width: 80%;
				margin: 0 auto;
			}
		}
	}
	
	.user-avatar-circle-edit {
		width: 80px !important;
		height: 80px !important;
		border-radius: 50% !important;
		object-fit: cover !important;
		display: block !important;
	}
	
	// 头像选择相关样式
	.avatar-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
	}
	
	.choose-avatar-btn {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		position: relative;
		border-radius: 50%;
		overflow: visible;
		
		&::after {
			border: none;
		}
	}
	
	.avatar-wrapper {
		position: relative;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		border: 3px solid #f0f0f0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
		}
	}
	
	.avatar-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	.avatar-edit-icon {
		position: absolute;
		bottom: -5px;
		right: -5px;
		width: 30px;
		height: 30px;
		background: #FFBF60;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	}
	
	.edit-text {
		font-size: 10px;
		color: #fff;
		font-weight: bold;
	}
</style>