shishichen
/
qimall


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
							<?php

/**
 * @var \yii\web\View $this
 * @var string $content
 */

use common\helpers\ComponentHelper;

$isAdmin = false;
$isSuperAdmin = false;
$currentRoute = Yii::$app->controller->route;
?>
<?php $this->beginPage(); ?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <title><?= $this->title ? ($this->title . ' - ') : '' ?>商城管理</title>
    <link rel="stylesheet" href="/resources/unpkg/element-ui@2.15.14/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/resources/css/flex.css">
    <link rel="stylesheet" href="/resources/css/qimall.css?t=<?= Yii::$app->params['css_cache_time'] ?>"">
    <link rel=" stylesheet" href="/resources/css/iconfont.css?t=<?= Yii::$app->params['css_cache_time'] ?>"">

    <link href=" /../favicon.ico" mce_href="/../favicon.ico" rel="shortcut icon" />
    <script>
        let _layout = null;
        let _aside = null;
        const _csrf = '<?= Yii::$app->request->csrfToken ?>';
        const _scriptUrl = '<?= Yii::$app->request->scriptUrl ?>';
        const _baseUrl = '<?= \Yii::$app->request->hostInfo . \Yii::$app->request->baseUrl ?>';
        const _requestRoute = '<?= Yii::$app->requestedRoute ?>';
        let _isWe7 = 'false';
        let _isInd = 'true';
        let _isAdmin = <?= $isAdmin ? 'true' : 'false' ?>;
        let _isSuperAdmin = <?= $isSuperAdmin ? 'true' : 'false' ?>;
        let _diy_img_prefix = "<?= Yii::getAlias('@attachurl') ?>";
    </script>
    <script src="/resources/unpkg/jquery@3.3.1/dist/jquery.min.js"></script>
    <script src="/resources/unpkg/vue@2.6.10/dist/vue.js"></script>
    <script src="/resources/js/vueInit.js?t=<?= Yii::$app->params['js_cache_time'] ?>"></script>
    <script src="/resources/unpkg/element-ui@2.12.0/lib/index.js"></script>
    <script src="/resources/unpkg/qs@6.5.2/dist/qs.js"></script>
    <script src="/resources/unpkg/axios@0.18.0/dist/axios.min.js"></script>
    <script src="/resources/unpkg/clipboard@1.0.0/dist/clipboard.min.js"></script>
    <script src="/resources/unpkg/dom-to-image@2.6.0/dom-to-image.js"></script>
    <script src="/resources/unpkg/vue-line-clamp@1.2.4/dist/vue-line-clamp.umd.js"></script>
    <script src="/resources/js/common.js?t=<?= Yii::$app->params['js_cache_time'] ?>"></script>
    <script src="/resources/js/dayjs.min.js"></script>
    <script src="/resources/js/echarts.min.js"></script>
    <script type="text/javascript" src="/resources/js/china.js"></script>
    <script type="text/javascript" src="/resources/js/world.js"></script>
    <script type="text/javascript" src="/resources/js/bmap.min.js"></script>
    <script type="text/javascript" src="/resources/js/hotzone.js"></script>
    <script src="/resources/js/qrcode.min.js"></script>
    <style>
        #_header {
            /*background-color: #24303c;*/
            background-color: #313131;
            height: 60px;
        }

        .left-menu-1 {
            width: 96px;
            background-color: #313131
        }

        .menu-item {
            height: 45px;
            padding: 15px;
        }

        .aside-logo {
            height: 60px;
        }

        .left-menu {
            height: auto;
        }

        .menu-item-box.active {
            height: 100%;
        }

        .menu-item-1.active {
            color: #000000;
            background: #ffffff;
        }

        ::-webkit-scrollbar {
            width: 0px;
        }
    </style>
</head>
<?= ComponentHelper::loadComponentView('com-attachment') ?>
<?= ComponentHelper::loadComponentView('com-gallery') ?>
<?= ComponentHelper::loadComponentView('com-attachment') ?>
<?= ComponentHelper::loadComponentView('com-gallery') ?>
<?= ComponentHelper::loadComponentView('com-pick-link') ?>
<?= ComponentHelper::loadComponentView('com-upload') ?>

