feature:设置菜单

src/pages/Goods/Detail/index.css

-.detail {
-  height: 100%;
-}
-.detail .state {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.detail .state .some_state {
-  display: inline;
-}
-.detail .state .update_time {
-  margin: 0 20px;
-}
-.detail .message {
-  display: flex;
-  justify-content: flex-start;
-}
-.message_border {
-  margin: 10px 0;
-}
-.width50p {
-  width: 50%;
-  padding: 20px;
-}
-.el-textarea .el-textarea__inner {
-  resize: none;
-}
-.operationButton {
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-}
-.deep_place .el-form-item__content {
-  display: flex;
-  align-items: center;
-}
-.deep_place a {
-  margin-left: 10px;
-  text-align: center;
-  width: 200px;
-  border-radius: 20px;
-  color: #fff;
-  background-color: #199ffb;
-}

src/pages/Goods/components/PageHeader/User.vue

+<template>
+  <el-dropdown>
+    <div class="user-info">
+      <el-avatar
+        :src="userInfo.avatar || DEFAULT_AVATAR"
+        size="small"
+      ></el-avatar>
+      <span class="user-name">{{userInfo.name}}</span>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>
+          <i class="el-icon-message"></i>
+          {{userInfo.email}}
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <span><a
+              class="link"
+              href="//pandora.yidian-inc.com/"
+            >返回pandora工具平台</a></span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { HEADER_CONFIG } from '@/config/pageconfig';
+
+export default {
+  computed: mapState({
+    userInfo: state => (state.userInfo || {}),
+  }),
+
+  data () {
+    return {
+      DEFAULT_AVATAR: HEADER_CONFIG.miscellaneous.defaultAvatar,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.user-info {
+  display: flex;
+  align-items: center;
+}
+
+.user-name {
+  margin-left: 12px;
+  color: #fff;
+}
+</style>

src/pages/Goods/components/PageHeader/config.js

+const headerConfig = [
+  {
+    title: "商品中心",
+    menuItem: [
+      {
+        name: "商品管理",
+        path: "/goods/list"
+      }
+    ]
+  },
+  {
+    title: "营销中心",
+    menuItem: [
+      {
+        name: "分销",
+        path: "/goods/retail"
+      },
+      {
+        name: "秒杀",
+        path: "/death"
+      }
+    ]
+  }
+];
+
+export default headerConfig;
\ No newline at end of file

src/pages/Goods/components/PageHeader/index.vue

+<template>
+  <div id="pageheader">
+    <div class="line"></div>
+    <el-menu
+      class="header-menu"
+      mode="horizontal"
+      :router="true"
+      background-color="#545c64"
+      text-color="#fff"
+      :default-active="activeMenu"
+      active-text-color="#ffd04b"
+    >
+      <el-submenu
+        v-for="item in headerConfig"
+        :key="item.title"
+        :index="item.title"
+      >
+        <template #title>{{item.title}}</template>
+        <el-menu-item
+          v-for="meItem in item.menuItem"
+          :index="meItem.path"
+          :key="meItem.name"
+        >
+          {{ meItem.name }}
+        </el-menu-item>
+      </el-submenu>
+
+      <el-menu-item
+        key="usermenu"
+        class="user-menu"
+      >
+        <user></user>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import headerConfig from "./config";
+import User from "./User.vue";
+
+export default {
+  name: "PageHeader",
+  components: {
+    User
+  },
+  data () {
+    return { headerConfig };
+  },
+  computed: {
+    activeMenu () {
+      return this.$route.path;
+    }
+  },
+  beforeMount () {
+    console.log(headerConfig);
+    console.log("当前激活", this.activeMenu);
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less">
+.menu-router {
+  display: inline-block;
+  line-height: 60px;
+  width: 100%;
+}
+.header-menu .user-menu {
+  float: right !important;
+  margin-right: 20px;
+}
+</style>

src/pages/Goods/layout/index.less

+.layout {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.main {
+	flex: 1;
+}

src/pages/Goods/layout/index.vue

+<template>
+  <div class="layout">
+    <!-- 页面公共 header -->
+    <page-header class="page-header"></page-header>
+
+    <!-- 页面主体部分 -->
+    <div class="main">
+      <slot></slot>
+    </div>
+
+  </div>
+</template>
+<script>
+import PageHeader from '../components/PageHeader';
+
+export default {
+  components: { PageHeader },
+};
+</script>
+
+<style lang="less" src="./index.less"></style>