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

314 lines
8.4 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="header-info-bar__dropdown">
<!-- <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="~/assets/img/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 hover-text flex flex-middle"
@click="onJumpPersonalPage('message')"
@mouseenter="messageHover = true"
@mouseleave="messageHover = false"
>
<img
v-show="messageHover"
src="~/assets/img/layout/icon-message-light.png"
/>
<img
v-show="!messageHover"
src="~/assets/img/layout/icon-message.png"
/>
<span>消息</span>
<div
v-if="messageCount > 0"
class="wrap-content-message__tip flex flex-center flex-middle"
:class="{ 'wrap-content-message__tip--more': messageCount > 9 }"
>
{{ messageCount }}
</div>
</div>
</template>
<div class="header-wrap-content--line"></div>
<div
class="header-wrap-content__common hover-text flex flex-middle"
@click="onJumpPersonalPage('order/list')"
@mouseenter="orderHover = true"
@mouseleave="orderHover = false"
>
<img
v-show="orderHover"
src="~/assets/img/layout/icon-order-light.png"
/>
<img v-show="!orderHover" src="~/assets/img/layout/icon-order.png" />
<span>我的订单</span>
</div>
<div class="header-wrap-content--line"></div>
<!-- 下载app -->
<el-popover
popper-class="header-info-bar__popover"
placement="bottom"
width="230"
trigger="hover"
@show="phoneHover = true"
@hide="phoneHover = false"
>
<div
slot="reference"
class="header-wrap-content__common flex flex-middle"
>
<img
v-show="phoneHover"
src="~/assets/img/layout/icon-phone-light.png"
/>
<img
v-show="!phoneHover"
src="~/assets/img/layout/icon-phone.png"
/>
<span :class="{ 'wrap-content-common--light': phoneHover }"
>下载app</span
>
</div>
<div class="info-bar-popover__qrcode">
<img src="~/assets/img/common/app-qrcode.png" />
<span>扫一扫上方二维码 下载APP</span>
</div>
</el-popover>
</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,
orderHover: false,
phoneHover: false,
messageHover: false,
menuList: [
{
label: "个人中心",
value: MENU_VALUE.PERSONAL,
},
{
label: "收货地址",
value: MENU_VALUE.ADDRESS,
},
{
label: "退出登录",
value: MENU_VALUE.LOGON_OUT,
},
],
messageCount: 0, // 消息未读数
};
},
computed: {
...mapState(["userInfo", "token"]),
menuIcon() {
return this.menuVisible
? require("~/assets/img/layout/icon-up-light.png")
: require("~/assets/img/layout/icon-up.png");
},
},
methods: {
onLoginClick() {
this.$isLoginValidate();
},
handleCommandClick(event) {
switch (event) {
case MENU_VALUE.PERSONAL:
window.open(`${location.origin}/account/home`);
break;
case MENU_VALUE.ADDRESS:
window.open(`${location.origin}/account/address`);
break;
case MENU_VALUE.LOGON_OUT:
this.$store.dispatch("logout");
}
},
// 跳转个人中心页面
onJumpPersonalPage(path) {
if (!this.$isLoginValidate()) {
return;
}
window.open(`${location.origin}/account/${path}`);
},
},
};
</script>
<style lang="scss">
.header-info-bar__dropdown,
.header-info-bar__popover {
.popper__arrow {
display: none !important;
}
}
</style>
<style lang="scss" scoped>
.header-info-bar__dropdown {
width: 200px;
margin-top: 0 !important;
padding-bottom: 0;
.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%;
object-fit: cover;
}
}
.menu-item__line {
width: 100%;
height: 1px;
background: #eeeeee;
border-radius: 0px 0px 0px 0px;
}
}
.header-info-bar__popover {
.info-bar-popover__qrcode {
font-size: 14px;
color: #666666;
text-align: center;
img {
width: 186px;
height: 186px;
margin-bottom: 15px;
}
}
}
.info-bar-header {
height: 30px;
color: #999999;
background: #f1f1f1;
border-radius: 0px 0px 0px 0px;
.info-bar-header-wrap {
height: 100%;
@include layout-box;
.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 {
width: 14px;
height: 14px;
font-size: 10px;
color: #ffffff;
background: #ff512b;
border-radius: 50%;
margin-left: 4px;
&--more {
width: unset;
padding: 0 3px;
border-radius: 7px;
}
}
.header-wrap-content--line {
width: 1px;
height: 10px;
background: #d8d8d8;
}
.header-wrap-content__common {
cursor: pointer;
padding: 0 18px;
.wrap-content-common--light {
color: #ff875b;
}
img {
width: 14px;
height: 14px;
margin-right: 4px;
}
}
}
}
}
</style>