Переглянути джерело

Merge branch 'feature/yc-switch_enterprise-1207'

# Conflicts:
#	nuxt.config.js
yangc 8 роки тому
батько
коміт
b179af9e9a
1 змінених файлів з 115 додано та 35 видалено
  1. 115 35
      components/default/Header.vue

+ 115 - 35
components/default/Header.vue

@@ -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 }}&nbsp;|&nbsp;
                 <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>&nbsp;{{ 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>&nbsp;{{ 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;
+                  }
                 }
               }
             }