qimall/addons/Store/client/views/layouts/header.php

<?php

?>
<style>
    .mall-header {
        margin-left: 30px;
        /*background-color: #24303c;*/
        background-color: #313131;
        /*background-color: #FFFFFF;*/
    }

    .mall-header .mall-name {
        max-width: 120px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mall-header .el-menu.el-menu--horizontal {
        border-bottom: 0;
    }

    .mall-header-menu .el-menu--popup {
        min-width: 1px;
    }

    .mall-header-menu .el-menu--popup .is-disabled {
        opacity: .65;
        cursor: default;
    }

    .el-menu--horizontal.el-menu {
        background-color: #313131;
    }

    .lianxikefu{
        background-color: #313131 !important;
    }

    .el-menu-item:hover{
        background: #FFF !important;
        color: #333 !important;
    }

    .el-menu--horizontal>.el-menu-item,
    .el-menu--horizontal>.el-submenu .el-submenu__title,
    .el-submenu__title i {
        color: #FFFFFF !important;
    }

    .el-menu--horizontal>.el-submenu:hover .el-submenu__title{
        color: #303133 !important;
    }

    .lianxikefu:hover>.lianxikefu2 {
        color: #333 !important;
        display: inline-block;
    }

</style>
<template id="mall-header">
    <div>
        <header class="mall-header" flex="box:last">
            <el-menu class="el-menu-demo" mode="horizontal" menu-trigger="click">
                <!-- <el-menu-item v-for="(nav, index) in navs" :key="index" :index="'' + index" @click="$navigate(nav.url, nav.new_window?true:false)">{{nav.name}}
                </el-menu-item> -->
            </el-menu>

            <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" @select="handleSelect" menu-trigger="click">
                </el-menu-item>
                <el-submenu v-if="mch_id == 0 && courseMenu.children && courseMenu.children.length > 0" index="3" v-if="courseMenu" popper-class="mall-header-menu">
                    <template slot="title">
                        <span :title="courseMenu.name" class="mall-name">{{courseMenu.name}}</span>
                    </template>
                    <el-menu-item @click="navigateClick({r: item.route})" v-for="(item, index) in courseMenu.children" :key="index" :index="'1-' + index">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="2" v-if="mall && user" popper-class="mall-header-menu">
                    <template slot="title">
                        <span :title="mall.name" class="mall-name">{{mall.name}}</span>
                    </template>
                    <el-menu-item index="1-1" :disabled="true">{{mall.name}}</el-menu-item>
                    <el-menu-item index="1-2" :disabled="true">{{user.username}}</el-menu-item>
                    <el-menu-item v-if="(user.admin_type == 2 || user.admin_type == 3) && updatePasswordStatus" index="2-3" @click="updatePassword">修改密码
                    </el-menu-item>
                    <el-menu-item index="2-2" @click="logout">注销
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </header>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="旧密码" prop="old_pass">
                    <el-input type="password" v-model="ruleForm.old_pass" placeholder="请输入旧密码" auto-complete="off" required></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="new_pass">
                    <el-input type="password" v-model="ruleForm.new_pass" placeholder="请输入新密码"  auto-complete="off" required></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="check_pass">
                    <el-input type="password" v-model="ruleForm.check_pass" placeholder="请输入确认密码"  auto-complete="off" required></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="updatePasswordSubmit('ruleForm')">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component('mall-header', {
        template: '#mall-header',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.new_pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                user: null,
                navs: [],
                mall: null,
                dialogFormVisible: false,
                ruleForm: {
                    pass: '',
                    checkPass: '',
                },
                loading: false, //默认不在请求中
                services_url: '', //默认客服链接为'',question_url
                course_url:'',//教程中心链接
                question_url:'',//常见链接
                is_services_show: false, //默认没有客服链接

                btnLoading: false,
                rules: {
                    old_pass: [{
                            required: true,
                            message: '请输入旧密码',
                            trigger: 'blur'
                        },
                    ],
                    new_pass: [{
                            required: true,
                            message: '请输入新密码',
                            trigger: 'blur'
                        },

                    ],
                    check_pass: [{
                            required: true,
                            message: '请输入确认密码',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
                    ]
                },
                updatePasswordStatus: 1,
                courseMenu: {
                    children: [],
                },
                mch_id:0,
                activeIndex: "-1",
            };
        },
        created() {
            const cacheKey = '_MALL_MENUS';
            let data = localStorage.getItem(cacheKey);
            if (data) {
                try {
                    data = JSON.parse(data);
                    this.courseMenu = data.courseMenu;
                } catch (e) {
                    data = false;
                }
            }
            this.loadData();
            let headerData = localStorage.getItem('mall_header_data');
            if (headerData) {
                try {
                    headerData = JSON.parse(headerData);
                    this.user = headerData.user;
                    this.navs = headerData.navs;
                    this.mall = headerData.mall;
                    // this.updatePasswordStatus = headerData.update_password_status;
                    _aside.mall = headerData.mall;
                } catch (e) {
                    headerData = false;
                }
            }
        },
        methods: {
            // 0.1 跳转客服
            toServices() {
                window.location.href = this.services_url;
            },

            handleOpen() {},
            handleClose() {},
            getUser() {
                let self = this;
                self.btnLoading = true;
                request({
                    params: {
                        r: 'admin/index/user'
                    },
                    method: 'get',
                    data: {}
                }).then(e => {
                    self.btnLoading = false;
                    self.user = e.data.data.admin_info;
                }).catch(e => {
                    console.log(e);
                });
            },
            getMenus() {
                const cacheKey = '_ADMIN_MENUS';
                let data = localStorage.getItem(cacheKey);
                if (data) {
                    try {
                        data = JSON.parse(data);
                    } catch (e) {
                        data = false;
                    }
                }
                if (data && data.menus) {
                    this.menus = data.menus;
                    this.currentRouteInfo = data.currentRouteInfo;
                    this.setActiveMenu();
                }
            },
            setActiveMenu() {
                if (!this.activeMenuId) this.activeMenuId = localStorage.getItem('_ADMIN_LAST_ACTIVE_MENU_ID');
                if (!this.activeSubMenuId) this.activeSubMenuId = localStorage.getItem('_ADMIN_LAST_ACTIVE_SUB_MENU_ID');
                if (!this.activeMenuId || !this.activeSubMenuId) return;
                for (let i in this.menus) {
                    if (this.menus[i].id == this.activeMenuId) {
                        this.subMenus = this.menus[i].children;
                        for (let j in this.subMenus) {
                            if (this.subMenus[j].id == this.activeSubMenuId) this.subMenus[j].active = true;
                        }
                    }
                }
            },

            loadData() {
                let data = localStorage.getItem('mall_header_data');
                if (data) {
                    try {
                        data = JSON.parse(data);
                    } catch (e) {
                        data = false;
                    }
                }
                if (data && data.user && data.navs && data.mall){
                    this.user = data.user;
                    this.navs = data.navs;
                    this.mall = data.mall;
                    // this.updatePasswordStatus = data.update_password_status;
                    _aside.mall = data.mall;
                    if (data.services.length != 0) {
                        this.services_url = decodeURIComponent(data.services.web_service_url.value);
                        this.course_url = decodeURIComponent(data.services.course_url);
                        this.question_url = decodeURIComponent(data.services.question_url);
                        this.is_services_show = true;
                    }
                }else{
                    this.$request({
                        params: {r: 'store/client/index/header'},
                        method: 'get',
                    }).then(e => {
                        localStorage.setItem('mall_header_data', JSON.stringify(e.data.data));
                        this.user = e.data.data.user;
                        this.navs = e.data.data.navs;
                        this.mall = e.data.data.mall;
                        // this.updatePasswordStatus = e.data.data.update_password_status;
                        _aside.mall = e.data.data.mall;

                        var data = e.data.data;
                        if (data.services.length != 0) {
                            //console.log(data.services);
                            this.services_url = decodeURIComponent(data.services.web_service_url.value);
                            this.course_url = decodeURIComponent(data.services.course_url);
                            this.question_url = decodeURIComponent(data.services.question_url);
                            this.is_services_show = true;
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }
            },
            logout() {
                let self = this;
                this.$request({
                    params: {
                        r: 'store/client/auth/logout'
                    },
                    method: 'get',
                    data: {}
                }).then(e => {
                    // 在当前页面打开
                    localStorage.setItem('user_key', '');
                    localStorage.setItem('admin_menus', '');
                    localStorage.setItem('mall_header_data', '');
                    localStorage.setItem('mall_menus', '');
                    localStorage.setItem('mall_info', '');
                    localStorage.setItem('store_info', '');
                    window.location.href=e.data.data.url;

                }).catch(e => {
                    console.log(e);
                });
            },
            goBackToSystem() {
                if (_isWe7 == true) {
                    this.$navigate({
                        r: 'admin/account/info'
                    });
                } else { //返回商城列表
                    this.$navigate({
                        r: 'admin/mall/index'
                    });
                }
            },
            updatePassword() {
                this.dialogFormVisible = true;
            },
            updatePasswordSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        this.$request({
                            params: {
                                r: 'store/client/store/update-password'
                            },
                            method: 'post',
                            data: {
                                old_pass: this.ruleForm.old_pass,
                                new_pass: this.ruleForm.new_pass,
                                check_pass: this.ruleForm.check_pass,
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.dialogFormVisible = false;
                                this.$message.success(e.data.msg);
                                window.location.reload();
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            console.log(e);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            navigateClick(params) {
                this.clearMenuStorage();
                this.$navigate(params);
            },
            clearMenuStorage() {
                localStorage.removeItem('open_menu_1_id');
                localStorage.removeItem('open_menu_2_id');
                localStorage.removeItem('open_menu_3_id');
                localStorage.removeItem('unfold_id_1');
                localStorage.removeItem('unfold_id_2');
            },
            handleSelect(index){
                console.info(index);
                let that = this;
                setTimeout(() => {
                    that.activeIndex = -1;
                }, 1000);
            }
        },
    });
</script>