<template>
|
<view class="container">
|
<u-navbar
|
title="个人资料"
|
:is-back="true"
|
back-text=""
|
:back-icon-size="40"
|
@left-click="onBackClick"
|
>
|
|
</u-navbar>
|
<view class="pageBg"></view>
|
<div class="avatarBox">
|
<!-- @click="uploadAvatar" -->
|
<u-avatar :src="userInfo.avatar || defaultAvatar" size="114" mode="aspectFill" />
|
</div>
|
<view class="detailBox">
|
<div class="detailCon">
|
<div class="orderRow">
|
<div class="rowTitle">姓名</div>
|
<u-input input-align="right" v-model="userInfo.nickName" placeholder="请输入姓名" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">所属单位</div>
|
<div>{{userInfo.deptName}}</div>
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">性别</div>
|
<div>
|
<u-radio-group v-model="userInfo.sex">
|
<up-radio
|
v-for="(item, index) in sexList"
|
:key="index"
|
:label="item.label"
|
:name="item.name"
|
@change="radioChange"
|
>
|
</up-radio>
|
</u-radio-group>
|
</div>
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">手机号</div>
|
<div>{{userInfo.phone}}</div>
|
<!-- <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
|
class="input-item" /> -->
|
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">邮箱</div>
|
<!-- <div>{{userInfo.email}}</div> -->
|
<u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
|
class="input-item" />
|
</div>
|
</div>
|
</view>
|
<view class="btngroup">
|
<u-button color="#AEAEAE" class="custom-style" @click="reset">重置</u-button>
|
<u-button color="#1D6FE9" class="custom-style" @click="submit">提交</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import defaultAvatar from '/static/images/defaultAvatar.svg'
|
import {
|
getEnvObj,
|
getWebViewUrl
|
} from "@/utils/index.js";
|
import { getUserInfo, updateInfo, updatePassword } from '@/api/user/index.js';
|
import { useUserStore } from "@/store/index.js";
|
const userInfo = ref({
|
userId: '',
|
avatar: '',
|
nickName: '',
|
phone: '',
|
email: '',
|
deptName: '',
|
sex: 2,
|
});
|
const sexList = [
|
{
|
label: '男',
|
name: '0'
|
},
|
{
|
label: '女',
|
name: '1'
|
},
|
// {
|
// label: '未知',
|
// name: '2'
|
// }
|
]
|
// 校验手机号
|
const validatePhone = () => {
|
const phone = userInfo.value.phone
|
if (!phone) return true
|
const phoneRegex = /^1[3-9]\d{9}$/
|
if (!phoneRegex.test(phone)) {
|
|
uni.showToast({
|
title: '请输入正确的手机号码',
|
icon: 'none',
|
duration: 2000
|
});
|
return false
|
}
|
return true
|
}
|
// 校验邮箱
|
const validateEmail = () => {
|
if (!userInfo.value.email) return true
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
if (!emailRegex.test(userInfo.value.email)) {
|
|
uni.showToast({
|
title: '请输入正确的邮箱地址',
|
icon: 'none',
|
duration: 2000
|
});
|
return false
|
}
|
return true
|
}
|
const getUserInfoData = () => {
|
getUserInfo().then(res => {
|
const user = res.data.data;
|
userInfo.value = {
|
userId: user.userId,
|
avatar: user.avatar,
|
nickName: user.nickName,
|
phone: user.sysDept.phone,
|
email: user.sysDept.email,
|
deptName: user.sysDept.deptName,
|
sex: user.sex || 2,
|
};
|
|
});
|
};
|
const reset = () => {
|
getUserInfoData();
|
};
|
|
const {
|
VITE_API_BASE_URL
|
} = getEnvObj()
|
|
function uploadUtil(options) {
|
const {
|
formData,
|
filePath,
|
url
|
} = options;
|
|
return new Promise((resolve, reject) => {
|
let accessToken = useUserStore()?.$state?.userInfo?.access_token;
|
|
uni.uploadFile({
|
url: `${VITE_API_BASE_URL}${url}`,
|
name: 'file',
|
header: {
|
'Blade-Auth': 'bearer ' + accessToken
|
},
|
filePath: filePath,
|
formData,
|
success: (res) => {
|
const resData = JSON.parse(res.data)
|
if (resData.code === 200 || resData.code === 0) {
|
resolve(res)
|
} else {
|
showToast(resData.message)
|
|
reject(res)
|
}
|
},
|
fail: (err) => {
|
reject(err)
|
}
|
});
|
})
|
}
|
const uploadAvatar = () => {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
const tempFile = res.tempFiles[0]; // 获取文件对象
|
const filePath = tempFile.path || tempFile.tempFilePath;
|
if (!filePath) {
|
uni.showToast({
|
title: '获取文件路径失败',
|
icon: 'none'
|
});
|
return;
|
}
|
let fileName = tempFile.name;
|
if (!fileName) {
|
const pathWithoutProtocol = filePath.replace(/^file:\/\//, '');
|
fileName = pathWithoutProtocol.split('/').pop() || 'unknown.png';
|
}
|
|
// 显示加载中
|
uni.showLoading({
|
title: '上传中...'
|
});
|
|
// 上传文件
|
uploadUtil({
|
filePath: filePath,
|
formData: {
|
fileName: fileName,
|
sn: 'avatar_upload'
|
},
|
url: '/blade-resource/oss/endpoint/put-file'
|
}).then(res => {
|
const resData = JSON.parse(res.data);
|
if (resData.code === 200 || resData.code === 0) {
|
// 更新头像显示
|
userInfo.value.avatar = resData.data.link || resData.data.url;
|
uni.hideLoading();
|
uni.showToast({
|
title: '头像上传成功',
|
icon: 'success'
|
});
|
} else {
|
throw new Error(resData.message || '上传失败');
|
|
}
|
}).catch(err => {
|
uni.hideLoading();
|
uni.showToast({
|
title: err.message || '上传失败',
|
icon: 'none'
|
});
|
});
|
}
|
});
|
}
|
const submit = () => {
|
if (!validatePhone() || !validateEmail()) return
|
updateInfo(userInfo.value).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '修改信息成功',
|
icon: 'none',
|
duration: 2000
|
});
|
getUserInfoData()
|
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
getUserInfoData()
|
}
|
|
});
|
|
};
|
// 返回按钮点击事件
|
const onBackClick = () => {
|
uni.navigateBack()
|
}
|
onShow(async () => {
|
getUserInfoData()
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
box-sizing: border-box;
|
// 添加导航栏高度的padding-top，避免内容被遮挡
|
padding-top: 88rpx;
|
|
}
|
:deep(){
|
.u-navbar__content{
|
background: url("@/static/images/user/userbg.svg") no-repeat !important;
|
background-size: 100%!important;
|
height: 44px !important;
|
}
|
}
|
.pageBg {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: url("@/static/images/user/userbg.svg") no-repeat ;
|
background-size: 100%;
|
}
|
.avatarBox {
|
width: 228rpx;
|
height: 228rpx;
|
margin: 76rpx 0;
|
}
|
|
.detailBox {
|
position: absolute;
|
top: 360rpx;
|
width: 702rpx;
|
min-height: 430rpx;
|
background: #FFFFFF;
|
border-radius: 12rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
margin-top: 88rpx;
|
.detailCon {
|
padding: 0 24rpx;
|
}
|
|
.orderRow {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 96rpx;
|
border-bottom: 2rpx solid #f5f5f5;
|
color: #7b7b7b;
|
|
.rowTitle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
white-space: nowrap;
|
}
|
|
:deep(.u-input) {
|
border: none !important;
|
background: transparent !important;
|
padding: 0 !important;
|
}
|
|
:deep(.u-input__input) {
|
border: none !important;
|
box-shadow: none !important;
|
background: transparent !important;
|
padding: 0 !important;
|
margin: 0 !important;
|
height: auto !important;
|
}
|
}
|
}
|
|
.btngroup {
|
display: flex;
|
position: absolute;
|
bottom: 150rpx;
|
}
|
|
:deep(.u-button:first-child) {
|
margin-right: 30rpx !important;
|
}
|
|
.custom-style {
|
width: 276rpx;
|
height: 76rpx;
|
font-family: "Source Han Sans CN";
|
font-weight: 400;
|
font-size: 28rpx;
|
}
|
:deep(.u-button.data-v-461e713c){
|
width: 276rpx !important;
|
height: 76rpx !important;
|
}
|
</style>
|
