xiangyuan-app/src/pages/user/update/profile.vue

<template>
  <view class="profile-page">
    <uni-forms ref="formRef" :model="formModel" :rules="rules" validate-trigger="submit">
      <!-- 头像 -->
      <view class="avatar-section">
        <view class="avatar-container" @click="handleAvatarClick">
          <image 
            :src="formModel.avatar || '/static/images/default-avatar.png'" 
            class="avatar-image" 
            mode="aspectFill"
          ></image>
          <view class="avatar-edit-mask">
            <uni-icons type="camera" size="24" color="#ffffff"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 昵称 -->
      <uni-forms-item name="nickname" label="昵称" required>
        <uni-easyinput 
          v-model="formModel.nickname" 
          placeholder="请输入昵称"
          maxlength="20"
        />
      </uni-forms-item>

      <!-- 个人简介 -->
      <uni-forms-item name="bio" label="个人简介">
        <uni-easyinput 
          v-model="formModel.bio" 
          type="textarea"
          placeholder="介绍一下自己吧"
          maxlength="100"
          :height="100"
          show-word-limit
        />
      </uni-forms-item>

      <!-- 提交按钮 -->    
      <u-button type="primary" :loading="loading" @click="submitForm" >
        保存修改
      </u-button>
      <view class="mt-3" /> 
      <u-button type="primary" :plain="true" @click="navTo('/pages/user/update/password')">
        修改密码
      </u-button>
    </uni-forms>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import userApi from '@/api/auth/UserApi';
import CommonContent from '@/api/CommonContent';
import { useAuthStore } from '@/store/auth';
import { navTo } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';

const authStore = useAuthStore();
const formRef = ref<any>(null);
const loading = ref(false);
const uploading = ref(false);

// 表单数据
const formModel = ref({
  avatar: '',
  nickname: '',
  bio: '',
});

// 表单验证规则
const rules = {
  nickname: {
    rules: [
      { required: true, errorMessage: '请输入昵称' },
      { minLength: 2, errorMessage: '昵称长度至少2个字符' },
      { maxLength: 20, errorMessage: '昵称长度最多20个字符' }
    ]
  },
  bio: {
    rules: [
      { maxLength: 100, errorMessage: '个人简介最多100个字符' }
    ]
  }
};

// 处理头像点击事件
const handleAvatarClick = async () => {
  try {
    // 选择图片
    const chooseResult = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
    });
    
    const tempFilePath = chooseResult.tempFilePaths[0];
    
    // 上传图片
    uploading.value = true;
    const uploadResult = await CommonContent.uploadFile(tempFilePath, 'image');
    
    // 更新头像并保存到服务器
    await updateAvatar(uploadResult.fullurl);
    
  } catch (error: any) {
    if (error.errMsg !== 'chooseImage:fail cancel') {
      uni.showToast({
        title: '头像更换失败',
        icon: 'none',
        duration: 2000
      });
    }
  } finally {
    uploading.value = false;
  }
};

// 更新头像到服务器
const updateAvatar = async (avatarUrl: string) => {
  try {
    // 调用修改头像API
    await userApi.updateSystemUserInfo({
      avatar: avatarUrl
    });
    
    // 更新表单数据和store
    formModel.value.avatar = avatarUrl;
    if (authStore.userInfo) {
      authStore.userInfo.avatar = avatarUrl;
    }
    
    // 显示成功提示
    uni.showToast({
      title: '头像更新成功',
      icon: 'success',
      duration: 2000
    });
    
  } catch (error: any) {
    throw new Error(error?.message || '头像更新失败');
  }
};

// 页面加载时获取用户信息
onMounted(() => {
  if (authStore.userInfo) {
    formModel.value.avatar = authStore.userInfo.avatar || '';
    formModel.value.nickname = authStore.userInfo.nickname || '';
    formModel.value.bio = (authStore.userInfo.intro || authStore.userInfo.bio || '') as string;
  }
});

// 提交表单
const submitForm = async () => {
  // 表单验证
  const valid = await formRef.value?.validate();
  if (!valid) return;
  
  loading.value = true;
  
  try {
    // 调用修改个人信息API
    await userApi.updateSystemUserInfo({
      nickname: formModel.value.nickname,
      bio: formModel.value.bio
    });
    
    // 更新store中的用户信息
    if (authStore.userInfo) {
      authStore.userInfo.nickname = formModel.value.nickname;
      authStore.userInfo.avatar = formModel.value.avatar;
      authStore.userInfo.intro = formModel.value.bio;
    }
    
    // 显示成功提示
    uni.showToast({
      title: '个人信息更新成功',
      icon: 'success',
      duration: 2000
    });
    
    // 成功后返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 2000);
    
  } catch (error: any) {
    // 显示错误提示
    uni.showToast({
      title: error?.message || '更新失败，请稍后重试',
      icon: 'none',
      duration: 2000
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.avatar-section {
  text-align: center;
}

.avatar-label {
  font-size: 14px;
  color: #333333;
  margin-bottom: 12px;
  font-weight: 500;
  text-align: left;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background-color: #f5f5f5;
}

.avatar-edit-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .avatar-edit-mask {
  opacity: 1;
}

.avatar-hint {
  font-size: 12px;
  color: #007aff;
  margin-top: 4px;
}

/* 上传中遮罩 */
.uploading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.uploading-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.uploading-content uni-loading {
  margin-bottom: 10px;
}

uni-forms {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

uni-forms-item {
  margin-bottom: 20px;
}

uni-forms-item:last-child {
  margin-bottom: 0;
}

uni-easyinput {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}

uni-easyinput:focus {
  border-bottom-color: #007aff;
}

.submit-btn {
  margin-top: 32px;
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
}
</style>