Merge branch 'feature/task1.0.0_xg' into 'feature/task1.0.0'

feat: 公共页头点击事件添加路由跳转

See merge request yanxuan-frontend/shop-pc!8
merge-requests/9/head
肖广 3 years ago
commit 9622df128b

@ -150,7 +150,7 @@ export default {
const { result } = await ApiPostLogin({ const { result } = await ApiPostLogin({
...this.form, ...this.form,
clientId: 1, clientId: 1,
systemId: 1, systemId: 3,
}); });
if (result) { if (result) {
this.dialogTableVisible = false; this.dialogTableVisible = false;

@ -46,14 +46,20 @@
</div> </div>
<template> <template>
<div v-if="!menuVisible" class="header-wrap-content--line"></div> <div v-if="!menuVisible" class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle"> <div
class="header-wrap-content__common flex flex-middle"
@click="onJumpPersonalPage('message')"
>
<img src="@/static/images/layout/icon-message.png" /> <img src="@/static/images/layout/icon-message.png" />
<span>消息</span> <span>消息</span>
<div class="wrap-content-message__tip">33</div> <div class="wrap-content-message__tip">33</div>
</div> </div>
</template> </template>
<div class="header-wrap-content--line"></div> <div class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle"> <div
class="header-wrap-content__common flex flex-middle"
@click="onJumpPersonalPage('order')"
>
<img src="@/static/images/layout/icon-order.png" /> <img src="@/static/images/layout/icon-order.png" />
<span>我的订单</span> <span>我的订单</span>
</div> </div>
@ -110,15 +116,20 @@ export default {
handleCommandClick(event) { handleCommandClick(event) {
switch (event) { switch (event) {
case MENU_VALUE.PERSONAL: case MENU_VALUE.PERSONAL:
this.$router.push('/account'); this.$router.push("/account");
break; break;
case MENU_VALUE.ADDRESS: case MENU_VALUE.ADDRESS:
this.$router.push('/account'); this.$router.push("/account");
break; break;
case MENU_VALUE.LOGON_OUT: case MENU_VALUE.LOGON_OUT:
this.$store.commit("setLoginOut"); this.$store.commit("setLoginOut");
} }
}, },
//
onJumpPersonalPage(type) {
this.$router.push(`/account?type=${type}`);
},
}, },
}; };
</script> </script>

@ -58,15 +58,21 @@
placeholder="请输入商品名称" placeholder="请输入商品名称"
></el-input> ></el-input>
</div> </div>
<div class="search-icon flex flex-center flex-middle"> <div
class="search-icon flex flex-center flex-middle"
@click="onSearch"
>
<img src="@/static/images/layout/icon-search.png" /> <img src="@/static/images/layout/icon-search.png" />
</div> </div>
</div> </div>
<div class="box-wrap-right__cart flex flex-middle"> <nuxt-link
class="box-wrap-right__cart flex flex-middle"
to="/cart"
>
<img src="@/static/images/layout/icon-shop.png" /> <img src="@/static/images/layout/icon-shop.png" />
<span>购物车</span> <span>购物车</span>
<div class="wrap-right-cart__tip">3</div> <div class="wrap-right-cart__tip">3</div>
</div> </nuxt-link>
</div> </div>
</div> </div>
<div class="bar-header-box__tab flex flex-middle"> <div class="bar-header-box__tab flex flex-middle">
@ -91,7 +97,7 @@
<div <div
v-for="item in categrayData" v-for="item in categrayData"
:key="item.id" :key="item.id"
@mouseenter="handleCategoSelect(item.id)" @mouseenter="handleCategorySelect(item.id)"
class="menu-left__item flex flex-middle" class="menu-left__item flex flex-middle"
> >
<img /> <img />
@ -107,24 +113,25 @@
v-for="item in currentCategrayList" v-for="item in currentCategrayList"
:key="item.id" :key="item.id"
class="menu-right__item" class="menu-right__item"
@click="onCateogryTwoClick(item)"
> >
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<nuxt-link <div
v-for="item in tabList" v-for="item in tabList"
:key="item.value" :key="item.value"
class="header-box-tab__common flex flex-center flex-middle" class="header-box-tab__common flex flex-center flex-middle"
:class="{ :class="{
'header-box-tab__common--light': 'header-box-tab__common--light':
item.value === $nuxt.$route.path, item.value === $nuxt.$route.fullPath,
}" }"
:to="item.value" @click="onTabSelect(item)"
> >
{{ item.label }} {{ item.label }}
</nuxt-link> </div>
</div> </div>
</div> </div>
</div> </div>
@ -167,9 +174,9 @@ export default {
tabPath: "/", tabPath: "/",
tabList: [ tabList: [
{ label: "首页", value: "/" }, { label: "首页", value: "/" },
{ label: "爆款推荐", value: "/hot" }, { label: "爆款推荐", value: "/goods/list?id=1" },
{ label: "开发书籍", value: "/book" }, { label: "开发书籍", value: "/goods/list?id=2" },
{ label: "限时秒杀", value: "/skill" }, { label: "限时秒杀", value: "/sckill" },
], ],
categroyTwoVisible: false, // categroyTwoVisible: false, //
categroyVisible: false, // categroyVisible: false, //
@ -194,9 +201,13 @@ export default {
this.$isLoginValidate(); this.$isLoginValidate();
}, },
// //
handleCategoSelect(id) { handleCategorySelect(id) {
this.currentCategrayId = id; this.currentCategrayId = id;
}, },
//
onCateogryTwoClick() {
this.$router.push("/goods/list");
},
// //
handleCategoryChange(val) { handleCategoryChange(val) {
this.categroyVisible = val; this.categroyVisible = val;
@ -208,6 +219,10 @@ export default {
handleTabSelect(path) { handleTabSelect(path) {
this.$router.push({ path }); this.$router.push({ path });
}, },
onTabSelect({ value }) {
this.tabPath = value;
this.$router.push({ path: value });
},
// //
async getCategroyData() { async getCategroyData() {
const { result } = await ApiGetCategoryOneList(); const { result } = await ApiGetCategoryOneList();
@ -227,6 +242,10 @@ export default {
); );
} }
}, },
onSearch() {
//
this.$router.push("/goods/list");
},
}, },
}; };
</script> </script>

Loading…
Cancel
Save