From 8f36a203bbee6c74c6531331a7cf00572120bfab Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期日, 27 四月 2025 17:28:59 +0800
Subject: [PATCH] fix:修改配置
---
src/views/userCenter.vue | 248 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 248 insertions(+), 0 deletions(-)
diff --git a/src/views/userCenter.vue b/src/views/userCenter.vue
new file mode 100644
index 0000000..5d02ad8
--- /dev/null
+++ b/src/views/userCenter.vue
@@ -0,0 +1,248 @@
+<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>
\ No newline at end of file
--
Gitblit v1.9.3