@hbisty/qj-common 5.0.4

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

@@ -0,0 +1,428 @@
+<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">
+            <el-select v-model="selects" placeholder="" class="selects">
+              <el-option label="竞价" value="0"></el-option>
+              <el-option label="现货" value="1"></el-option>
+            </el-select>
+            <input type="text" v-model="searchValue" placeholder="商品名称、编号搜索"/>
+            
+            <button type="button" class="flex-item1 bg-theme" @click="searchBtn"><i class="el-icon-search"></i></button>
+          </div>
+          <div
+            class="ans-header__head--car flex justify-content--center align-items--center border-theme c-theme"
+            @click="auctionHandler"
+          >
+           <i style="padding-right:5px"><img src="../assets/chuizi.png" alt="" width="24" height="24"></i> 我的竞价
+            <span v-if="auctionNum">{{auctionNum}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ans-header__nav">
+      <div class="auto flex">
+        <div   class="ans-header__nav--class">
+         
+        </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 "#/views/pc/default/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,
+      selects:'1'
+    };
+  },
+  created() {
+    localStorage.getItem("searchParam")
+      ? (this.searchValue = localStorage.getItem("searchParam"))
+      : "";
+  },
+  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.selects == 0){
+        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;
+        }
+      }else{
+        location.href =
+            "/paas/pc-mall/index.html#/searchResult?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: 240px;
+
+      img {
+        display: block;
+      }
+    }
+
+    &--search {
+      width: 654px;
+      height:48px;
+      line-height: 48px;
+      border: 1px solid;
+      margin-right: 24px;
+			box-sizing: content-box;
+			border-right: 0;
+      display: flex;
+    align-items: center;
+    justify-content: space-between;
+      .selects{
+        width: 60px;
+        height: 100%;
+        border: none;
+        border-right: 1px solid #54b2d3;
+        /deep/ .el-input{
+          .el-input__inner{
+            padding-left: 10px;
+            padding-right: 20px;
+            border: none;
+          }
+          .el-input__suffix{
+            right: 0;
+          }
+        }
+      }
+      input {
+        height: 48px;
+        line-height: 48px;
+        width: 500px;
+        display: block;
+        padding-left: 16px;
+        font-size: 13px;
+      }
+
+      button {
+        // background: #00c0dc;
+        width: 100px;
+         height: 48px;
+        line-height: 48px;
+        font-size: 22px;
+        color: #fff;
+        cursor: pointer;
+        display: block;
+        line-height: inherit;
+      }
+    }
+
+    &--car {
+      width: 188px;
+      height: 48px;
+       border: 1px solid;
+      font-size: 14px;
+      line-height: 48px;
+      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;
+      width: 180px;
+      // &: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>

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

@@ -0,0 +1,187 @@
+<template>
+	<div class="container">
+		<div class="bac">
+			<div class="logo fex-c pad-b20" @click="goHome">
+				<img :src="proappEnvLayout && proappEnvLayout.proappEnvLogo" alt>
+			</div>
+			<div class="search">
+				<div class="searchTatol">
+					<!-- <div class="searchC"></div> -->
+					<input v-model="searchValue" placeholder="请输入关键字进行搜索" @keyup.enter="search(searchValue)" />
+					<div class="search_logo" @click.passive.stop="search(searchValue)">
+						<i class="el-icon-search t-24" style="color:white;"></i>
+					</div>
+				</div>
+				<div style="display:flex;color:#666666;font-size:14px">
+					<p>热门词搜索：</p>
+					<p v-for="(item, index) in searchWord[0]?searchWord[0].cmsContlistReDomainList:''" :key="index"
+						style="margin-right:10px;cursor:pointer" @click.passive.stop="searchs(item)">
+						{{ item.contlistName }}
+					</p>
+				</div>
+			</div>
+			<div class="shopCart" @click="linkToShoppingCar()">
+				<img alt=""
+					src="http://b2bopt-dev2021122100000001.qjclouds.com//paas/shop/2021122100000001/2022-02-17/3eeb28fbd145464b92a3710b5f714c56.png"
+					style="width:23px;height:23px" />
+				<p>我的购物车</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		queryConttitleReDomainByCode
+	} from '#/api/apimanage.js'
+	let logo_default_href =
+		"https://opt.lbaby1998.com/paas/shop/2021122100000001/2022-07-05/c4b2eeb72f834547920be58450fb07be.png";
+	export default {
+		data() {
+			return {
+				searchValue: '',
+				searchWord: [],
+				logo: sessionStorage.getItem('proappEnvLayout') ? location.origin + JSON.parse(sessionStorage.getItem(
+					'proappEnvLayout')).proappEnvLogo : logo_default_href,
+				orginHref: process.env.NODE_ENV == "development" ? '' : '/paas/b2b-cli-pc-ayd/index.html'
+			}
+		},
+		computed: {
+			proappEnvLayout() {
+				let proappEnvLayout = sessionStorage.getItem("proappEnvLayout") ?
+					JSON.parse(sessionStorage.getItem("proappEnvLayout")) : {
+						proappEnvLogo: this.logo
+					};
+				return proappEnvLayout;
+			},
+		},
+		created() {
+			let index1 = sessionStorage.getItem('index1');
+			this.searchWord = [];
+			if (index1) {
+				index1 = JSON.parse(index1);
+				index1.forEach((item) => {
+					if (item.conttitleName == '热门搜索词') {
+						this.searchWord.push(item)
+					}
+				})
+			} else {
+				queryConttitleReDomainByCode({
+					tginfoMenuCode: 'index1'
+				}).then((res) => {
+					if (res) {
+						sessionStorage.setItem('index1', JSON.stringify(res))
+						res.forEach((item) => {
+							if (item.conttitleName == '热门搜索词') {
+								this.searchWord.push(item)
+							}
+						})
+					}
+				})
+			}
+		},
+		methods: {
+			search(code) {
+				if (this.$route.query.hasOwnProperty('searchParam') && this.$route.path == '/searchResult') {
+					this.$store.commit('SET_SEARCH_PARAM', code);
+				} else {
+					location.href = `${this.orginHref}#/searchResult?searchParam=` + code
+				}
+			},
+			searchs(item) {
+				window.location = item.contlistUrl
+			},
+			goHome() {
+				location.href = `${this.orginHref}#/islandStore`;
+			},
+			linkToShoppingCar() {
+				location.href = `${this.orginHref}#/car`;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background-color: #fff;
+
+		.bac {
+			width: 1200px;
+			margin: 0 auto;
+			height: 132px;
+			display: flex;
+			justify-content: space-between;
+
+			.logo {
+				width: 90px;
+
+				img {
+					width: 90px;
+					cursor: pointer;
+				}
+			}
+
+			.search {
+				margin-top: 26px;
+
+				.searchTatol {
+					display: flex;
+
+					input {
+						text-indent: 16px;
+						border: 1px solid #ed2f17;
+						height: 42px;
+						width: 510px;
+						margin-bottom: 10px;
+					}
+
+					input::-webkit-input-placeholder {
+						/*WebKit browsers*/
+						color: #ccc;
+					}
+
+					input::-moz-input-placeholder {
+						/*Mozilla Firefox*/
+						color: #ccc;
+					}
+
+					input::-ms-input-placeholder {
+						/*Internet Explorer*/
+						color: #ccc;
+					}
+
+					.search_logo {
+						cursor: pointer;
+						background-color: #ed2f17;
+						width: 80px;
+						height: 44px;
+						text-align: center;
+						line-height: 50px;
+
+						img {
+							width: 23px;
+						}
+					}
+				}
+			}
+
+			.shopCart {
+				cursor: pointer;
+				margin-top: 26px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #ed2f17;
+				height: 42px;
+				width: 180px;
+				// background-color: red;
+				border: 1px solid #ed2f17;
+
+				p {
+					font-size: 14px;
+					margin-left: 10px;
+				}
+			}
+		}
+	}
+</style>