xiejiahao
4 years ago
5 changed files with 387 additions and 87 deletions
-
17src/components/ModulesMenu/allMenus.vue
-
61src/components/ModulesMenu/modulesOfRouter.js
-
15src/views/layout/components/Navbar.vue
-
271src/views/layout/components/UserInfo.vue
-
2src/views/order/enterprise.vue
@ -0,0 +1,271 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dropdown class="avatar-container right-menu-item hidden-sm-and-down" trigger="click" @command="handleCommand"> |
||||
|
<div class="avatar-wrapper"> |
||||
|
<img v-if="userInfo && userInfo.headimgurl && userInfo.headimgurl!=null && userInfo.headimgurl!=='' " class="user-avatar" :src="userInfo.headimgurl"> |
||||
|
<img v-else class="user-avatar" src="../../../assets/image/user_img.gif"> |
||||
|
<span class="username">{{getTimeStatus}}，<b>{{userInfo.username}}</b></span> |
||||
|
<i class="el-icon-caret-bottom"></i> |
||||
|
</div> |
||||
|
<el-dropdown-menu slot="dropdown" style="width:360px;"> |
||||
|
<div class="dropdown"> |
||||
|
<div class="topBox"> |
||||
|
<div class="topBox_logo"> |
||||
|
<img src="../../../assets/image/qqlogo_yuan.png" alt=""> |
||||
|
</div> |
||||
|
<div class="topBox_desc"> |
||||
|
<p class="topBox_branch">{{userInfo.branchName}}</p> |
||||
|
<div class="topBox_version"> |
||||
|
<span>当前版本 / <b class="version">免费基础版</b></span> |
||||
|
<span class="level"> |
||||
|
<i></i> |
||||
|
升级 |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="topBox_num"> |
||||
|
<span>账号数量（1 / 25）个</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="middleBox"> |
||||
|
<p class="middleBox_username">我的用户名：<b>{{userInfo.username}}</b> </p> |
||||
|
<div class="middleBox_role"> |
||||
|
<span>我的角色：</span> |
||||
|
<span class="middleBox_role_name" v-for="role in roles" :key="role.roleid"> |
||||
|
<a v-if="role.roleid.indexOf('SCOPE')< 0 "> {{role.rolename}} , </a> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottomBox2"> |
||||
|
<p>团队管理</p> |
||||
|
<p @click="logout">退出登录</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- <el-dropdown-item divided> |
||||
|
<div style="height:250px;"> |
||||
|
<el-row v-for="(item ,index) in deptPostsTree" :label="item.deptName" :key="index"> |
||||
|
部门：{{item.deptName}} |
||||
|
<br> |
||||
|
岗位： |
||||
|
|
||||
|
<div v-if="item.children!=null && item.children.length>0" style="padding-left:40px;"> |
||||
|
<el-row v-for="(post,idx) in item.children" :key="idx"> |
||||
|
{{post.postName}} |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-dropdown-item> --> |
||||
|
|
||||
|
<!-- <el-dropdown-item v-if="false" divided> |
||||
|
<div style=" overflow-x:auto; height:250px;"> |
||||
|
商户及门店： <el-form> |
||||
|
<el-form-item label-width="300" v-for="item in shopLocationsTree" :label="item.shopName" :key="item.shopId"> |
||||
|
<el-row v-for="location in item.locations" :key="location.locationId"> |
||||
|
<el-col :span="24"><el-tag>{{location.locationName}}</el-tag><i v-if="location.locationId==userInfo.locationId" class="el-icon-check"></i> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-if="item.locations==null || item.locations.length<=0"> |
||||
|
<el-col :span="24"><el-tag> 无门店或者我不是该商户的门店管理员</el-tag> </el-col> |
||||
|
</el-row> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</el-dropdown-item> --> |
||||
|
|
||||
|
<!-- <el-dropdown-item divided> |
||||
|
<div style=" overflow-x:auto; height:150px;"> |
||||
|
我拥有的角色： |
||||
|
<el-row style="padding-left:40px;" v-for="role in roles" :key="role.roleid"> |
||||
|
<span v-if="role.roleid.indexOf('SCOPE')<0">{{role.rolename}}</span> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-dropdown-item> --> |
||||
|
|
||||
|
|
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import dayjs from 'dayjs' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'userInfo', |
||||
|
'roles', |
||||
|
]), |
||||
|
getTimeStatus() { |
||||
|
let hour = dayjs().hour(); |
||||
|
let msg = '早上好'; |
||||
|
if(hour >= 13 || hour <= 18) { |
||||
|
msg = '下午好'; |
||||
|
}else if (hour >= 19 || hour <= 24){ |
||||
|
msg = '晚上好'; |
||||
|
} |
||||
|
return msg; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleCommand(command){ |
||||
|
if(command=='updateUserInfo'){ |
||||
|
this.$router.push({path:'/updateUserInfo'}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
logout() { |
||||
|
this.$store.dispatch('LogOut').then(() => { |
||||
|
location.replace('/'+process.env.CONTEXT+'/'+process.env.VERSION+'/'); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.avatar-container { |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.avatar-wrapper { |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
.user-avatar { |
||||
|
height: 34px; |
||||
|
width: 34px; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.username{ |
||||
|
color: #7D7D7D; |
||||
|
font-size: 18px; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
.el-icon-caret-bottom { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dropdown { |
||||
|
padding: 0 20px 0 20px; |
||||
|
.topBox { |
||||
|
height: 100px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
border-bottom: 1px solid #f6f6f6; |
||||
|
.topBox_logo { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
img { |
||||
|
width: 52px; |
||||
|
height: 52px; |
||||
|
} |
||||
|
} |
||||
|
.topBox_desc { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin-left: 20px; |
||||
|
width: 100%; |
||||
|
justify-content: center; |
||||
|
.topBox_branch { |
||||
|
font-size: 18px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
.topBox_version { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-bottom: 8px; |
||||
|
font-size: 14px; |
||||
|
.version { |
||||
|
display: inline-block; |
||||
|
font-weight: normal; |
||||
|
color: rgb(69, 196, 186); |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
.level { |
||||
|
background: rgb(64, 158, 255); |
||||
|
margin-left: 10px; |
||||
|
padding: 4px 11px 4px 8px; |
||||
|
border-radius: 2px; |
||||
|
color: #fff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.topBox_num { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.middleBox { |
||||
|
min-height: 60px; |
||||
|
border-bottom: 1px solid #f6f6f6; |
||||
|
padding: 12px 0; |
||||
|
.middleBox_username { |
||||
|
margin-bottom: 6px; |
||||
|
b { |
||||
|
font-weight: normal; |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
.middleBox_role { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
line-height: 28px; |
||||
|
.middleBox_role_name { |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottomBox2 { |
||||
|
height: 120px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
p { |
||||
|
display: flex; |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
text-align: left; |
||||
|
align-items: center; |
||||
|
} |
||||
|
p:hover { |
||||
|
background: rgb(243, 243, 243); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue