@hbisty/qj-common 5.0.4

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="nav-bg">
+    <el-menu class="navbar" mode="horizontal">
+      <div class="nav-logo">
+        <img src="../../../assets/logo_s.png">
+      </div>
+      <div class="nav-head">
+        <span class="spl_line"></span>
+        <!--搜索框-->
+        <div class="nav">
+          <div class="search">
+            <input type="text" v-model="keywords" @keyup.enter="search" placeholder="耳机">
+            <button @click="search">
+              <i class="el-icon-search"></i>
+            </button>
+          </div>
+        </div>
+        <!--购物车-->
+        <div class="nav-car nav">
+          <a class="el-icon-goods" href="/paas/pc-mall/index.html#/car"></a>
+        </div>
+        <div class="log_uot nav">
+          <i class="icon-tuichu iconfont" @click="logout">
+            <span>退出</span>
+          </i>
+        </div>
+      </div>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keywords: ""
+    };
+  },
+  methods: {
+    logout() {
+      this.$store.dispatch("LogOut").then(() => {
+        window.sessionStorage.clear();
+        this.$store.commit("ADD_MENU", []);
+        location.href = `${location.origin}/paas/index/index.html#/loginWhite`;
+      });
+    },
+    search() {
+      window.location.href = `/paas/pc-mall#/searchResult?searchParam=${
+        this.keywords
+      }`;
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.nav-logo img {
+  margin-left: 15px;
+}
+.nav-head {
+  flex: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #fff;
+  margin-right: 15px;
+  // font-weight: normal;
+  // transition: all 10s linear;
+  .nav {
+    margin-left: 40px;
+  }
+  .search {
+    width: 174px;
+    height: 30px;
+    line-height: 30px;
+    margin: 7px;
+    background-color: #ffffff;
+    border-radius: 15px;
+    border: solid 1px #f2f2f2;
+    overflow: hidden;
+    position: relative;
+    input {
+      width: 100%;
+      height: 100%;
+      padding-left: 16px;
+      box-sizing: border-box;
+      transition: width 0.3s;
+      &:focus {
+        width: 300px;
+      }
+    }
+    button {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: #fff;
+      width: 35px;
+      color: #b3b3b3;
+      cursor: pointer;
+    }
+  }
+  i {
+    display: inline-block;
+    width: 50px;
+    height: 18px;
+    line-height: 18px;
+    cursor: pointer;
+    span {
+      font-size: 12px;
+      margin: 0 8px 0 2px;
+    }
+  }
+
+  .spl_line {
+    height: 40px;
+    margin-right: 15px;
+  }
+  .log_uot {
+    cursor: pointer;
+    .logout-icon {
+      vertical-align: middle;
+      background-image: url("../../../../../assets/nav/logout.png");
+      background-size: 100% 100%;
+    }
+    .logout-text {
+      position: absolute;
+      bottom: -15px;
+      font-size: 12px;
+    }
+    &:hover {
+      .logout-icon {
+        vertical-align: middle;
+        background-image: url("../../../../../assets/nav/logout-hover.png");
+        background-size: 100% 100%;
+      }
+      .logout-text {
+        color: #409dff;
+      }
+    }
+  }
+}
+.el-menu--horizontal {
+  border: none;
+}
+.set-icon {
+  background-image: url("../../../../../assets/nav/set.png");
+  background-size: 100% 100%;
+}
+
+.info-icon {
+  background-image: url("../../../../../assets/nav/info.png");
+  background-size: 100% 100%;
+}
+.navbar {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  height: 44px;
+  line-height: 44px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 0 !important;
+  .hamburger-container {
+    line-height: 54px;
+    height: 56px;
+    float: left;
+    padding: 0 14px 0 20px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 56px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-for="item in routes[0].children" v-if="!item.hidden&&item.meta">
+      <!-- <router-link v-if="item.children.length===1 && !item.children[0].children && !item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
+        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
+          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="goods"></svg-icon>
+          <i class="iconfont icon-ic_opt_feature"></i>
+          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
+        </el-menu-item>
+      </router-link>-->
+
+      <el-submenu v-if="item.children" :index="item.name||item.path" :key="item.name">
+        <template slot="title">
+          <!--<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>-->
+          <!--<i :class="'iconfont '+item.meta.icon"></i>-->
+          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}1</span>
+        </template>
+
+        <template v-for="child in item.children" v-if="item.children">
+          <sidebar-item
+            :is-nest="true"
+            class="nest-menu"
+            v-if="child.children&&child.children.length>0"
+            :routes="[child]"
+            :key="child.path"
+          ></sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <!--<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>-->
+              <!--<i :class="'iconfont '+child.meta.icon"></i>-->
+              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+      <el-menu-item v-else :index="'/'+ item.path ">
+        <router-link :to=" '/'+ item.path " :key="item.path">
+          <!--<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>-->
+          <i :class="'iconfont '+item.meta.icon"></i>
+          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
+        </router-link>
+      </el-menu-item>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarItem",
+  props: {
+    routes: {
+      type: Array
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    console.log(this.routes, "=====++++==");
+    // this.loadData();
+  }
+};
+</script>
+<style rel="stylesheet" scoped>
+.menu-wrapper li.el-menu-item:focus,
+.menu-wrapper li.el-menu-item:hover,
+.menu-wrapper li.el-menu-item.is-active {
+  background-color: #f2f2f2 !important;
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="app-title">
+            {{appList.name}}
+        </div>
+      <scroll-bar>
+        <el-menu mode="vertical"
+                 class="el-menu-vertical-demo"
+                 :default-active="$route.path"
+                 background-color="#fff"
+                 @select="handleSelect">
+          <sidebar-item :routes="routes"></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 },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'appList'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .app-title {
+        height: 58px;
+        line-height: 58px;
+        text-align: center;
+        color: #333;
+        font-weight: bold;
+    }
+</style>
+

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

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

package/src/views/layout-default/Layout.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-wrapper" :class="[sidebar.opened ? 'hideSidebar' : '',customColor]">
+    <!-- <el-container>
+      <el-aside  ><sidebar class="sidebar-container"></sidebar></el-aside>
+      <el-container>
+        <el-header><navbar></navbar></el-header>
+        <el-main><app-main :style="{height:height+'px'}"></app-main></el-main>
+        <el-footer><app-footer></app-footer></el-footer>
+      </el-container>
+    </el-container>-->
+    <left-nav></left-nav>
+    <div class="left-menu-container" :class="{'is-collapse': sidebar.appNavOpen}">
+      <sidebar class="sidebar-container"></sidebar>
+
+      <div class="main-container">
+        <!-- <div v-if="!isIndex" class="nav-collapsed" @click="toggleSideBar">
+            <img src="./assets/open.png">
+        </div>-->
+        <navbar @themeClick="themeClick"></navbar>
+        <theme-picker :theme="theme"></theme-picker>
+        <app-main :style="{height:height+'px'}"></app-main>
+        <!-- <app-footer></app-footer> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
+import ThemePicker from "#/components/ThemePicker";
+
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    ThemePicker
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: document.documentElement.clientHeight - 50,
+      customColor: "custom-409eff",
+      theme: "#409eff"
+    };
+  },
+  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 - 60;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    },
+    themeClick(color) {
+      //主题切换
+      this.customColor = "custom-" + color;
+      this.theme = "#" + color;
+      let bodyHtml = document.getElementsByTagName("body")[0];
+      // bodyHtml
+      bodyHtml.className = this.customColor;
+    }
+  }
+};
+</script>
+<style >
+.el-menu.navbar.el-menu--horizontal {
+  background-color: #fff !important;
+}
+html {
+  height: 100%;
+  overflow: hidden;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "../../../src/styles/mixin.scss";
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  .left-menu-container {
+    position: relative;
+    margin-left: 126px;
+    transition: all 0.4s;
+    .sidebar-container {
+      border-right: solid 1px #e5e5e5;
+      /*box-shadow: 2px 1px 5px #c0c7cf;*/
+    }
+  }
+  .is-collapse {
+    margin-left: 50px;
+  }
+  .nav-collapsed img {
+    position: absolute;
+    top: 48%;
+    left: -30px;
+    z-index: 1001;
+    width: 30px;
+    transition: 0.38s;
+    transform-origin: 50% 50%;
+    transform: rotateY(0deg);
+    cursor: pointer;
+  }
+}
+.hideSidebar {
+  .nav-collapsed img {
+    left: 0;
+    transform: rotateY(180deg);
+  }
+}
+</style>

