pbl_inviteLogin/src/components/pages/changePswd/changePswd.vue

<template>
    <div class="dialog">
        <div class="dialog-header">
            <div class="dialog-title">
                <h1>您的密码过于简单</h1>
                <h1 style="margin-top: 10px;">请重新修改</h1>
            </div>
            <div class="dialog-main">
                <div class="dialog-content">
                    <div class="dialog-content-item">
                        <div class="dialog-content-item-content1">
                            <span>
                                账号
                            </span>
                            <input v-model="account" type="text" placeholder="请输入新账户" class="input" />
                        </div>
                        <div class="dialog-content-item-content1">
                            <span>
                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                新密码
                            </span>
                            <input v-model="password" type="password" placeholder="请输入新密码" class="input" />
                        </div>
                        <div class="dialog-content-item-content1">
                            <span>
                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                新密码确认
                            </span>
                            <input v-model="password1" type="password" placeholder="请输入新密码" class="input" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="user_p">
                <p>
                    要确保您的帐户安全无虑，请设置安全系数高的密码，例如:密码应由字母或符号、数字组成.
                </p>
            </div>
            <button class="button" @click="confirmPswd">确认提交</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'changePswd',
    data() {
        return {
            userid: this.$route.query.userid,
            account: '',
            password: '',
            password1: ''
        }
    },
    methods: {
        getUser() {
            let params = {
                userid: this.userid
            };
            this.ajax
                .get(this.$store.state.api + "selectUser", params)
                .then(res => {
                    this.account = res.data[0][0].accountNumber

                })
                .catch(err => {
                    console.error(err);
                });
        },
        confirmPswd() {
            // 检查 password 和 password1 是否为空
            if (!this.password) {
                this.$message.error("请输入新密码");
                return;
            }
            if (!this.password1) {
                this.$message.error("请确认新密码");
                return;
            }

            const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
            if (!reg.test(this.password)) {
                this.$message.error("密码长度为8-16位，且包含大小写字母");
                return;
            } else if (this.password != this.password1) {
                this.$message.error("两次新密码不相同");
                return;
            }

            let params = [
                {
                    uid: this.userid,
                    pa: this.password
                }
            ];
            this.ajax
                .post(this.$store.state.api + "iniPassword", params)
                .then((res) => {
                    if (res.data.success == 1) {
                        this.$message.success("修改成功")
                        this.password = '';
                        this.password1 = '';
                        setTimeout(() => {
                            window.topU.U.UF.F.closeWindow(window.topU.U.UF.UI.form.allForm['updatePaDialog'].form)
                        }, 1000);
                    }
                    else {
                        this.$message.error("修改失败");
                    }

                })
                .catch((err) => {
                    this.$message.error("修改失败");
                    console.error(err);
                });
        }
    },
    mounted() {
        this.getUser()
    },
}
</script>
<style scoped>
html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 弹窗整体大小 */
.dialog {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;
}

.dialog-header,
.dialog-title,
.dialog-main {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

.dialog-content-item-content1 {
    font-size: 15px;
    font-weight: 550;
}

.dialog-content-item-content1+.dialog-content-item-content1 {
    margin-top: 20px;
}

.changeTitle div {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 7px;
}

.dialog-content-item-content {
    font-size: 15px;
    font-weight: 550;
    margin-top: 20px;
}

/* input输入框样式 */
.input {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f2f5;
    height: 36px;
    outline: none;
}

.input>>>.el-input--suffix .el-input__inner {
    padding: 0
}

/* 用户协议框架 */
.user_p {
    height: 50px;
}

.user_p p {
    color: #535353;
    font-size: 15px
}

/* 提交按钮样式 */
.button {
    width: 100%;
    height: 50px;
    background-color: #3681fc;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    outline: none;
}

.search-icon2 {
    width: 10px;
    height: 10px;
}
</style>