msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 调整热门分类逻辑以及交互

Browse Source
merge-requests/17/head
xiaoguang 2 years ago
parent 092f140fb3
commit 69e6474f63
3 changed files with 87 additions and 42 deletions
Show Stats Download Patch File Download Diff File

8
constants/index.js
Unescape View File

@ -19,4 +19,10 @@ const SEX_TYPE = {
UNKNOW: 3, // 未知
};
export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE };
// 热门分类类级
const CATEGROY_LEVEL = {
ONE: 1,
TWO: 2,
};
export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL };

119
layouts/module/header/index.vue
Unescape View File

@ -1,5 +1,6 @@
<template>
<div class="layout-header">
<!-- 滚动吸顶头部 -->
<template v-if="isSticky">
<div class="sticky-bar-header">
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
@ -75,6 +76,7 @@
</div>
</div>
</div>
<!-- 热门分类 -->
<div class="bar-header-box__tab flex flex-middle">
<div
v-show="showCategroyTab"
@ -88,17 +90,21 @@
</div>
<div
v-show="isCategroyOpen || categroyVisible"
class="tab-category__menu flex flex-left"
class="tab-category__menu flex"
@mouseenter="handleCategoryTwoChange(true)"
@mouseleave="handleCategoryTwoChange(false)"
>
<!-- 左侧一级分类 -->
<div class="tab-category-menu__left">
<div
v-for="item in categrayData"
v-for="item in categroyData"
:key="item.id"
@mouseenter="handleCategorySelect(item.id)"
@mouseenter="handleCategoryHover(item.id)"
@click="onCategoryClick(item.id, CATEGROY_LEVEL.ONE)"
class="menu-left__item flex flex-middle"
:class="{
'menu-left__item--light': item.id === currentCategroyId,
}"
>
<img />
<span>{{ item.name }}</span>
@ -107,15 +113,25 @@
<!-- 右侧二级分类 -->
<div
v-show="categroyTwoVisible"
class="tab-category-menu__right"
class="tab-category-menu__right flex-1"
>
<div
v-for="item in currentCategrayList"
v-for="item in categroyData"
:key="item.id"
class="menu-right__item"
@click="onCateogryTwoClick(item)"
@mouseenter="handleCategoryHover(item.id)"
class="category-menu-right__wrap"
:class="{
'category-menu-right__wrap--light':
item.id === currentCategroyId,
}"
>
{{ item.name }}
<span
v-for="itemList in item.list"
:key="itemList.id"
class="menu-right-wrap__item"
@click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
>{{ itemList.name }}</span
>
</div>
</div>
</div>
@ -141,11 +157,12 @@
</template>
<script>
import { mapState } from "vuex";
import HeaderInfoBar from "./HeaderInfoBar.vue";
import {
ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods";
import { CATEGROY_LEVEL } from "@/constants";
import HeaderInfoBar from "./HeaderInfoBar.vue";
export default {
name: "DefaultHeader",
@ -177,28 +194,29 @@ export default {
},
data() {
return {
CATEGROY_LEVEL,
searchContent: "",
tabPath: "/",
tabList: [
{ label: "首页", value: "/" },
{ label: "爆款推荐", value: "/goods/list?id=1" },
{ label: "开发书籍", value: "/goods/list?id=2" },
{
label: "爆款推荐",
value: `/goods/list?id=recommend`,
},
{
label: "开发书籍",
value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
},
{ label: "限时秒杀", value: "/sckill" },
],
categroyTwoVisible: false, // 是否展示二级分类
categroyVisible: false, // 是否展示一级分类
currentCategrayId: 0, // 当前鼠标悬停的一级分类id
categrayData: [],
currentCategroyId: 0, // 当前鼠标悬停的一级分类id
categroyData: [],
};
},
computed: {
...mapState(["userInfo", "token"]),
currentCategrayList() {
const data = this.categrayData.find(({ id }) => {
return this.currentCategrayId === id;
});
return (data && data.list) || [];
},
},
mounted() {
this.getCategroyData();
@ -207,24 +225,35 @@ export default {
onLoginClick() {
this.$isLoginValidate();
},
// 一级分类选中
handleCategorySelect(id) {
this.currentCategrayId = id;
// 一级分类鼠标悬停
handleCategoryHover(id) {
this.currentCategroyId = id;
},
// 二级分类点击
onCateogryTwoClick() {
this.$router.push("/goods/list");
// 分类点击
onCategoryClick(id, levelType) {
this.categroyVisible = false;
this.categroyTwoVisible = false;
this.$router.push({
path: "/goods/list",
query: {
id,
levelType,
},
});
},
// 一级分类是否可见
handleCategoryChange(val) {
this.categroyVisible = val;
if (!val) {
this.currentCategroyId = 0;
}
},
// 二级分类是否可见
handleCategoryTwoChange(val) {
this.categroyTwoVisible = val;
},
handleTabSelect(path) {
this.$router.push({ path });
handleTabSelect(value) {
this.$router.push({ path: value });
},
onTabSelect({ value }) {
this.tabPath = value;
@ -240,7 +269,7 @@ export default {
async getCategroyData() {
const { result } = await ApiGetCategoryOneList();
if (result && result.length > 0) {
this.categrayData = await Promise.all(
this.categroyData = await Promise.all(
result.map(async (item) => {
const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
categoryId: item.id,
@ -436,13 +465,14 @@ export default {
width: 190px;
padding: 15px 0;
background: #ffffff;
.menu-left__item:hover {
color: #ff875b;
}
.menu-left__item {
height: 50px;
cursor: pointer;
padding: 0 24px 0 41px;
&:hover,
&--light {
color: #ff875b;
}
img {
width: 20px;
height: 20px;
@ -451,20 +481,29 @@ export default {
}
}
.tab-category-menu__right {
width: 510px;
padding: 30px 26px;
padding: 15px 26px;
box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #eeeeee;
background: #ffffff;
.menu-right__item:hover {
color: #ff875b;
}
.menu-right__item {
display: inline-block;
.category-menu-right__wrap {
height: 50px;
line-height: 50px;
padding: 0 16px;
font-size: 12px;
color: #999999;
margin-right: 20px;
cursor: pointer;
white-space: nowrap;
&:hover,
&--light {
background: #f8f8f8;
}
.menu-right-wrap__item {
color: #999999;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #ff875b;
}
}
}
}
}

2
pages/account/index/home/module/LogisitcsInfo.vue
Unescape View File

@ -48,7 +48,7 @@
<UiConfirm
title="确认收到货了吗？"
:visible.sync="ensureOrderVisible"
@ensure="handleOrderEnsure"
@confirm="handleOrderEnsure"
/>
</div>
</template>

Write Preview
Loading…
Cancel
Save