CZKJ.XKJ.Helper/src/pages/manage/index.vue

<template>
    <div class="page">
        <div class="tips" v-if="shopErr">
            当前店铺没有门店，请后台添加门店后重试
        </div>
        <div v-if="!shopErr">
            <div class="page__top" v-if="isAdmin">
                <div class="name">当前门店：</div>
                <div class="shop" v-if="!hideShop" @click="goShopSelect">
                    <div class="shop__name">
                        <!-- 最多6字 -->
                        {{ curShop.name ? curShop.name : "加载中..." }}
                        <i class="iconfont iconyoujiantou shop__arrow"></i>
                    </div>
                </div>
            </div>
            <div class="page__top" v-else>
                <div class="name">当前门店：</div>
                <div class="shop">
                    <div class="shop__name">
                        <!-- 最多6字 -->

                        {{ curShop.name ? curShop.name : "加载中..." }}
                        <!-- <i class="iconfont iconyoujiantou shop__arrow"></i> -->
                    </div>
                </div>
            </div>
            <ul class="menu" v-if="!menuLoading">
                <li
                    class="item"
                    v-for="item of menuList"
                    :key="item.id"
                    @click="jump(item.url)"
                >
                    <my-image class="img" :src="item.icon"></my-image>
                    <span class="text">{{ item.name }}</span>
                </li>
                <!-- <li class="item" @click="jump('/pages/manage/good-list')">
                    <my-image
                        class="img"
                        src="/static/icon/edit.png"
                    ></my-image>
                    <span class="text">编辑商品</span>
                </li>
                <li class="item" @click="jump('/pages/manage/classify')">
                    <my-image
                        class="img"
                        src="/static/icon/classify.png"
                    ></my-image>
                    <span class="text">分类管理</span>
                </li>
                <li class="item" @click="jump('/pages/manage/statistics/nav')">
                    <my-image
                        class="img"
                        src="/static/icon/statistics.png"
                    ></my-image>
                    <span class="text">数据统计</span>
                </li>
                <li class="item" @click="jump('/pages/manage/coupon/list')">
                    <my-image
                        class="img"
                        src="/static/icon/coupon.png"
                    ></my-image>
                    <span class="text">优惠券</span>
                </li>
                <li class="item" @click="jump('/pages/manage/mina/index')">
                    <my-image
                        class="img"
                        src="/static/icon/mina.png"
                    ></my-image>
                    <span class="text">小程序</span>
                </li>
                <li class="item" @click="jump('/pages/manage/poster/index')">
                    <my-image
                        class="img"
                        src="/static/icon/share.png"
                    ></my-image>
                    <span class="text">分享海报</span>
                </li> -->
            </ul>
        </div>

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

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

<script>
import MyImage from "../../components/image/index";

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

    // 数据
    data() {
        return {
            curShop: {},
            shopErr: false,
            menuList: [],
            menuLoading: true,
        };
    },

    onLoad() {
        this.getUserMenu();
    },
    async onShow() {
        if (this.isAdmin) {
            this.curShop = {
                name: this.user.storeName,
                id: this.user.storeId,
            };
            this.getShopList();
        } else {
            if (this.user.storeId) {
                this.curShop = {
                    name: this.user.storeName,
                    id: this.user.storeId,
                };
            } else {
                this.fn.showModal({
                    content: "当前用户无门店设置，请前往后台设置所属店铺",
                });
                // this.getShopList();
            }
        }
    },
    // 函数
    methods: {
        getUserMenu() {
            uni.showLoading({
                title: "加载中...",
            });
            this.menuLoading = true;
            this.api
                .get("/User/GetUserMenu", { userId: this.user.id })
                .then((res) => {
                    if (res.data.userMenu) {
                        let userMenu = res.data.userMenu.mobile;
                        let mobileMenu = res.data.menu.mobile;
                        if (userMenu && userMenu.length) {
                            this.initMenu(mobileMenu, userMenu);
                        }
                    }
                    this.menuLoading = false;
                    uni.hideLoading();
                });
        },

        initMenu(menu, userMenu) {
            let arr = [];
            for (let item of menu) {
                for (let userItem of userMenu) {
                    if (userItem.id === item.id && userItem.status === 1) {
                        let obj = item;
                        let childArr = [];
                        if (userItem.children && userItem.children.length) {
                            for (let userChild of userItem.children) {
                                for (let child of item.children) {
                                    if (
                                        userChild.id === child.id &&
                                        userChild.status === 1
                                    ) {
                                        childArr.push(child);
                                    }
                                }
                            }
                        }
                        obj.children = childArr;
                        arr.push(obj);
                    }
                }
            }
            this.$store.commit("user/update", {
                menuList: arr,
            });
            this.menuList = arr;
        },

        getShopList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Store/GetShopList").then((res) => {
                if (res.data.length === 0) {
                    this.shopErr = true;
                }
                this.shopList = res.data;
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (!this.curShop.id) {
                    this.curShop = res.data[0];
                    let user = { ...this.$store.state.user.user };
                    user.storeId = this.curShop.id;
                    user.storeName = this.curShop.name;
                    this.$store.commit("user/update", {
                        user,
                    });
                }
            });
        },

        goShopSelect() {
            this.router.push({
                path: "/pages/index/select",
                query: {
                    entry: "manage",
                },
            });
        },

        layout() {
            this.$store.commit("user/logout", null);
            this.router.replace({
                path: "/pages/index/login",
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
        isAdmin() {
            //店铺管理员  系统管理员
            if (
                this.user.roleId === "50c41c5d-b54c-43ed-b587-10dcb60e72e5" ||
                this.user.roleId === "75b71b24-25de-40ac-a866-c8f5555b8b92"
            ) {
                return true;
            } else {
                return false;
            }
        },
    },

    // 数据监听
    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: px(50);
    left: px(30);
    right: px(30);
    z-index: 10;
    color: #fff;
    background-color: #e92e25;
    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>