fix:修改配置

web

3 天以前 8f36a203bbee6c74c6531331a7cf00572120bfab

 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>