首页搜索框悬浮 reviewd by lea.guo

张文文
Commit 9fd52a452154591e23d40990e1ef7d0f91bd0b26 1 parent 07fcfe90
Showing 1 changed file with 54 additions and 43 deletions
apps/pages/home/channel/channel.vue
--- a/apps/pages/home/channel/channel.vue
View file @9fd52a4
+++ b/apps/pages/home/channel/channel.vue
View file @9fd52a4
 <template>
   <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title" :no-safe-area="true">
+      <div class="wrapper-search" :class="{'hidden': !isFixSearch}">
+        <div class="search-header" @click="goSearch">
+          <div class="search-img"></div>
+          <input class="search-input" type="search" disabled="true" :placeholder="defaultSearchWord || '搜索商品名称或货号'"/>
+        </div>
+      </div>
+
       <div class="fixed-nav scroll-nav-wrap" :class="{'hidden': !isShow}" v-if="navList.length">
         <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
       </div>
@@ -11,7 +18,7 @@
         @pulling-up="onPullingUp" >
         <div ref="body">
           <div ref="topSource" class="channel-html">
-            <div class="search-header middle" @click="goSearch">
+            <div ref="searchSource" class="search-header middle" @click="goSearch">
               <div class="search-img"></div>
               <input class="search-input" type="search" disabled="true" :placeholder="defaultSearchWord || '搜索商品名称或货号'"/>
             </div>
@@ -22,8 +29,7 @@
               <TwoBanner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'twoPicture'"/>
             </template>
           </div>
-          <!-- <div ref="scrollNav" :class="['scroll-nav-wrap',isShow?'fixed':'']" v-if="navList.length"> -->
-            <div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
+          <div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
             <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
           </div>
           <div class="list-wrap" :style="listStyle">
@@ -46,7 +52,6 @@ import TwoBanner from './components/twoBanner';
 import Hot from './components/hot';
 import ScrollNav from './components/scrollNav';
 import ProductList from '../../list/components/productList';
-import { setTimeout } from 'timers';
 import UfoNoItem from '../../../components/ufo-no-item';
 const { mapState, mapActions } = createNamespacedHelpers('home/channel');
