<template>
|
<view class="container">
|
<div class="avatarBox">
|
<u-avatar :src="userInfo.avatar" size="114" mode="aspectFill" />
|
</div>
|
<view class="detailBox">
|
<div class="orderRow">
|
<div class="rowTitle">姓名</div>
|
<div>{{userInfo.realName}}</div>
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">所属单位</div>
|
<div>{{userInfo.deptName}}</div>
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">手机号</div>
|
<u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
|
class="input-item" />
|
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">邮箱</div>
|
<u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
|
class="input-item" />
|
</div>
|
</view>
|
<view class="btngroup">
|
<u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button>
|
<u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
getUserInfo,
|
updateInfo,
|
updatePassword
|
} from '@/api/user/index.js';
|
const userInfo = ref({
|
id: '',
|
avatar: '',
|
realName: '',
|
name: '',
|
phone: '',
|
email: '',
|
deptName: '',
|
});
|
// 校验手机号
|
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 = {
|
id: user.id,
|
avatar: user.avatar,
|
name: user.name,
|
realName: user.realName,
|
phone: user.phone,
|
email: user.email,
|
deptName: user.deptName,
|
};
|
|
});
|
};
|
const reset = () => {
|
getUserInfoData();
|
};
|
const submit = () => {
|
if (!validatePhone() || !validateEmail()) return
|
userInfo.value.name = userInfo.value.realName;
|
updateInfo(userInfo.value).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '修改信息成功',
|
icon: 'none',
|
duration: 2000
|
});
|
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
|
});
|
getUserInfoData()
|
};
|
onShow(async () => {
|
getUserInfoData()
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url('/src/static/images/user/allBg.svg') no-repeat center center;
|
background-size: cover;
|
background-attachment: fixed;
|
|
}
|
|
.avatarBox {
|
width: 114px;
|
height: 114px;
|
margin: 38px 0;
|
}
|
|
.detailBox {
|
width: 351px;
|
min-height: 215px;
|
background: #FFFFFF;
|
border-radius: 6px;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
.orderRow {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 48px;
|
border-bottom: 1px solid #f5f5f5;
|
color: #7b7b7b;
|
padding: 0 12px;
|
.rowTitle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 15px;
|
color: #222324;
|
white-space: nowrap;
|
}
|
::v-deep .u-input {
|
border: none !important;
|
background: transparent !important;
|
padding: 0 !important;
|
}
|
|
::v-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:75px;
|
}
|
.u-button:first-child{
|
margin-right: 15px;
|
}
|
|
.custom-style {
|
width: 138px;
|
height: 38px;
|
}
|
</style>
|
