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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>