You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
410 lines
13 KiB
410 lines
13 KiB
3 weeks ago
|
<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>
|