qj-happy-common-zhongjian 1.0.27

package/src/views/layout-default/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-default/theme/darkBlue/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,70 @@
+<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}}</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-default/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-default/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/pc/Internationalization.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="inter-box">
+    <el-dropdown v-if="interArray.length > 1" @command="handleCommand">
+      <span class="el-dropdown-link">
+        {{command}}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(item,index) in interArray"
+          :key="index"
+          :command="item"
+        >{{item.label}}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      Internationalization: null,
+      interObj: {
+        zh: "中文",
+        en: "Enlish"
+      },
+      interArray: [],
+      command: null
+    };
+  },
+  mounted() {
+    let proappEnvLayout = sessionStorage.getItem("proappEnvLayout");
+    this.Internationalization = proappEnvLayout
+      ? JSON.parse(proappEnvLayout).proappEnvInter || "zh"
+      : "zh";
+    if (
+      proappEnvLayout &&
+      (JSON.parse(proappEnvLayout).proappEnvInter == null ||
+        JSON.parse(proappEnvLayout).proappEnvInter == "")
+    ) {
+      localStorage.removeItem("inter");
+    }
+    this.Internationalization &&
+      this.Internationalization.split(",").forEach((el, index) => {
+        if (localStorage.getItem("inter")) {
+          this.command = this.interObj[localStorage.getItem("inter")];
+        } else if (index == 0) {
+          this.command = this.interObj[el];
+        }
+        this.interArray.push({
+          label: this.interObj[el],
+          id: el
+        });
+      });
+    if (!localStorage.getItem("inter")) {
+      this.handleCommand({
+        label: this.interObj[this.Internationalization.split(",")[0]],
+        id: this.Internationalization.split(",")[0]
+      });
+    }
+  },
+  methods: {
+    handleCommand(command) {
+      this.command = command.label;
+      localStorage.setItem("inter", command.id);
+      this.$emit("handleCommand", command);
+    }
+  }
+};
+</script>>
+<style lang="scss" scoped>
+.inter-box {
+  position: absolute;
+  right: 50%;
+  margin-right: -700px;
+  top: 11px;
+  height: 16px;
+  line-height: 16px;
+}
+</style>