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

<template>
    <div class="page tabbar-page">
        <manage-nav :shopId="shopId" :title="'菜单'"></manage-nav>
        <div class="tips" v-if="shopErr">
            当前店铺没有门店，请后台添加门店后重试
        </div>
        <div v-if="!shopErr">
            <block v-if="showShop && showMenu">
                <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>
            </block>
            <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"
                    v-if="storeConfig.enableYouXuan"
                    @click="jump('/pages/youxuan/nav')"
                >
                    <my-image
                        class="img"
                        src="/static/icon/bd.png"
                    ></my-image>
                    <span class="text">直邮管理</span>
                </li>
                <li
                    class="item"
                    v-if="user.bdType ===1"
                    @click="jump('/pages/bd/nav')"
                >
                    <my-image
                        class="img"
                        src="/static/icon/youxuan.png"
                    ></my-image>
                    <span class="text">BD管理</span>
                </li>
                <!-- <block v-if="storeStatus === 0 || storeStatus === 1">
                        <li
                            class="item"
                            @click="jump('/pages/manage/shop/index')"
                        >
                            <my-image
                                class="img"
                                src="/static/icon/shop.png"
                            ></my-image>
                            <span class="text">店铺设置</span>
                        </li>
                    </block>
                  
                    <li class="item" @click="jump('/pages/wallet/index')">
                        <my-image
                            class="img"
                            src="/static/icon/money.png"
                        ></my-image>
                        <span class="text">我的钱包</span>
                    </li>  -->
                <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>
            </ul>
        </div>

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

        <div class="ver">0.5.61</div>
        <wyg-bottom-tab
            ref="tabbar"
            :tabIndex="2"
            :tabListParent="tabList"
        ></wyg-bottom-tab>
    </div>
</template>

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

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

    // 数据
    data() {
        return {
            curShop: {},
            shopErr: false,
            menuList: [],
            menuLoading: true,
            loading: false,
            showShop: true,
            showMenu: true,
            storeStatus: -1,
            shopId: null,
            storeConfig: {},
        };
    },

    onLoad() {
        // this.getUserMenu();
    },
    async onShow() {
        this.$refs.tabbar.setIndex(2);
        this.showShop = true;
        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();
                this.showShop = false;
            }
        }
        // 判断页面显示
        // if (this.user.roleId && this.user.bundleId !== 0) {
        //     this.showMenu = true;
        // } else {
        //     this.showMenu = false;
        // }
        this.getUserMenu();
        this.checkStatus();
        this.api
            .get(
                "/Store/GetStoreConfig",
                { id: this.user.storeId },
                { pass: true }
            )
            .then((infoRes) => {
                this.storeConfig = infoRes.data;
            });
    },
    // 函数
    methods: {
        checkStatus() {
            /* 
                闭店中 = 0,  // 已开通，店铺未营业
                营业中 = 1,  // 店铺营业中
                待审核 = 2,  // 通过审核后，状态改为闭店中
                待开通 = 3,  // 通过审核，等待开通
                未通过审核 = 4  // 未通过审核
            */
            this.api.get("/Shop/checkStatus").then((res) => {
                if (res.data === 1 || res.data === 0) {
                    this.api
                        .get("/Shop/GetInfo", {}, { pass: true })
                        .then((infoRes) => {
                            this.shopId = infoRes.data.id;
                        });
                }
            });
        },
        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,
            });
            let arr2 = [];
            for (let item of arr) {
                if (item.id !== "mobile_setting") {
                    arr2.push(item);
                }
            }
            this.menuList = arr2;
        },

        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.push({
                path: "/pages/index/login",
                isTabBar: true,
            });
        },
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
        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: 3.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>