flyLong/pc/src/views/AdminSetting.vue

<template>
    <div class="context">
        <div class="panel">
            <h5>系统设置</h5>
            <div class="pages">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="密码修改" name="second">
                        <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>
                                    <el-button type="" @click="onSubmit('form')">确认修改</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import { PassEdit } from "../api/getApiRes";

    let qs = require('qs');
    import Global from '../Global.js'
    import {
        testTable,
    } 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 {
                activeName: 'second',
                pageApppoint: true,
                valImgSrc: '',
                overtime: '',
                appoint: '0',
                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.overtime = new Date();

            // 读取当前店铺预约状态 todo
        },
        methods: {
            // 微信可见与否
            changeWechat(e, appoint) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    wxVisible: e,//
                };
                let postdata = qs.stringify(param);
                testTable(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$message({
                            showClose: true,
                            message: '本店预约已关闭',
                            type: 'success'
                        });
                        // 重载列表
                        that.getTableQuery();
                    } else {
                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                    }
                })
            },
            // 跳转tab页面
            goTab(url) {
                this.$router.push({ path: url });
            },
            //            点击验证码切换
            changeValImg: function () {
                this.validImgState = true;
                this.CurenttestTable();
            },
            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 = '';
                        // 提交失败也要重载验证码
                        this.CurenttestTable();
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitPwd() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    oldpass: that.form.old,
                    newpass: that.form.newpwd,
                };
                let postdata = qs.stringify(param);
                PassEdit(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 + '，错误代码：' + json.Code);
                    }
                });
            },
            // 重登录
            logoutPage() {
                const that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                testTable(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$router.push({
                            path: '/login',
                            query: {
                                status: 1
                            }
                        })
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            }
        },
    }
</script>
<style scoped>
    @import "../assets/css/panel.css";

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tabs ul {
        width: 358px;
        margin: 0 auto;
        margin-top: 15px;
    }

    .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 {
        width: 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 #DCDFE6;
        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;
    }

    .context {
        /* height: 770px; */
        overflow-y: scroll;
        display: block;
        margin: 0 auto;
        background-color: #fff !important;
        padding: 30px;
    }

    .panel-body {
        padding: 20px;
        background: #F0F2F5;
    }

    .change button {
        float: left;
        margin-right: 10px;
    }

    .change button.el-button--primary {
        height: 38px;
        color: #fff;
        background: #409EFF;
        padding: 3px 5px;
        width: 120px;
    }

    .form_container {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .form_container .gary {
        width: 100%;
        height: 64px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 34px 32px;
        padding-bottom: 0;
        background: #F0F2F5;
        border-radius: 2px;
    }

    .gary span {
        float: left;
        margin-right: 30px;
    }

    /deep/ .el-switch {
        float: left;
    }

    .gary em {
        position: relative;
        top: -10px;
        left: 30px;
        padding: 13px 37px;
        float: left;
        background: #fff;
        border-radius: 250px;
        color: #E38F00;
        font-size: 14px;
        font-style: normal;
    }

    /deep/ .el-form {
        width: 600px;
        float: left;
    }

    /deep/ .el-form-item__content {
        width: 437px;
        float: left;
    }

    .panel /deep/ .el-input__inner {
        width: 437px;
        float: left;
    }

    /deep/ .el-button {
        float: left;
        margin-left: 120px;
    }
</style>