user-info.vue 2.16 KB
<template>
    <Row class="layout-header">
        <Col :span="12" class="brand-title">
            <i class="fa fa-bars" aria-hidden="true" @click="$emit('menu-trigger')"></i>
            {{userInfo.name}}
        </Col>
        <Col :span="12" class="shop-info">
            <span class="name">{{userInfo.currentShop.shopName}}</span>
            <span>|</span>
            <Dropdown @on-click="switchShop" trigger="click">
                <a class="swtich-shop" href="javascript:void(0)">
                    [切换店铺]
                </a>
                <Dropdown-menu slot="list">
                    <Dropdown-item v-for="shop in userInfo.shops" :key="shop.id" :name="shop.id" :selected="userInfo.currentShop.id === shop.id">{{shop.shopName}}</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
            <a class="logout" href="javascript:;" @click="logout">[退出]</a>
        </Col>
    </Row>
</template>

<script>
import Vue from 'vue';

export default {
    name: 'UserInfo',
    data() {
        return {
            userInfo: this.$user
        };
    },
    methods: {
        logout() {
            Vue.logout();
        },
        switchShop(id) {
            if (this.userInfo.currentShop.id !== id) {
                this.userInfo.currentShop = this.userInfo.shops.find(shop => shop.id === id);
                Vue.switchShop(id);
                this.$emit('shop-change', this.userInfo.currentShop);
            }
        }
    }
};
</script>

<style lang="scss">
.layout-header {
    height: 60px !important;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    font-size: 14px;
    line-height: 20px;
    padding: 20px;

    .fa-bars {
        font-size: 20px;
        vertical-align: middle;
        margin-right: 10px;
        cursor: pointer;
    }
    
    .shop-info {
        text-align: right;
        padding-right: 20px;

        .name {
            margin-right: 5px;
        }

        .swtich-shop {
            margin-left: 5px;
            font-size: 12px;
            color: #444;
        }

        .logout {
            color: #F44545;
            font-size: 12px;
            margin-left: 5px;
        }
    }
}
</style>