|
|
@@ -10,28 +10,35 @@
|
|
|
</div>
|
|
|
<div class="navbar-right">
|
|
|
<template v-if="user.logged">
|
|
|
- <div class="item-wrap dropdown" @mouseleave="showEnterprises = false">
|
|
|
+ <div class="item-wrap dropdown">
|
|
|
<div class="item dropdown-toggle">
|
|
|
欢迎您,{{ user.data.userName }} |
|
|
|
<a @click="logout()">[退出]</a>
|
|
|
<span>{{enterprise.enName}}</span>
|
|
|
</div>
|
|
|
- <ul class="dropdown-menu">
|
|
|
- <li class="menu-item-first">
|
|
|
- <span class="member-text" :title="enterprise.enName"><i class="fa fa-map-marker"></i> {{ enterprise.uu?enterprise.enName: user.data.userName + '(个人账户)' }}</span>
|
|
|
- <a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises && user.data.enterprises.length > 0">
|
|
|
+ <div class="dropdown-menu">
|
|
|
+ <div class="menu-item-first">
|
|
|
+ <span>您可切换至以下账户:</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <!-- <li class="menu-item-first">
|
|
|
+ <span class="member-text" :title="enterprise.enName"><i class="fa fa-map-marker"></i> {{ enterprise.uu?enterprise.enName: user.data.userName + '(个人账户)' }}</span>
|
|
|
+ <a class="pull-right" @click="toggleEnterprises()" v-if="user.data.enterprises && user.data.enterprises.length > 0">
|
|
|
{{ showEnterprises ? '取消' : '切换' }}
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li class="menu-item"
|
|
|
- v-for="en in user.data.enterprises"
|
|
|
- v-if="showEnterprises && en.uu!=enterprise.uu">
|
|
|
- <a @click="switchEnterprise(en)" :title="en.enName">{{ en.enName }}</a>
|
|
|
- </li>
|
|
|
- <li class="menu-item" v-if="showEnterprises && enterprise.uu">
|
|
|
- <a @click="switchEnterprise({uu: 0})"><span v-text="user.data.userName"></span>(个人账户)</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </a>
|
|
|
+ <span>您可切换至以下账户:</span>
|
|
|
+ <input type="text" placeholder="请输入公司名称" v-model="keyword"><span class="search-enterprise" @click="searchEnterprise()">搜索</span>
|
|
|
+ </li>-->
|
|
|
+ <li class="menu-item"
|
|
|
+ v-for="en in sortEnterprises"
|
|
|
+ v-if="en.uu!=enterprise.uu">
|
|
|
+ <a @click="switchEnterprise(en)" :title="en.enName">{{ en.enName }}</a>
|
|
|
+ </li>
|
|
|
+ <li class="menu-item" v-if="enterprise.uu">
|
|
|
+ <a @click="switchEnterprise({uu: 0})"><span v-text="user.data.userName"></span>(个人账户)</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
|
|
|
<!--<nuxt-link class="item" to="/user">买家中心</nuxt-link>
|
|
|
@@ -58,7 +65,11 @@
|
|
|
name: 'header',
|
|
|
data () {
|
|
|
return {
|
|
|
- showEnterprises: false
|
|
|
+// showEnterprises: false
|
|
|
+// searchEnterpriseArr: [],
|
|
|
+// keyword: '',
|
|
|
+// isSearching: false
|
|
|
+ showEnterpriseToggle: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -73,6 +84,15 @@
|
|
|
return {enName: '个人账户'}
|
|
|
}
|
|
|
},
|
|
|
+ sortEnterprises () {
|
|
|
+ let ens = this.user.data.enterprises
|
|
|
+ if (ens && ens.length) {
|
|
|
+ ens.sort(function (a, b) {
|
|
|
+ return b.lastLoginTime - a.lastLoginTime
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return ens
|
|
|
+ },
|
|
|
url () {
|
|
|
return this.$store.state.option.url
|
|
|
}
|
|
|
@@ -100,12 +120,13 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- toggleEnterprises () {
|
|
|
- this.showEnterprises = !this.showEnterprises
|
|
|
- },
|
|
|
+// toggleEnterprises () {
|
|
|
+// this.showEnterprises = !this.showEnterprises
|
|
|
+// },
|
|
|
// 切换当前企业
|
|
|
switchEnterprise (en) {
|
|
|
- this.toggleEnterprises()
|
|
|
+// this.toggleEnterprises()
|
|
|
+ this.showEnterpriseToggle = false
|
|
|
this.$http.get(`/user/authentication/${en.uu}`).then(() => {
|
|
|
this.$store.dispatch('loadUserInfo')
|
|
|
// let href = window.location.href
|
|
|
@@ -142,9 +163,21 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- beforeMount () {
|
|
|
- // this.$store.dispatch('loadUserInfo')
|
|
|
+// searchEnterprise () {
|
|
|
+// let key = this.keyword
|
|
|
+// let enterprise = this.user.data.enterprises
|
|
|
+// this.isSearching = true
|
|
|
+// this.searchEnterpriseArr = []
|
|
|
+// if (this.keyword === '') {
|
|
|
+// this.isSearching = false
|
|
|
+// } else {
|
|
|
+// for (let i = 0; i < enterprise.length; i++) {
|
|
|
+// if (enterprise[i].enName.indexOf(key) !== -1) {
|
|
|
+// this.searchEnterpriseArr.push(enterprise[i])
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -239,9 +272,11 @@
|
|
|
}
|
|
|
|
|
|
.dropdown {
|
|
|
-
|
|
|
.dropdown-toggle {
|
|
|
line-height: $nav-height;
|
|
|
+ border-left: 1px solid $black-light;
|
|
|
+ border-right: 1px solid $black-light;
|
|
|
+ height: 35px;
|
|
|
a {
|
|
|
margin-left: 15px;
|
|
|
float: right;
|
|
|
@@ -249,6 +284,10 @@
|
|
|
color: $red !important;
|
|
|
}
|
|
|
}
|
|
|
+ &:hover {
|
|
|
+ border-left: 1px solid #999;
|
|
|
+ border-right: 1px solid #999;
|
|
|
+ }
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
max-width: 190px;
|
|
|
@@ -258,25 +297,66 @@
|
|
|
float: right;
|
|
|
}
|
|
|
}
|
|
|
+ .menu-item-first {
|
|
|
+ background: #eee;
|
|
|
+ padding: 0 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ >span:nth-child(1) {
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 174px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 35px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #5078cb;
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ .search-enterprise {
|
|
|
+ display: inline-block;
|
|
|
+ width: 36px;
|
|
|
+ height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ background: #5078cb;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.dropdown-menu {
|
|
|
- min-width: 220px;
|
|
|
- margin-left: -1px;
|
|
|
- border: $border;
|
|
|
- border-top: none;
|
|
|
- padding: 1em;
|
|
|
+ padding: 0 6px 13px;
|
|
|
margin:0;
|
|
|
- border: none;
|
|
|
border-radius: 0;
|
|
|
+ right: unset;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ border-top: none;
|
|
|
+ -webkit-box-shadow: none;
|
|
|
+ -moz-box-shadow: none;
|
|
|
+ box-shadow: none;
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ background: #f6f6f6;
|
|
|
+ }
|
|
|
|
|
|
- .menu-item-first {
|
|
|
- margin-bottom: 10px;
|
|
|
+ ul {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #f6f6f6;
|
|
|
}
|
|
|
|
|
|
.menu-item {
|
|
|
- line-height: 30px;
|
|
|
+ padding: 0 12px;
|
|
|
a {
|
|
|
- color: $accent;
|
|
|
+ color: #333;
|
|
|
+ max-width: 300px;
|
|
|
+ line-height: 30px;
|
|
|
+ &:hover {
|
|
|
+ color: #5078cb;
|
|
|
+ text-decoration: none!important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|