parent
0a72ffefaf
commit
70a3ec3182
7 changed files with 554 additions and 51 deletions
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,410 @@ |
||||
<template> |
||||
<div class="login_container"> |
||||
<div class="top"> |
||||
<div class="loginBtn"> |
||||
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> |
||||
</div> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
|
||||
<div class="main-content"> |
||||
<div class="personal-center"> |
||||
<div class="leftBox"> |
||||
<h2>个人中心</h2> |
||||
<p>学生8527</p> |
||||
<button class="btn1" @click="handleHomeClick">返回首页</button> |
||||
<button class="btn2" @click="handleRecordClick">个人中心</button> |
||||
<button class="btn3">重置密码</button> |
||||
</div> |
||||
<div class="rightBoxes"> |
||||
<div class="topBox"> |
||||
<el-form style="margin:55px 0 0 200px;" :rules="rules" :model="formModel" ref="formRef" |
||||
size="large" autocomplete="off"> |
||||
<el-form-item prop="username" class="custom-form-item"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
用户账号 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input disabled v-model="formModel.username" |
||||
style="border-color: #20bec8;"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="oldPassword" class="custom-form-item" style="margin-top: 25px;"> |
||||
<div style="display: flex; align-items: center; color: pink"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
旧密码 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input type="password" v-model="formModel.oldPassword" |
||||
style="border-color: #20bec8;" placeholder="请输入旧密码" |
||||
show-password></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div class="bottomBox"> |
||||
<el-form size="large" style="margin:36px 0 0 265px;" :rules="rules" :model="formModel"> |
||||
<el-form-item prop="password"> |
||||
<div style="display: flex; align-items: center;"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
新密码 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input type="password" v-model="formModel.password" |
||||
style="border-color: #20bec8" placeholder="请输入新密码" show-password></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="repassword"> |
||||
<div style="display: flex; align-items: center;"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
确认密码 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input placeholder="请再次输入新密码" type="password" v-model="formModel.repassword" |
||||
style="border-color: #20bec8 ;margin-top: 6px" show-password></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
<el-button style="margin:10px 0 0 580px;font-size: 13px;font-weight: 700;" |
||||
size="large" @click="confirmChange">确认修改</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts" name="spacePage"> |
||||
|
||||
import { ref, onMounted } from "vue" |
||||
import { useRouter } from 'vue-router' |
||||
import { ElMessage } from 'element-plus' |
||||
import settingStore from "@/store/modules/setting"; |
||||
const setting = settingStore(); |
||||
import userStore from '@/store/modules/user'; |
||||
import { getUserInfoService, userChangePasswordService } from '@/api/user' |
||||
const router = useRouter() |
||||
const user = userStore(); |
||||
const loginFn = () => { |
||||
router.push('/login') |
||||
} |
||||
const handleHomeClick = () => { |
||||
// 处理首页按钮点击逻辑，如路由跳转 |
||||
console.log('返回首页'); |
||||
router.push('/studyPage') |
||||
}; |
||||
const handleRecordClick = () => { |
||||
console.log('个人中心'); |
||||
router.push('/spacePage') |
||||
}; |
||||
|
||||
const formRef = ref(); |
||||
const formModel = ref({ |
||||
username: "", |
||||
oldPassword:'', |
||||
password:'', |
||||
repassword:'' |
||||
}); |
||||
const getUser = async () => { |
||||
const res: any = await getUserInfoService(); |
||||
// console.log(res.result,'aaaaa'); |
||||
|
||||
formModel.value.username = res.result.username; |
||||
// console.log(formModel, 'formModel'); |
||||
} |
||||
|
||||
|
||||
|
||||
const rules = { |
||||
username: [ |
||||
{ required: true, message: "请输入用户名", trigger: "blur" }, |
||||
{ |
||||
min: 5, |
||||
max: 30, |
||||
message: "用户名长度最小五位最大三十位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
], |
||||
oldpassword: [ |
||||
{ required: true, message: "请输入旧密码", trigger: "blur" }, |
||||
{ |
||||
pattern: /^\S{6,15}$/, |
||||
message: "旧密码长度最小六位最大十五位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
], |
||||
password: [ |
||||
{ required: true, message: "请输入新密码", trigger: "blur" }, |
||||
{ |
||||
pattern: /^\S{6,15}$/, |
||||
message: "密码长度最小六位最大十五位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
{ |
||||
validator: (rule, value, callback) => { |
||||
if (value === formModel.value.oldPassword) { |
||||
callback(new Error("新密码不能跟旧密码输入一致!")); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}, |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
repassword: [ |
||||
{ required: true, message: "请再次输入新密码", trigger: "blur" }, |
||||
{ |
||||
max: 15, |
||||
min: 6, |
||||
pattern: /^\S{6,15}$/, |
||||
message: "密码长度最小六位最大十五位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
{ |
||||
validator: (rule, value, callback) => { |
||||
if (value !== formModel.value.password) { |
||||
callback(new Error("两次输入新密码不一致!")); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}, |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}; |
||||
const confirmChange =async()=>{ |
||||
await userChangePasswordService({ |
||||
username: formModel.value.username, |
||||
password: formModel.value.password, |
||||
oldPassword: formModel.value.oldPassword, |
||||
}) |
||||
.then(() => { |
||||
ElMessage.success('修改成功') |
||||
}) |
||||
.catch((error) => { |
||||
// console.log(error, 'error') |
||||
ElMessage.error(error.response.data.message) |
||||
}) |
||||
formModel.value.oldPassword='' |
||||
formModel.value.password = '' |
||||
formModel.value.repassword='' |
||||
|
||||
} |
||||
onMounted(() => { |
||||
getUser() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.login_container { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1080px; |
||||
min-height: 100vh; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg3.png") no-repeat; |
||||
background-size: cover; |
||||
|
||||
.top { |
||||
width: 100%; |
||||
height: 75px; |
||||
text-align: center; |
||||
font-size: 42px; |
||||
line-height: 75px; |
||||
font-style: italic; |
||||
background: url("../assets/images/topbgc.png") no-repeat; |
||||
// background-position: center bottom -10px; |
||||
background-size: cover; |
||||
|
||||
.title { |
||||
color: #fff; |
||||
} |
||||
|
||||
.loginBtn { |
||||
position: absolute; |
||||
/* 清除浮动影响 */ |
||||
float: left; |
||||
/* 向左浮动 */ |
||||
top: 10px; |
||||
left: 230px; |
||||
border: 1px solid #33FEFE; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||
width: 142px; |
||||
height: 40px; |
||||
line-height: 37px; |
||||
background: linear-gradient(to bottom, #08B9C1, #0758B8); |
||||
transform: skew(-30deg); |
||||
cursor: pointer; |
||||
/* 在X轴方向倾斜 -30 度 */ |
||||
border-radius: 5%; |
||||
|
||||
p { |
||||
transform: skew(30deg); |
||||
/* 反向倾斜，抵消父元素的变形 */ |
||||
font-size: 18px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.main-content { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.personal-center { |
||||
display: flex; |
||||
width: 1800px; |
||||
height: 600px; |
||||
margin-top: 150px; |
||||
justify-content: space-evenly; |
||||
|
||||
.leftBox { |
||||
position: relative; |
||||
width: 550px; |
||||
height: 600px; |
||||
background: url("../assets/images/space1.png") no-repeat; |
||||
transform: skewX(-5deg); |
||||
margin-right: -150px; |
||||
// flex-direction: column; |
||||
background-size: 98%; |
||||
|
||||
h2 { |
||||
position: absolute; |
||||
top: 6px; |
||||
left: 60%; |
||||
transform: translateX(-50%); |
||||
color: #ededd8; |
||||
font-size: 16px; |
||||
font-weight: 700; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
p { |
||||
position: absolute; |
||||
top: 28%; |
||||
left: 55%; |
||||
transform: translateX(-50%); |
||||
color: #fdeda0; |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
} |
||||
|
||||
.btn1, |
||||
.btn2, |
||||
.btn3 { |
||||
display: block; |
||||
width: 200px; |
||||
height: 55px; |
||||
background-color: #e9ddab; |
||||
margin: 25px auto; |
||||
border: none; |
||||
border-radius: 5px; |
||||
color: #333; |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
transform: skewX(-17deg); |
||||
} |
||||
|
||||
.btn1 { |
||||
position: absolute; |
||||
top: 268px; |
||||
left: 31%; |
||||
} |
||||
|
||||
.btn2 { |
||||
position: absolute; |
||||
left: 26%; |
||||
top: 360px; |
||||
|
||||
} |
||||
|
||||
.btn3 { |
||||
position: absolute; |
||||
left: 22%; |
||||
top: 453px; |
||||
background-color: #e2c04f; |
||||
} |
||||
} |
||||
|
||||
.rightBoxes { |
||||
width: 1200px; |
||||
height: 600px; |
||||
// background-color: skyblue; |
||||
// flex: 1; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column; |
||||
transform: skewX(-17deg); |
||||
|
||||
.topBox { |
||||
// width: 800px; |
||||
// height: 300px; |
||||
flex: 1; |
||||
background-color: lightgreen; |
||||
background: url("../assets/images/space2.png") no-repeat; |
||||
background-size: 98%; |
||||
// display: flex; |
||||
// justify-content: center; |
||||
// align-items: center; |
||||
transform: skewX(15deg); |
||||
|
||||
.el-input { |
||||
width: 450px; |
||||
height: 50px; |
||||
} |
||||
|
||||
:deep(.el-form-item__error) { |
||||
left: 90px; |
||||
} |
||||
} |
||||
|
||||
.bottomBox { |
||||
margin-top: 36px; |
||||
flex: 1; |
||||
// width: 800px; |
||||
// height: 200px; |
||||
background-color: lightcoral; |
||||
background: url("../assets/images/space3.png") no-repeat; |
||||
background-size: 98%; |
||||
// display: flex; |
||||
// justify-content: center; |
||||
// align-items: center; |
||||
transform: skewX(15deg); |
||||
|
||||
.el-input { |
||||
width: 450px; |
||||
height: 50px; |
||||
} |
||||
|
||||
:deep(.el-form-item__error) { |
||||
left: 90px; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// .personal-center { |
||||
// background-color: #003366; |
||||
// padding: 20px; |
||||
// color: white; |
||||
// border-radius: 10px; |
||||
// transform: skewX(-15deg); |
||||
// display: flex; |
||||
|
||||
|
||||
// }</style> |
||||
Loading…
Reference in new issue