channel_manage/src/views/distribution/changePwd/index.vue

<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <back-button></back-button>
        </el-card>
        <el-card class="filter-container" style="margin-top: 20px;" shadow="hover">
            <el-form :model="admin" ref="admin" label-width="150px" :rules="rules" size="small">
                <div class="blSet">
                    <h4>修改密码</h4>
                </div>
                <el-form-item label="登录账号:" prop="username">
                    <el-input v-model="admin.username" disabled type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="旧密码：" prop="oldPassword">
                    <el-input v-model="admin.oldPassword" clearable placeholder="请输入历史密码" type="number" number
                        style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop="pwd">
                    <el-input v-model="admin.pwd" clearable placeholder="请输入新密码" type="" number
                        style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="newPassword">
                    <el-input v-model="admin.newPassword" clearable placeholder="请确认密码" type="" number
                        style="width: 250px"></el-input>
                </el-form-item>
            </el-form>
            <el-divider content-position="left"></el-divider>
            <div style="display: flex;align-items: center;justify-content: center;">
                <el-button type="primary" @click="submitForm" size="medium">保存</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import { getCookie } from '@/utils/support';
import { updatePassword } from '@/api/distribution';
import { removeToken } from '@/utils/auth';
const defaultAdmin = {
    username: null,
    oldPassword: null,
    pwd: null,
    newPassword: null
};
export default {
    data() {
        return {
            admin: Object.assign({}, defaultAdmin),
            rules: {
                oldPassword: [
                    { required: true, message: '请输入历史密码', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
                ],
                newPassword: [
                    { required: true, message: '请输入二次确认密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.admin.username = getCookie("username")
    },
    computed: {
    },
    methods: {
        submitForm() {
            let data = {
                oldPassword: this.admin.oldPassword,
                newPassword: this.admin.newPassword
            }
            if (this.admin.oldPassword == this.admin.newPassword) {
                this.$message.error('新密码不能与旧密码相同')
                return
            }
            if (this.admin.pwd != this.admin.newPassword) {
                this.$message.error('两次输入的密码不一致')
                return
            }
            this.$refs.admin.validate(valid => {
                if (valid) {
                    updatePassword({ ...data }).then(res => {
                        if (res.code == 200) {
                            this.$message.success('修改成功，请重新登录')
                            this.$store.dispatch('LogOut').then(() => {
                                location.reload() 
                            })
                            removeToken()
                            window.localStorage.clear()
                        }
                    })
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped></style>