package/src/views/layout-default/components/AppMain.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <!-- <router-view :key="key"></router-view> -->
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+}
+</script>

package/src/views/layout-default/components/Footer.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="footer">
+        <span>@2018</span>
+        <span>copyright</span>
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .footer{
+        height: 40px;
+        line-height: 40px;
+        border-top: 1px solid #e6e6e6;
+        span{
+            margin-left: 30px;
+        }
+    }
+</style>
+

package/src/views/layout-default/components/LeftNavbar.vue

@@ -0,0 +1,164 @@
+<template>
+  <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo">
+    <div class="tool-menu-svg">
+      <a class="logo-container" @click="navigator">
+        <img :src="logoImg">
+      </a>
+    </div>
+    <div class="app-scroll-container" :style="{height:height+'px'}">
+      <el-menu :default-active="appActive" @select="handleSelect" class="el-menu-vertical">
+        <el-menu-item
+          v-for="item in appList.list"
+          :key="item.menuJspath"
+          :index="item.menuJspath || item.proappMenuCode"
+        >
+          <a :href="item.menuAction">
+            <!--  <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i> -->
+          </a>
+          <a :href="item.menuAction" slot="title">{{ item.menuName}}</a>
+        </el-menu-item>
+      </el-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getProappinfo } from "#/api/login";
+import ScrollBar from "#/components/ScrollBar";
+export default {
+  components: { ScrollBar },
+  data() {
+    return {
+      logoImg: require("../assets/logo.png"),
+      indexHref: "/paas/index",
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 58
+    };
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  created() {
+    this.getAppInfo();
+  },
+  // mounted() {
+  //   console.log(this.appList, "console.log");
+  // },
+  methods: {
+    navigator() {
+      window.sessionStorage.setItem("menuCode", '');
+      window.location.href = process.env.API_ROOT + this.indexHref;
+    },
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    getAppInfo() {
+      let imgLogo = JSON.parse(
+        window.sessionStorage.getItem("proappEnvLayout")
+      );
+      if (imgLogo) {
+        this.logoImg = imgLogo.proappEnvLogo;
+        this.indexHref = imgLogo.proappEnvIndexr;
+      } else {
+        getProappinfo().then(data => {
+          console.log(data, "data");
+          if (data) {
+            this.indexHref = data.proappEnvIndexr;
+            window.sessionStorage.setItem(
+              "proappEnvLayout",
+              JSON.stringify(data)
+            );
+            this.$store.commit("setProappEnvLayout", data);
+            this.logoImg = data.proappEnvLogo;
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+<style>
+</style>
+
+<style rel="stylesheet" scoped>
+.el-menu-vertical-demo {
+  position: absolute;
+  width: 126px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  transition: width 0.43s;
+  /* background: #2c4158; */
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.app-scroll-container {
+  margin-top: 60px;
+  overflow: auto;
+  background: inherit;
+}
+.app-scroll-container .el-menu {
+  background: none;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+
+  border-right: none;
+}
+
+.el-menu-vertical .el-menu-item {
+  height: 44px;
+  line-height: 44px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  padding: 0 !important;
+  text-indent: -10px;
+  color: #fff;
+}
+.el-menu-item.is-active {
+  background: #eee;
+}
+.logo-container {
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  height: 48px;
+  width: 48px;
+  margin: 5px auto;
+  overflow: hidden;
+}
+.logo-container img {
+  /*margin-top: 10px;*/
+  /*margin-bottom: 20px;*/
+  max-width: 145px;
+  max-height: 60px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  z-index: 12;
+  background: inherit;
+  /* box-shadow: -5px 2px 10px 0 #303747; */
+}
+
+.app-scroll-container.scroll-container {
+  background: none !important;
+}
+</style>
+