-----/scoring/pages/index/singleplay/change.vue

<template>
  <view class="container">
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 昵称输入 -->
      <view class="form-item">
        <view class="label">昵称:</view>
        <input class="input" v-model="userInfo.name" placeholder="请输入昵称" />
      </view>

      <!-- 头像选择 -->
      <view class="form-item">
        <view class="label">头像:</view>
        <view class="avatar-wrapper" @click="chooseNewAvatar">
          <image :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill" class="avatar" />
          <view class="avatar-tip">点击更新头像</view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <button class="save-btn" @click="saveUserInfo">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref({
  id: '',
  name: '',
  avatar: ''
})

// 初始化
onLoad((options) => {
  if (options.userData) {
    try {
      const data = JSON.parse(decodeURIComponent(options.userData))
      userInfo.value = { ...data }
    } catch (e) {
      console.error('解析用户数据失败:', e)
    }
  }
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择新头像
const chooseNewAvatar = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    maxDuration: 30,
    camera: 'back',
    success: (res) => {
      // 统一处理头像选择逻辑，支持所有平台
      try {
        const tempFilePath = res.tempFiles[0].tempFilePath
        userInfo.value.avatar = tempFilePath
      } catch (error) {
        console.error('处理头像文件路径失败:', error)
        uni.showToast({
          title: '头像设置失败',
          icon: 'none'
        })
      }
    },
    fail: (err) => {
      console.error('选择图片失败:', err)
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}

// 保存用户信息
const saveUserInfo = () => {
  if (!userInfo.value.name.trim()) {
    uni.showToast({
      title: '昵称不能为空',
      icon: 'none'
    })
    return
  }

  // 保存成功，返回上一页并传递更新的数据
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  if (prevPage) {
    // 通过页面实例调用方法更新数据
    if (prevPage.$vm && prevPage.$vm.updateUserData) {
      prevPage.$vm.updateUserData(userInfo.value)
    }
  }

  // 通过全局事件通知更新数据（作为备选方案）
  uni.$emit('userDataUpdated', userInfo.value)

  // 将用户信息保存到本地存储
  uni.setStorageSync('userInfo', userInfo.value)
  uni.setStorageSync('currentUserInfo', userInfo.value)

  // 显示保存成功提示
  uni.showToast({
    title: '保存成功',
    icon: 'success',
    duration: 1500,
    success: () => {
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  })
}
</script>

<style  lang="less" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 自定义头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #1989fa;
  padding: 0 16px;
  box-sizing: border-box;
  /* 适配刘海屏 */
  padding-top: env(safe-area-inset-top, 0);
  height: calc(44px + env(safe-area-inset-top, 0));
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 40px;
}

/* 内容区域 */
.content {
  padding: 20rpx;
  box-sizing: border-box;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  background-color: #fff;
  margin-bottom: 10rpx;
  padding: 30rpx;
  border-radius: 12rpx;
}

.label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  padding: 0 20rpx;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
}

/* 头像样式 */
.avatar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.avatar-tip {
  font-size: 24rpx;
  color: #999;
}

/* 保存按钮 */
.save-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin-top: 40rpx;
  /* 去除默认边框和背景 */
  border: none;
}

.save-btn:active {
  background-color: #0d75d4;
}
</style>