qj-common 4.3.0 → 4.3.2

package/src/views/pc/default/header-modules/headerStyleKYW.vue

@@ -1,436 +1,436 @@
-<template>
-  <header class="ans-header">
-    <div class="ans-header__head">
-      <div class="auto flex align-items--center">
-        <div class="ans-header__head--logo">
-          <a href="/">
-            <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt />
-          </a>
-        </div>
-        <div class="flex flex-item1 justify-content--flex-end">
-          <div class="ans-header__head--search flex border-theme">
-            <input type="text" v-model="searchValue" placeholder="输入关键词" />
-            <button type="button" class="flex-item1 bg-theme" @click="searchBtn">搜索</button>
-          </div>
-          <div
-            class="ans-header__head--car flex justify-content--center align-items--center"
-            @click="auctionHandler"
-          >
-            我的竞价
-            <span v-if="auctionNum">{{auctionNum}}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="ans-header__nav">
-      <div class="auto flex">
-        <div @mouseenter="cateShow" @mouseleave="cateHide" class="ans-header__nav--class">
-          <h3 class="bg-theme">产品分类</h3>
-          <div class="ans-class flex" v-if="cateState">
-            <div class="ans-class__tab">
-              <ul>
-                <!-- 二级 -->
-                <li
-                  class="flex justify-content--center align-items--center"
-                  v-for="(item,index) in cate"
-                  :key="index"
-                  :class="[item.goodsClassCode === cateCode ? 'active':'']"
-                  @mouseover="cateHandler(item)"
-                >
-                  <span></span>
-                  <p>{{item.goodsClassName}}</p>
-                </li>
-              </ul>
-            </div>
-            <div class="ans-class__content flex-item1">
-              <!-- 三级 -->
-              <div class="ans-class__content--item">
-                <dl class="flex" v-for="(item,index) in cateThree" :key="index">
-                  <dt>{{item.goodsClassName}}</dt>
-                  <dd class="flex-item1 flex flex-wrap--wrap">
-                    <a
-                      v-for="(itemT,indexT) in item.childList"
-                      :key="indexT"
-                      @click="cateHref(itemT)"
-                    >{{itemT.goodsClassName}}</a>
-                  </dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="ans-header__nav--list flex-item1">
-
-          <v-nav-ans v-if="navChildren" :navChildren="navChildren"></v-nav-ans>
-        </div>
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import api from "#/api/common/index";
-import VNavAns from "../nav-modules/navAns";
-export default {
-  components: {
-    VNavAns
-  },
-  data() {
-    return {
-      keywords: "",
-      navChildren: null,
-      searchValue: this.$route.query.searchParam
-        ? this.$route.query.searchParam
-        : "",
-      menuList: JSON.parse(window.sessionStorage.getItem("menuList"))
-        ? JSON.parse(window.sessionStorage.getItem("menuList")).menuList
-        : [],
-      cate: [], // 二级分类
-      cateCode: null, //二级选中code
-      cateThree: [], //三级分类
-      cateThreeCode: null, //三级选中code,暂时没有用
-      cateState: false, // 二级菜单默认false
-      navChildren: null,
-      auctionNum: null
-    };
-  },
-  created() {
-    localStorage.getItem("searchParam")
-      ? (this.searchValue = localStorage.getItem("searchParam"))
-      : "";
-      let interval = setInterval(() => {
-      let proappEnvLogo1 = JSON.parse(window.sessionStorage.getItem("proappEnvLayout"));
-      if (proappEnvLogo1) {
-          this.proappEnvLogo = proappEnvLogo1;
-          clearInterval(interval)
-      }
-    }, 400);
-  },
-  mounted() {
-    // 获取分类
-    if (this.getUserCookie) {
-      this.getauctionNum();
-    }
-    this.queryGoodsClassTree();
-    //对nav导航进行操作
-    this.menuList.forEach(el => {
-      if (el.menuDefaultClass === "nav") {
-        //表示是导航
-        this.navChildren = JSON.parse(JSON.stringify(el.children));
-      }
-    });
-  },
-
-  computed: {
-    proappEnvLogo() {
-      let proappEnvLogo = sessionStorage.getItem("proappEnvLayout")
-        ? JSON.parse(sessionStorage.getItem("proappEnvLayout"))
-        : null;
-      return proappEnvLogo;
-    },
-    searchValue() {
-      return this.$route.query.searchParam ? this.$route.query.searchParam : "";
-    },
-    carName() {
-      return sessionStorage.getItem("carName")
-        ? sessionStorage.getItem("carName")
-        : "购物车";
-    }
-  },
-  methods: {
-    cateShow() {
-      this.cateState = true;
-    },
-    getauctionNum() {
-      api.getauctionNum().then(res => {
-        if (res.success) {
-          this.auctionNum = res.dataObj;
-        }
-      });
-    },
-    cateHide() {
-      this.cateState = false;
-    },
-    auctionHandler() {
-      location.href = "/paas/order-manager/index.html#/auction";
-    },
-    queryGoodsClassTree() {
-      api.queryGoodsClassTree().then(res => {
-        console.log(res);
-        this.cate = res; // 二级分类
-        this.cateThree = res && res[0] && res[0].childList; //默认选中第一个二级分类
-        this.cateCode = res && res[0] && res[0].goodsClassCode; //二级选中的code
-      });
-    },
-    searchBtn() {
-      localStorage.removeItem("searchParam");
-
-      if (this.$route.path == "/forecastList") {
-        location.href =
-          "/paas/pc-mall/index.html#/forecastList?searchParam=" +
-          this.searchValue;
-      } else {
-        // 默认是公共搜索
-        location.href =
-          "/paas/pc-mall/index.html#/noticeList?searchParam=" +
-          this.searchValue;
-      }
-    },
-    cateHandler(item) {
-      this.cateThree = item.childList;
-      this.cateCode = item.goodsClassCode; //二级选中的code
-    },
-    cateHref(item) {
-      if (this.$route.path == "/noticeList") {
-        if (location.href.indexOf("localhost") > 0) {
-          this.$router.push({
-            path: "/noticeList",
-            query: {
-              classtreeCode: item.classtreeCode,
-              goodsClassName: item.goodsClassName
-            }
-          });
-        } else {
-          location.href =
-            "/paas/pc-mall/index.html#/noticeList?classtreeCode=" +
-            item.classtreeCode +
-            "&&goodsClassName=" +
-            item.goodsClassName;
-        }
-      } else if (this.$route.path == "/forecastList") {
-        if (location.href.indexOf("localhost") > 0) {
-          this.$router.push({
-            path: "/forecastList",
-            query: {
-              classtreeCode: item.classtreeCode,
-              goodsClassName: item.goodsClassName
-            }
-          });
-        } else {
-          location.href =
-            "/paas/pc-mall/index.html#/forecastList?classtreeCode=" +
-            item.classtreeCode +
-            "&&goodsClassName=" +
-            item.goodsClassName;
-        }
-      } else {
-        if (location.href.indexOf("localhost") > 0) {
-          this.$router.push({
-            path: "/noticeList",
-            query: {
-              classtreeCode: item.classtreeCode,
-              goodsClassName: item.goodsClassName
-            }
-          });
-        } else {
-          location.href =
-            "/paas/pc-mall/index.html#/noticeList?classtreeCode=" +
-            item.classtreeCode +
-            "&&goodsClassName=" +
-            item.goodsClassName;
-        }
-      }
-    },
-    getUserCookie() {
-      let cookie = document.cookie;
-      let start = cookie.indexOf("saas-user-");
-      if (start > -1) {
-        let end = cookie.indexOf("=", start);
-        return cookie.substring(start, end);
-      } else {
-        return null;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ans-header {
-  &__head {
-    height: 126px;
-    line-height: 126px;
-    background: #fff;
-
-    .auto {
-      height: inherit;
-    }
-
-    &--logo {
-      width: 170px;
-	  text-align:center;
-      img {
-		width: 102px;
-      }
-    }
-
-    &--search {
-      width: 566px;
-      height: 34px;
-      line-height: 34px;
-      border: 2px solid;
-      margin-right: 20px;
-			box-sizing: content-box;
-			
-      input {
-        height: 34px;
-        line-height: 34px;
-        width: 450px;
-        display: block;
-        padding: 0 5px;
-        font-size: 13px;
-      }
-
-      button {
-        // background: #00c0dc;
-        font-size: 16px;
-        color: #fff;
-        cursor: pointer;
-        display: block;
-        line-height: inherit;
-      }
-    }
-
-    &--car {
-      width: 124px;
-      height: 36px;
-      background: #f8f8f8;
-      border: 1px solid #e1e1e1;
-      color: #f23a3a;
-      font-size: 14px;
-      line-height: 36px;
-      cursor: pointer;
-
-      span {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        text-align: center;
-        line-height: 20px;
-        background: #f23a3a;
-        border-radius: 50%;
-        font-size: 12px;
-        color: #fff;
-        margin-left: 10px;
-      }
-    }
-  }
-
-  &__nav {
-    background: #fff;
-    height: 40px;
-    line-height: 40px;
-    border-bottom: 1px solid #383838;
-
-    &--class {
-      margin-right: 8px;
-      position: relative;
-
-      // &:hover .ans-class {
-      //   display: flex;
-      //   display: -webkit-flex;
-      // }
-
-      h3 {
-        width: 170px;
-        font-size: 14px;
-        color: #fff;
-        // background: #00c0dc;
-        text-align: center;
-      }
-    }
-  }
-}
-.ans-class {
-  position: absolute;
-  width: 1200px;
-  height: 440px;
-  top: 40px;
-  left: 0;
-  z-index: 10;
-  overflow: hidden;
-  border-top: 1px solid #383838;
-  box-shadow: 3px 3px 6px #e0dcdc;
-
-  &__tab {
-    width: 170px;
-    background: #333;
-
-    ul {
-      li {
-        height: 40px;
-        line-height: 40px;
-        color: #fff;
-        font-size: 14px;
-        cursor: pointer;
-
-        p {
-          width: 100px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        span {
-          display: block;
-          width: 4px;
-          height: 4px;
-          background: rgba(153, 153, 153, 1);
-          margin-right: 10px;
-        }
-
-        &:hover,
-        &.active {
-          background: #fff;
-          color: #333;
-        }
-      }
-    }
-  }
-
-  &__content {
-    width: 100%;
-    background: #fff;
-    padding: 12px 30px;
-
-    dl {
-      line-height: 14px;
-      margin: 12px 0;
-
-      dt {
-        font-size: 14px;
-        font-weight: bold;
-        color: rgba(51, 51, 51, 1);
-        width: 76px;
-        margin-right: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 10px 0;
-      }
-
-      dd {
-        a {
-          font-size: 14px;
-          color: #999999;
-          padding: 0 10px;
-          border-left: 1px solid #f5f5f5;
-          margin: 10px 0;
-
-          &:hover,
-          &.active {
-            color: #f33415;
-          }
-        }
-      }
-    }
-  }
-}
-.ans-none {
-  display: none;
-}
-.auto {
-  margin: 0 auto;
-  width: 1200px;
-}
+<template>
+  <header class="ans-header">
+    <div class="ans-header__head">
+      <div class="auto flex align-items--center">
+        <div class="ans-header__head--logo">
+          <a href="/">
+            <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt />
+          </a>
+        </div>
+        <div class="flex flex-item1 justify-content--flex-end">
+          <div class="ans-header__head--search flex border-theme">
+            <input type="text" v-model="searchValue" placeholder="输入关键词" />
+            <button type="button" class="flex-item1 bg-theme" @click="searchBtn">搜索</button>
+          </div>
+          <div
+            class="ans-header__head--car flex justify-content--center align-items--center"
+            @click="auctionHandler"
+          >
+            我的竞价
+            <span v-if="auctionNum">{{auctionNum}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ans-header__nav">
+      <div class="auto flex">
+        <div @mouseenter="cateShow" @mouseleave="cateHide" class="ans-header__nav--class">
+          <h3 class="bg-theme">产品分类</h3>
+          <div class="ans-class flex" v-if="cateState">
+            <div class="ans-class__tab">
+              <ul>
+                <!-- 二级 -->
+                <li
+                  class="flex justify-content--center align-items--center"
+                  v-for="(item,index) in cate"
+                  :key="index"
+                  :class="[item.goodsClassCode === cateCode ? 'active':'']"
+                  @mouseover="cateHandler(item)"
+                >
+                  <span></span>
+                  <p>{{item.goodsClassName}}</p>
+                </li>
+              </ul>
+            </div>
+            <div class="ans-class__content flex-item1">
+              <!-- 三级 -->
+              <div class="ans-class__content--item">
+                <dl class="flex" v-for="(item,index) in cateThree" :key="index">
+                  <dt>{{item.goodsClassName}}</dt>
+                  <dd class="flex-item1 flex flex-wrap--wrap">
+                    <a
+                      v-for="(itemT,indexT) in item.childList"
+                      :key="indexT"
+                      @click="cateHref(itemT)"
+                    >{{itemT.goodsClassName}}</a>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ans-header__nav--list flex-item1">
+
+          <v-nav-ans v-if="navChildren" :navChildren="navChildren"></v-nav-ans>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "#/api/common/index";
+import VNavAns from "../nav-modules/navAns";
+export default {
+  components: {
+    VNavAns
+  },
+  data() {
+    return {
+      keywords: "",
+      navChildren: null,
+      searchValue: this.$route.query.searchParam
+        ? this.$route.query.searchParam
+        : "",
+      menuList: JSON.parse(window.sessionStorage.getItem("menuList"))
+        ? JSON.parse(window.sessionStorage.getItem("menuList")).menuList
+        : [],
+      cate: [], // 二级分类
+      cateCode: null, //二级选中code
+      cateThree: [], //三级分类
+      cateThreeCode: null, //三级选中code,暂时没有用
+      cateState: false, // 二级菜单默认false
+      navChildren: null,
+      auctionNum: null
+    };
+  },
+  created() {
+    localStorage.getItem("searchParam")
+      ? (this.searchValue = localStorage.getItem("searchParam"))
+      : "";
+      let interval = setInterval(() => {
+      let proappEnvLogo1 = JSON.parse(window.sessionStorage.getItem("proappEnvLayout"));
+      if (proappEnvLogo1) {
+          this.proappEnvLogo = proappEnvLogo1;
+          clearInterval(interval)
+      }
+    }, 400);
+  },
+  mounted() {
+    // 获取分类
+    if (this.getUserCookie) {
+      this.getauctionNum();
+    }
+    this.queryGoodsClassTree();
+    //对nav导航进行操作
+    this.menuList.forEach(el => {
+      if (el.menuDefaultClass === "nav") {
+        //表示是导航
+        this.navChildren = JSON.parse(JSON.stringify(el.children));
+      }
+    });
+  },
+
+  computed: {
+    proappEnvLogo() {
+      let proappEnvLogo = sessionStorage.getItem("proappEnvLayout")
+        ? JSON.parse(sessionStorage.getItem("proappEnvLayout"))
+        : null;
+      return proappEnvLogo;
+    },
+    searchValue() {
+      return this.$route.query.searchParam ? this.$route.query.searchParam : "";
+    },
+    carName() {
+      return sessionStorage.getItem("carName")
+        ? sessionStorage.getItem("carName")
+        : "购物车";
+    }
+  },
+  methods: {
+    cateShow() {
+      this.cateState = true;
+    },
+    getauctionNum() {
+      api.getauctionNum().then(res => {
+        if (res.success) {
+          this.auctionNum = res.dataObj;
+        }
+      });
+    },
+    cateHide() {
+      this.cateState = false;
+    },
+    auctionHandler() {
+      location.href = "/paas/order-manager/index.html#/auction";
+    },
+    queryGoodsClassTree() {
+      api.queryGoodsClassTree().then(res => {
+        console.log(res);
+        this.cate = res; // 二级分类
+        this.cateThree = res && res[0] && res[0].childList; //默认选中第一个二级分类
+        this.cateCode = res && res[0] && res[0].goodsClassCode; //二级选中的code
+      });
+    },
+    searchBtn() {
+      localStorage.removeItem("searchParam");
+
+      if (this.$route.path == "/forecastList") {
+        location.href =
+          "/paas/pc-mall/index.html#/forecastList?searchParam=" +
+          this.searchValue;
+      } else {
+        // 默认是公共搜索
+        location.href =
+          "/paas/pc-mall/index.html#/noticeList?searchParam=" +
+          this.searchValue;
+      }
+    },
+    cateHandler(item) {
+      this.cateThree = item.childList;
+      this.cateCode = item.goodsClassCode; //二级选中的code
+    },
+    cateHref(item) {
+      if (this.$route.path == "/noticeList") {
+        if (location.href.indexOf("localhost") > 0) {
+          this.$router.push({
+            path: "/noticeList",
+            query: {
+              classtreeCode: item.classtreeCode,
+              goodsClassName: item.goodsClassName
+            }
+          });
+        } else {
+          location.href =
+            "/paas/pc-mall/index.html#/noticeList?classtreeCode=" +
+            item.classtreeCode +
+            "&&goodsClassName=" +
+            item.goodsClassName;
+        }
+      } else if (this.$route.path == "/forecastList") {
+        if (location.href.indexOf("localhost") > 0) {
+          this.$router.push({
+            path: "/forecastList",
+            query: {
+              classtreeCode: item.classtreeCode,
+              goodsClassName: item.goodsClassName
+            }
+          });
+        } else {
+          location.href =
+            "/paas/pc-mall/index.html#/forecastList?classtreeCode=" +
+            item.classtreeCode +
+            "&&goodsClassName=" +
+            item.goodsClassName;
+        }
+      } else {
+        if (location.href.indexOf("localhost") > 0) {
+          this.$router.push({
+            path: "/noticeList",
+            query: {
+              classtreeCode: item.classtreeCode,
+              goodsClassName: item.goodsClassName
+            }
+          });
+        } else {
+          location.href =
+            "/paas/pc-mall/index.html#/noticeList?classtreeCode=" +
+            item.classtreeCode +
+            "&&goodsClassName=" +
+            item.goodsClassName;
+        }
+      }
+    },
+    getUserCookie() {
+      let cookie = document.cookie;
+      let start = cookie.indexOf("saas-user-");
+      if (start > -1) {
+        let end = cookie.indexOf("=", start);
+        return cookie.substring(start, end);
+      } else {
+        return null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ans-header {
+  &__head {
+    height: 126px;
+    line-height: 126px;
+    background: #fff;
+
+    .auto {
+      height: inherit;
+    }
+
+    &--logo {
+      width: 170px;
+	  text-align:center;
+      img {
+		width: 102px;
+      }
+    }
+
+    &--search {
+      width: 566px;
+      height: 34px;
+      line-height: 34px;
+      border: 2px solid;
+      margin-right: 20px;
+			box-sizing: content-box;
+			
+      input {
+        height: 34px;
+        line-height: 34px;
+        width: 450px;
+        display: block;
+        padding: 0 5px;
+        font-size: 13px;
+      }
+
+      button {
+        // background: #00c0dc;
+        font-size: 16px;
+        color: #fff;
+        cursor: pointer;
+        display: block;
+        line-height: inherit;
+      }
+    }
+
+    &--car {
+      width: 124px;
+      height: 36px;
+      background: #f8f8f8;
+      border: 1px solid #e1e1e1;
+      color: #f23a3a;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+
+      span {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        background: #f23a3a;
+        border-radius: 50%;
+        font-size: 12px;
+        color: #fff;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  &__nav {
+    background: #fff;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #383838;
+
+    &--class {
+      margin-right: 8px;
+      position: relative;
+
+      // &:hover .ans-class {
+      //   display: flex;
+      //   display: -webkit-flex;
+      // }
+
+      h3 {
+        width: 170px;
+        font-size: 14px;
+        color: #fff;
+        // background: #00c0dc;
+        text-align: center;
+      }
+    }
+  }
+}
+.ans-class {
+  position: absolute;
+  width: 1200px;
+  height: 440px;
+  top: 40px;
+  left: 0;
+  z-index: 10;
+  overflow: hidden;
+  border-top: 1px solid #383838;
+  box-shadow: 3px 3px 6px #e0dcdc;
+
+  &__tab {
+    width: 170px;
+    background: #333;
+
+    ul {
+      li {
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 14px;
+        cursor: pointer;
+
+        p {
+          width: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        span {
+          display: block;
+          width: 4px;
+          height: 4px;
+          background: rgba(153, 153, 153, 1);
+          margin-right: 10px;
+        }
+
+        &:hover,
+        &.active {
+          background: #fff;
+          color: #333;
+        }
+      }
+    }
+  }
+
+  &__content {
+    width: 100%;
+    background: #fff;
+    padding: 12px 30px;
+
+    dl {
+      line-height: 14px;
+      margin: 12px 0;
+
+      dt {
+        font-size: 14px;
+        font-weight: bold;
+        color: rgba(51, 51, 51, 1);
+        width: 76px;
+        margin-right: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 10px 0;
+      }
+
+      dd {
+        a {
+          font-size: 14px;
+          color: #999999;
+          padding: 0 10px;
+          border-left: 1px solid #f5f5f5;
+          margin: 10px 0;
+
+          &:hover,
+          &.active {
+            color: #f33415;
+          }
+        }
+      }
+    }
+  }
+}
+.ans-none {
+  display: none;
+}
+.auto {
+  margin: 0 auto;
+  width: 1200px;
+}
 </style>