intelligent-medicine-cabinet/mini-pro-web/src/views/personal/changePassword.vue

<template>
    <div class="changePassword">
        <van-form validate-first>
            <van-field
                v-model="oldPassword"
                type="password"
                name="password"
                label="原密码"
                placeholder="请输入原密码"
            />
            <van-field
                @input="validPwd"
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="请输入密码"
            />
            <van-field
                v-model="requirePassword"
                type="password"
                name="requirePassword"
                label="确认密码"
                placeholder="请再次输入密码"
            />
            <div class="tips">
                <div><van-icon name="success" class="v-middle" color="#14b914" v-if="s1==1"/><van-icon color="#ff0000"  class="v-middle" v-else-if="s1==2" name="cross" />8-20个字符</div>
                <div><van-icon name="success" class="v-middle" color="#14b914" v-if="s2==1"/><van-icon color="#ff0000"  class="v-middle" v-else-if="s2==2" name="cross" />只能设置大小写字母、数字及标点符号(不允许输入#：")。</div>
                <div><van-icon name="success" class="v-middle" color="#14b914" v-if="s3==1"/><van-icon color="#ff0000"  class="v-middle" v-else-if="s3==2" name="cross" />必须包含大小写字母、数字及标点符号其中三种。</div>
            </div>
            <div style="margin: 40px;">
                <van-button round block type="info" @click="onSubmit">
                提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import { changePwd } from "@/api/login";
export default {
    data(){
        this.passwordRules = [
            { required: true, message: '请输入密码' },
        ];
        this.requirePasswordRules = [
            { required: true, message: '请再次输入密码' },
            { validator: this.setPassword, message: '两次输入密码不一致' },
            { validator:this.setTest, message: '密码规则错误'}
        ];
        return {
            oldPassword: '',
            password: '',
            requirePassword:'',
            testReq: /((?=[\x21-\x7e]+)[^A-Za-z0-9])/,
            testNumber: /[0-9]/,
            testLetter: /[A-Za-z]/,
            s1: -1,
            s2: -1,
            s3: -1,
        }
    },
    methods:{
        async onSubmit() {
            if(!this.oldPassword.length){
                this.$toast("原密码不能为空");
                return false
            }
            if(!this.password.length || !this.requirePassword.length){
                this.$toast("密码不能为空");
                return false
            }
            if(!this.setPassword()){
                this.$toast("两次输入密码不一致");
                return false
            }
            if(this.s1!=1 || this.s2!=1 || this.s3!=1 ){
                this.$toast("密码设置不符合要求");
                return false
            }
            
            var params = {
                id: this.user.id,
                pw: this.password,
                orgPw: this.oldPassword
            }
            changePwd(params)
                .then(res=>{
                    if(res.status == 200 && res.obj){
                        if(res.obj.response == "fail"){
                            this.$toast(res.obj.msg);
                            return
                        }
                        this.$toast('修改成功');
                        this.$store
                            .dispatch('LogOut')
                            .then(res=>{
                                setTimeout(()=>{
                                    this.$router.push('/login')
                                },800)
                            })
                    } else {
                        this.$toast(res.message || '修改失败');
                    }
                })
                .catch(err=>{
                    console.error(err)
                })
            
        },
        setPassword() {
            return this.password === this.requirePassword
        },
        validPwd(){
            if(this.password.length>=8&&this.password.length<=20){
                this.s1 = 1
            } else {
                this.s1 = 2
            }
            if(/^[A-Za-z0-9\x21-\x7e]{1,}$/.test(this.password) && /^((?!#|：|"|").)*$/.test(this.password)){
                this.s2 = 1
            } else {
                this.s2 = 2
            }
            if( (/[A-Z]/.test(this.password) && /[a-z]/.test(this.password) && (this.testReq.test(this.password) || this.testNumber.test(this.password)))
                ||
                (this.testReq.test(this.password) && this.testNumber.test(this.password) && this.testLetter.test(this.password))
                ){
                this.s3 = 1
            } else {
                this.s3 = 2
            }
        },
    }

}
</script>
<style lang="scss" scoped>
.changePassword{
    .van-button--info{
        background-color:#17b3ec;
        border-color: #17b3ec;
    }
    .tip{
        text-align: left;
        font-size:13px;
        color:red;
        margin-top:10px;
        letter-spacing: 1px;
        padding:0 15px;
    }
    .tips{
        margin-top:10px;
        padding:0 15px;
        font-size: 14px;
        color: #333;
        line-height: 20px;
    }
    .v-middle{
        vertical-align: middle;
    }
}
</style>