flyLong/pc/src/views/setting.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="first">
                        <div class="form_container">
                            <div class="gary">
                       <span>
                           是否关闭本店预约
                       </span>
                            <el-switch
                                    v-model="appoint"
                                    :active-value="0"
                                    :inactive-value="1"
                                    active-color="#409EFF"
                                    inactive-color="#D9D9D9"
                                    @change=changeWechat($event,appoint)
                            >
                            </el-switch>
                            <em>
                                温馨提示：默认关闭，开启后将会关闭本店的所有课程预约，请谨慎操作！
                            </em>
                            </div>
                        </div>
                    </el-tab-pane>
                    <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>
    let qs = require('qs');
    import Global from '../Global.js'
    import {
        PassEdit,
        ShopDetailOne,
        ShopWxStatusEdit,
        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: 'first',
                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();
            this.GetShopDetailOne();
            // 读取当前店铺预约状态 todo
        },
        methods: {
            GetShopDetailOne() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    shopId: localStorage.shopId,
                };
                let postdata = qs.stringify(param);
                ShopDetailOne(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.appoint = json.Rs.WxStatus;
                    } else {
                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                    }
                })
            },
            // 微信可见与否
            changeWechat(e, appoint) {
                let that = this;
                let statusText = appoint == 0 ? "关闭":"开启";
                this.$confirm('是否'+statusText+'本店的所有课程预约?', '禁用操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        token: localStorage.token,
                        shopId: localStorage.shopId,
                        wxStatus: e,
                    };
                    let postdata = qs.stringify(param);
                    ShopWxStatusEdit(postdata).then(res => {
                        let json = res;
                        if (json.Code == 0) {
                            that.$message({
                                showClose: true,
                                message: '本店预约已'+statusText+'！',
                                type: 'success'
                            });
                            // table 重载
                            that.getTableQuery();
                        } else {
                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
                        }
                    })
                }).catch(() => {
                    this.appoint = "0"
                    this.$message({
                        type: 'info',
                        message: '已取消当前操作'
                    });
                });
            },
            // 跳转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>