qj-happy-common-zhongjian 1.0.27

package/src/views/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="menu-wrapper el-menu-custom">
+    <template v-for="item in routes" v-if="item.menuShow == 0">
+      <el-submenu :index="item.proappMenuCode" :key="item.proappMenuCode" @select="selectHandler" v-if="item.children && item.children.length > 0">
+        <template slot="title">
+          <span v-if="item.menuShow == 0">{{ item.menuName }}</span>
+        </template>
+
+        <template v-for="child in item.children">
+          <template v-if="item.children && item.children.length > 0">
+            <sidebar-item :is-nest="true" :key="child.menuAction" :routes="[child]" class="nest-menu" v-if="child.children && child.menuShow == 0"></sidebar-item>
+
+            <el-menu-item :index="'/' + child.menuAction" :key="child.menuAction" @click="routerLink(item, child)" v-else-if="child.menuShow == 0 && proappEnvOpentype == '/'">
+              <span v-if="child.menuShow == 0">{{ child.menuName }}</span>
+            </el-menu-item>
+            <el-menu-item
+              :index="'/' + item.proappMenuCode + '/' + child.menuAction"
+              :key="child.menuAction"
+              @click="routerLink(item, child)"
+              v-else-if="child.menuShow == 0 && proappEnvOpentype != '/'"
+            >
+              <span v-if="child.menuShow == 0">{{ child.menuName }}</span>
+            </el-menu-item>
+          </template>
+        </template>
+      </el-submenu>
+      <el-menu-item :index="'/' + item.menuAction" :key="'/' + item.menuAction" @click="routerPath(item)" v-if="!item.children || item.children.length == 0">
+        <div>
+          <span v-if="item.menuShow == 0">{{ item.menuName }}</span>
+        </div>
+      </el-menu-item>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array,
+    },
+    isNest: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      proappEnvOpentype: window.sessionStorage.getItem('proappEnvLayout') ? JSON.parse(window.sessionStorage.getItem('proappEnvLayout')).proappEnvOpentype : null, //默认是null
+      secDomainName:null
+    };
+  },
+  mounted() {
+    // let proappEnvLayout = window.sessionStorage.getItem("proappEnvLayout");
+    // if (proappEnvLayout) {
+    //   this.proappEnvOpentype = JSON.parse(proappEnvLayout).proappEnvOpentype;
+    // }
+     this.secDomainName=sessionStorage.getItem('secDomainName')?sessionStorage.getItem('secDomainName'):null
+  },
+  methods: {
+    routerPath(item) {
+      // console.log(item);
+      if (process.env.NODE_ENV === 'development') {
+        // 表示本地开发
+        location.href = '#/' + item.menuAction;
+      } else {
+        location.href = this.secDomainName + item.menuTarget + '#/' + item.menuAction;
+      }
+      this.$emit('getMenu', item.menuName, null);
+      this.$store.commit('SET_CURRENT_MENU', item);
+    },
+    routerLink(item, child) {
+      console.log(item, child, '二级和三级');
+      this.$emit('getMenu', item.menuName, child.menuName);
+      this.$store.commit('SET_CURRENT_MENU', child);
+      window.sessionStorage.setItem('menuCode', child.proappModelCode);
+      let url = null;
+      if (location.href.indexOf('localhost') > -1) {
+        // 表示本地
+        url = this.proappEnvOpentype == '/' ? `#/${child.menuAction}` : `#/${item.proappMenuCode}/${child.menuAction}`;
+      } else {
+        url = this.proappEnvOpentype == '/' ? `${child.menuTarget}#/${child.menuAction}` : `${child.menuTarget}#/${item.proappMenuCode}/${child.menuAction}`;
+        url = child.menuTarget.indexOf('http')==-1? this.secDomainName+url : url
+      }
+      location.href = url;
+    },
+  },
+};
+</script>
+<style rel="stylesheet" scoped>
+.menu-wrapper li.el-menu-item:hover {
+  background-color: #fff !important;
+}
+.menu-wrapper li.el-menu-item {
+  height: 38px;
+  line-height: 34px;
+  font-size: 12px;
+}
+</style>
+<style>
+.menu-wrapper {
+  font-size: 12px !important;
+}
+.el-submenu__title {
+  font-size: 12px !important;
+  height: 38px !important;
+  line-height: 38px !important;
+}
+.el-submenu__icon-arrow {
+  margin-top: -3px !important;
+}
+</style>

