qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,466 @@
+<template>
+  <div
+    :class="{'is-active':sidebar.appNavOpen}"
+    class="el-menu-vertical-demo"
+    :style="{height:height+'px'}"
+  >
+    <!-- <div class="top-logo">
+        <img src="../assets/logo.png">
+    </div>-->
+    <div class="tool-menu-svg">
+      <a class="header-container">
+        <div class="header-img">
+          <i class="user-icon"></i>
+        </div>
+        <span>{{$store.state.user.name}}</span>
+      </a>
+      <a class="my-youfu">{{memberName}}</a>
+    </div>
+    <div class="el-container-box">
+      <div class="el-menu-box">
+        <ul
+          class="el-menu-ul"
+          v-for="(item,index) in userLeftRouter.list"
+          :key="index"
+          v-if="!item.menuTarget"
+        >
+          <li
+            class="active"
+            v-for="(itemChild,indexChild) in (item.children ? item.children : [])"
+            :key="indexChild"
+          >
+            <a class="active" @click="menuLi($event)">
+              <i
+                class="iconfont"
+                :class="itemChild.proappMenuRemark ? itemChild.proappMenuRemark :'icon-caidan-shi'"
+              ></i>
+              {{itemChild.menuName}}
+            </a>
+            <ol v-if="itemChild.children!==null">
+              <li
+                v-for="(itemOl,indexOl) in itemChild.children"
+                :key="indexOl"
+                :class="[$route.path == '/'+itemOl.menuAction ? 'active':'',itemOl.menuAction]"
+                v-if=" !itemOl.menuTarget"
+              >
+                <div class="el-li-title">
+                  <a @click="menuHref(item.menuAction,itemOl,2)">
+                    <em></em>
+                    <span></span>
+                    {{itemOl.menuName}}
+                  </a>
+                  <i
+                    v-if="itemOl.children!==null"
+                    :class="[iconStatic? 'el-icon-minus':'el-icon-plus', 'el-icon']"
+                    @click="menuIcon($event)"
+                  ></i>
+                </div>
+                <dl v-if="itemOl.children!==null" class="el-dl-list-box">
+                  <dd
+                    v-for="(itemDd,indexDd) in itemOl.children"
+                    :key="indexDd"
+                    :class="[$route.path.split('/')[2] == itemDd.menuAction ? 'is-active3':'']"
+                    v-if=" !itemDd.menuTarget"
+                  >
+                    <a
+                      class="el-dd-list"
+                      @click="menuHref(item.menuAction,itemDd,3)"
+                    >{{itemDd.menuName}}</a>
+                  </dd>
+                </dl>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 85,
+      heightBox: document.documentElement.clientHeight - 355,
+      isCollapse: true,
+      iconStatic: false,
+      memberName: "会员中心", //会员中心账户名
+      userLeftRouter: []
+    };
+  },
+  beforeMounted() {
+    console.log(this.appList, "appListappList");
+    this.appList.forEach(el => {
+      if (el.menuDefaultClass === "user") {
+        this.memberName = el.menuName ? el.menuName : "会员中心";
+        let memberRouter = el.children ? el.children : [];
+        memberRouter.forEach(item => {
+          this.userLeftRouter =
+            item.menuDefaultClass === "userLeftRouter" && item.children
+              ? item.children
+              : [];
+        });
+      }
+    });
+  },
+  mounted() {
+    window.addEventListener("resize", this.heightChange);
+    //先判断是几级菜单，现在的是二级菜单
+    if (document.querySelector(".active")) {
+      //表示二级菜单
+      document.querySelector(".active").parentNode.parentNode.className =
+        "active";
+    } else if (document.querySelector(".is-active3")) {
+      //三级菜单
+      let obj = document.querySelector(".is-active3");
+      console.log(obj, "obj");
+      this.iconStatic = true;
+      obj.parentNode.parentNode.childNodes[0].classList.add("active");
+      obj.parentNode.parentNode.parentNode.parentNode.childNodes[0].classList.add(
+        "active"
+      );
+      obj.className = "active";
+    }
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  watch: {},
+  methods: {
+    // toggle(index) {
+    //   this.checkindex = index;
+    // },
+    menuLi(e) {
+      //点击显示二级菜单
+      //点击添加class
+      e.target.classList.toggle("active");
+    },
+    menuIcon(e) {
+      //点击显示三级菜单
+      e.target.parentNode.classList.toggle("active");
+      if (e.target.className.indexOf("el-icon-plus") >= 0) {
+        e.target.classList.remove("el-icon-plus");
+        e.target.classList.add("el-icon-minus");
+      } else {
+        e.target.classList.remove("el-icon-minus");
+        e.target.classList.add("el-icon-plus");
+      }
+    },
+    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);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    menuHref(menuAction, item, index) {
+      let path =
+        index === 2
+          ? "/" + item.menuAction
+          : "/" + item.proappMenuPcode + "/" + item.menuAction;
+      // index===2 是二级菜单，3是三级菜单
+      if (item.children === null) {
+        //可跳转
+        if (location.href.indexOf("localhost") >= 0) {
+          //localhost表示本地跳转
+
+          this.$router.push({
+            path: path
+          });
+
+          this.$store.commit("MENUTITLE", item.menuName);
+        } else {
+          if (location.href.indexOf(menuAction) >= 0) {
+            //表示线上同源下跳转
+            this.$router.push({
+              path: path
+            });
+            this.$store.commit("MENUTITLE", item.menuName);
+          } else {
+            location.href = menuAction + "#" + path;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet" scoped>
+.el-menu-ul ol {
+  display: none;
+  margin-left: 7px;
+  /* transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
+  transform: translateY(0); */
+}
+.el-menu-ul li ol li.active .el-dl-list-box,
+.el-menu-ul ol.active,
+.el-menu-ul li a.active + ol {
+  display: block;
+}
+
+.el-menu-ul .active ol,
+.el-menu-ul .active + ol {
+  display: block;
+}
+
+.el-menu-vertical-demo {
+  width: 196px;
+  margin-top: 12px;
+}
+.user-icon {
+  display: block;
+  height: 80px;
+  overflow: hidden;
+  background: url("../../../../../assets/nav/admin.png") center no-repeat;
+}
+.top-logo {
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  margin-bottom: 2px;
+  background: #fff;
+}
+.top-logo img {
+  height: 70px;
+}
+.el-menu-vertical-demo {
+  background: none;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #f1f8ff !important;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #f1f8ff !important;
+}
+
+.header-img {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 20px 0 0px;
+  text-align: center;
+}
+.header-container {
+  display: block;
+}
+.header-container span {
+  display: block;
+  color: #666;
+  line-height: 30px;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  /*height: 150px;*/
+  text-align: center;
+  /*position: absolute;*/
+  z-index: 12;
+  background: #fff;
+  border-bottom: solid 1px #eee;
+  padding-bottom: 10px;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.my-youfu {
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  background: #f1f8ff;
+  color: #2171d2;
+  margin-top: 30px;
+  position: relative;
+}
+.my-youfu:after {
+  content: "";
+  display: block;
+  width: 4px;
+  background: #2171d2;
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  top: 0;
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 60px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+.el-menu-ul a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+
+.el-menu-ul {
+  margin: 0px 15px;
+  width: 166px;
+  font-size: 14px;
+  line-height: 42px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.el-dl-list-box {
+  display: none;
+}
+.el-dl-list-box a {
+  display: block;
+}
+.el-menu-ul ol li {
+  position: relative;
+}
+.el-menu-ul ol li:last-child .el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 0px;
+}
+.el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+
+.el-menu-ul ol li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+.el-menu-ul ol li:last-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 23px;
+}
+.el-menu-ul i {
+  font-size: 16px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.el-menu-box a {
+  color: #666;
+}
+.el-menu-box {
+  position: relative;
+}
+.el-menu-box ~ .el-menu-box {
+  /* border-top: 1px solid #eee; */
+  margin-top: 20px;
+}
+.el-container-box {
+  background: #fff;
+  /*margin-top: 150px;*/
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.el-li-title span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+.el-li-title.active + dl {
+  display: block;
+}
+.el-li-title em {
+  width: 15px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+  vertical-align: middle;
+}
+.el-dd-list {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  padding-left: 45px;
+}
+.el-li-title i.el-icon {
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+</style>
+

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>
+