duoji-frontend/src/views/center/web/editPwd.vue

<template>
    <content-view>
        <div class="userPwd">
            <div class="userPwd-pwd pb24">
                <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 7 }">
                    <a-form-item label="原始密码">
                        <a-input
                            autocomplete="off"
                            placeholder="请输入原始密码"
                            v-decorator="['oldPwd', { rules: [{ required: true, pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/, message: '6-16个字符，包含数字、字母或符号组成，至少两种' }] }]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="新密码">
                        <a-input
                            autocomplete="off"
                            placeholder="请输入新密码"
                            v-decorator="['password', { rules: [{ required: true, pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/, message: '6-16个字符，包含数字、字母或符号组成，至少两种' }] }]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="确认密码">
                        <a-input
                            autocomplete="off"
                            placeholder="请输入确认密码"
                            v-decorator="['againPwd', { rules: [{ required: true, validator: validatorPwd }] }]"
                        ></a-input>
                    </a-form-item>
                </a-form>
                <a-row class="mt24">
                    <a-col span="22" align="center">
                        <a-button type="primary" class="mr8" @click="sure">确定</a-button>
                        <a-button @click="cancel">取消</a-button>
                    </a-col>
                </a-row>
            </div>
        </div>
    </content-view>
</template>

<script>
export default {
    name: "centerPwd",
    data() {
        return {
            detail: {},
            form: this.$form.createForm(this)
        };
    },
    methods: {
        sure() {
            if (
                !this.form.getFieldValue("oldPwd") ||
                !this.form.getFieldValue("password") ||
                !this.form.getFieldValue("againPwd")
            ) {
                this.$message.info("请输入密码");
                return;
            }
            this.$api.centerApi
                .editPwd({
                    data: {
                        oldPassword: this.form.getFieldValue("oldPwd"),
                        newPassword: this.form.getFieldValue("password")
                    }
                })
                .then(res => {
                    console.log(res);
                    this.$message.success("操作成功");
                    this.cancel();
                });
        },
        cancel() {
            sessionStorage.removeItem("userDetail");
            this.$router.go(-1);
        },
        validatorPwd(rule, value, callback) {
            if (this.form.getFieldValue("password") === value) {
                callback();
            } else {
                callback("两次密码输入不一致");
            }
        }
    },
    created() {
        this.detail = sessionStorage.getItem("userDetail")
            ? JSON.parse(sessionStorage.getItem("userDetail"))
            : {};
    }
};
</script>

<style lang='scss'>
.userPwd {
    &-title {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: rgba(0, 0, 0, 0.85);
    }
    &-current {
        display: flex;
        flex-direction: column;
        padding-bottom: 27px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        &-desc {
            width: 70%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .status {
                display: flex;
                align-items: center;
                &-circle {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: rgba(0, 168, 84, 1);
                    margin-right: 4px;
                }
                &-red {
                    background-color: rgba(240, 65, 52, 1);
                }
            }
        }
    }
}
</style>