111
This commit is contained in:
273
scoring/pages/edit-user-info/index.vue
Normal file
273
scoring/pages/edit-user-info/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="edit-user-info">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="nav-title">编辑用户信息</view>
|
||||
<view class="nav-save" @click="saveUserInfo">
|
||||
<text>保存</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息表单 -->
|
||||
<view class="user-form">
|
||||
<!-- 头像编辑 -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-label">头像：</view>
|
||||
<view class="avatar-content">
|
||||
<view class="avatar-upload" @click="updateAvatar">
|
||||
<image class="avatar-preview" :src="userInfo.avatar" mode="aspectFit"></image>
|
||||
<view class="avatar-mask">
|
||||
<uni-icons type="camera" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<text class="avatar-tip">点击更新头像</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称编辑 -->
|
||||
<view class="nickname-section">
|
||||
<view class="nickname-label">昵称：</view>
|
||||
<view class="nickname-content">
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="text"
|
||||
placeholder="请输入昵称"
|
||||
v-model="userInfo.nickname"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
nickname: '',
|
||||
avatar: ''
|
||||
})
|
||||
|
||||
// 组件挂载时加载用户信息
|
||||
onMounted(() => {
|
||||
loadUserInfo()
|
||||
})
|
||||
|
||||
// 加载用户信息
|
||||
const loadUserInfo = () => {
|
||||
const savedUserInfo = uni.getStorageSync('userInfo')
|
||||
if (savedUserInfo) {
|
||||
userInfo.value = savedUserInfo
|
||||
} else {
|
||||
// 默认用户信息
|
||||
userInfo.value = {
|
||||
nickname: '666',
|
||||
avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.QQG4bvcAR3CJ0WeQULA9UQAAAA?w=275&h=211&c=8&rs=1&qlt=90&o=6&cb=ucfimgc1&dpr=1.5&pid=3.1&rm=2'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新头像
|
||||
const updateAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
userInfo.value.avatar = tempFilePath
|
||||
|
||||
uni.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('选择头像失败:', err)
|
||||
uni.showToast({
|
||||
title: '选择头像失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存用户信息
|
||||
const saveUserInfo = () => {
|
||||
if (!userInfo.value.nickname.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入昵称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 保存到本地存储
|
||||
uni.setStorageSync('userInfo', userInfo.value)
|
||||
|
||||
// 同时更新玩家数据中的自己信息
|
||||
const players = uni.getStorageSync('players') || []
|
||||
const selfPlayer = players.find(player => player.isSelf)
|
||||
if (selfPlayer) {
|
||||
selfPlayer.name = userInfo.value.nickname
|
||||
selfPlayer.avatar = userInfo.value.avatar
|
||||
uni.setStorageSync('players', players)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 触发全局事件，通知其他页面更新
|
||||
uni.$emit('userInfoUpdated')
|
||||
|
||||
// 延迟返回，确保事件被处理
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-user-info {
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
|
||||
.nav-back, .nav-save {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-save text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户信息表单 */
|
||||
.user-form {
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
/* 头像编辑区域 */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 60rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.avatar-label {
|
||||
width: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avatar-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:active .avatar-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 昵称编辑区域 */
|
||||
.nickname-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname-label {
|
||||
width: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nickname-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&:focus {
|
||||
border-color: #41479b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user