<body>
    <?php $this->beginBody() ?>
    <div id="_layout"></div>
    <div class="el-container">

        <div v-cloak id="_aside" flex="dir:left">
            <div @click="isShowMenu = true" v-if="!isShowMenu" class="is-show-menu-2">
                <i class="el-icon-s-unfold"></i>
            </div>
            <!-- 一级菜单 -->
            <div class="left-menu left-menu-1">
                <div class="aside-logo" flex="main:center cross:center" @click="">
                    <template>
                        <img class="icon" :src="store_info.logo_img ? store_info.logo_img : defaultStoreLogo" style="width: 38px;height: 38px;background-size: 100%;background-repeat: no-repeat">
                    </template>

                </div>
                <div @click="menuClick1(leftMenu)" v-for="leftMenu in leftMenus" :key="leftMenu.id" class="menu-item menu-item-1" :class="{'active': currentStoreCleintMenu.opened_1 == leftMenu.id || currentStoreCleintMenu.temporary_opened_1 == leftMenu.id ? true : false,
                 'hover':currentStoreCleintMenu.temporary_opened_1 == leftMenu.id && currentStoreCleintMenu.opened_1 != leftMenu.id ? true : false ,'menu-top': leftMenu.key == 'plugin-center' ? true : false }" flex="dir:left cross:center">
                    <i :class="leftMenu.icon" style="margin-right: 5px;"></i>
                    {{leftMenu.title}}
                </div>
            </div>
        </div>
        <div id="_layout_body" class="el-container is-vertical">
            <!-- 顶部工具栏 组件 -->
            <?= ComponentHelper::loadComponentView('header', __DIR__) ?>
            <div id="_header">
                <mall-header></mall-header>
            </div>
            <!-- style="height: 100%;" -->
            <div id="_main" flex ref="_main">
                <div v-cloak id="_aside_2" ref="asideTwo">
                    <!-- 二级菜单 -->
                    <transition name="slide">
                        <div v-if="!_aside.overview && currentStoreCleintMenu.list && currentStoreCleintMenu.list.children && currentStoreCleintMenu.list.children.length > 0 && _aside.isShowMenu" @mouseenter="_aside.mouseenterEvent2()" @mouseleave="_aside.mouseleaveEvent2()" class="left-menu left-menu-2" :class="{'left-menu-2-show': !_aside.isShowMenu}">
                            <!-- 展示收起按钮 -->
                            <div @click="_aside.isShowMenu = false" v-if="_aside.isShowMenu" class="is-show-menu-1">
                                <i class="el-icon-s-fold"></i>
                            </div>
                            <div class="menu-item menu-item-2-title" flex="dir:left cross:center">
                                {{currentStoreCleintMenu.list.title}}

                            </div>
                            <div v-for="menu_1 in currentStoreCleintMenu.list.children" :key="menu_1.id" flex="dir:top">
                                <div @click="_aside.menuClick2(menu_1)" class="menu-item menu-item-2" :class="{'active': currentStoreCleintMenu.opened_2 == menu_1.id ? true : false}" flex="dir:left cross:center">
                                    <div class="menu-item-box" flex="dir:left cross:center">
                                        <div class="icon-box">
                                            <div v-if="menu_1.children">
                                                <i v-if="currentStoreCleintMenu.unfold_id_1 == menu_1.id" class="el-icon-arrow-down"></i>
                                                <i v-else class="el-icon-arrow-right"></i>
                                            </div>
                                        </div>
                                        {{menu_1.title}}

                                    </div>
                                </div>

                                <!-- 三级菜单 -->
                                <div v-if="currentStoreCleintMenu.unfold_id_1 == menu_1.id && menu_1.children" v-for="menu_2 in menu_1.children" :key="menu_2.id" flex="dir:top">
                                    <div @click="_aside.menuClick3(menu_2)" class="menu-item menu-item-3" :class="{'active': currentStoreCleintMenu.opened_3 == menu_2.id ? true : false}" flex="dir:left cross:center">
                                        <div class="menu-item-box" flex="dir:left cross:center">
                                            <div class="icon-box">
                                                <div v-if="menu_2.children">
                                                    <i v-if="currentStoreCleintMenu.unfold_id_2 == menu_2.id" class="el-icon-arrow-down"></i>
                                                    <i v-else class="el-icon-arrow-right"></i>
                                                </div>
                                            </div>
                                            {{menu_2.title}}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>

                <!-- 主页面部分 -->
                <main class="el-main" style="background: #f3f3f3">
                    <?= $content ?>
                    <!-- <components :is='content'></components> -->
                </main>

            </div>
        </div>

    </div>
    <script>
        _layout = new Vue({
            el: '#_layout',
            created() {},
        });
        _aside = new Vue({
            el: '#_aside',
            data() {
                return {
                    mall: null,
                    leftMenuLoading: false,
                    leftMenus: {},
                    defaultRoute: null,
                    currentStoreCleintMenu: {
                        list: null,
                        opened_1: 0,
                        temporary_opened_1: 0,
                        opened_2: 0,
                        opened_3: 0,
                        unfold_id_1: 0,
                        unfold_id_2: 0,
                    },
                    currentRoute: "<?= $currentRoute ?>",
                    isShowMenu: true,
                    overview: false,
                    mall_info: {
                        logo: ""
                    },
                    store_info: {
                        logo_img: ""
                    },
                    defaultStoreLogo:_diy_img_prefix+'/static/addons/Store/default_store.png',
                    menuCacheKey:'store_client_menus'
                };
            },
            methods: {

                getMenus() {
                    let data = localStorage.getItem(this.menuCacheKey);
                    if (data) {
                        try {
                            data = JSON.parse(data);
                        } catch (e) {
                            data = false;
                        }
                    }
                    if (data && data.menus) {
                        this.leftMenus = data.menus;
                    } else {
                        this.leftMenuLoading = true;
                    }
                    this.currentStoreCleintMenu.opened_1 = localStorage.getItem('open_menu_1_id');
                    this.currentStoreCleintMenu.opened_2 = localStorage.getItem('open_menu_2_id');
                    this.currentStoreCleintMenu.opened_3 = localStorage.getItem('open_menu_3_id');
                    this.currentStoreCleintMenu.unfold_id_1 = localStorage.getItem('unfold_id_1');
                    this.currentStoreCleintMenu.unfold_id_2 = localStorage.getItem('unfold_id_2');
                    this.setMenus();

                    let self = this;
                    /**优化点：只在首页请求最新菜单其他页面不需要再次请求 */
                    if (this.leftMenuLoading == true) {
                        this.$request({
                            params: {
                                r: 'store/client/menu/list',
                                route: getQuery('r'),
                                catid: 2
                            },
                            method: 'get'
                        }).then(e => {
                            // 设置缓存
                            localStorage.setItem(this.menuCacheKey, JSON.stringify(e.data.data));
                            self.leftMenuLoading = false;
                            self.leftMenus = e.data.data.menus;
                            // 这里遍历侧边导航数组
                            self.leftMenus.forEach(function(item) {
                                if (item.is_active) {
                                    self.currentStoreCleintMenu.opened_1 = item.id;
                                    localStorage.setItem('open_menu_1_id', self.currentStoreCleintMenu.opened_1);
                                    if (item.children) {
                                        item.children.forEach(function(cItem1) {
                                            if (cItem1.is_active) {
                                                if (cItem1.children) {
                                                    self.currentStoreCleintMenu.unfold_id_1 = cItem1.id;
                                                    localStorage.setItem('unfold_id_1', self.currentStoreCleintMenu.unfold_id_1);
                                                    cItem1.children.forEach(function(cItem2) {
                                                        if (cItem2.is_active) {
                                                            if (cItem2.children) {
                                                                self.currentStoreCleintMenu.unfold_id_2 = cItem2.id;
                                                                localStorage.setItem('unfold_id_2', self.currentStoreCleintMenu.unfold_id_2);
                                                                cItem2.children.forEach(function(cItem3) {
                                                                    if (cItem3.is_active) {
                                                                        self.currentStoreCleintMenu.opened_2 = cItem3.id;
                                                                        localStorage.setItem('open_menu_2_id', self.currentStoreCleintMenu.opened_2);
                                                                    }
                                                                })
                                                            } else {
                                                                self.currentStoreCleintMenu.opened_2 = cItem2.id;
                                                                localStorage.setItem('open_menu_2_id', self.currentStoreCleintMenu.opened_2);
                                                            }
                                                        }
                                                    })
                                                } else {
                                                    self.currentStoreCleintMenu.opened_2 = cItem1.id;
                                                    localStorage.setItem('open_menu_2_id', self.currentStoreCleintMenu.opened_2);
                                                }
                                            }
                                        })
                                    }
                                }
                            });
                            self.setMenus();
                        }).catch(e => {
                            console.log(e);
                        });

                    }
                },

                openUrl(menu) {
                    localStorage.setItem('unfold_id_1', this.currentStoreCleintMenu.unfold_id_1);
                    localStorage.setItem('unfold_id_2', this.currentStoreCleintMenu.unfold_id_2);
                    if (menu) {
                        let args = {
                            r: menu.url,
                            sign:menu.mall_sign
                        };
                        if (menu.params) {
                            for (let i in menu.params) {
                                args[i] = menu.params[i];
                            }
                        }
                        navigateTo(args)
                    }
                },
                setMenus() {
                    let self = this;
                    if (!self.currentStoreCleintMenu.opened_2 && !self.currentStoreCleintMenu.unfold_id_1) {
                        self.currentStoreCleintMenu.opened_1 = 0;
                    }

                    if (self.leftMenus && self.leftMenus.length > 0) {
                        self.leftMenus.forEach(function(item) {
                            if (item.id == self.currentStoreCleintMenu.opened_1) {
                                self.currentStoreCleintMenu.list = item;
                            }
                        });
                    }
                },
                // 点击一级菜单
                menuClick1(menu) {
                    this.clearMenuStorage();
                    this.currentStoreCleintMenu.opened_1 = menu.id;
                    this.currentStoreCleintMenu.list = menu;
                    localStorage.setItem('open_menu_1_id', menu.id);
                    console.log(menu);

                    if (!menu.children) {
                        this.openUrl(menu);
                    } else {
                        if (menu.key == 'app-manage') {
                            return
                        }
                        if (menu.children[0].children && menu.children[0].children.length > 0) {
                            this.openUrl(menu.children[0].children[0]);
                            localStorage.setItem('unfold_id_1', menu.children[0].id);
                            localStorage.setItem('open_menu_3_id', menu.children[0].children[0].id);
                        } else {
                            this.openUrl(menu.children[0]);
                            localStorage.setItem('open_menu_2_id', menu.children[0].id);
                        }
                    }
                },
                // 点击二级菜单
                menuClick2(menu) {
                    if (menu.children) {
                        let unfoldId1 = null;
                        if (this.currentStoreCleintMenu.unfold_id_1 == menu.id) {
                            unfoldId1 = 0;
                        } else {
                            unfoldId1 = menu.id;
                        }
                        this.currentStoreCleintMenu.unfold_id_1 = unfoldId1;
                        localStorage.setItem('unfold_id_1', unfoldId1);
                    } else {
                        this.currentStoreCleintMenu.opened_2 = menu.id;
                        let temporary = this.currentStoreCleintMenu.temporary_opened_1;
                        if (temporary) {
                            localStorage.setItem('open_menu_1_id', temporary);
                        }
                        localStorage.setItem('open_menu_2_id', menu.id);
                        localStorage.setItem('open_menu_3_id', 0);
                        this.openUrl(menu);
                    }
                },
                // 点击三级菜单
                menuClick3(menu) {
                    if (menu.children) {
                        let unfoldId2 = null;
                        if (this.currentStoreCleintMenu.unfold_id_2 == menu.id) {
                            unfoldId2 = 0;
                        } else {
                            unfoldId2 = menu.id;
                        }
                        this.currentStoreCleintMenu.unfold_id_2 = unfoldId2;
                    } else {
                        this.currentStoreCleintMenu.opened_3 = menu.id;
                        let temporary = this.currentStoreCleintMenu.temporary_opened_1;
                        if (temporary) {
                            localStorage.setItem('open_menu_1_id', temporary);
                        }
                        localStorage.setItem('open_menu_2_id', 0);
                        localStorage.setItem('open_menu_3_id', menu.id);
                        this.openUrl(menu);
                    }
                },
                indexClick() {
                    navigateTo({
                        r: 'store/client/index/index'
                    })
                    this.clearMenuStorage();
                },
                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');
                },
                mouseenterEvent2() {
                    let self = this;
                    if (self.currentStoreCleintMenu.temporary_opened_1 > 0) {
                        self.leftMenus.forEach(function(item) {
                            if (self.currentStoreCleintMenu.temporary_opened_1 === item.id) {
                                self.currentStoreCleintMenu.list = item;
                            }
                        })
                    }
                },
                mouseleaveEvent2() {
                    let self = this;
                    self.currentStoreCleintMenu.temporary_opened_1 = 0;
                    self.leftMenus.forEach(function(item) {
                        if (item.id === self.currentStoreCleintMenu.opened_1) {
                            self.currentStoreCleintMenu.list = item;
                        }
                    });
                    self.currentStoreCleintMenu.unfold_id_1 = localStorage.getItem('unfold_id_1');
                    self.currentStoreCleintMenu.unfold_id_2 = localStorage.getItem('unfold_id_2');
                    if (this.currentStoreCleintMenu.opened_1 <= 0) {
                        this.currentStoreCleintMenu.list = {};
                    }
                },
                getBaseInfo() {
                    const cacheKey = 'store_info'; //缓存key
                    const MallInfoCacheKey = 'mall_info'; //缓存key
                    let data = localStorage.getItem(cacheKey);
                    if (!data) {
                        this.$request({
                            params: {
                                r: 'store/client/store/index',
                            },
                            method: 'post'
                        }).then(e => {
                            this.store_info = e.data.data.store_info;
                            this.mall_info = e.data.data.mall_info;
                            localStorage.setItem(cacheKey, JSON.stringify(e.data.data.store_info));
                            localStorage.setItem(MallInfoCacheKey, JSON.stringify(e.data.data.mall_info));
                        }).catch(e => {
                            console.log(e);
                        });
                    } else {
                        this.store_info = JSON.parse(data);
                        console.log(this.store);
                    }
                },
                initHeight() {
                    // 获取html可视区域高度：--这里需要按F5
                    let clientHeight = `${document.documentElement.clientHeight}`;
                    let mainHeight = clientHeight - 60;
                    // 动态设置元素高度：
                    var main = document.getElementById('_main'); //获取元素存储在变量中
                    main.style.cssText = 'height: ' + mainHeight + 'px !important';
                }
            },
            mounted: function() {
                this.initHeight()
                window.addEventListener('resize', () => {
                    this.initHeight()
                })
                this.getBaseInfo();
                if (this.currentRoute == 'store/client/index/index') {
                    localStorage.removeItem(this.menuCacheKey);
                }
                this.getMenus();

            },
            destroyed() {
                window.removeEventListener('resize', this.onResizEvent)
            }
        });
        _header = new Vue({
            el: '#_header'
        });

        //二级导航
        _main = new Vue({
            el: '#_aside_2',
            data() {
                return {
                    currentStoreCleintMenu: _aside.currentStoreCleintMenu,
                }
            },
        });
    </script>
    <?php $this->endBody() ?>
</body>
<?= ComponentHelper::loadComponentView('com-image') ?>
<?= ComponentHelper::loadComponentView('com-ellipsis') ?>

</html>
<?php $this->endPage() ?>