peixue-dev/Archive/[一次性]个人资料功能开发方案-2026-01-28.md

个人资料功能开发方案

📋 功能清单

1. 头像上传功能 ✅

• 点击头像选择图片
• 上传到服务器
• 更新用户头像

2. 生日选择 ✅

• 日期选择器
• 保存生日信息

3. 所在地区选择 ✅

• 省市区三级联动
• 保存地区信息

4. 实名认证 ⚠️

• 需要后端接口支持
• 暂时显示"功能开发中"

5. 保存修改 ✅

• 调用后端API保存所有修改

🔧 后端API状态

已有接口

1. 获取个人资料

GET /api/user/profile
Response: {
  id, nickname, phone, gender, birthday, 
  region, avatar, createTime, role
}

2. 更新个人资料

PUT /api/user/profile
Body: {
  nickname, gender, birthday, avatar, region
}

需要添加的接口

1. 头像上传

@PostMapping("/upload-avatar")
public Result<String> uploadAvatar(@CurrentUser Long userId, 
                                   @RequestParam("file") MultipartFile file) {
    // 1. 验证文件类型（jpg, png, jpeg）
    // 2. 验证文件大小（< 5MB）
    // 3. 生成唯一文件名
    // 4. 保存到服务器或OSS
    // 5. 返回文件URL
    return Result.success(fileUrl);
}

2. 实名认证

@PostMapping("/real-name-auth")
public Result<?> realNameAuth(@CurrentUser Long userId,
                              @RequestBody RealNameDTO dto) {
    // dto包含：realName, idCard, idCardFront, idCardBack
    // 1. 验证身份证号格式
    // 2. 调用第三方实名认证API
    // 3. 更新用户实名状态
    return Result.success();
}

📱 前端实现

修改文件

peidu/uniapp/src/user-package/pages/user/profile.vue

关键功能实现

1. 生日选择器

selectBirthday() {
  uni.showModal({
    title: '选择生日',
    editable: false,
    content: '请使用日期选择器',
    showCancel: false
  })
  
  // 使用uni-app的picker组件
  // mode="date"
}

2. 地区选择器

selectRegion() {
  uni.chooseLocation({
    success: (res) => {
      this.userInfo.region = res.address
    }
  })
  
  // 或使用省市区三级联动组件
}

3. 头像上传

async changeAvatar() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const tempFilePath = res.tempFilePaths[0]
      await this.uploadAvatar(tempFilePath)
    }
  })
}

async uploadAvatar(filePath) {
  uni.showLoading({ title: '上传中...' })
  
  try {
    // 方案1：使用uni.uploadFile
    const uploadRes = await uni.uploadFile({
      url: 'http://your-server/api/user/upload-avatar',
      filePath: filePath,
      name: 'file',
      header: {
        'Authorization': 'Bearer ' + uni.getStorageSync('token')
      }
    })
    
    const data = JSON.parse(uploadRes.data)
    if (data.code === 200) {
      this.userInfo.avatar = data.data
      uni.showToast({ title: '上传成功', icon: 'success' })
    }
  } catch (error) {
    uni.showToast({ title: '上传失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

4. 保存修改

async saveProfile() {
  try {
    uni.showLoading({ title: '保存中...' })
    
    const res = await userApi.updateUserInfo({
      nickname: this.userInfo.nickname,
      gender: this.userInfo.gender,
      birthday: this.userInfo.birthday,
      region: this.userInfo.region,
      avatar: this.userInfo.avatar
    })
    
    if (res && res.code === 200) {
      uni.showToast({ title: '保存成功', icon: 'success' })
      // 更新本地存储
      uni.setStorageSync('userInfo', this.userInfo)
      // 1秒后返回
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  } catch (e) {
    uni.showToast({ title: '保存失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

🚀 实施步骤

第1步：添加后端头像上传接口

在 UserController.java 中添加：

@Autowired
private FileService fileService; // 需要创建文件服务

@ApiOperation("上传头像")
@PostMapping("/upload-avatar")
public Result<String> uploadAvatar(@CurrentUser Long userId,
                                   @RequestParam("file") MultipartFile file) {
    try {
        // 验证文件
        if (file.isEmpty()) {
            return Result.error("文件不能为空");
        }
        
        String contentType = file.getContentType();
        if (!contentType.startsWith("image/")) {
            return Result.error("只能上传图片文件");
        }
        
        if (file.getSize() > 5 * 1024 * 1024) {
            return Result.error("文件大小不能超过5MB");
        }
        
        // 上传文件
        String fileUrl = fileService.uploadFile(file, "avatar");
        
        // 更新用户头像
        User user = new User();
        user.setId(userId);
        user.setAvatar(fileUrl);
        userService.updateById(user);
        
        return Result.success(fileUrl);
    } catch (Exception e) {
        log.error("上传头像失败", e);
        return Result.error("上传失败：" + e.getMessage());
    }
}

第2步：修改前端profile.vue

完整的修改内容较多，关键修改点：

1. 添加生日选择器
2. 添加地区选择器
3. 完善头像上传
4. 完善保存功能

第3步：测试

1. 测试头像上传
2. 测试生日选择
3. 测试地区选择
4. 测试保存功能

📝 注意事项

1. 头像上传需要后端支持文件上传和存储
2. 实名认证需要对接第三方API（如阿里云实人认证）
3. 地区选择可以使用uni-app的uni.chooseLocation或自定义省市区组件
4. 生日选择使用picker组件，mode="date"

🎯 优先级

1. 高优先级：生日选择、保存修改
2. 中优先级：头像上传
3. 低优先级：地区选择、实名认证

📅 创建时间

2026-01-28

👤 创建人员

Kiro AI Assistant