qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,855 @@
+<template>
+	<div id="zgltopbox" class="common-top common-theme bg-white">
+		<div class="Helmet">
+			<div class="Helmet_p auto">
+				<div class="Helmet_e">
+					<a href="/" class="Helme_img">
+						<img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt />
+					</a>
+				</div>
+				<div class="Helmet_w">
+					<div class="Helmet_t">
+						<div class="Helmet_input">
+							<i class="iconfont icon-sousuo pad-l10"></i>
+							<input @keyup.enter="search" @keyup.13="search" v-model="searchValue" type="text" placeholder="BWFRP电力管" />
+							<div class="secrbtn">
+								<el-button slot="append" @click.native="search" @keyup.13="search">搜索</el-button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<a class="Helmet_s" @click="tocar">
+					<i></i>
+					<div class="Helmet_ico ucc-car">
+						<div class="Helmet_i">
+							<i class="iconfont icon-gouwuche3"></i>
+							<span v-if="isLogin&&total&&total>0"></span>
+						</div>
+					</div>
+					<!-- <i class="ico_car" id="ico_car" style="display: none">1</i> -->
+					<span class="mcar">我的购物车</span>
+				</a>
+			</div>
+		</div>
+		<div class="toplead">
+			<div class="topleadbox">
+				<div @click="tohome" class="topleadboxli">
+					<span :class="{activechecked:false}">首页</span>
+					<!--<div style="display:none" class="d3"></div>-->
+				</div>
+				<div @click="torm" id="rm" :class="{topleadboxli:true, active:classlist[1].flag}">
+					<span :class="{ activechecked:classlist[1].flag}">热门产品</span>
+					<span class="rhot"><img :src="hotp" alt /></span>
+					<!--<div v-if="classlist[0].flag" class="d3"></div>-->
+				</div>
+				<!--<div @click="toal" id="al" :class="{topleadboxli:true, active:classlist[1].flag}">-->
+				<!--<span :class="{topleadboxli:true, activechecked:classlist[0].flag}">行业案例</span>-->
+				<!--<div v-if="classlist[1].flag" class="d3"></div>-->
+				<!--</div>-->
+				<div @click="tocj" id="cj" :class="{topleadboxli:true, active:classlist[2].flag}">
+					<span :class="{activechecked:classlist[2].flag}">应用场景</span>
+					<!--<div v-if="classlist[2].flag" class="d3"></div>-->
+				</div>
+				<div @click="tosd" id="sd" :class="{topleadboxli:true, active:classlist[3].flag}">
+					<span :class="{activechecked:classlist[3].flag}">新闻视点</span>
+					<!--<div v-if="classlist[3].flag" class="d3"></div>-->
+				</div>
+				<div @click="contentgo" id="lx" :class="{topleadboxli:true, active:classlist[4].flag}">
+					<span :class="{ activechecked:classlist[4].flag}">联系我们</span>
+					<!--<div v-if="classlist[3].flag" class="d3"></div>-->
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import VNav from "../nav-modules/nav";
+	import hot from "#/assets/nav_lab.png";
+	import { getToken, removeToken } from "#/utils/auth";
+	import API from "#/api/common/index.js";
+	export default {
+		components: {
+			VNav
+		},
+		data() {
+			return {
+				hotp: hot,
+				total: 0,
+				logins: null,
+				hrefs: '',
+				classlist: [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				],
+				tabchose: "",
+				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() {
+			// console.log(this.$route.query.tabchose);
+
+			//对nav导航进行操作
+
+			this.menuList.forEach(el => {
+				if(el.menuDefaultClass === "nav") {
+					//表示是导航
+					this.navChildren = el.children;
+				}
+			});
+			// this.gettabchose()
+			// this.tabchose = localStorage.getItem("tabchose")
+			if(this.getQueryVariable("tabchose") == "rm") {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[1], "flag", true);
+				console.log(this.classlist,"热门")
+			} else if(this.getQueryVariable("tabchose") == "lx") {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[4], "flag", true);
+			} else if(this.getQueryVariable("tabchose") == "cj") {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[2], "flag", true);
+			} else if(this.getQueryVariable("tabchose") == "sd") {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[3], "flag", true);
+			}
+			this.hrefs = window.location.href.indexOf('pc-mall');
+		},
+		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") :
+					"购物车";
+			},
+			isLogin() {
+				this.logins = this.getUserCookie() ? getToken(this.getUserCookie()) : false;
+				return this.getUserCookie() ? getToken(this.getUserCookie()) : false;
+			},
+		},
+		watch: {
+			logins(newVal, oldVal) {
+				if(newVal) {
+					this.getCarNum()
+				}
+			},
+			$route: {
+				handler: function(val, oldVal) {
+					if(val && this.logins) {
+						console.log('来了')
+						this.getCarNum()
+					}
+				},
+				deep: true
+			}
+		},
+		methods: {
+			tocar() {
+				location.href = "/paas/pc-mall/index.html#/car";
+			},
+			getCarNum() {
+				API.shoppingList().then(res => {
+					this.total = res && res.total
+				})
+			},
+			getQueryVariable(variable) {
+				// debugger
+				var query = window.location.hash.substring(1).split("?") ? window.location.hash.substring(1).split("?")[1] : [];
+				var vars = query ? query.split("&") : [];
+				for(var i = 0; i < vars.length; i++) {
+					var pair = vars[i].split("=");
+					if(pair[0] == variable) {
+						return pair[1];
+					}
+				}
+				return false;
+			},
+			gettabchose() {
+				this.tabchose = this.$route.query.tabchose;
+			},
+
+			search() {
+				console.log(this.searchValue, "this.searchValue");
+				localStorage.removeItem("searchParam");
+				location.href =
+					"/paas/pc-mall/index.html#/searchResult?searchParam=" +
+					this.searchValue;
+			},
+			tohome() {
+				location.href =
+					"/paas/shop/2020021100000063/029/indexpc/indexpc/indexpc.html";
+			},
+			torm() {
+				// localStorage.setItem('tabchose',)
+				// this.classlist[0] = true
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[1], "flag", true);
+				console.log(this.classlist);
+				//   
+				if(this.hrefs > 0) {
+					this.$router.push({
+						path: "/hotProductPipeline",
+						query: {
+							tabchose: "rm"
+						}
+					});
+				} else {
+					location.href = "/paas/pc-mall/index.html#/hotProductPipeline?tabchose=rm";
+				}
+			},
+			contentgo() {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[4], "flag", true);
+				if(this.hrefs > 0) {
+					this.$router.push({
+						path: "/helpindex",
+						query: {
+							parindex: "2",
+							childindex: "1",
+							pcode: "lianxi",
+							styletype: "styledocDetails",
+							title: "联系我们"
+						}
+					});
+				} else {
+					location.href = "/paas/pc-mall/index.html#/helpindex?parindex=2&childindex=1&pcode=lianxi&styletype=styledocDetails&title=联系我们";
+				}
+			},
+			tocj() {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[2], "flag", true);
+				if(this.hrefs > 0) {
+					this.$router.push({
+						path: "/scenario",
+						query: {
+							tabchose: "cj"
+						}
+					});
+				} else {
+					location.href = "/paas/pc-mall/index.html#/scenario?tabchose=cj";
+				}
+				// location.href = "/paas/pc-mall/index.html#?tabchose=cj";
+			},
+			tosd() {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[3], "flag", true);
+				if(this.hrefs > 0) {
+					this.$router.push({
+						path: "/industryPerspective",
+						query: {
+							tabchose: "sd"
+						}
+					});
+				} else {
+					location.href = "/paas/pc-mall/index.html#/industryPerspective?tabchose=sd";
+				}
+				//   location.href =
+				//     "/paas/pc-mall/index.html#/industryPerspective?tabchose=sd";
+			},
+			content() {
+				this.classlist = [{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					},
+					{
+						flag: false
+					}
+				];
+				this.$set(this.classlist[4], "flag", true);
+				if(this.hrefs > 0) {
+					//					this.$router.push({
+					//						path: "/industryPerspective",
+					//						query: {
+					//							tabchose: "sd"
+					//						}
+					//					});
+				} else {
+					//					location.href = "/paas/pc-mall/index.html#/industryPerspective?tabchose=sd";
+				}
+				//   location.href =
+				//     "/paas/pc-mall/index.html#/industryPerspective?tabchose=sd";
+			},
+			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" scope>
+	.auto {
+		margin: 0 auto;
+		width: 1200px;
+	}
+	
+	.pad-l10 {
+		padding-left: 10px;
+	}
+	
+	.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: 130px !important;
+			height: 33px !important;
+		}
+		.search-box .el-input .el-input__inner {
+			border-right: none !important;
+		}
+		.el-input-group__append,
+		.el-input-group__prepend {
+			background: #1cac43 ;
+			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;
+		}
+	}
+	
+	.common-top .el-input-group__append,
+	.common-top .el-input-group__prepend {
+		background: #1cac43 ;
+	}
+	
+	.default-nav {
+		li {
+			margin-right: 72px !important;
+			a {
+				font-weight: normal;
+				font-size: 16px;
+			}
+		}
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	#zgltopbox {
+		height: 173px;
+		#zgltop {
+			height: 125px;
+		}
+	}
+	
+	.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 {
+		width: 100%;
+		min-width: 1200px;
+		/*border-bottom: 1px solid #f5f5f5;*/
+		box-shadow: 0px 0px 6px rgba(153, 153, 153, 0.2);
+		.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 {
+				width: inherit;
+				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;
+				}
+			}
+		}
+	}
+	
+	.toplead {
+		.topleadbox {
+			width: 870px;
+			height: 50px;
+			/*background-color: #1cac43;*/
+			text-align: center;
+			color: #333333;
+			margin: 0 auto;
+			.topleadboxli {
+				cursor: pointer;
+				display: block;
+				float: left;
+				width: 172px;
+				line-height: 50px;
+				font-weight: 100;
+				position: relative;
+				font-size: 16px;
+				font-family: Microsoft YaHei;
+				font-weight: 400;
+				color: #333333;
+				a {
+					color: white !important;
+				}
+				.activechecked {
+					display: inline-block;
+					color: #48B1E0;
+					padding: 0 6px;
+					border-bottom: 2px solid #48B1E0;
+					height: 48px;
+				}
+				.d3 {
+					position: absolute;
+					top: 76%;
+					left: 47%;
+					width: 0;
+					height: 0;
+					border-bottom: 5px solid white;
+					border-right: 5px solid transparent;
+					border-left: 5px solid transparent;
+				}
+			}
+			.active {
+				font-weight: 800;
+			}
+		}
+		.lhot {
+			margin-right: 4px;
+		}
+		.rhot {
+			position: absolute;
+			top: -3px;
+			right: 29px;
+			img {
+				width: 18px;
+				height: 23px;
+			}
+		}
+	}
+	
+	.Helmet {
+		background: white;
+		.Helmet_p {
+			position: relative;
+			height: 123px;
+			box-sizing: border-box;
+			display: -webkit-flex;
+			display: flex;
+			.Helmet_e {
+				margin: 18px 86px 27px 0;
+				/*margin: 18px 100px 27px 0;*/
+				width: 171px;
+				height: 78px;
+				.Helme_img {
+					display: block;
+					width: 171px;
+					height: 78px;
+					/*background: pink;*/
+					img {
+						vertical-align: top;
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+			.Helmet_w {
+				margin-top: 38px;
+				width: 553px;
+				margin-right: 127px;
+				.Helmet_t {
+					width: 553px;
+					height: 38px;
+					.Helmet_input {
+						position: relative;
+						height: 38px;
+						line-height: 34px;
+						background: white;
+						border: 2px solid #48B1E0;
+						box-sizing: border-box;
+						-webkit-transition: all .3s;
+						transition: all .3s;
+						font-weight: 800;
+						>i {
+							vertical-align: top;
+							color: #48B1E0;
+							font-size: 8px;
+						}
+						.secrbtn {
+							cursor: pointer;
+							display: inline-block;
+							width: 60px;
+							height: 34px;
+							background: #48B1E0;
+							text-align: center;
+							font-size: 14px;
+							font-weight: Regular;
+							color: #fff;
+							border: 1px solid #48B1E0;
+							box-sizing: border-box;
+							position: relative;
+							right: -1px;
+							float: right;
+							line-height: 36px;
+						}
+						button {
+							border-color: #48B1E0;
+							background: #48B1E0;
+							color: #ffffff;
+							font-size: 14px !important;
+							display: block;
+							width: 100%;
+							height: 100%;
+						}
+						>input::-webkit-input-placeholder {
+							/* placeholder颜色  */
+							color: #989898;
+							/* placeholder字体大小  */
+							font-size: 14px;
+						}
+						>input {
+							width: 340px;
+							color: #333333;
+							font-size: 14px;
+							font: 400 14px Arial;
+						}
+						.Helmet_seek {
+							cursor: pointer;
+							display: inline-block;
+							width: 60px;
+							height: 36px;
+							background: #48B1E0;
+							text-align: center;
+							font-size: 22px;
+							font-weight: Regular;
+							color: white;
+							border: 1px solid #48B1E0;
+							box-sizing: border-box;
+							position: relative;
+							right: -1px;
+							float: right;
+							line-height: 45px;
+						}
+					}
+				}
+			}
+			.Helmet_s {
+				cursor: pointer;
+				margin-top: 34px;
+				width: 153px;
+				height: 38px;
+				border: 2px solid #48B1E0;
+				.Helmet_ico {
+					vertical-align: top;
+					display: inline-block;
+					position: relative;
+					height: 28px;
+					line-height: 28px;
+					background: #fff;
+					font-size: 25px;
+					font-weight: 400;
+					color: #000;
+					text-align: center;
+					padding: 0 14px 0 17px;
+					margin-left: 1px;
+					margin-top: 1px;
+					.Helmet_i {
+						/*padding: 0 14px 0 17px;
+						position: relative;
+						margin-top: 1px;
+						margin-left: 1px;*/
+						position: relative;
+						display: inline;
+						>i {
+							font-size: 18px !important;
+							vertical-align: middle;
+							color: #48B1E0;
+						}
+						span {
+							position: absolute;
+							top: 6px;
+							left: 20px;
+							height: 10px;
+							width: 10px;
+							border-radius: 50%;
+							background-color: #48B1E0;
+						}
+					}
+				}
+				.mcar {
+					color: #48B1E0;
+					display: inline-block;
+					height: 36px;
+					line-height: 37px;
+					text-align: top;
+					vertical-align: top;
+					font-size: 14px;
+					font-family: Microsoft YaHei;
+					font-weight: 400;
+				}
+				.ico_car {
+					width: 32px;
+					height: 32px;
+					line-height: 31px;
+					font-style: normal;
+					display: none;
+					background: #ff9e01;
+					border-radius: 50%;
+					text-align: center;
+					top: 18%;
+					right: 6.5%;
+					position: absolute;
+					font-size: 18px;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 1);
+				}
+			}
+			.Helmet_V {
+				display: none;
+				position: absolute;
+				right: 0%;
+				top: 1%;
+			}
+		}
+	}
+</style>