@@ -70,6 +75,7 @@ export default {
       navTop: 0,
       navHeight: 0,
       isShow: false,
+      isFixSearch: false,
       total: 0,
       active: 0,
       yasHeight: 0,
@@ -128,7 +134,6 @@ export default {
     listStyle() {
       return {
         minHeight: this.total + 'px',
-        // marginTop: this.isShow? this.navHeight +'px' : 0
       };
     }
   },
@@ -149,9 +154,8 @@ export default {
       this.fetchChannelList();
     }
     this.init();
-    // this.getAllInboxCatInfo();
-    this.fetchDefaultSearchWord()
+    this.fetchDefaultSearchWord();
     this.PAGE_URL = window.location.href;
@@ -172,7 +176,7 @@ export default {
     // 初始化 选中类目
     const [firstNav] = this.navList;
-    if(firstNav) {
+    if (firstNav) {
       const {url = ''} = firstNav;
       this.selectedCategory = queryString.parse(url);
@@ -220,7 +224,6 @@ export default {
         }
         if (scrollY) { // 滚动时
           if (scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
-            // console.log('guessLike report')
             item.data.forEach((val, i) => {
               reportParams = {...val.reportParams, PAGE_URL: this.PAGE_URL};
               this.homeYasParams.push(reportParams);
@@ -228,7 +231,6 @@ export default {
           }
           if (scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
-            // console.log(item.template_name)
             let reportMoreParams = {};
             item.data.forEach((val, i) => {
@@ -264,24 +266,25 @@ export default {
       //  console.log(this.homeYasParams)
       this.$store.dispatch('reportYas', {
         params: {
-          param: {DATA:this.homeYasParams},
+          param: {DATA: this.homeYasParams},
           appop: 'XY_UFO_SHOW_EVENT'
         }
       });
     },
     reportTabYas() {
       let guessLikeTabParams = this.listYasParams;
+
       delete guessLikeTabParams.I_INDEX;
+
       // 防止重复上报
-      if(this.guessLikeId !== guessLikeTabParams.TAB_ID) {
-        this.guessLikeId = guessLikeTabParams.TAB_ID
-        console.log('guesslisttab',guessLikeTabParams)
+      if (this.guessLikeId !== guessLikeTabParams.TAB_ID) {
+        this.guessLikeId = guessLikeTabParams.TAB_ID;
         this.$store.dispatch('reportYas', {
-        params: {
-          param: guessLikeTabParams,
-          appop: 'XY_UFO_MAIN_EVENT'
-        }
-      });
+          params: {
+            param: guessLikeTabParams,
+            appop: 'XY_UFO_MAIN_EVENT'
+          }
+        });
       }
     },
     async guessLikeListParams(params) {
@@ -301,8 +304,10 @@ export default {
       this.active = Number(index);
       this.isShow && this.$refs.scroll.scrollTo(this.navTop);
       await this.guessLikeListParams({index, ...params});
+
       // tab点击
-      this.reportTabYas()
+      this.reportTabYas();
+
       // 商品列表曝光
       this.productList.list.length > 0 && this.listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
     },
@@ -326,8 +331,10 @@ export default {
       this.scrollY = -y;
       if (this.navTop) {
-        this.isShow = (this.scrollY >= this.$refs.topSource.offsetHeight);
+        this.isShow = (this.scrollY >= this.$refs.topSource.offsetHeight - 32);
       }
+
+      this.isFixSearch = (this.scrollY >= this.$refs.searchSource.offsetHeight);
     },
     async refreshProductList(index) {
       let str = get(get(this.navList, `[${index}].url`, '').split('?'), '[1]', '');
@@ -386,27 +393,25 @@ export default {
         let {data} = result;
         if (result.code === 200) {
-
           data.endReached = (data.page === data.page_total) && (data.page_size !== 1) || !data.page_total;
-
         }
         if (typeof data === 'object' && Object.keys(data).length) {
           for (let key in data) {
-            if (key === 'product_list') {
-              list.list = data.page > 1 ? list.list.concat(data.product_list) : data.product_list;
-            } else {
-              list[key] = data[key];
-            }
-            if (!data.product_list) {
-              this.productList.list = [];
+            if (data.hasOwnProperty(key)) {
+              if (key === 'product_list') {
+                list.list = data.page > 1 ? list.list.concat(data.product_list) : data.product_list;
+              } else {
+                list[key] = data[key];
+              }
+              if (!data.product_list) {
+                this.productList.list = [];
+              }
             }
           }
           this.productList = list;
-
         }
       } catch (e) {
-        // console.log(e);
         if (this.productList.page <= 1) {
           this.productList.list = [];
         }
@@ -458,6 +463,7 @@ export default {
     display: none;
   }
 }
+
 .scroll-nav-wrap {
   position: relative;
   background-color: #fefefe;
@@ -465,6 +471,7 @@ export default {
   &.fixed-nav {
     width: 100%;
     position: absolute;
+    top: 64px;
     z-index: 10;
     overflow: hidden;
   }
@@ -487,16 +494,6 @@ export default {
 .channel-html {
   padding: 20px 24px 0;
-  // &:before {
-  //   content: "";
-  //   width: 520px;
-  //   height: 28px;
-  //   background-image: url("~statics/image/channel/service-info.png");
-  //   background-size: 100% 100%;
-  //   margin: 10px auto 20px;
-  //   display: block;
-  // }
-
   &:after {
     content: "";
     width: 100%;
@@ -520,18 +517,29 @@ export default {
     margin: 0 auto;
   }
 }
+
 .yohoufo-channel-page {
   /deep/ .cube-pullup-wrapper {
     background: #f2f2f2;
   }
 }
+
 /deep/ .cube-scroll-nav-bar-item_active {
   &:after {
     width: 16px;
-    // left: 50%;
     transform: translateX(-10px)
   }
 }
+
+.wrapper-search {
+  background: #fff;
+  padding: 0 24px;
+  width: 100%;
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+}
+
 .search-header {
   height: 64px;
   background: #f5f5f5;
@@ -561,6 +569,7 @@ input::-webkit-input-placeholder {
 .middle {
   margin: 0 10px;
 }
+
 .search-img {
   width: 28px;
   height: 28px;
@@ -568,9 +577,11 @@ input::-webkit-input-placeholder {
   background: url(~statics/image/list/searchPage_icon@3x.png) no-repeat;
   background-size: cover;
 }
+
 .class-a {
   padding-top: 104px;
 }
+
 .hidden {
   visibility: hidden;
   opacity: 0;