1
This commit is contained in:
255
scoring/pages/index/singleplay/change.vue
Normal file
255
scoring/pages/index/singleplay/change.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user