management/src/layout/components/Sidebar/Logo.vue

<template>
  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
    <transition name="sidebarLogoFade">
      <div v-if="collapse" key="collapse" class="sidebar-logo-link">
        <img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
        <h1 v-else class="sidebar-title">{{ shopName }} </h1>
        <i class="el-icon-arrow-down icon"></i>
      </div>
      <div v-else key="expand" class="sidebar-logo-link">
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="logo || Avatar" class="sidebar-logo">
            <span class="shop_name">{{ shopName.length>8?shopName.substring(0,7)+'...' :shopName.substring(0,7) }}</span>
            <i class="el-icon-arrow-down icon"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <!-- <span style="display:block;" @click="show = true">
              <el-dropdown-item>
                布局设置
              </el-dropdown-item>
            </span> 
              <router-link to="/shop/shop/shop_configuration">
                <el-dropdown-item>
                  店铺配置
                </el-dropdown-item>
              </router-link>-->
            <span v-for="(item, index) in list" :key="index">
              <el-dropdown-item  :disabled="item.tubeType==0">
                <div style="display: flex;align-items: center;" @click="switchshopName(item.id)">
                  <i class="el-icon-check" style="color: #46a6ff;" v-if="item.id == shopId"></i>
                  <div v-if="mainId == item.id" style="line-height: 20px;text-align: center;">(主)</div>
                  {{ item.shopName }}
                </div>
              </el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </el-dropdown>


        <!-- <img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
        <h1 class="sidebar-title">{{ shopName }} </h1>
        <i class="el-icon-arrow-down icon"></i>  -->
      </div>
    </transition>
  </div>
</template>

<script>
import Avatar from '@/assets/images/avatar.png'
import { getqueryChildShop, changChildShop } from '@/api/login.js'
import { setToken } from "@/utils/auth";

export default {
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      shopName: localStorage.getItem('shopName'),
      Avatar,
      logo: localStorage.getItem('logo'),
      list: [],
      mainId: localStorage.getItem("mainId"),
      shopId: localStorage.getItem("shopId"),
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const res = await getqueryChildShop({
        id: this.mainId
      })
      this.list = res
    },
    async switchshopName(id) {
      const res = await changChildShop({
        id
      })
      localStorage.setItem("shopId", res.shopId);
      localStorage.setItem("logo", res.logo);
      localStorage.setItem("loginType", res.loginType);
      localStorage.setItem("mainId", res.mainId);
      localStorage.setItem("shopName", res.shopName);
      setToken(res.token);
      location.reload();
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

h1 {
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: 14px;
      margin-left: 6px;
    }

    & .sidebar-logo {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 6px;
    }

    & .sidebar-title {
      color: #333;
      font-size: 14px;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
    }

    .sidebar-logo {
      width: 24px;
      height: 24px;
    }
  }
}

.avatar-container {
  display: flex;
  align-items: center;

  .avatar-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .el-icon-caret-bottom {
      font-size: 12px;
      margin-left: 6px;
    }

    .shop_name {
      font-size: 16px;
      // margin-left: 10px;
    }
  }
}
</style>