<template>
    <div class="page tabbar-page">
        <manage-nav :shopId="shopId" :title="'菜单'"></manage-nav>
        <div>
            <ul class="menu">
                <li class="item" @click="jump('/pages/manage/user/index')">
                    <my-image
                        class="img"
                        src="/static/icon/user.png"
                    ></my-image>
                    <span class="text">账号管理</span>
                </li>
                <li class="item" @click="jump('/pages/yx/classify')">
                    <my-image
                        class="img"
                        src="/static/icon/classify.png"
                    ></my-image>
                    <span class="text">分类管理</span>
                </li>
                <li class="item" @click="jump('/pages/yx/brand')">
                    <my-image
                        class="img"
                        src="/static/icon/youxuan.png"
                    ></my-image>
                    <span class="text">活动管理</span>
                </li>
                <li class="item">
                    <my-image
                        class="img"
                        src="/static/icon/cashier.png"
                    ></my-image>
                    <span class="text">资金结算</span>
                </li>
                <li class="item">
                    <my-image
                        class="img"
                        src="/static/icon/bd.png"
                    ></my-image>
                    <span class="text">售后处理</span>
                </li>
                <!-- <li class="item" @click="jump('/pages/yx/order/index')">
                    <my-image
                        class="img"
                        src="/static/icon/cashier-list.png"
                    ></my-image>
                    <span class="text">订单处理</span>
                </li> -->
            </ul>
        </div>

        <button class="btn" @click="layout">退出登录</button>

        <div class="ver">0.0.1</div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import ManageNav from "../../components/layout/manage-nav";

export default {
    name: "",
    components: { MyImage, ManageNav },

    // 数据
    data() {
        return {
            menuList: [],
            shopId:'',
        };
    },

    onLoad() {
        // this.getUserMenu();
    },
    async onShow() {
    },
    // 函数
    methods: {
        layout() {
            this.$store.commit("user/logout", null);
            this.router.push({
                path: "/pages/index/login",
            });
        },
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
    }
    .name {
        font-size: px(36);
        color: #999;
        flex-shrink: 0;
        margin-right: px(20);
    }
}
.shop {
    display: flex;
    color: #666;
    font-size: px(36);
    flex-shrink: 0;
    margin-right: px(30);
    width: 100%;
    &__logo {
        margin-right: px(20);
        width: px(80);
        height: px(80);
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    &__name {
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
    &__arrow {
        margin-left: px(10);
        transform: rotate(90deg);
    }
}
.menu {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #f1f1f1;
    .item {
        width: 33.333333%;
        height: px(330);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: px(44);
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
        /deep/ img {
            width: px(90);
            height: px(90);
            margin-bottom: px(30);
        }
        &:nth-child(3n-1),
        &:nth-child(3n) {
            border-left: 1px solid #f1f1f1;
        }
    }
}
.ver {
    margin-top: px(30);
    font-size: px(30);
    text-align: center;
    color: #aaa;
}
.btn {
    position: fixed;
    bottom: 0.6rem;
    left: px(30);
    right: px(30);
    z-index: 10;
    color: #333;
    background-color: #f3f3f3;
    font-size: px(44);
}
.tips {
    background-color: #fef9f3;
    font-size: px(40);
    padding: 0 px(40);
    height: px(100);
    line-height: px(100);
    color: #ec883d;
}
</style>