276 lines
5.6 KiB
Vue
276 lines
5.6 KiB
Vue
<template>
|
|
<view class="status-bar"></view>
|
|
<view class="user-profile page-container">
|
|
<view class="modal-header">
|
|
<view class="modal-left" @click="closeUserCard">
|
|
<view class="iconfont icon-fanhui custom-navbar-icon"></view>
|
|
</view>
|
|
<view class="modal-title">
|
|
<view class="title-text">编辑资料</view>
|
|
</view>
|
|
<view class="modal-right" @click="saveUpdate">
|
|
<view class="save-btn">保存</view>
|
|
</view>
|
|
</view>
|
|
<view class="modal-body">
|
|
<view class="avatar-upload-section" @click="triggerAvatarUpload">
|
|
<view class="avatar-upload-container">
|
|
<view v-if="editUserAvatar" class="avatar-preview">
|
|
<image :src="editUserAvatar" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-else class="avatar-placeholder">
|
|
<uni-icons type="person-filled" size="100rpx" color="#ffffff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-card">
|
|
<view class="form-field">
|
|
<view class="form-text">用户名</view>
|
|
<input adjust-position="false" class="form-field-input form-field-username"
|
|
:class="{'edit-input-focus':isNameFocus}" v-model="editUsername" @focus="isNameFocus=true"
|
|
@blur="isNameFocus=false" />
|
|
</view>
|
|
<view class="solid-line"></view>
|
|
<view class="form-field">
|
|
<view class="form-text">邮箱</view>
|
|
<input adjust-position="false" class="form-field-input form-field-emile"
|
|
:class="{'edit-input-focus':isEmailFocus}" v-model="editEmail" @focus="isEmailFocus=true"
|
|
@blur="isEmailFocus=false" />
|
|
</view>
|
|
</view>
|
|
<view class="prompt-content">*保存后再返回哟</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onMounted,
|
|
ref
|
|
} from 'vue';
|
|
import { getUserInfo } from '@/utils/cloud-api.js'
|
|
import {getToken} from '@/utils/user-info.js'
|
|
|
|
const closeUserCard = () => {
|
|
console.log("点击了返回")
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
fail() {
|
|
uni.reLaunch({
|
|
url: '/pages/Chat/Chat'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const saveUpdate = () => {
|
|
uni.navigateBack({
|
|
url: '/pages/Chat/Chat'
|
|
})
|
|
}
|
|
|
|
|
|
const editUserAvatar = ref('')
|
|
const editUsername = ref('')
|
|
const editEmail = ref('')
|
|
const isNameFocus = ref(false)
|
|
const isEmailFocus = ref(false)
|
|
|
|
// 上传头像
|
|
const triggerAvatarUpload = () => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFilePaths[0]
|
|
handlrImageSelected(tempFilePath)
|
|
},
|
|
fail: (err) => {
|
|
console.log('选择图片失败', err);
|
|
}
|
|
})
|
|
}
|
|
|
|
// 处理选择的图片
|
|
const handlrImageSelected = (filePath) => {
|
|
editUserAvatar.value = filePath
|
|
}
|
|
|
|
onMounted(async()=>{
|
|
const token = getToken()
|
|
const UserInfo = await getUserInfo(token)
|
|
|
|
editUserAvatar.value = UserInfo.avatar || ''
|
|
editUsername.value = UserInfo.username || ''
|
|
editEmail.value = UserInfo.email || ''
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-profile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: rgba(193, 193, 193, 0.1);
|
|
}
|
|
|
|
|
|
.modal-header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.modal-left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.modal-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: auto;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
|
|
.title-text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
}
|
|
|
|
.modal-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
size: 40rpx;
|
|
z-index: 2;
|
|
|
|
.save-btn {
|
|
background-color: #3b82f6;
|
|
color: #ffffff;
|
|
padding: 8rpx 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 50rpx;
|
|
box-sizing: border-box;
|
|
|
|
.avatar-upload-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-bottom: 10rpx;
|
|
box-sizing: border-box;
|
|
|
|
.avatar-upload-container {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 50%;
|
|
padding: 5rpx;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
background: #f3f4f6;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 5rpx solid #dddddd;
|
|
box-sizing: border-box;
|
|
|
|
|
|
.avatar-preview {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
background: #9ca3af;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-card {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
margin: 20rpx 0rpx;
|
|
width: 100%;
|
|
|
|
.form-text {
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.form-field-input {
|
|
width: 100%;
|
|
height: 80rpx
|
|
}
|
|
|
|
.edit-input-focus {
|
|
background: rgba(170, 255, 255, 0.1);
|
|
}
|
|
|
|
.form-field-username {
|
|
|
|
}
|
|
|
|
.form-field-emile {}
|
|
|
|
}
|
|
|
|
.prompt-content {
|
|
width: 100%;
|
|
font-size: 10px;
|
|
color: #9ca3af;
|
|
}
|
|
}
|
|
</style> |