<template>
|
<div class="user-container">
|
<div class="user-content">
|
<div class="title">个人信息</div>
|
<div class="user-form">
|
<div class="item">
|
<div class="name">头像:</div>
|
<div class="image">
|
<img :src="preUrl + form.headImg" class="userImage"/>
|
</div>
|
</div>
|
<div class="item">
|
<div class="name">用户名:</div>
|
<div class="info">{{ form.userName }}</div>
|
</div>
|
<div class="item">
|
<div class="name">昵称:</div>
|
<div class="info">{{ form.nickName }}</div>
|
</div>
|
<div class="item">
|
<div class="name">联系方式:</div>
|
<div class="info">{{ form.contact }}</div>
|
</div>
|
<div class="item">
|
<div class="name">邮箱:</div>
|
<div class="info">{{ form.email }}</div>
|
</div>
|
<div class="item">
|
<div class="name">密码:</div>
|
<div class="info pwd">
|
********
|
<el-button type="plain" @click="isShow = true">修改密码</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="bottom">
|
<el-button type="primary" @click="loginOut">退出登录</el-button>
|
</div>
|
<div class="footer"></div>
|
</div>
|
<el-dialog v-model="isShow">
|
<div class="title">修改密码</div>
|
<el-form :model="pwdForm" ref="formRef" :rules="rules">
|
<el-form-item prop="oldPassword" label="旧密码">
|
<el-input v-model="pwdForm.oldPassword" placeholder="请输入旧密码"></el-input>
|
</el-form-item>
|
<el-form-item prop="newPassword" label="新密码">
|
<el-input v-model="pwdForm.newPassword" placeholder="请输入新密码"></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmPassword" label="确认密码">
|
<el-input v-model="pwdForm.confirmPassword" placeholder="再次输入新密码"></el-input>
|
</el-form-item>
|
<el-form-item class="handel-btn">
|
<el-button @click="cancel()">取消</el-button>
|
<el-button type="primary" @click="modifyPwd()">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {userDetail} from '@/api/login'
|
const { proxy } = getCurrentInstance();
|
const form = ref({})
|
const preUrl = ref(import.meta.env.VITE_APP_IMG_BASEURL)
|
const getUserInfo = async () =>{
|
let id = JSON.parse(localStorage.getItem('id'))
|
await userDetail().get(id).then(res => {
|
form.value = res.data
|
})
|
}
|
|
const confirmPass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'));
|
} else if (value !== pwdForm.value.newPassword) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
}
|
|
//修改密码
|
const rules = {
|
oldPassword: [
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
],
|
newPassword: [
|
{required: true, pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/, message: "密码必须是8位以上的英文数字字符组合", trigger: "blur" }
|
],
|
confirmPassword: [
|
{ required: true, validator: confirmPass, message: "两次密码不一致", trigger: "blur" }
|
]
|
}
|
const formRef = ref()
|
const isShow = ref(false)
|
const pwdForm = ref({
|
oldPassword:'',
|
newPassword:'',
|
confirmPassword:'',
|
})
|
const modifyPwd = () =>{
|
formRef.value.validate(async (valid) => {
|
if(valid){
|
const data = {
|
oldPassword: pwdForm.value.oldPassword,
|
newPassword: pwdForm.value.newPassword
|
}
|
await userDetail().setPsw(data).then(res => {
|
if(res.code == 200){
|
proxy.$modal.msgSuccess("修改成功");
|
}
|
})
|
}
|
})
|
}
|
const cancel = () =>{
|
isShow.value = false
|
pwdForm.value = {}
|
}
|
onMounted(() =>{
|
getUserInfo()
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.user-container{
|
width: 100%;
|
padding: 1% 12%;
|
.user-content{
|
width: 100%;
|
background: rgba(242, 246, 248, 0.4);
|
border-radius: 20px;
|
.title{
|
width: 100%;
|
height:80px;
|
background: rgba(112, 184, 225, 0.13);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
color: #262627;
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
}
|
.user-form{
|
width: 100%;
|
height:550px;
|
padding: 10px 80px;
|
.item{
|
width: 100%;
|
height: 16%;
|
display: flex;
|
justify-content:flex-start;
|
align-items:center;
|
margin-left: 10%;
|
.name{
|
width:90px;
|
font-size: 20px;
|
color: #626268;
|
font-weight: bold;
|
margin-right: 20px;
|
}
|
.info{
|
width: 70%;
|
height: 35%;
|
display: flex;
|
align-items:center;
|
border-bottom: 1px solid rgba(29, 33, 41, 0.27);
|
font-size: 18px;
|
color: rgba(66, 66, 67, 0.98);
|
font-weight: bold;
|
}
|
.pwd{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.el-button{
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
.bottom{
|
width: 100%;
|
height:80px;
|
//background: rgba(112, 184, 225, 0.13);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
color: #262627;
|
}
|
.footer{
|
width: 100%;
|
height:100px;
|
background: rgba(112, 184, 225, 0.13);
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
}
|
}
|
:deep(.el-dialog){
|
width: 40%;
|
height:40vh;
|
padding: 10px 200px;
|
.title{
|
width: 100%;
|
height: 50px;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
font-weight: bold;
|
font-size: 20px;
|
margin-bottom: 50px;
|
}
|
.el-form{
|
.el-form-item{
|
margin-bottom: 30px;
|
}
|
.handel-btn{
|
width: 50%;
|
margin: 0 auto;
|
.el-button{
|
width: 40%;
|
height: 35px;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
font-size: 18px;
|
margin: 20px auto;
|
letter-spacing: 6px;
|
}
|
}
|
}
|
}
|
}
|
.image{
|
border:1px solid rgba(112, 184, 225, 0.32);
|
border-radius: 10px;
|
padding: 5px;
|
}
|
.userImage{
|
width: 100px;
|
max-height:100px;
|
}
|
</style>
|
