qj-happy-common-zhongjian 1.0.27

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="common-top common-theme">
+    <div class="w1200 m0a header-box clearfix">
+      <div class="logo-img">
+        <a href="/">
+          <img :src="proappEnvLogo && proappEnvLogo.proappEnvLogo" alt>
+        </a>
+      </div>
+      <div class="nav">
+        <v-nav v-if="navChildren" :navChildren="navChildren"></v-nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VNav from "../nav-modules/nav";
+export default {
+  components: {
+    VNav
+  },
+  data() {
+    return {
+      logo: require("../assets/logo_ucc.png"),
+      keywords: "",
+      searchValue: this.$route.query.searchParam
+        ? this.$route.query.searchParam
+        : "",
+      appList: window.sessionStorage.getItem("appList")
+        ? JSON.parse(window.sessionStorage.getItem("appList"))
+        : []
+    };
+  },
+  created() {
+    localStorage.getItem("searchParam")
+      ? (this.searchValue = localStorage.getItem("searchParam"))
+      : "";
+  },
+  mounted() {
+    //对nav导航进行操作
+    this.appList.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;
+    },
+    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  rel="stylesheet/scss" lang="scss" scoped >
+.common-top {
+  background: #fff;
+  .header-box {
+    height: inherit;
+  }
+  margin: 0 auto;
+  height: 160px;
+  line-height: 160px;
+  // border-bottom: 1px solid #f5f5f5;
+  .logo-img {
+    float: left;
+    width: 260px;
+    height: 100%;
+    overflow: hidden;
+    img {
+      max-width: 80%;
+      max-height: 60%;
+    }
+  }
+  .nav {
+    float: left;
+    line-height: 160px;
+  }
+}
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="bg">
+    <div class="nav">
+      <div class="left">
+        <a href="/"><img :src="logo" /></a>
+      </div>
+      <div class="right">
+        <div class="search">
+          <i class="iconfont icon-UCC-PC-sousuo"></i><input type="text" v-model="searchVal" :placeholder="placeholder" />
+          <button class="button" @click="searchs(searchVal)">搜索</button>
+        </div>
+        <div class="list">
+          <p v-for="(item9, index) in tginfoKey" :key="index" @click="searchs(item9)">{{ item9 }}</p>
+        </div>
+      </div>
+      <div class="cart" @click="goCart">我的购物车&nbsp;<i class="iconfont icon-caigou"></i></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import API from '#/api/common/index.js';
+export default {
+  data() {
+    return {
+      logo: '',
+      searchVal: '',
+      tginfoKey: '',
+      placeholder: '输入内容',
+    };
+  },
+  created() {},
+  mounted() {
+    this.placeholder = this.$route.query.searchParam || '输入内容';
+    if (sessionStorage.getItem('proappEnvLayout')) {
+      this.logo = JSON.parse(sessionStorage.getItem('proappEnvLayout')).proappEnvLogo;
+    }
+    API.queryTginfoPage({ proappCode: '034' }).then((res) => {
+      console.log(res, '测试');
+      if (res && res.rows && Array.isArray(res.rows)) {
+        this.tginfoKey = res.rows[0] && res.rows[0].tginfoKey ? res.rows[0].tginfoKey.split('/') : [];
+      }
+    });
+    let href = window.location.href;
+    if (href.indexOf('#/searchResult?searchParam') > 0) {
+      this.searchVal = sessionStorage.getItem('searchVals');
+    }
+  },
+  methods: {
+    searchs(val) {
+      sessionStorage.setItem('searchVals', val || '');
+      location.href = '/paas/pc-mall/index.html#/searchResult?searchParam=' + val;
+    },
+    goCart() {
+      location.href = '/paas/pc-mall/index.html#/car';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  background-color: #fff;
+  .nav {
+    margin: 0 auto;
+    width: 1200px;
+    height: 95px;
+    .left {
+      width: 170px;
+      height: 74px;
+      margin-top: 15px;
+      // margin-left: 20px;
+      float: left;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .right {
+      float: left;
+      margin-left: 137px;
+      .search {
+        margin-top: 30px;
+        position: relative;
+        width: 560px;
+        height: 34px;
+        border: 1px solid #607d8b;
+        i {
+          color: #bdbdbd;
+          /*font-size: 20px;*/
+        }
+        input {
+          width: 420px;
+          padding: 8px 0 8px 10px;
+          height: 16px;
+        }
+        .button {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 80px;
+          height: 34px;
+          line-height: 34px;
+          text-align: center;
+          background-color: #607d8b;
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+      .list {
+        overflow: hidden;
+        p {
+          float: left;
+          font-size: 14px;
+          color: #bdbdbd;
+          margin: 10px 10px 0 10px;
+          cursor: pointer;
+        }
+      }
+    }
+    .cart {
+      float: left;
+      margin-top: 30px;
+      margin-left: 20px;
+      width: 140px;
+      text-align: center;
+      border: 1px solid #bdbdbd;
+      color: #333;
+      height: 34px;
+      cursor: pointer;
+      line-height: 34px;
+      font-size: 14px;
+      i {
+        color: #607d8b;
+        font-size: 20px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="bg">
+    <div class="nav">
+      <div class="left">
+        <a href="/"><img :src="logo" /></a>
+      </div>
+      <div class="right">
+        <div class="search">
+          <i class="iconfont icon-UCC-PC-sousuo"></i><input type="text" v-model="searchVal" :placeholder="placeholder" />
+          <button class="button" @click="searchs(searchVal)">搜索</button>
+        </div>
+        <div class="list">
+          <p v-for="(item9, index) in tginfoKey" :key="index" @click="searchs(item9)">{{ item9 }}</p>
+        </div>
+      </div>
+      <div class="cart" @click="goCart">我的购物车&nbsp;<i class="iconfont icon-caigou"></i></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import API from '#/api/common/index.js';
+export default {
+  data() {
+    return {
+      logo: '',
+      searchVal: '',
+      tginfoKey: '',
+      placeholder: '输入内容',
+    };
+  },
+  created() {
+    setTimeout(()=> {
+        this.logo = sessionStorage.getItem('proappEnvLayout')
+        ? JSON.parse(sessionStorage.getItem('proappEnvLayout')).proappEnvLogo
+        : null;
+    },800)
+  },
+  mounted() {
+    this.placeholder = this.$route.query.searchParam || '输入内容';
+    
+    API.queryTginfoPage({ proappCode: '034' }).then((res) => {
+      console.log(res, '测试');
+      if (res && res.rows && Array.isArray(res.rows)) {
+        this.tginfoKey = res.rows[0] && res.rows[0].tginfoKey ? res.rows[0].tginfoKey.split('/') : [];
+      }
+    });
+    let href = window.location.href;
+    if (href.indexOf('#/searchResult?searchParam') > 0) {
+      this.searchVal = sessionStorage.getItem('searchVals');
+    }
+  },
+  methods: {
+    searchs(val) {
+      sessionStorage.setItem('searchVals', val || '');
+          window.location.href =
+          "/paas/welfare-cli-pc/index.html#/searchResult?searchParam=" + val;
+         // this.$router.push({
+         // path: "/searchResult",
+         // query: {
+         //    searchParam: val
+         // }
+         // });
+    },
+    goCart() {
+       window.location.href =
+          "/paas/welfare-cli-pc/index.html#/car";
+         // this.$router.push({
+         //    path: "/car"
+         // });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  background-color: #fff;
+  .nav {
+    margin: 0 auto;
+    width: 1200px;
+    height: 95px;
+    .left {
+      width: 170px;
+      height: 74px;
+      margin-top: 15px;
+      // margin-left: 20px;
+      float: left;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .right {
+      float: left;
+      margin-left: 137px;
+      .search {
+        margin-top: 30px;
+        position: relative;
+        width: 560px;
+        height: 34px;
+        border: 1px solid #607d8b;
+        i {
+          color: #bdbdbd;
+          /*font-size: 20px;*/
+        }
+        input {
+          width: 420px;
+          padding: 8px 0 8px 10px;
+          height: 16px;
+        }
+        .button {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 80px;
+          height: 34px;
+          line-height: 34px;
+          text-align: center;
+          background-color: #607d8b;
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+      .list {
+        overflow: hidden;
+        p {
+          float: left;
+          font-size: 14px;
+          color: #bdbdbd;
+          margin: 10px 10px 0 10px;
+          cursor: pointer;
+        }
+      }
+    }
+    .cart {
+      float: left;
+      margin-top: 30px;
+      margin-left: 20px;
+      width: 140px;
+      text-align: center;
+      border: 1px solid #bdbdbd;
+      color: #333;
+      height: 34px;
+      cursor: pointer;
+      line-height: 34px;
+      font-size: 14px;
+      i {
+        color: #607d8b;
+        font-size: 20px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,122 @@
+<template>
+	 <div class="nav">
+    	<div class="wrapper">
+        	<div class="left">
+				<img :src="proappEnvLayout.proappEnvLogo" v-if="proappEnvLayout" alt="">
+        	</div>
+			<div class="search">
+				<input type="text" placeholder="大家都在搜犬粮" v-model="searchParam" />
+				<div class="box" @click="search_goods" @keyup.13="search_goods">
+					<i class="iconfont icon-new-search-icon"></i>
+				</div>
+			</div>
+			<div class="login">
+				<!--<span>{{username}}</span>
+				<button  @click="back" v-if="this.username!='游客'">退出</button>-->
+			</div>
+      	</div>
+    </div>
+</template>
+
+<script>
+	import api from "#/api/common/index";
+	export default {
+		data() {
+			return {
+				footerData: [],
+				pathname:"",
+				proappEnvLayout: '',
+				searchParam:this.$route.query.searchParam
+        ? this.$route.query.searchParam
+        : ""
+			};
+		},
+		updated() {},
+		 created() {
+		    localStorage.getItem("searchParam")
+		      ? (this.searchParam = localStorage.getItem("searchParam"))
+		      : "";
+		  },
+		mounted() {
+			this.proappEnvLayout = sessionStorage.getItem('proappEnvLayout') ? JSON.parse(sessionStorage.getItem('proappEnvLayout')) : ''
+			console.log(this.proappEnvLayout,'this.proappEnvLayout')
+		},
+		methods: {
+			search_goods(){
+			location.href = '/paas/pc-mall/index.html#/goodsItems?searchParam='+this.searchParam
+		},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.nav {
+  background: #fff;
+  
+  .wrapper {
+  height: 120px;
+    width: 1120px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    // height: 50px;
+    justify-content: space-between;
+    .left {
+      display: inline-block;
+	  background-color: #fff;
+	  overflow: hidden;
+	  img{
+	  	width: 120px;
+	  	height: auto;
+	  }
+    }
+    .search {
+      	width: 600px;
+	  	background: rgba(243, 244, 248, 1);
+		border-radius: 25px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+      	input {
+			padding: 0 29px;
+			box-sizing: border-box;
+			width: 549px;
+			height: 50px;
+			background: none;
+		}
+		.box {
+			width: 50px;
+			height: 50px;
+			background: rgba(236, 0, 26, 1);
+			border-radius: 25px;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			i {
+				color: #fff;
+				font-size: 14px;
+			}
+		}
+    }
+    .login {
+      span {
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 1);
+        line-height: 36px;
+        opacity: 0.6;
+      }
+      button {
+        margin-left: 14px;
+        width: 48px;
+        height: 24px;
+        background: rgba(236, 0, 26, 1);
+        border-radius: 8px;
+        color: rgba(255, 255, 255, 1);
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>