signal_web/src/views/Pwd.vue

<template>
    <div class="pages">
        <div class="image-border image-border1"></div>
        <div class="image-border image-border2"></div>
        <div class="image-border image-border3"></div>
        <div class="image-border image-border4"></div>
        <div class="tabs">
            <ul>
                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
                    {{tab.name}}
                </li>
            </ul>
        </div>
        <div class="form_container">
            <el-form ref="form" :model="form" label-width="110px" :rules="rules">
                <el-form-item label="请输入原密码" prop="old">
                    <el-input v-model="form.old" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpwd">
                    <el-input v-model="form.newpwd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="again">
                    <el-input v-model="form.again" type="password"></el-input>
                </el-form-item>
                <el-form-item label="图形验证码" prop="valid">
                    <el-input v-model="form.valid" type="password"></el-input>
                    <img  id="validImg" :src="valImgSrc" alt="" width="100px" height="30px" title="看不清？刷一下试试！" @click="changeValImg" >
                </el-form-item>
                <!--<s>-->
                    <!--<i class="el-icon-warning"></i><em>密码由6~32位字母、数字及下划线组成</em>-->
                <!--</s>-->
                <el-form-item>
                    <el-button size="small" type="primary" @click="onSubmit('form')">确认</el-button>
                    <!--<el-button size="small"  type="primary" @click="resetForm('form')">重置</el-button>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    let qs = require('qs');
    import Global from '../Global.js'
    import {modPwd, logout} from '../api/getApiRes.js'
    import {GenVerifyPic } from '../api/getApiRes.js'
    export default {
        data() {
            let samepass = (rule, value, callback) => {
                if (value !== this.form.newpwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            let pwdPass = (rule, value, callback) => {
                let re = /^[0-9a-zA-Z_]{1,}$/;
                if (value.search(re) == -1) {
                    callback(new Error('错了哦，密码只能由字母、数字及下划线组成'));
                } else {
                    callback()
                }
            };
            return {
                tabIndex: 2,
                tabs: [
                    {name: '固件管理', url: 'hardware'},
                    {name: '警务通管理', url: 'police'},
                    {name: '密码修改', url: 'pwd'},
                    {name: '系统设置', url: 'setting'},
                ],
                valImgSrc: '',
                overtime: '',
                form: {
                    old: '',
                    newpwd: '',
                    again: '',
                    valid: '',
                },
                rules: {
                    old: [
                        {required: true, message: '请输入原密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur'}
                    ],
                    newpwd: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur'},
                        {validator: pwdPass, trigger: 'blur'}
                    ],
                    again: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur'},
                        {validator: pwdPass, trigger: 'blur'},
                        {validator: samepass, trigger: 'blur'},
                    ],
                    valid: [
                        {required: true, message: '请输入图形验证码', trigger: 'blur'},
                        {min: 3, max: 4, message: '长度在 4 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
            // 读取验证码
            this.CurentGenVerifyPic();
            this.overtime = new Date();
        },
        methods: {
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
            CurentGenVerifyPic(){
                let that = this;
                let postdata;
                GenVerifyPic(postdata).then(res => {
                    let json = res;
                    if (json.Id) {
                        that.valImgSrc=json.Pic;
                        that.form.picId=json.Id;
                        this.validImgState = false;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            //            点击验证码切换
            changeValImg: function () {
                this.validImgState = true;
                this.CurentGenVerifyPic();
            },
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.submitPwd()
                    } else {
                        that.$message({
                            showClose: true,
                            message: '错了哦，提交新密码失败',
                            type: 'error'
                        });
                        that.form.old = '';
                        that.form.newpwd = '';
                        that.form.again = '';
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitPwd() {
                let that = this;
                let param = {
                    oldPwd: that.form.old,
                    newPwd: that.form.newpwd,
                };
                let postdata = qs.stringify(param);
                modPwd(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$message({
                            showClose: true,
                            message: '密码修改成功',
                            type: 'success'
                        });
                        // clean info
                        that.old = '';
                        that.newpwd = '';
                        that.again = '';
                        that.logoutPage();
                    } else {
                        that.$message.error(json.Memo);
                    }
                });
            },
            // 重登录
            logoutPage() {
                const that = this;
                let postdata = {};
                logout(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$router.push({
                            path: '/login',
                            query: {
                                status: 1
                            }
                        })
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
    }
</script>
<style scoped>
    @import "../assets/css/panel.css";

    .tabs ul {
          width: 800px;
      }
    .image-border {
        position: absolute;
        width: 20px;
        height: 20px;
    }
    .image-border1 {
        top: 0;
        left: 25px;
        border-left: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border2 {
        top: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border3 {
        bottom: 0;
        left: 25px;
        border-bottom: 2px solid #6DC1FF;
        border-left: 2px solid #6DC1FF;
    }

    .image-border4 {
        bottom: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-bottom: 2px solid #6DC1FF;
    }
    .pages {
        /*position: absolute;*/
        /*top: 0;*/
        /*bottom: 0;*/
        /*left: 0;*/
        /*right: 0;*/
        width: 100%;
        /*height: 100%;*/
        min-height: 600px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-bottom: 80px;
    }

    .form_container {
        width: 50%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 20px;
        padding: 20px;
    }

    s {
        height: 50px;
        line-height: 40px;
        padding-left: 20px;
        text-decoration: none;
        font-style: normal;
    }

    i {
        color: red;
    }

    s em {
        font-style: normal;
    }
    /deep/ .el-form {
        width: 500px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    /deep/ .el-form-item__label {
        width: 120px!important;
        color: #6DC1FF;
        font-size: 16px;
        float: left;
    }
    /deep/ .el-form-item__content {
        width: 370px;
        float: right;
        overflow: hidden;
        margin-left: 0px!important;
    }
    /deep/ .el-input__inner {
        background: none;
        color: #6DC1FF;
        border: 1px solid #005EA2;
        border-radius: 0;
    }
    /deep/ .el-range-input {
        background: none;
        color: #6DC1FF;
    }
    .el-button--primary {
        width: 186px;
        height: 30px;
        background: #0162AA;
        color: #6DC1FF;
        border: 1px solid #6DC1FF;
        border-radius: 0;
    }
    #validImg {
        position: relative;
        float: right;
        bottom: 35px;
    }
</style>