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

<template>
    <div class="page">
        <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">
            <!-- <li class="item">
                <my-image
                    class="img"
                    src="/static/tabBar/icon_green_1.png"
                ></my-image>
                <span class="text">订单管理</span>
            </li> -->
            <li class="item" @click="jump('/pages/manage/add-good-form')">
                <my-image class="img" src="/static/icon/add.png"></my-image>
                <span class="text">新增商品</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>
        </ul>

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

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

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

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

    // 数据
    data() {
        return {
            curShop: {},
        };
    },

    onLoad() {},
    async onShow() {
        console.log(this.user);
        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: {
        getShopList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Store/GetShopList").then((res) => {
                this.shopList = res.data;
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (this.curShop.id) {
                } else {
                    this.curShop = res.data[0];
                    if (!this.curShop.id) {
                        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);
}
</style>