You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/layouts/module/header/HeaderInfoBar.vue

240 lines
6.2 KiB

<template>
<div class="info-bar-header">
<div
class="info-bar-header-wrap layout-center flex flex-between flex-middle"
>
<div class="header-wrap__logo">马士兵严选欢迎你</div>
<div class="header-wrap__content flex flex-middle">
<div class="header-wrap-content__login">
<!-- 已登录 -->
<el-dropdown
v-if="token"
@visible-change="menuVisible = $event"
@command="handleCommandClick"
>
<div
class="wrap-content-login__info flex flex-middle flex-center"
:class="{ 'wrap-content-login__info--hover': menuVisible }"
>
<span>你好{{ userInfo.nickname }}</span>
<img class="content-login-info__logo" :src="menuIcon" />
</div>
<el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
<div class="menu-item__wrap flex flex-middle">
<img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
<span>{{ userInfo.nickname }}</span>
</div>
<div class="menu-item__line"></div>
<el-dropdown-item
class="flex flex-between flex-middle"
v-for="item in menuList"
:key="item.value"
:command="item.value"
>
<span> {{ item.label }}</span>
<img src="@/static/images/layout/icon-arrow.png" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 未登录 -->
<div v-else class="wrap-content-login__text flex">
<span>请先</span>
<span class="content-login-text--light" @click="onLoginClick">
登录/注册
</span>
</div>
</div>
<template>
<div v-if="!menuVisible" class="header-wrap-content--line"></div>
<div
class="header-wrap-content__common flex flex-middle"
@click="onJumpPersonalPage('message')"
>
<img src="@/static/images/layout/icon-message.png" />
<span>消息</span>
<div class="wrap-content-message__tip">33</div>
</div>
</template>
<div class="header-wrap-content--line"></div>
<div
class="header-wrap-content__common flex flex-middle"
@click="onJumpPersonalPage('order')"
>
<img src="@/static/images/layout/icon-order.png" />
<span>我的订单</span>
</div>
<div class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle">
<img src="@/static/images/layout/icon-phone.png" />
<span>下载app</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
const MENU_VALUE = {
PERSONAL: 1,
ADDRESS: 2,
LOGON_OUT: 3,
};
export default {
name: "HeaderInfoBar",
data() {
return {
menuVisible: false,
menuList: [
{
label: "个人中心",
value: MENU_VALUE.PERSONAL,
},
{
label: "收货地址",
value: MENU_VALUE.ADDRESS,
},
{
label: "退出登录",
value: MENU_VALUE.LOGON_OUT,
},
],
};
},
computed: {
...mapState(["userInfo", "token"]),
menuIcon() {
return this.menuVisible
? require("@/static/images/layout/icon-up-light.png")
: require("@/static/images/layout/icon-up.png");
},
},
methods: {
onLoginClick() {
this.$isLoginValidate();
},
handleCommandClick(event) {
switch (event) {
case MENU_VALUE.PERSONAL:
this.$router.push("/account");
break;
case MENU_VALUE.ADDRESS:
this.$router.push("/account");
break;
case MENU_VALUE.LOGON_OUT:
this.$store.commit("setLoginOut");
}
},
// 跳转个人中心页面
onJumpPersonalPage(type) {
this.$router.push(`/account?type=${type}`);
},
},
};
</script>
<style lang="scss">
.dropdown-menu-self {
width: 200px;
margin-top: 0 !important;
padding-bottom: 0;
.popper__arrow {
display: none;
}
.el-dropdown-menu__item:hover {
background: #f8f9fb;
color: #666666;
}
.el-dropdown-menu__item {
height: 42px;
font-size: 14px;
img {
width: 8px;
height: 14px;
}
}
.menu-item__wrap {
padding: 16px 24px;
font-size: 14px;
.menu-item-wrap__avatar {
width: 50px;
height: 50px;
margin-right: 13px;
border-radius: 50%;
}
}
.menu-item__line {
width: 100%;
height: 1px;
background: #eeeeee;
border-radius: 0px 0px 0px 0px;
}
}
</style>
<style lang="scss" scoped>
.info-bar-header {
height: 30px;
color: #999999;
background: #f1f1f1;
border-radius: 0px 0px 0px 0px;
.info-bar-header-wrap {
height: 100%;
width: 1200px;
margin: 0 auto;
.header-wrap__content {
.header-wrap-content__login {
.wrap-content-login__text {
padding: 0 18px;
.content-login-text--light {
margin-left: 6px;
color: #ff875b;
cursor: pointer;
}
}
.wrap-content-login__info--hover {
background: #ffffff !important;
color: #ff875b;
}
.wrap-content-login__info {
position: relative;
padding: 0 18px;
height: 30px;
cursor: pointer;
.content-login-info__logo {
width: 8px;
height: 4px;
margin-left: 4px;
}
}
}
.wrap-content-message__tip {
min-width: 14px;
height: 14px;
padding: 0 3px;
line-height: 14px;
font-size: 10px;
color: #ffffff;
text-align: center;
background: #ff512b;
border-radius: 50%;
margin-left: 4px;
}
.header-wrap-content--line {
width: 1px;
height: 10px;
background: #d8d8d8;
}
.header-wrap-content__common {
cursor: pointer;
padding: 0 18px;
img {
width: 14px;
height: 14px;
margin-right: 4px;
}
}
}
}
}
</style>