merchant/src/pages/index.vue

<template>
<el-container>
    <el-header style="background-color:#545c64">
        <el-row type="flex" style="height:100%;" justify="space-between" align="middle">
            <div style="color:#fff">
                <span class="title" style="font-size: 18px">{{UserInfo.name}}后台管理系统</span>
            </div>
            <div>
                <el-dropdown @command="onUserEdit">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user" style="margin-right: 10px"></i>管理员
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout" icon="el-icon-caret-left">退出登录</el-dropdown-item>
                        <el-dropdown-item command="editPwd" icon="el-icon-edit">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
    </el-header>
    <!-- border: 1px solid #ccc -->
    <el-container style="height: 100%; ">
        <el-aside width="240px">
            <el-menu router class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="curPath">
                <el-menu-item index="home" route="/">
                    <i class="el-icon-house"></i>
                    <span style="font-size: 19px;" slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="order" route="order">
                    <i class="el-icon-edit-outline"></i>
                    <span style="font-size: 19px;" slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="message" route="message">
                    <i class="el-icon-message"></i>
                    <span style="font-size: 19px;" slot="title">账户日志</span>
                </el-menu-item>
                <el-menu-item index="oilCard" route="oilCard">
                    <i class="el-icon-bank-card"></i>
                    <span style="font-size: 19px;" slot="title">油卡充值</span>
                </el-menu-item>
                <el-menu-item index="mobileCard" route="mobileCard">
                    <i class="el-icon-mobile"></i>
                    <span style="font-size: 19px;" slot="title">手机卡充值</span>
                </el-menu-item>
                <el-menu-item index="balance" route="balance">
                    <i class="el-icon-s-order"></i>
                    <span style="font-size: 19px;" slot="title">充值管理</span>
                </el-menu-item>
                <el-menu-item index="reconciliation" route="reconciliation">
                    <i class="el-icon-document-checked"></i>
                    <span style="font-size: 19px;" slot="title">对账管理</span>
                </el-menu-item>
                <el-menu-item index="view" route="view">
                    <i class="el-icon-s-platform"></i>
                    <span style="font-size: 19px;" slot="title">设置</span>
                </el-menu-item>
                <el-menu-item index="interfaceDoc" route="interfaceDoc" >
                    <i class="el-icon-document"></i>
                    <span style="font-size: 19px;" slot="title">接口文档</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="el-menu" style="min-width:860px;">
            <router-view />
        </el-main>
        <el-dialog title="修改密码" :visible.sync="editVisible" width="50%" @closed="onCloseEditDialog">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="editForm.pwd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePwd">
                    <el-input v-model="editForm.rePwd" type="password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onCloseEditDialog">取 消</el-button>
                <el-button type="primary" @click="onEditSubmit('editForm')">确认修改</el-button>
            </span>
        </el-dialog>
    </el-container>
</el-container>
</template>

<script>
import {
    loginOut,
    editPwd
} from "@/api";
import { removeUser } from '@/utils/auth'
// 商家区分
import UserInfo from '@/utils/userInfo'
export default {
    name: 'homePage',
    created() {
        this.curPath = this.$route.name;
    },
    data() {
        return {
            curPath: "",
            editVisible: false,
            editForm: {
                pwd: "",
                rePwd: "",
            },
            editRules: {
                pwd: [{
                    required: true,
                    message: "请输入登录密码",
                    trigger: "blur",
                }, ],
                rePwd: [{
                    required: true,
                    validator: this.validateRePwd2,
                    trigger: "blur",
                }, ],
            },
            UserInfo
        };
    },
    methods: {
        onCloseEditDialog() {
            this.editForm = {};
            this.editVisible = false;
            this.editPwdId = "";
            this.$refs.editForm.resetFields();
        },
        validateRePwd2(rule, value, callback) {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.editForm.pwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        },
        onUserEdit(command) {
            if (command == "logout") {
                this.$confirm("确认退出该账号?", "退出", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.onLoginOut();
                    })
                    .catch(() => {
                        return false;
                    });
            } else if (command == "editPwd") {
                this.editVisible = true;
            }
        },
        onLoginOut() {
            loginOut().then((res) => {
                console.log('登出', res);
                if (res && res.message == "成功") {
                    // 删除本地
                    removeUser('name')
                    this.$router.replace({
                        path: "/login",
                    });
                }
            });
        },
        onEditSubmit(formName) {
            // const _self = this;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // editPwd({
                    //     new_pw: this.editForm.pwd,
                    //     new_pw2: this.editForm.rePwd,
                    // }).then((res) => {
                    //     console.log(res);
                    //     if (res && res.message == "成功") {
                    //         this.$message({
                    //             message: "修改成功",
                    //             type: "success",
                    //             center: true,
                    //             duration: 1000,
                    //             onClose: () => {
                    //                 this.onCloseEditDialog();
                    //             },
                    //         });
                    //     }
                    // });
                    try {
                        let param = new URLSearchParams()
                        param.append('new_pw', this.editForm.pwd)
                        param.append('new_pw2', this.editForm.rePwd)
                        // const res = await editPwd({new_pw: this.editForm.pwd,new_pw2: this.editForm.rePwd,})
                        const res = await editPwd(param)
                        console.log('修改密码', res);
                        if (res && res.message == "成功") {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                                onClose: () => {
                                    this.onCloseEditDialog();
                                },
                            });
                        }
                    } catch (error) {
                        console.log(error);
                        this.$message.error('修改失败')
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
    // 监听器
    watch: {
        '$route': {
            handler(newVal) {
                // console.log(newVal.name, oldVal.path);
                if (newVal) {
                    this.curPath = newVal.name
                }
            }
        }
    }
};
</script>

<style scoped>
.el-menu {
    height: calc(100vh - 62px);
}
.el-menu span {
    display: inline-block;
    /* 小于12px */
     /* -webkit-text-size-adjust:none; */
    transform:scale(0.83,0.83);
    /* transform-origin: left; */
    -webkit-transform: scale(0.80);
}
.el-menusize-font{
  font-size: 16*0.8px;
}
/deep/.el-aside {
    width: 200px;
}
.el-dropdown-link {
    color: #409eff;
}
</style>