Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

 <template>
-    <div class="header-wrap" :class="class">
-        <div class="header">
-            <div class="header-left">
+    <div class="blk-header-wrap" :class="class">
+        <div class="blk-header">
+            <div class="blk-header-left">
                 <slot name="left">
                     <i class="icon icon-left" @click="goBack"></i>
                 </slot>
             </div>
-            <div class="header-right">
+            <div class="blk-header-right">
                 <slot name="right"></slot>
             </div>
-            <div class="header-main">
-                <span class="header-title">{{title}}</span>
+            <div class="blk-header-main">
+                <span class="blk-header-title">{{title}}</span>
             </div>
         </div>
-        <div class="header-gap"></div>
+        <div class="blk-header-gap"></div>
     </div>
 </template>
 <script>
@@ -29,7 +29,7 @@
     };
 </script>
 <style>
-    .header {
+    .blk-header {
         box-sizing: content-box;
         position: fixed;
         top: 0;
@@ -47,12 +47,12 @@
         color: #000;
 
         .icon,
-        .header-title {
+        .blk-header-title {
             vertical-align: middle;
         }
     }
 
-    .header-main {
+    .blk-header-main {
         display: block;
         text-align: center;
         margin-left: auto;
@@ -62,11 +62,11 @@
         text-overflow: ellipsis;
     }
 
-    .header-left {
+    .blk-header-left {
         float: left;
     }
 
-    .header-right {
+    .blk-header-right {
         float: right;
 
         .icon {
@@ -74,17 +74,17 @@
         }
     }
 
-    .header-gap {
+    .blk-header-gap {
         height: 100px;
         background-color: transparent;
     }
 
     .app.ios {
-        .header {
+        .blk-header {
             padding-top: 60px;
         }
 
-        .header-gap {
+        .blk-header-gap {
             height: calc(70 + 60 + 10)px;
         }
     }

@@ -40,6 +40,7 @@
     const tip = require('common/tip');
     const interceptClick = require('common/intercept-click');
     const yoho = require('yoho');
+    const bus = require('common/vue-bus');
 
     module.exports = {
         data() {
@@ -91,6 +92,11 @@
                     }
 
                     this.nullbox = this.brandData.length ? 'hide' : '';
+
+                    if (this.page === 1) {
+                        yoho.showLoading(false);
+                        this.updateNavBar();
+                    }
                 }).fail(() => {
                     tip('网络错误');
                 });
@@ -143,7 +149,7 @@
                     return false;
                 } else {
                     this.pageX = event.targetTouches[0].pageX;
-                    var delBtn = $('#del-' + id);
+                    let delBtn = $('#del-' + id);
 
                     if (delBtn.hasClass('hide')) {
                         delBtn.removeClass('hide');
@@ -222,15 +228,9 @@
                 this.updateNavBar();
             });
 
-            document.addEventListener('visibilitychange', () => {
-                if (!document.hidden) {
-                    this.updateNavBar();
+            if (yoho.isApp) {
+                bus.$on('app.favourite.tabChange', this.updateNavBar);
             }
-            });
-        },
-        ready() {
-            yoho.showLoading(false);
-            this.updateNavBar();
         }
     };
 </script>

@@ -45,6 +45,7 @@
     const tip = require('common/tip');
     const interceptClick = require('common/intercept-click');
     const yoho = require('yoho');
+    const bus = require('common/vue-bus');
 
     module.exports = {
         data() {
@@ -72,12 +73,7 @@
                     if ($.isEmptyObject(data) || data.pageTotal === 0) {
                         this.busy = true;
                     } else {
-                        if (this.page === data.pageTotal) {
-                            this.busy = true;
-                        } else {
-                            this.busy = false;
-                        }
-
+                        this.busy = this.page === data.pageTotal;
                         const list = data.productList || [];
 
                         list.forEach(o => {
@@ -111,6 +107,11 @@
                     }
 
                     this.nullbox = this.productData.length ? 'hide' : '';
+
+                    if (this.page === 1) {
+                        yoho.showLoading(false);
+                        this.updateNavBar();
+                    }
                 }).fail(() => {
                     tip('网络错误');
                 });
@@ -162,7 +163,7 @@
                     return false;
                 } else {
                     this.pageX = event.targetTouches[0].pageX;
-                    var delBtn = $('#del-' + id);
+                    let delBtn = $('#del-' + id);
 
                     if (delBtn.hasClass('hide')) {
                         delBtn.removeClass('hide');
@@ -229,6 +230,7 @@
                 if (!this.productData.length) {
                     header.right.des = '';
                 }
+
                 yoho.updateNavigationBar({
                     header: header
                 });
@@ -241,15 +243,9 @@
                 this.updateNavBar();
             });
 
-            document.addEventListener('visibilitychange', () => {
-                if (!document.hidden) {
-                    this.updateNavBar();
+            if (yoho.isApp) {
+                bus.$on('app.favourite.tabChange', this.updateNavBar);
             }
-            });
-        },
-        ready() {
-            yoho.showLoading(false);
-            this.updateNavBar();
         }
     };
 </script>

@@ -5,11 +5,11 @@
 </template>
 <style>
     .top-nav {
-        .header {
+        .blk-header {
             background-color: transparent;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: none;
         }
     }

@@ -11,23 +11,23 @@
 
 <style>
     .top-box {
-        .header {
+        .blk-header {
             background-color: transparent;
             color: #fff;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: none;
         }
     }
 
     .top-change {
-        .header {
+        .blk-header {
             background-color: #fff;
             color: #000;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: block;
         }
     }