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

layouts/default.vue

@@ -6,12 +6,218 @@
  * @Description: file content
 -->
 <template>
-	<div>
+  <div class="layout">
-        <Nuxt />
+    <div class="layout-header">
-		<div>我是版权</div>
+      <div
-	</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;
+  }
+}
+</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>

layouts/module/DefaultHeader.vue

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

package.json

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

pages/index/index.vue

@@ -6,44 +6,16 @@
  * @Description: file content
 -->
 <template>
-	<div>
+  <div>
-		<h1>我是首页</h1>
+    <Banner />
-		<Banner />
+    <!-- <Seckil /> -->
-		<Seckil />
+  </div>
-		<div>时间格式化方法测试：{{date}}</div>
-		<a href="/order/list">去订单</a>
-		<button @click="login">登录</button>
-	</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 },
+  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");
-		},
-	},
 };
 </script>

pages/index/module/Banner.vue

@@ -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',
+  name: "HomtBanner",
-	data(){
+  data() {
-		return {
+    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>
-
+.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>

plugins/axios.js

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