feat: 公共页头编写，热门分类数据通过访问接口实现 See merge request yanxuan-frontend/shop-pc!1merge-requests/2/merge
肖广
3 years ago
commit
995e299027
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="default-header">
|
||||
<div class="default-header-box">
|
||||
<div class="default-header-box__wrap flex flex-between flex-middle">
|
||||
<img
|
||||
class="header-box-wrap__logo"
|
||||
src="@/static/images/layout/logo.png"
|
||||
/>
|
||||
<div class="header-box-wrap__right flex flex-middle">
|
||||
<div class="box-wrap-right__search flex">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="searchContent"
|
||||
placeholder="请输入商品名称"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="search-icon flex flex-center flex-middle">
|
||||
<img src="@/static/images/layout/icon-search.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-wrap-right__cart flex flex-middle">
|
||||
<img src="@/static/images/layout/icon-shop.png" />
|
||||
<span>购物车</span>
|
||||
<div class="wrap-right-cart__tip">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-header-box__tab flex flex-middle">
|
||||
<div class="header-box-tab__category">
|
||||
<div class="tab-category__label flex flex-center flex-middle">
|
||||
<img src="@/static/images/layout/icon-category.png" />
|
||||
<span>热门分类</span>
|
||||
</div>
|
||||
<div class="tab-category__menu flex flex-left">
|
||||
<div class="tab-category-menu__left">
|
||||
<div
|
||||
v-for="item in categrayData"
|
||||
:key="item.id"
|
||||
@mouseenter="handleMouEnter(item.id)"
|
||||
@mouseleave="categrayHoverVisible = false"
|
||||
class="menu-left__item flex felx-middle"
|
||||
>
|
||||
<img />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="categrayHoverVisible">
|
||||
<div
|
||||
class="tab-category-menu__right flex flex-wrap"
|
||||
@mouseenter="categrayHoverVisible = true"
|
||||
>
|
||||
<div
|
||||
v-for="item in currentCategrayList"
|
||||
:key="item.id"
|
||||
class="menu-right__item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in tabList"
|
||||
:key="item.value"
|
||||
class="header-box-tab__common flex flex-center flex-middle"
|
||||
:class="{
|
||||
'header-box-tab__common--light': item.value === activityTab,
|
||||
}"
|
||||
@click="onTabClick(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
ApiGetCategoryOneList,
|
||||
ApiGetCategoryTwoAndGoods,
|
||||
} from "@/plugins/api/goods";
|
||||
|
||||
const TAB_TYPE = {
|
||||
HOME: 1,
|
||||
RECOMMEND: 2,
|
||||
BOOK: 3,
|
||||
TIME_LIMIT: 4,
|
||||
};
|
||||
export default {
|
||||
name: "DefaultHeader",
|
||||
data() {
|
||||
return {
|
||||
searchContent: "",
|
||||
activityTab: TAB_TYPE.HOME,
|
||||
tabList: [
|
||||
{ label: "首页", value: TAB_TYPE.HOME, path: "/" },
|
||||
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/" },
|
||||
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/" },
|
||||
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
|
||||
],
|
||||
categrayData: [],
|
||||
categrayHoverVisible: false,
|
||||
currentCategrayId: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentCategrayList() {
|
||||
const data = this.categrayData.find(({ id }) => {
|
||||
return this.currentCategrayId === id;
|
||||
});
|
||||
return (data && data.list) || [];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCategroyData();
|
||||
},
|
||||
methods: {
|
||||
handleMouEnter(id) {
|
||||
this.categrayHoverVisible = true;
|
||||
this.currentCategrayId = id;
|
||||
},
|
||||
// 获取热门分类信息
|
||||
async getCategroyData() {
|
||||
const { result } = await ApiGetCategoryOneList();
|
||||
if (result.data.length > 0) {
|
||||
this.categrayData = await Promise.all(
|
||||
result.data.map(async (item) => {
|
||||
const { result } = await ApiGetCategoryTwoAndGoods({
|
||||
categoryId: item.id,
|
||||
});
|
||||
if (result.data.length > 0) {
|
||||
return {
|
||||
...item,
|
||||
list: result.data,
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
onTabClick(tab) {
|
||||
if (this.activityTab === tab.value) {
|
||||
return;
|
||||
}
|
||||
this.activityTab = tab.value;
|
||||
this.$router.push({
|
||||
path: tab.path,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.default-header {
|
||||
padding-top: 32px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
.default-header-box {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
.default-header-box__wrap {
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 38px;
|
||||
.header-box-wrap__logo {
|
||||
width: 244px;
|
||||
height: 100%;
|
||||
}
|
||||
.header-box-wrap__right {
|
||||
.box-wrap-right__search {
|
||||
margin-right: 23px;
|
||||
.search-input {
|
||||
width: 551px;
|
||||
z-index: 1;
|
||||
/deep/.el-input__inner:focus {
|
||||
border-color: #ff512b;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
width: 77px;
|
||||
margin-left: -2px;
|
||||
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
z-index: 2;
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-wrap-right__cart {
|
||||
padding: 0 18px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #999999;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 1px solid #eeeeee;
|
||||
cursor: pointer;
|
||||
.wrap-right-cart__tip {
|
||||
min-width: 14px;
|
||||
height: 14px;
|
||||
padding: 0 3px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
background: #ff512b;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
}
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 4px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.default-header-box__tab {
|
||||
height: 38px;
|
||||
.header-box-tab__category {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.tab-category__label {
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
.tab-category__menu {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
.tab-category-menu__left {
|
||||
width: 190px;
|
||||
padding: 34px 0;
|
||||
background: #ffffff;
|
||||
.menu-left__item:hover {
|
||||
color: #ff875b;
|
||||
}
|
||||
.menu-left__item {
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
padding: 0 24px 0 41px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-category-menu__right {
|
||||
width: 510px;
|
||||
padding: 30px 26px;
|
||||
box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
|
||||
border: 1px solid #eeeeee;
|
||||
background: #ffffff;
|
||||
.menu-right__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.menu-right__item:hover {
|
||||
color: #ff875b;
|
||||
}
|
||||
.menu-right__item {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-box-tab__common--light {
|
||||
color: #ff7f39 !important;
|
||||
}
|
||||
.header-box-tab__common {
|
||||
width: 160px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 351 B |
|
After Width: | Height: | Size: 201 B |
|
After Width: | Height: | Size: 567 B |
|
After Width: | Height: | Size: 542 B |
|
After Width: | Height: | Size: 372 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 611 B |
|
After Width: | Height: | Size: 237 B |
|
After Width: | Height: | Size: 237 B |
|
After Width: | Height: | Size: 9.9 KiB |
Loading…
Reference in new issue