Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop
Showing
5 changed files
with
41 additions
and
45 deletions
1 | <template> | 1 | <template> |
2 | - <div class="header-wrap" :class="class"> | ||
3 | - <div class="header"> | ||
4 | - <div class="header-left"> | 2 | + <div class="blk-header-wrap" :class="class"> |
3 | + <div class="blk-header"> | ||
4 | + <div class="blk-header-left"> | ||
5 | <slot name="left"> | 5 | <slot name="left"> |
6 | <i class="icon icon-left" @click="goBack"></i> | 6 | <i class="icon icon-left" @click="goBack"></i> |
7 | </slot> | 7 | </slot> |
8 | </div> | 8 | </div> |
9 | - <div class="header-right"> | 9 | + <div class="blk-header-right"> |
10 | <slot name="right"></slot> | 10 | <slot name="right"></slot> |
11 | </div> | 11 | </div> |
12 | - <div class="header-main"> | ||
13 | - <span class="header-title">{{title}}</span> | 12 | + <div class="blk-header-main"> |
13 | + <span class="blk-header-title">{{title}}</span> | ||
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | - <div class="header-gap"></div> | 16 | + <div class="blk-header-gap"></div> |
17 | </div> | 17 | </div> |
18 | </template> | 18 | </template> |
19 | <script> | 19 | <script> |
@@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
29 | }; | 29 | }; |
30 | </script> | 30 | </script> |
31 | <style> | 31 | <style> |
32 | - .header { | 32 | + .blk-header { |
33 | box-sizing: content-box; | 33 | box-sizing: content-box; |
34 | position: fixed; | 34 | position: fixed; |
35 | top: 0; | 35 | top: 0; |
@@ -47,12 +47,12 @@ | @@ -47,12 +47,12 @@ | ||
47 | color: #000; | 47 | color: #000; |
48 | 48 | ||
49 | .icon, | 49 | .icon, |
50 | - .header-title { | 50 | + .blk-header-title { |
51 | vertical-align: middle; | 51 | vertical-align: middle; |
52 | } | 52 | } |
53 | } | 53 | } |
54 | 54 | ||
55 | - .header-main { | 55 | + .blk-header-main { |
56 | display: block; | 56 | display: block; |
57 | text-align: center; | 57 | text-align: center; |
58 | margin-left: auto; | 58 | margin-left: auto; |
@@ -62,11 +62,11 @@ | @@ -62,11 +62,11 @@ | ||
62 | text-overflow: ellipsis; | 62 | text-overflow: ellipsis; |
63 | } | 63 | } |
64 | 64 | ||
65 | - .header-left { | 65 | + .blk-header-left { |
66 | float: left; | 66 | float: left; |
67 | } | 67 | } |
68 | 68 | ||
69 | - .header-right { | 69 | + .blk-header-right { |
70 | float: right; | 70 | float: right; |
71 | 71 | ||
72 | .icon { | 72 | .icon { |
@@ -74,17 +74,17 @@ | @@ -74,17 +74,17 @@ | ||
74 | } | 74 | } |
75 | } | 75 | } |
76 | 76 | ||
77 | - .header-gap { | 77 | + .blk-header-gap { |
78 | height: 100px; | 78 | height: 100px; |
79 | background-color: transparent; | 79 | background-color: transparent; |
80 | } | 80 | } |
81 | 81 | ||
82 | .app.ios { | 82 | .app.ios { |
83 | - .header { | 83 | + .blk-header { |
84 | padding-top: 60px; | 84 | padding-top: 60px; |
85 | } | 85 | } |
86 | 86 | ||
87 | - .header-gap { | 87 | + .blk-header-gap { |
88 | height: calc(70 + 60 + 10)px; | 88 | height: calc(70 + 60 + 10)px; |
89 | } | 89 | } |
90 | } | 90 | } |
@@ -40,6 +40,7 @@ | @@ -40,6 +40,7 @@ | ||
40 | const tip = require('common/tip'); | 40 | const tip = require('common/tip'); |
41 | const interceptClick = require('common/intercept-click'); | 41 | const interceptClick = require('common/intercept-click'); |
42 | const yoho = require('yoho'); | 42 | const yoho = require('yoho'); |
43 | + const bus = require('common/vue-bus'); | ||
43 | 44 | ||
44 | module.exports = { | 45 | module.exports = { |
45 | data() { | 46 | data() { |
@@ -91,6 +92,11 @@ | @@ -91,6 +92,11 @@ | ||
91 | } | 92 | } |
92 | 93 | ||
93 | this.nullbox = this.brandData.length ? 'hide' : ''; | 94 | this.nullbox = this.brandData.length ? 'hide' : ''; |
95 | + | ||
96 | + if (this.page === 1) { | ||
97 | + yoho.showLoading(false); | ||
98 | + this.updateNavBar(); | ||
99 | + } | ||
94 | }).fail(() => { | 100 | }).fail(() => { |
95 | tip('网络错误'); | 101 | tip('网络错误'); |
96 | }); | 102 | }); |
@@ -143,7 +149,7 @@ | @@ -143,7 +149,7 @@ | ||
143 | return false; | 149 | return false; |
144 | } else { | 150 | } else { |
145 | this.pageX = event.targetTouches[0].pageX; | 151 | this.pageX = event.targetTouches[0].pageX; |
146 | - var delBtn = $('#del-' + id); | 152 | + let delBtn = $('#del-' + id); |
147 | 153 | ||
148 | if (delBtn.hasClass('hide')) { | 154 | if (delBtn.hasClass('hide')) { |
149 | delBtn.removeClass('hide'); | 155 | delBtn.removeClass('hide'); |
@@ -222,15 +228,9 @@ | @@ -222,15 +228,9 @@ | ||
222 | this.updateNavBar(); | 228 | this.updateNavBar(); |
223 | }); | 229 | }); |
224 | 230 | ||
225 | - document.addEventListener('visibilitychange', () => { | ||
226 | - if (!document.hidden) { | ||
227 | - this.updateNavBar(); | 231 | + if (yoho.isApp) { |
232 | + bus.$on('app.favourite.tabChange', this.updateNavBar); | ||
228 | } | 233 | } |
229 | - }); | ||
230 | - }, | ||
231 | - ready() { | ||
232 | - yoho.showLoading(false); | ||
233 | - this.updateNavBar(); | ||
234 | } | 234 | } |
235 | }; | 235 | }; |
236 | </script> | 236 | </script> |
@@ -45,6 +45,7 @@ | @@ -45,6 +45,7 @@ | ||
45 | const tip = require('common/tip'); | 45 | const tip = require('common/tip'); |
46 | const interceptClick = require('common/intercept-click'); | 46 | const interceptClick = require('common/intercept-click'); |
47 | const yoho = require('yoho'); | 47 | const yoho = require('yoho'); |
48 | + const bus = require('common/vue-bus'); | ||
48 | 49 | ||
49 | module.exports = { | 50 | module.exports = { |
50 | data() { | 51 | data() { |
@@ -72,12 +73,7 @@ | @@ -72,12 +73,7 @@ | ||
72 | if ($.isEmptyObject(data) || data.pageTotal === 0) { | 73 | if ($.isEmptyObject(data) || data.pageTotal === 0) { |
73 | this.busy = true; | 74 | this.busy = true; |
74 | } else { | 75 | } else { |
75 | - if (this.page === data.pageTotal) { | ||
76 | - this.busy = true; | ||
77 | - } else { | ||
78 | - this.busy = false; | ||
79 | - } | ||
80 | - | 76 | + this.busy = this.page === data.pageTotal; |
81 | const list = data.productList || []; | 77 | const list = data.productList || []; |
82 | 78 | ||
83 | list.forEach(o => { | 79 | list.forEach(o => { |
@@ -111,6 +107,11 @@ | @@ -111,6 +107,11 @@ | ||
111 | } | 107 | } |
112 | 108 | ||
113 | this.nullbox = this.productData.length ? 'hide' : ''; | 109 | this.nullbox = this.productData.length ? 'hide' : ''; |
110 | + | ||
111 | + if (this.page === 1) { | ||
112 | + yoho.showLoading(false); | ||
113 | + this.updateNavBar(); | ||
114 | + } | ||
114 | }).fail(() => { | 115 | }).fail(() => { |
115 | tip('网络错误'); | 116 | tip('网络错误'); |
116 | }); | 117 | }); |
@@ -162,7 +163,7 @@ | @@ -162,7 +163,7 @@ | ||
162 | return false; | 163 | return false; |
163 | } else { | 164 | } else { |
164 | this.pageX = event.targetTouches[0].pageX; | 165 | this.pageX = event.targetTouches[0].pageX; |
165 | - var delBtn = $('#del-' + id); | 166 | + let delBtn = $('#del-' + id); |
166 | 167 | ||
167 | if (delBtn.hasClass('hide')) { | 168 | if (delBtn.hasClass('hide')) { |
168 | delBtn.removeClass('hide'); | 169 | delBtn.removeClass('hide'); |
@@ -229,6 +230,7 @@ | @@ -229,6 +230,7 @@ | ||
229 | if (!this.productData.length) { | 230 | if (!this.productData.length) { |
230 | header.right.des = ''; | 231 | header.right.des = ''; |
231 | } | 232 | } |
233 | + | ||
232 | yoho.updateNavigationBar({ | 234 | yoho.updateNavigationBar({ |
233 | header: header | 235 | header: header |
234 | }); | 236 | }); |
@@ -241,15 +243,9 @@ | @@ -241,15 +243,9 @@ | ||
241 | this.updateNavBar(); | 243 | this.updateNavBar(); |
242 | }); | 244 | }); |
243 | 245 | ||
244 | - document.addEventListener('visibilitychange', () => { | ||
245 | - if (!document.hidden) { | ||
246 | - this.updateNavBar(); | 246 | + if (yoho.isApp) { |
247 | + bus.$on('app.favourite.tabChange', this.updateNavBar); | ||
247 | } | 248 | } |
248 | - }); | ||
249 | - }, | ||
250 | - ready() { | ||
251 | - yoho.showLoading(false); | ||
252 | - this.updateNavBar(); | ||
253 | } | 249 | } |
254 | }; | 250 | }; |
255 | </script> | 251 | </script> |
@@ -5,11 +5,11 @@ | @@ -5,11 +5,11 @@ | ||
5 | </template> | 5 | </template> |
6 | <style> | 6 | <style> |
7 | .top-nav { | 7 | .top-nav { |
8 | - .header { | 8 | + .blk-header { |
9 | background-color: transparent; | 9 | background-color: transparent; |
10 | } | 10 | } |
11 | 11 | ||
12 | - .header-gap { | 12 | + .blk-header-gap { |
13 | display: none; | 13 | display: none; |
14 | } | 14 | } |
15 | } | 15 | } |
@@ -11,23 +11,23 @@ | @@ -11,23 +11,23 @@ | ||
11 | 11 | ||
12 | <style> | 12 | <style> |
13 | .top-box { | 13 | .top-box { |
14 | - .header { | 14 | + .blk-header { |
15 | background-color: transparent; | 15 | background-color: transparent; |
16 | color: #fff; | 16 | color: #fff; |
17 | } | 17 | } |
18 | 18 | ||
19 | - .header-gap { | 19 | + .blk-header-gap { |
20 | display: none; | 20 | display: none; |
21 | } | 21 | } |
22 | } | 22 | } |
23 | 23 | ||
24 | .top-change { | 24 | .top-change { |
25 | - .header { | 25 | + .blk-header { |
26 | background-color: #fff; | 26 | background-color: #fff; |
27 | color: #000; | 27 | color: #000; |
28 | } | 28 | } |
29 | 29 | ||
30 | - .header-gap { | 30 | + .blk-header-gap { |
31 | display: block; | 31 | display: block; |
32 | } | 32 | } |
33 | } | 33 | } |
-
Please register or login to post a comment