feat: 公共页头编写,热门分类数据通过访问接口实现

merge-requests/1/head
xiaoguang 3 years ago
parent 0453ffad89
commit 83a91066a7

@ -6,12 +6,218 @@
* @Description: file content
-->
<template>
<div>
<Nuxt />
<div>我是版权</div>
</div>
<div class="layout">
<div class="layout-header">
<div
class="layout-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">
<div v-if="isLogin" class="wrap-content-login__text flex">
<span>请先</span>
<span class="content-login-text--light">登录/注册</span>
</div>
<el-dropdown @visible-change="menuVisible = $event">
<div
class="wrap-content-login__info flex flex-middle flex-center"
>
<span>你好{{ userInfo.name }}</span>
<img class="content-login-info__logo" :src="menuIcon" />
</div>
<el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
<div class="menu-item__wrap flex flex-middle">
<img class="menu-item-wrap__avatar" />
<span>{{ userInfo.name }}</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"
>
<span> {{ item.label }}</span>
<img src="@/static/images/layout/icon-arrow.png" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<template>
<div v-if="!menuVisible" class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle">
<img src="@/static/images/layout/icon-message.png" />
<span>消息</span>
<div class="wrap-content-message__tip">33</div>
</div>
</template>
<div class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle">
<img src="@/static/images/layout/icon-order.png" />
<span>我的订单</span>
</div>
<div class="header-wrap-content--line"></div>
<div class="header-wrap-content__common flex flex-middle">
<img src="@/static/images/layout/icon-phone.png" />
<span>下载app</span>
</div>
</div>
</div>
</div>
<DefaultHeader />
<div class="layout-box"><Nuxt /></div>
<div class="layout-footer"></div>
</div>
</template>
<script>
import DefaultHeader from "./module/DefaultHeader.vue";
const MENU_VALUE = {
PERSONAL: 1,
ADDRESS: 2,
LOGON_OUT: 3,
};
export default {
name: "Layout",
components: { DefaultHeader },
data() {
return {
isLogin: false,
userInfo: {
name: "仙女广",
},
menuVisible: false,
menuList: [
{
label: "个人中心",
value: MENU_VALUE.PERSONAL,
},
{
label: "收货地址",
value: MENU_VALUE.ADDRESS,
},
{
label: "退出登录",
value: MENU_VALUE.LOGON_OUT,
},
],
};
},
computed: {
menuIcon() {
return this.menuVisible
? require("@/static/images/layout/icon-up-light.png")
: require("@/static/images/layout/icon-up.png");
},
},
methods: {
onMenuClick() {},
},
};
</script>
<style lang="scss">
.dropdown-menu-self {
width: 200px;
margin-top: 0 !important;
padding-bottom: 0;
.popper__arrow {
display: none;
}
.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%;
}
}
.menu-item__line {
width: 100%;
height: 1px;
background: #eeeeee;
border-radius: 0px 0px 0px 0px;
}
}
</script>
</style>
<style lang="scss" scoped>
.layout-center {
width: 1200px;
margin: 0 auto;
}
.layout {
.layout-header {
height: 30px;
color: #999999;
background: #f1f1f1;
border-radius: 0px 0px 0px 0px;
.layout-header-wrap {
height: 100%;
.header-wrap__content {
.header-wrap-content__login {
.wrap-content-login__text {
.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 {
min-width: 14px;
height: 14px;
padding: 0 3px;
line-height: 14px;
font-size: 10px;
color: #ffffff;
text-align: center;
background: #ff512b;
border-radius: 50%;
margin-left: 4px;
}
.header-wrap-content--line {
width: 1px;
height: 10px;
background: #d8d8d8;
}
.header-wrap-content__common {
cursor: pointer;
padding: 0 18px;
img {
width: 14px;
height: 14px;
margin-right: 4px;
}
}
}
}
}
}
</style>

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

@ -17,7 +17,7 @@
"@nuxtjs/axios": "^5.13.6",
"cookie-universal-nuxt": "^2.1.5",
"core-js": "^3.19.3",
"element-ui": "^2.15.6",
"element-ui": "^2.15.8",
"js-util-all": "^1.0.6",
"node-sass": "^4.14.1",
"nuxt": "^2.15.8",

@ -6,44 +6,16 @@
* @Description: file content
-->
<template>
<div>
<h1>我是首页</h1>
<Banner />
<Seckil />
<div>时间格式化方法测试{{date}}</div>
<a href="/order/list">去订单</a>
<button @click="login"></button>
</div>
<div>
<Banner />
<!-- <Seckil /> -->
</div>
</template>
<script>
import { ApiGetGoodsList } from "~/plugins/api/goods";
import { FormatDate } from "~/plugins/utils";
import Banner from "./module/Banner.vue";
import Seckil from "./module/Seckill.vue";
export default {
components: { Banner, Seckil },
data(){
return {
date : '时间'
}
},
asyncData({ $axios }) {
ApiGetGoodsList().then((res) => {
console.log(res);
});
},
mounted() {
this.date = FormatDate(new Date() , 'yyyy年MM月dd日');
// setInterval(()=>{
// location.reload();
// },50000)
},
methods: {
login() {
this.$store.commit("SET_TOKEN", "123");
},
},
components: { Banner, Seckil },
};
</script>

@ -7,18 +7,54 @@
-->
<template>
<div>我是banner模块</div>
<div class="home-banner">
<el-carousel height="360px" indicator-position="outside">
<el-carousel-item v-for="item in bannerList" :key="item.id">
<el-image :src="item.picture"></el-image>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name : 'Banner',
data(){
return {
}
}
}
name: "HomtBanner",
data() {
return {
bannerList: [
{
picture:
"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
},
{
picture:
"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
},
],
};
},
};
</script>
<style lang="scss" scoped>
</style>
.home-banner {
/deep/.el-carousel {
.el-carousel__container {
i {
font-size: 18px;
}
}
.el-carousel__arrow {
width: 45px;
height: 45px;
}
.el-carousel__arrow--left {
left: calc(50% - 380px) !important;
}
.el-carousel__arrow--right {
right: calc(50% - 550px) !important;
}
.el-image {
width: 100%;
}
}
}
</style>

@ -20,8 +20,8 @@ export default function({app, $axios, req}) {
})
$axios.onResponse(res => {
if (res.data.code === 200) {
return res.data.result;
if (res.status === 200) {
return res.data;
} else {
return Promise.reject(res.data.error);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 237 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 237 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Loading…
Cancel
Save