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/List/index.vue

 <template>
+  <layout>
     <el-card class="goods">
       <!-- 筛选区 -->
       <el-form
@@ -213,6 +214,8 @@
       >
       </el-pagination>
     </el-card>
+  </layout>
+
 </template>
 
 <style lang="less" src="./index.less" scope></style>
@@ -224,9 +227,14 @@ import {
   putOnline,
   putOffline
 } from "@/service/Goods/goods";
+import Layout from '../layout/index.vue'
 export default {
   name: "GoodsList",
 
+  components: {
+    Layout
+  },
+
   created () {
     // 获取级联选择
     this.getOptionList();

src/pages/Goods/Retail/index.vue

 <template>
-  <el-card class="container" style="width: 100%; height: 100%">
+  <layout>
+    <el-card
+      class="container"
+      style="width: 100%; height: 100%"
+    >
       <div class="retail">
-      <el-form inline :model="retailActivitie" ref="retailActivitie">
+        <el-form
+          inline
+          :model="retailActivitie"
+          ref="retailActivitie"
+        >
           <!-- 查询 -->
           <el-row>
-          <el-form-item label="分销活动id" prop="marketing_id">
+            <el-form-item
+              label="分销活动id"
+              prop="marketing_id"
+            >
               <!-- :rules="[{ type: 'number', message: '活动id必须为数字值' }]" -->
               <el-input
                 onkeyup="value=value.replace(/[^\d]/g,'')"
@@ -33,15 +44,25 @@
             </el-form-item>
             <!-- 按钮操作 -->
             <el-form-item class="search_button">
-            <el-button type="primary" @click="toSearch">搜索</el-button>
+              <el-button
+                type="primary"
+                @click="toSearch"
+              >搜索</el-button>
               <el-button @click="reset('retailActivitie')">重置</el-button>
             </el-form-item>
           </el-row>
-        <el-button type="primary" style="margin-bottom: 10px" @click="createDtb"
-          >创建分销活动</el-button
-        >
+          <el-button
+            type="primary"
+            style="margin-bottom: 10px"
+            @click="createDtb"
+          >创建分销活动</el-button>
           <!-- Tab -->
-        <el-table :data="tableData" type="index" align="center" border>
+          <el-table
+            :data="tableData"
+            type="index"
+            align="center"
+            border
+          >
             <el-table-column
               align="center"
               prop="marketing_id"
@@ -73,11 +94,13 @@
               label="二级分销金额"
             >
             </el-table-column>
-          <el-table-column align="center" prop="online_status" label="状态">
-            <template #default="scope">
-              <span
-                :style="{ color: scope.row.online_status == 3 ? 'red' : '' }"
+            <el-table-column
+              align="center"
+              prop="online_status"
+              label="状态"
             >
+              <template #default="scope">
+                <span :style="{ color: scope.row.online_status == 3 ? 'red' : '' }">
                   {{
                   scope.row.online_status == 2
                     ? "关闭"
@@ -94,17 +117,35 @@
               label="创建人"
             >
             </el-table-column>
-          <el-table-column align="center" prop="create_time" label="创建时间">
+            <el-table-column
+              align="center"
+              prop="create_time"
+              label="创建时间"
+            >
             </el-table-column>
-          <el-table-column align="center" prop="update_time" label="更新时间">
+            <el-table-column
+              align="center"
+              prop="update_time"
+              label="更新时间"
+            >
             </el-table-column>
-          <el-table-column align="center" prop="end_time" label="分销到期时间">
+            <el-table-column
+              align="center"
+              prop="end_time"
+              label="分销到期时间"
+            >
             </el-table-column>
-          <el-table-column fixed="right" align="center" label="操作">
-            <template #default="scope">
-              <el-button @click="handleClick(scope.row)" type="text" size="mini"
-                >查看</el-button
+            <el-table-column
+              fixed="right"
+              align="center"
+              label="操作"
             >
+              <template #default="scope">
+                <el-button
+                  @click="handleClick(scope.row)"
+                  type="text"
+                  size="mini"
+                >查看</el-button>
                 <el-button
                   type="text"
                   size="mini"
@@ -122,8 +163,7 @@
                   scope.row.online_status === 2 && scope.row.online_status !== 3
                 "
                   @click.stop="handelEnable(scope.row, 1)"
-                >启用</el-button
-              >
+                >启用</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -140,15 +180,14 @@
       >
       </el-pagination>
     </el-card>
+  </layout>
   <!-- 创建分销活动 -->
   <el-dialog
-    v-show="shopStart == 0"
-    fullscreen
+    :fullscreen="true"
     title="创建分销活动"
     v-model="dialogFormVisible"
     width="100%"
     :show-close="false"
-    dialogClass="no-close"
   >
     <div class="bor">
       <el-row :gutter="50">
@@ -171,7 +210,10 @@
                 :disabled="shopStart !== 0"
               ></el-input>
             </el-form-item>
-            <el-form-item label="一级佣金:" prop="first_commission_value">
+            <el-form-item
+              label="一级佣金:"
+              prop="first_commission_value"
+            >
               <el-input
                 v-model="ruleForm.first_commission_value"
                 :disabled="shopStart !== 0"
@@ -206,7 +248,10 @@
             ref="ruleIdForm"
             size="mini"
           >
-            <div class="queryBox" v-show="shopStart == 0">
+            <div
+              class="queryBox"
+              v-show="shopStart == 0"
+            >
               <el-form-item label="关联商品:"> </el-form-item>
               <el-form-item label="商品id:">
                 <el-input
@@ -225,8 +270,7 @@
                 size="mini"
                 style="margin-bottom: 30px"
                 @click="findProducts"
-                >查询</el-button
-              >
+              >查询</el-button>
             </div>
             <div :class="shopStart == 0 ? 'newTab' : 'readTab'">
               <el-table
@@ -239,7 +283,10 @@
                 style="width: 100%"
                 @selection-change="selectGoodsChange"
               >
-                <el-table-column align="center" type="selection">
+                <el-table-column
+                  align="center"
+                  type="selection"
+                >
                 </el-table-column>
                 <el-table-column
                   align="center"
@@ -273,7 +320,11 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" @click="cancel" style="width: 150px">{{
+        <el-button
+          type="primary"
+          @click="cancel"
+          style="width: 150px"
+        >{{
           shopStart == 0 ? "取消" : "返回"
         }}</el-button>
         <el-button
@@ -281,8 +332,7 @@
           @click="addList"
           style="width: 150px"
           v-if="shopStart == 0"
-          >确 定</el-button
-        >
+        >确 定</el-button>
       </span>
     </template>
   </el-dialog>
@@ -293,11 +343,12 @@ import {
   getFindGoodsList,
   getAddMarketingList,
   getMarketingInfo,
-  updateMarketingList,
+  updateMarketingList
 } from "@/service/Goods/goods";
 import { ElMessage } from "element-plus";
+import Layout from "../layout/index.vue";
 // 开启关闭防抖
-function debounce(callback, delay) {
+function debounce (callback, delay) {
   let timer = null;
   return function (...args) {
     if (timer) {
@@ -311,7 +362,8 @@ function debounce(callback, delay) {
 }
 export default {
   name: "GoodsRetail",
-  data() {
+  components: { Layout },
+  data () {
     return {
       tableData: [{ create_user_email: "v-pengyuqian@yidian-inc.com" }],
       // 详情页
@@ -320,14 +372,14 @@ export default {
         first_commission_value: "",
         second_commission_value: "",
         start_time: "",
-        end_time: "",
+        end_time: ""
       },
       goods_list: [],
       options: [
         { value: 0, label: "全部" },
         { value: 1, label: "启用" },
         { value: 2, label: "关闭" },
-        { value: 3, label: "到期" },
+        { value: 3, label: "到期" }
       ],
       // 搜索条件
       retailActivitie: {
@@ -337,7 +389,7 @@ export default {
         online_status: [],
         page: 1,
         page_size: 5,
-        count: 0,
+        count: 0
       },
 
       ruleForm: {
@@ -346,23 +398,23 @@ export default {
         second_commission_value: "",
         start_time: "",
         end_time: "",
-        goods_sku_id: [],
+        goods_sku_id: []
       },
       timeSelect: [],
       ruleIdForm: {
         life_account_id: "",
         goods_sku_id: "",
         start_time: "",
-        end_time: "",
+        end_time: ""
       },
       rules: {
         marketing_name: [
           { required: true, message: "请输入活动名称", trigger: "blur" },
-          { min: 1, max: 50, message: "长度在 50个字符内", trigger: "blur" },
+          { min: 1, max: 50, message: "长度在 50个字符内", trigger: "blur" }
         ],
         first_commission_value: [
-          { required: true, message: "请填写一级佣金", trigger: "blur" },
-        ],
+          { required: true, message: "请填写一级佣金", trigger: "blur" }
+        ]
         // goods_sku_id: [
         //   { type: "number", message: "商品id必须为数字值", trigger: "change" },
         // ],
@@ -374,12 +426,12 @@ export default {
       endTime: "",
       marketing_id: "",
       marketing_info: {},
-      disabled: false,
+      disabled: false
     };
   },
   methods: {
     // 查看详情列表
-    async handleClick(row) {
+    async handleClick (row) {
       this.dialogFormVisible = true;
       this.shopStart = 1;
       this.disabled = true;
@@ -395,13 +447,13 @@ export default {
       }
     },
     // 页码变化
-    handleCurrentChange(e) {
+    handleCurrentChange (e) {
       this.retailActivitie.page = e;
       this.getMarketingList();
     },
 
     // 营销活动列表
-    async getMarketingList() {
+    async getMarketingList () {
       try {
         const res = await getMarketingList(this.retailActivitie);
         this.tableData = res.result;
@@ -442,7 +494,7 @@ export default {
       try {
         await updateMarketingList({
           marketing_id: row.marketing_id,
-          online_status: type,
+          online_status: type
         });
         this.getMarketingList();
         ElMessage.success(type === 1 ? "状态已启用" : "状态已关闭");
@@ -451,29 +503,29 @@ export default {
       }
     }, 300),
     // 创建分销活动
-    createDtb() {
+    createDtb () {
       this.dialogFormVisible = true;
       this.shopStart = 0;
     },
     // 重置
-    reset(retailActivitie) {
+    reset (retailActivitie) {
       (this.retailActivitie = {
         marketing_id: "",
         marketing_name: "",
         goods_sku_id: "",
         online_status: [],
         page: 1,
-        page_size: 5,
+        page_size: 5
       }),
         this.$refs[retailActivitie].resetFields();
       this.getMarketingList({});
     },
     // 搜索
-    toSearch() {
+    toSearch () {
       this.getMarketingList();
       console.log(this.retailActivitie);
     },
-    selectTime(e) {
+    selectTime (e) {
       let date = new Date();
       if (e && e[1] < date) {
         ElMessage(`'活动结束时间不能早于当前时间'`);
@@ -481,9 +533,9 @@ export default {
       }
     },
     // 获取时间格式
-    formatTime(date) {
+    formatTime (date) {
       // 封装函数判断是否要在目标前边加 ’0‘
-      function getStr(target) {
+      function getStr (target) {
         return ("" + target).length === 1 ? "0" + target : target;
       }
       // 获取月
@@ -504,7 +556,7 @@ export default {
       return timeStr;
     },
     // 查询商品列表
-    async findProducts() {
+    async findProducts () {
       // 获取参数
       const { goods_sku_id, life_account_id } = this.ruleIdForm;
       let [start_time, end_time] = this.timeSelect;
@@ -521,7 +573,7 @@ export default {
         goods_sku_id,
         life_account_id,
         start_time,
-        end_time,
+        end_time
       };
       try {
         // 发请求
@@ -533,18 +585,18 @@ export default {
         ElMessage.error("请求查询商品列表失败");
       }
     },
-    selectGoodsChange(e) {
-      this.ruleForm.goods_sku_id = e.map((item) => item.goods_sku_id);
+    selectGoodsChange (e) {
+      this.ruleForm.goods_sku_id = e.map(item => item.goods_sku_id);
     },
-    async getAllList() {
+    async getAllList () {
       let all = await getMarketingList({
         page: 1,
-        page_size: this.retailActivitie.count,
+        page_size: this.retailActivitie.count
       });
       this.allList = all.result;
     },
     // 添加活动列表
-    async addList() {
+    async addList () {
       console.log(this.ruleForm.goods_sku_id);
       if (this.ruleForm.goods_sku_id.length <= 0) {
         ElMessage("请选择商品");
@@ -554,8 +606,11 @@ export default {
           this.ruleForm.goods_sku_id && this.ruleForm.goods_sku_id.join(",");
       }
       // console.log(goods_sku_id)；
-      let { marketing_name, first_commission_value, second_commission_value } =
-        this.ruleForm;
+      let {
+        marketing_name,
+        first_commission_value,
+        second_commission_value
+      } = this.ruleForm;
       let [start_time, end_time] = this.timeSelect;
       if (
         !marketing_name ||
@@ -572,7 +627,7 @@ export default {
         first_commission_value,
         second_commission_value,
         start_time: this.formatTime(start_time),
-        end_time: this.formatTime(end_time),
+        end_time: this.formatTime(end_time)
       };
       // let resList = [];
       // // 遍历选择的商品
@@ -613,14 +668,14 @@ export default {
     },
 
     // 清空
-    resetDate() {
+    resetDate () {
       (this.ruleForm = {
         marketing_name: "",
         first_commission_value: "",
         second_commission_value: "",
         start_time: "",
         end_time: "",
-        goods_sku_id: [],
+        goods_sku_id: []
       }),
         (this.timeSelect = []),
         (this.goods_list = []),
@@ -628,20 +683,20 @@ export default {
           life_account_id: "",
           goods_sku_id: "",
           start_time: "",
-          end_time: "",
+          end_time: ""
         });
     },
     // 取消
-    cancel() {
+    cancel () {
       this.dialogFormVisible = false;
       this.resetDate();
       this.getMarketingList();
+    }
   },
-  },
-  created() {
+  created () {
     this.getMarketingList();
     this.getAllList();
-  },
+  }
 };
 </script>
 <style lang="less" scoped>

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>