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

<template>
  <view class="container">
    <!-- 自定义头部 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="22" color="#fff" />
      </view>
      <view class="title">用户信息</view>
      <view class="placeholder"></view>
    </view>

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

      <!-- 头像选择 -->
      <view class="form-item">
        <view class="label">头像:</view>
        <view class="avatar-wrapper" @click="chooseNewAvatar">
          <image :src="userInfo.avatarUrl || '/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, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { updateGlobalUserInfo } from '../../../main.js'

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

// 初始化
onLoad((options) => {
  // 从选项中获取用户数据
  if (options.userData) {
    try {
      const data = JSON.parse(decodeURIComponent(options.userData))
      userInfo.value = { ...data }
    } catch (e) {
      console.error('解析用户数据失败:', e)
    }
  }
  
  // 记录来源页面信息，支持返回到正确页面
  if (options.from) {
    console.log('来源页面:', options.from)
  }
})

// 返回上一页
const goBack = () => {
  // 检查是否有未保存的修改
  if (userInfo.value.nickName.trim()) {
    // 使用全局方法保存用户信息，确保全局可用
    updateGlobalUserInfo(userInfo.value)
  }
  
  wx.navigateBack()
}

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

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

  // 使用全局方法保存用户信息，确保全局可用
  updateGlobalUserInfo(userInfo.value)

  // 保存成功，返回上一页并传递更新的数据
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  if (prevPage) {
    // 通过事件通知上一页更新数据
    if (prevPage.$vm && prevPage.$vm.updateUserData) {
      prevPage.$vm.updateUserData(userInfo.value)
    } else {
      // 如果上一页没有updateUserData方法，通过全局事件通知
      wx.$emit && wx.$emit('userDataUpdated', userInfo.value)
    }
  }

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

<style 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>