package/src/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div style="background: rgb(234, 237, 241)">
+    <div class="app-title">{{ title }}</div>
+    <scroll-bar>
+      <el-menu mode="vertical" class="el-menu-vertical-demo" :default-active="isActive" background-color="#fff" @select="handleSelect" @open="handleOpen">
+        <sidebar-item :routes="routes" @getMenu="getMenu"></sidebar-item>
+      </el-menu>
+    </scroll-bar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import SidebarItem from './SidebarItem';
+import ScrollBar from '#/components/ScrollBar';
+
+export default {
+  components: { SidebarItem, ScrollBar },
+  data() {
+    return {
+      title: null,
+      seconedTitle: null,
+      thirdTitle: null,
+      current: null,
+    };
+  },
+
+  mounted() {
+    this.getMenuList();
+  },
+  activated() {
+    this.getMenuList();
+  },
+
+  methods: {
+    getMenuList() {
+      let menuList = window.sessionStorage.getItem('menuList') ? JSON.parse(window.sessionStorage.getItem('menuList')).menuList : null,
+        code = window.sessionStorage.getItem('menuCode'),
+        secondMenuList = window.sessionStorage.getItem('menu') && JSON.parse(window.sessionStorage.getItem('menu'))[code];
+      menuList &&
+        menuList.forEach((el) => {
+          if (el.proappModelCode == code) {
+            this.title = el.menuName;
+          }
+        });
+      console.log(secondMenuList, 'menuName');
+      // 获取二级或者三级菜单
+      secondMenuList &&
+        secondMenuList.forEach((el) => {
+          if (!el.menuAction) {
+            el.children &&
+              el.children.forEach((res) => {
+                if (res.routechildren) {
+                  res.routechildren.map((val) => {
+                    if (val.menuAction == this.$route.path.replace('/', '')) {
+                      this.current = res;
+                      console.log(res, 'l++ll');
+                    }
+                  });
+                }
+                if (res.menuAction == this.$route.path.replace('/', '')) {
+                  this.seconedTitle = el.menuName;
+                  this.thirdTitle = res.menuName;
+                }
+              });
+          } else if (el.menuAction == this.$route.path.replace('/', '')) {
+            // this.current = el;
+            this.seconedTitle = el.menuName;
+            this.thirdTitle = null;
+          }
+        });
+      this.$emit('getFirstLevelMenu', this.title, this.seconedTitle, this.thirdTitle); // 获取一级菜单
+    },
+    handleSelect(key, keyPath) {
+      // console.log(key, keyPath, "default-openeds");
+    },
+    getMenu(second, third) {
+      this.seconedTitle = second;
+      this.thirdTitle = third;
+      this.$emit('getFirstLevelMenu', this.title, this.seconedTitle, this.thirdTitle); // 获取一级菜单
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath, 'fggggggggggggggggggggggggg');
+    },
+    handleMenu(data) {
+      let menu = {};
+      data &&
+        data.forEach((el) => {
+          menu[el.proappModelCode] = el.children;
+        });
+      this.menuCode(data);
+      window.sessionStorage.setItem('menu', JSON.stringify(menu));
+    },
+    menuCode(data) {
+      if (!data || !data.length) {
+        return;
+      } else {
+        for (var i = 0; i < data.length; i++) {
+          if (data[i].menuCode == 'P0000111') {
+            window.sessionStorage.setItem('menuAction', data[i].menuAction);
+            return;
+          } else {
+            let childs = data[i].children;
+            if (childs && childs.length > 0) {
+              this.menuCode(childs);
+            }
+          }
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapGetters(['appList']),
+    routes() {
+      console.log('开始执行', this.$route);
+      let menuCode = null;
+      if (this.$route.meta.menuCode) {
+        menuCode = this.$route.meta.menuCode;
+        window.sessionStorage.setItem('menuCode', menuCode);
+      } else {
+        try {
+          menuCode = JSON.parse(window.sessionStorage.getItem('menuCode'));
+        } catch (err) {
+          console.log('出错了' + err);
+          menuCode = window.sessionStorage.getItem('menuCode');
+        }
+      }
+      if (!window.sessionStorage.getItem('menu') || window.sessionStorage.getItem('menu') == '{}') {
+        let menuList = window.sessionStorage.getItem('menuList') ? JSON.parse(window.sessionStorage.getItem('menuList')).menuList : null;
+        if (menuList) {
+          this.handleMenu(menuList.menuList);
+        }
+      }
+      return window.sessionStorage.getItem('menu') ? JSON.parse(window.sessionStorage.getItem('menu'))[menuCode] : null;
+    },
+    isActive() {
+      this.getMenuList();
+      let current = this.$store.getters.currentMenu;
+      console.log(this.current, 'this.current');
+      if (!current && this.current) {
+        current = this.current;
+      }
+      console.log(current, 'current');
+      let path = this.$route.path;
+      if (current && Array.isArray(current.routechildren) && current.routechildren.length > 0) {
+        let arr = current.routechildren.map((res) => '/' + res.menuAction == this.$route.path);
+
+        if (arr && arr.length > 0) {
+          path = '/' + current.menuAction;
+        }
+      }
+
+      console.log(current, 'path');
+      console.log(path, 'path');
+      return path;
+    },
+  },
+  watch: {
+    $route: {
+      handler() {
+        let menuList = window.sessionStorage.getItem('menuList') ? JSON.parse(window.sessionStorage.getItem('menuList')).menuList : null,
+          code = window.sessionStorage.getItem('menuCode');
+        menuList &&
+          menuList.forEach((el) => {
+            if (el.proappModelCode == code) {
+              this.title = el.menuName;
+              console.log(this.title, 'this.title');
+            }
+          });
+      },
+    },
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-menu-vertical-demo {
+  padding-top: 42px;
+}
+.app-title {
+  height: 41px;
+  line-height: 42px;
+  // text-align: center;
+  text-indent: 20px;
+  color: #333;
+  font-weight: bold;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  background: #fff;
+  font-size: 14px;
+  // border-bottom: solid 1px #e5e5e5;
+}
+</style>

package/src/views/layout/components/index.js

@@ -0,0 +1,20 @@
+export {
+    default as Navbar
+}
+from './Navbar'
+export {
+    default as Sidebar
+}
+from './Sidebar'
+export {
+    default as AppMain
+}
+from './AppMain'
+export {
+    default as AppFooter
+}
+from './Footer'
+export {
+    default as NavMenu
+}
+from './NavMenu'

package/src/views/layout/theme/darkBlue/Layout.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="background:#ebeff2" :class="[customColor]">
+    <navbar></navbar>
+    <el-container class="theme-main-center">
+      <left-nav @toggle="toggleCollapse"></left-nav>
+      <el-container>
+        <app-main></app-main>
+      </el-container>
+    </el-container>
+    <app-footer></app-footer>
+  </div>
+</template>
+
+<script>
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
+import Breadcrumb from "#/components/Breadcrumb";
+
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    Breadcrumb
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: "auto",
+      customColor: "custom-2c4158"
+    };
+  },
+  computed: {
+    ...mapGetters(["sidebar"])
+  },
+  mounted() {
+    if (process.env.APP_PATH === "index") {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch("ToggleSideBar");
+      }
+      this.isIndex = true;
+    }
+    window.addEventListener("resize", this.heightChange);
+    this.$store.dispatch("GetInfo");
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch("ToggleSideBar");
+    },
+    heightChange(val) {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~#/styles/mixin.scss";
+.theme-main-center {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.app-main {
+  min-height: inherit;
+  background: inherit !important;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss">
+@import "~#/styles/wf-ui.scss";
+/*  .btn-inner{float: right;width: 78px;height:30px;font-size: 12px;margin: 8px;line-height: 6px;}
+  .btn-outer{width:84px;height:38px;font-size: 14px;}
+  .btn-del{background-color: rgb(229, 98, 34);}
+  .last-table{border-right: 2px solid #eee;}*/
+//盒模型
+html,
+body,
+#app {
+  height: 100%;
+  overflow: auto;
+}
+body {
+  font-family: MicrosoftYaHei;
+}
+.t-box {
+  display: flex;
+}
+.t-box-flex1 {
+-moz-box-flex: 1;
+-webkit-box-flex: 1;
+box-flex: 1;
+width:auto
+}
+.t-box-flex2 {
+  -moz-box-flex: 2;
+-webkit-box-flex: 2;
+box-flex: 2;
+  width: auto;
+}
+.t-box-flex3 {
+ -moz-box-flex: 3;
+-webkit-box-flex: 3;
+box-flex: 3;
+  width: auto;
+}
+.t-box-center {
+  box-align: center;
+}
+.t-center {
+  text-align: center;
+}
+.t-right {
+  text-align: right;
+}
+.vertical-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vertical {
+  display: flex;
+  align-items: center;
+}
+.w1200 {
+  width: 1200px;
+}
+.m0a {
+  margin: 0 auto;
+}
+</style>

package/src/views/layout/theme/darkBlue/components/AppMain.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="app-main">
+    <el-container class="top-position">当前位置：<breadcrumb></breadcrumb></el-container>
+    <transition name="fade" mode="out-in">
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+import Breadcrumb from "#/components/Breadcrumb";
+export default {
+  components: {
+    Breadcrumb
+  },
+  name: "AppMain",
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+};
+</script>
+<style scoped>
+.app-main {
+  width: 100%;
+}
+.top-position {
+  height: 60px;
+  line-height: 60px;
+  background: #fff;
+  font-size: 14px;
+  color: #666;
+  padding-left: 35px;
+  margin-bottom: 10px;
+}
+</style>
+

package/src/views/layout/theme/darkBlue/components/Footer.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="footer-wrap">
+    <div class="top w1200 m0a">
+      <ul class="t-box">
+        <li class="t-box t-box-flex1" v-for="(item,index) in footerInfo" :key="index">
+          <div class="left">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="right">
+            <h4>{{item.title}}</h4>
+            <p>{{item.info}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="bottm w1200 m0a t-box">
+      <div class="left t-box">
+        <dl class="t-box-flex1" v-for="(item,index) in footer" :key="index">
+          <dt>{{item.title}}</dt>
+          <dd v-for="(info, index1) in item.item" :key="index1">{{info}}</dd>
+        </dl>
+      </div>
+      <div class="right">
+        <img :src="logo" alt="">
+        <p>© 悠福网 2008-2012 上海对外服务有限公司 
+        <p>版权所有  沪ICP备12010602号-1</p>  
+        <p>咨询电话：021-63879900</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      footerInfo: [
+        {
+          img: require("../assets/f-brand.png"),
+          title: "100%品牌",
+          info: "企业综合福利服务商"
+        },
+        {
+          img: require("../assets/f-reward.png"),
+          title: "100%专业",
+          info: "服务企业  幸福员工"
+        },
+        {
+          img: require("../assets/f-tel.png"),
+          title: "客服电话",
+          info: "400-1962-002"
+        }
+      ],
+      footer: [
+        {
+          title: "新手帮助",
+          item: ["注册登录", "找回密码"]
+        },
+        {
+          title: "交易指南",
+          item: ["结算支付", "订单管理", "福点账户"]
+        },
+        {
+          title: "售后服务",
+          item: ["售后准则", "退货退款", "发票制度"]
+        },
+        {
+          title: "产品介绍",
+          item: ["节假慰问", "生活服务"]
+        },
+        {
+          title: "关于我们",
+          item: ["关于我们", "诚聘英才"]
+        }
+      ],
+      logo: require("../assets/logo1.png")
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.footer-wrap {
+  width: 100%;
+  background-color: #eeeeee;
+  .top {
+    border-bottom: 1px solid #dddddd;
+    padding: 28px 0 21px;
+    height: 41px;
+    li {
+      justify-content: center;
+    }
+    .left {
+      margin-right: 20px;
+    }
+    .right {
+      h4 {
+        font-size: 18px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #444444;
+      }
+      p {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #999999;
+        margin-top: 7px;
+      }
+    }
+  }
+  .bottm {
+    padding: 48px 0 40px;
+    .left {
+      padding-left: 110px;
+    }
+    dl {
+      margin-right: 80px;
+    }
+    dt {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 16px;
+      color: #999999;
+      margin-bottom: 17px;
+    }
+    dd {
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 16px;
+      color: #999999;
+      margin-bottom: 10px;
+    }
+    .right {
+      padding-left: 30px;
+      img {
+        margin-bottom: 10px;
+      }
+      p {
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 18px;
+        color: #999999;
+      }
+    }
+  }
+}
+</style>