qimall/backend/views/layouts/header-mall.php

<?php

$mchId = Yii::$app->user->identity->mch_id;
$currentRoute = Yii::$app->controller->route;
?>
<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-submenu: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;
        background: #FFF !important;
    }

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

    .nav-name:hover {
        color: #303133 !important;
    }
    .scan-box {
        position: relative;
    }

    .scan-child {
        width: 180px;
        height: 190px;
        padding: 20px;
        background-color: #ffffff;
    }
    .scan-include {
        position: absolute;
        top: 75px;
        right: 275px;
    }
    .scan-horn {
        position: absolute;
        top: -20px;
        right: 120px;
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-bottom-color: #fff;
    }
    .scan-close {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
    }
    .scan-text {
        display: inline-block;
        padding: 0 20px;
    }
    .scan-box:hover {
        background: #FFF !important;
        color: #333 !important;
    }
    .scan-include {
        display: none;
        z-index: 100000000;
    }
    .addons-tips {
        position: absolute;
        top: 8px;
        left: -10px;
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        border-right-color: #fff;
    }
    .mall-header-div {
        position: relative;
    }
    .mall-addons-tips {
        position: absolute;
        top:520px;
        left:5px;
        width:155px;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #fff;
        z-index: 100000000;
        color: #303133;
        display: none;
    }

    .el-badge__content.is-fixed {
        top: 20px;
        right: 12px;
    }

    .top-addons {
        height: 60px;
        overflow: hidden;
        display: flex;   
    }

    .more-nav {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .top-addons-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .top-addons-drawer {
        width: 100%;
    }

    .top-addons-drawer .el-drawer {
        border-radius: 0 0 20px 20px;
    }
</style>
<template id="mall-header">
    <div class="mall-header-div">
        <header class="mall-header" flex="box:last">
            <div class="top-addons">
                <el-menu class="el-menu-demo top-addons-list" mode="horizontal" menu-trigger="click">
                    <el-menu-item class="nav-name" v-for="(nav, index) in navs" :key="index" :index="'' + index" @click="entryPlugin(nav)" >
                        <el-avatar shape="square" :size="25" fit="fit" :src="nav.cover"></el-avatar>
                        <span>{{ nav.title }}</span>
                    </el-menu-item>
                </el-menu>
                <div class="more-nav" v-if="navs.length > 0">
                    <el-button type="text" size="medium" icon="el-icon-arrow-down" @click="drawer = !drawer"></el-button>
                </div>
            </div>
            <el-drawer
                :visible.sync="drawer"
                direction="ttb"
                class="top-addons-drawer"
                size="aoto"
                :show-close="false"
                :with-header="false"
            >
                <el-menu class="el-menu-demo" mode="horizontal" menu-trigger="click">
                    <el-menu-item class="nav-name" v-for="(nav, index) in navs" :key="index" :index="'' + index" @click="entryPlugin(nav)" >
                        <el-avatar shape="square" :size="25" fit="fit" :src="nav.cover"></el-avatar>
                        <span>{{ nav.title }}</span>
                    </el-menu-item>
                </el-menu>
            </el-drawer>

            <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" @select="handleSelect" menu-trigger="click" text-color="#fff" background-color="#303133">
                <!-- <el-menu-item v-if="mch_id == 0" index="4" class="lianxikefu">
                   <a :href="services_url" target="_blank" class="lianxikefu2" style="color: #fff;text-decoration: none;height: 56px;line-height: 56px;">联系客服</a>
                </el-menu-item> -->
                <el-menu-item index="6" @click="navigateClick({r: 'mall/notice/index'})" class="scan-box">
                    <el-badge :value="unreadCount" :max="99" v-if="unreadCount > 0">
                        消息
                    </el-badge>
                    <span v-else>
                        消息
                    </span>
                </el-menu-item>
                <el-menu-item v-if="mch_id == 0" index="3" class="scan-box">
                    二维码
                </el-menu-item>
                <div class="scan-include">
                    <div class="scan-horn" @click="closeQrcode"></div>
                    <div class="scan-child" style="text-align: center;" id="scan-child">
                        <i class="el-icon-close scan-close" @click="closeQrcode"></i>
                        <el-image style="width: 140px; height: 140px;" :src="h5_url"></el-image>
                        <div style="color: #333333; line-height: 26px;">扫码浏览h5页面</div>
                    </div>
                </div>
                <el-menu-item v-if="mch_id == 0" index="4" class="lianxikefu">
                    <a :href="course_url ? course_url : 'javascript:void(0)'"  class="lianxikefu2" style="color: #fff;text-decoration: none;height: 56px;line-height: 56px;">教程中心</a>
                </el-menu-item>
                <el-menu-item v-if="mch_id == 0" index="5" class="lianxikefu">
<!--                    <a :href="question_url"  class="lianxikefu2" style="color: #fff;text-decoration: none;height: 56px;line-height: 56px;">常见问题</a>-->
                    <a @click="$navigate({r:'mall/optimize/list'})"  class="lianxikefu2" style="color: #fff;text-decoration: none;height: 56px;line-height: 56px;">优化建议</a>
                </el-menu-item>
                <!-- <el-menu-item v-if="mch_id == 0" @click="navigateClick({r: 'admin/cache/clean', '_layout': 'mall'})" index="3">缓存 -->
                </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-menu-item index="1">消息中心</el-menu-item>-->
                <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 index="1-2" @click="goBackToEditMobole">修改登录手机号</el-menu-item>
                    <el-menu-item v-if="(user.admin_type == 1 || user.admin_type == 2) && user.mch_id == 0" index="2-1" @click="goBackToSystem">返回系统
                    </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 v-if="user.admin_type == 3 || user.mch_id" 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 id="scan-qrcode-info" style="position: fixed;top: 10000000000px;">
            <!-- 二维码 -->
            <div id="scan-qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
        </div>

        <div class="mall-addons-tips">
            <div class="addons-tips"></div>
            更多应用点击这里！
            <i class="el-icon-close" style="cursor: pointer;" @click="closeTips"></i>
        </div>
    </div>
</template>
<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<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 {
                drawer: false,
                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: <?= $mchId ?>,

                activeIndex: "-1",
                h5_url: '',
                currentRoute: "<?= $currentRoute ?>",
                unreadCount: 0,
            };
        },
        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');
            // console.log(headerData)
            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;
                }
            }
            setTimeout(() => {
                this.getQrcodeUrl();
            }, 1000);

            this.getUnreadNoticeCount()
        },
        methods: {
            // 0.1 跳转客服
            toServices() {
                window.location.href = this.services_url;
            },
            getUnreadNoticeCount() {
                request({
                    params: {
                        r: 'mall/notice/unread-count'
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.unreadCount = e.data.data.unread_count
                    }
                })
            },
            showQrcode() {
                $(".scan-include").show();
            },
            closeQrcode() {
                $(".scan-include").hide();
                let headerData = JSON.parse(localStorage.getItem('mall_header_data'));
                let show_addons_tips = localStorage.getItem('show_addons_tips') ?? 0
                if (isEmpty(show_addons_tips) || show_addons_tips != headerData.user.id) {
                    if (this.currentRoute != 'mall/overview/index') return;
                    $(".mall-addons-tips").show();
                    localStorage.setItem('show_addons_tips', headerData.user.id)
                }
            },
            closeTips() {
                $(".mall-addons-tips").hide();
            },
            getQrcodeUrl() {
                let headerData = JSON.parse(localStorage.getItem('mall_header_data'));
                let main = headerData.services.h5_url;
                if (isEmpty(main)) return;
                let video_admin = localStorage.getItem("is_show_video");
                let sign = headerData.mall.sign;
                let url = main+'/#/?sign='+sign
                let urlObject = new URL(url);
                url = encodeURI(urlObject.href);
                let show_qrcode = localStorage.getItem('qrcode') ?? ''
                setTimeout(() => {
                    this.createQrcode(url,headerData.user);
                    if (isEmpty(show_qrcode) || (show_qrcode && show_qrcode != headerData.user.id)) {
                        if (!isEmpty(video_admin)) this.showQrcode();// 必须是已经观看过视频的才会自动打开
                    }
                }, 1500);
            },
            async createQrcode(url, user) {
                this.h5_url = await this.getQrCode(url)
                localStorage.setItem('qrcode', user.id)
            },
            // 生成二维码
            getQrCode(url) {
                let qrcodeInfo = document.getElementById("scan-qrcode-info");
                document.getElementById("scan-qrcode").remove(); //删除生成的二维码
                let addCodeDom = document.createElement("div")
                addCodeDom.setAttribute("id", "scan-qrcode");
                addCodeDom.setAttribute("style", "width:150px; height:150px;");
                qrcodeInfo.appendChild(addCodeDom) //添加标签

                let qrCodeDom = document.getElementById("scan-qrcode")
                var qrcode = new QRCode(qrCodeDom, {
                    width: 140,
                    height: 140
                });

                qrcode.makeCode(url);
                // 获取二维码生成的图片信息
                let src = "";
                return new Promise((req, rej) => {
                    setTimeout(() => {
                        src = qrCodeDom.getElementsByTagName("img")[0].src;
                        req(src)
                    }, 200);
                })
            },
            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 = data.services.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: 'mall/overview/mall-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: 'admin/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', '');
                    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'
                    });
                }
            },
            goBackToEditMobole() {
                this.$navigate({
                    r: 'mall/set-mobile/index'
                });
            },
            
            updatePassword() {
                this.dialogFormVisible = true;
            },
            updatePasswordSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        this.$request({
                            params: {
                                r: 'mall/overview/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;
                if (index == 3) this.showQrcode();
                // setTimeout(() => {
                //     that.activeIndex = "-1";
                // }, 1000);
            },
            entryPlugin(addon) {
                var name = addon.name.replace(/([A-Z])/g,"-$1").toLowerCase();
                name = name.substr(1, name.length);
                if (addon.url) {
                    navigateTo({r: addon.url});
                } else {
                    navigateTo({r: name + '/default/index'});
                }
            },
        },
    });
</script>