qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="common-top common-theme bg-white">
+    <div class="w1200 m0a header-box" style="clear:both">
+      <div class="left logo-img">
+        <a href="/">
+          <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt />
+        </a>
+      </div>
+      <!-- 中间模块 -->
+      <div class="nav left default-nav">
+        <v-nav v-if="navChildren" :navChildren="navChildren"></v-nav>
+      </div>
+      <div class="right search-box">
+        <el-input class="search-input search-box-input" placeholder @keyup.enter="search" v-model="searchValue">
+          <el-button slot="append" @click.native="search" @keyup.13="search">
+            <i class="el-icon-search icon-search-color"></i>
+          </el-button>
+        </el-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VNav from '../nav-modules/nav';
+export default {
+  components: {
+    VNav,
+  },
+  data() {
+    return {
+      logo: require('../assets/logo_ucc.png'),
+      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 : [],
+    };
+  },
+  created() {
+    localStorage.getItem('searchParam') ? (this.searchValue = localStorage.getItem('searchParam')) : '';
+  },
+  mounted() {
+    //对nav导航进行操作
+    this.menuList.forEach(el => {
+      if (el.menuDefaultClass === 'nav') {
+        //表示是导航
+        this.navChildren = 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: {
+    search() {
+      localStorage.removeItem('searchParam');
+      location.href = '/paas/pc-mall/index.html#/searchResult?searchParam=' + this.searchValue;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.icon-search-color {
+  color: #343434;
+}
+.common-top .search-box .el-input .el-input__inner {
+  border-color: #f2f2f2 !important;
+}
+.common-top .el-input-group__append,
+.common-top .el-input-group__prepend {
+  border-color: #f2f2f2 !important;
+}
+.common-top {
+  .el-input__icon {
+    line-height: 20px !important;
+  }
+  .search-box-input {
+    font-size: 12px;
+  }
+  .el-button {
+    width: 40px;
+  }
+  .el-input .el-input__inner {
+    /*border-radius: 32px 0 0 32px !important;*/
+    width: 100% !important;
+    height: 33px !important;
+  }
+  .search-box .el-input .el-input__inner {
+    border-right: none !important;
+  }
+  .el-input-group__append,
+  .el-input-group__prepend {
+    background: #f53415;
+    border-left: none !important;
+    color: #343434 !important;
+    /*border-radius: 0 32px 32px 0 !important;*/
+    border: none !important;
+    span {
+      font-size: 18px;
+      font-weight: bold;
+      i {
+        color: #ffffff !important;
+      }
+    }
+  }
+  .el-input-group--append .el-input__inner,
+  .el-input-group--prepend .el-input__inner,
+  .el-input-group__append {
+    border-radius: 0;
+  }
+}
+.default-nav {
+  li {
+    margin-right: 72px !important;
+    a {
+      font-weight: normal;
+      font-size: 16px;
+    }
+  }
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.icon-UCC-PC-sousuo {
+  font-size: 12px;
+}
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.nav {
+  line-height: 120px;
+  max-width: 768px;
+  height: 120px;
+  width: auto;
+}
+.common-top {
+  border-bottom: 1px solid #f5f5f5;
+  .header-box {
+    height: inherit;
+  }
+  margin: 0 auto;
+  height: 126px;
+  line-height: 126px;
+  // border-bottom: 1px solid #f5f5f5;
+  .logo-img {
+    width: 240px;
+    height: 120px;
+    overflow: hidden;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      height: inherit;
+    }
+  }
+
+  .search-box {
+    .search-history {
+      height: 30px;
+      line-height: 30px;
+      float: left;
+      font-size: 13px;
+      color: #999;
+      i {
+        margin: 0 5px;
+      }
+    }
+  }
+
+  .right {
+    .car-box {
+      position: relative;
+      // width: 160px;
+      height: 30px;
+      border: 1px solid #e0e0e0;
+      // border-radius: 5px;
+      line-height: 30px;
+      text-align: center;
+      display: block;
+      float: left;
+      padding: 0 20px;
+      margin: 50px 0 0 100px;
+      .car-num {
+        position: absolute;
+        color: #fff;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        line-height: 32px;
+        border-radius: 50%;
+        background: #ff9e01;
+        right: -16px;
+        top: -16px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +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;
+}
+</style>