ChuangHeng/src/views/modules/agent/userInfo.vue

<template>
    <div class="agent_page">
        <div class="top">个人信息</div>
        <div class="content adffc">
            <div class="title">我的账户</div>
            <div class="box adfac">
                <div class="left">{{ firstWord }}</div>
                <div class="right">
                    <p>{{ $store.state.user.realName }}</p>
                    <p>{{ $store.state.user.mobile }}</p>
                </div>
            </div>
            <div class="item">
                <div class="i_title">用户名</div>
                <div class="i_text">{{ $store.state.user.realName }}</div>
            </div>
            <div class="item">
                <div class="i_title">手机号码</div>
                <div class="i_text">{{ $store.state.user.mobile }}</div>
            </div>
            <div class="pwd adfacjb">
                <div class="p_l">
                    <p>密码</p>
                    <p>当前为初始密码，安全性较低，您可以重置密码</p>
                </div>
                <div class="p_r adfac">
                    <el-button type="primary" @click="resetPwd">重置密码</el-button>
                    <el-button type="primary" @click="logout" style="margin-left: 10px;">退出登录</el-button>
                </div>
            </div>
        </div>
        <el-dialog width="484px" :visible.sync="show" title="重置密码" @close="cancel">
            <el-form :model="form" :rules="rules" ref="pwdRef" label-width="100px" style="margin: 0 25px;">
                <el-form-item label="原密码" prop="password">
                    <el-input v-model="form.password" clearable placeholder="请输入原密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" clearable placeholder="请输入新密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="surePassword">
                    <el-input v-model="form.surePassword" clearable placeholder="请输入确认密码" show-password></el-input>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance, onMounted } from 'vue'
    import { updateUserPwd } from '@/api/agent/index.js'
    import { clearLoginInfo } from "@/utils";
    const { proxy } = getCurrentInstance();
    
    const firstWord = ref('')
    const show = ref(false)
    const form = ref({
        password: '',
        newPassword: '',
        surePassword: ''
    })
    const buttonLoading = ref(false)
    const pwdRef = ref(null)
    const rules = {
        password: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        surePassword: [
            { required: true, message: '请再次确认密码', trigger: 'blur' }
        ]
    }

    const resetPwd = () => {
        show.value = true;
    }

    const submitForm = () => {
        proxy.$refs.pwdRef.validate(async (valid) => {
            if (valid) {
                if(form.value.newPassword !== form.value.surePassword) return proxy.$message.error('两次密码不一致')
                await updateUserPwd(form.value).then(res => {
                    if(res.code!==0) return proxy.$message.error(res.msg);
                    proxy.$message.success('修改成功,即将退出登录...');
                    cancel();
                    setTimeout(() => {
                        logout();
                    },1500)
                })
            } else {
                return false;
            }
        });
    }

    const cancel = () => {
        show.value = false;
        form.value = {
            password: '',
            newPassword: '',
            surePassword: ''
        }
        proxy.$refs.pwdRef.resetFields();
    }

    const logout = () => {
        proxy.$http.post("/logout").then(({ data: res }) => {
              if (res.code !== 0) {
                localStorage.removeItem();
                return proxy.$message.error(res.msg);
              }
              clearLoginInfo();
              proxy.$router.push({ name: "login" });
        })
    }

    onMounted(() => {
        firstWord.value = proxy.$store.state.user.realName.substr(0, 1);
    })
</script>

<style scoped lang="scss">
    .agent_page{
        .top{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #393939;
            line-height: 14px;
            padding: 25px 27px;
            border-bottom: 1px solid #E5E7EB;
        }

        .content{
            width: 800px;
            margin: 0 auto;
            .title{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 24px;
                color: #393939;
                line-height: 33px;
                margin-top: 80px;
            }
            .box{
                margin-top: 14px;
                padding: 31px 20px;
                background: #F4F4F4;
                border-radius: 12px;
                .left{
                    width: 86px;
                    height: 86px;
                    background: #33A7A7;
                    border-radius: 50%;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 24px;
                    color: #FFFFFF;
                    line-height: 86px;
                    text-align: center;
                }
                .right{
                    margin-left: 20px;
                    p{
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 20px;
                        color: #252525;
                        line-height: 28px;
                        &:last-child{
                            font-size: 16px;
                            color: #7A7A7A;
                            line-height: 22px;
                            margin-top: 10px;
                        }
                    }
                }
            }
            .item{
                margin-top: 42px;
                .i_title{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 16px;
                    color: #252525;
                    line-height: 22px;
                }
                .i_text{
                    width: 100%;
                    height: 42px;
                    background: #FFFFFF;
                    border-radius: 6px;
                    border: 1px solid #E5E7EB;
                    padding: 0 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #393939;
                    line-height: 42px;
                    margin-top: 13px;
                }
            }
            .pwd{
                margin-top: 41px;
                .p_l{
                    p{
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 16px;
                        color: #252525;
                        line-height: 22px;
                        &:last-child{
                            font-size: 14px;
                            color: #9D9D9D;
                            line-height: 20px;
                            margin-top: 25px;
                        }
                    }
                }
            }
        }
    }

    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 25vh !important;
    }
</style>