fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit 83505e317838a3f99665fb2b072f7cbbd9224c35 1 parent 28fcfa3a

fix header

Inline Side-by-side
Showing 4 changed files with 39 additions and 77 deletions
1 <template> 1 <template>
2 - <div class="blk-header-wrap" :class="class"> 2 + <div class="blk-header-wrap" :class="[class, {'is-fixed': fixed}]">
3 <div class="blk-header"> 3 <div class="blk-header">
4 <div class="blk-header-left"> 4 <div class="blk-header-left">
5 <slot name="left"> 5 <slot name="left">
@@ -13,14 +13,19 @@ @@ -13,14 +13,19 @@
13 <span class="blk-header-title">{{title}}</span> 13 <span class="blk-header-title">{{title}}</span>
14 </div> 14 </div>
15 </div> 15 </div>
16 - <div class="blk-header-gap"></div> 16 + <div class="blk-header-gap" v-if="!fixed"></div>
17 </div> 17 </div>
18 </template> 18 </template>
19 <script> 19 <script>
20 const yoho = require('yoho'); 20 const yoho = require('yoho');
21 21
22 module.exports = { 22 module.exports = {
23 - props: ['title', 'class'], 23 + props: {
  24 + 'title': String,
  25 + 'class': [String, Object, Array],
  26 + 'fixed': Boolean,
  27 + 'scrollFix': Boolean
  28 + },
24 methods: { 29 methods: {
25 goBack() { 30 goBack() {
26 yoho.goBack({}, function() {}, function() {}); 31 yoho.goBack({}, function() {}, function() {});
@@ -35,6 +40,10 @@ @@ -35,6 +40,10 @@
35 transition: 0.3s all; 40 transition: 0.3s all;
36 border-bottom: 0; 41 border-bottom: 0;
37 } 42 }
  43 +
  44 + .blk-header-title {
  45 + visibility: hidden;
  46 + }
38 } 47 }
39 .blk-header { 48 .blk-header {
40 box-sizing: content-box; 49 box-sizing: content-box;
@@ -123,7 +123,8 @@ @@ -123,7 +123,8 @@
123 const self = this; 123 const self = this;
124 124
125 yoho.goAddress({ 125 yoho.goAddress({
126 - type: '1' 126 + type: '1',
  127 + addressid: this.address.addressId
127 }, (address) => { 128 }, (address) => {
128 if (address) { 129 if (address) {
129 self.$set('address', { 130 self.$set('address', {
@@ -132,7 +133,7 @@ @@ -132,7 +133,7 @@
132 zipCode: address.zip_code, 133 zipCode: address.zip_code,
133 mobile: address.mobile, 134 mobile: address.mobile,
134 address: address.address, 135 address: address.address,
135 - consigneeName: address.consignee_name 136 + consignee: address.consignee
136 }); 137 });
137 } 138 }
138 }, () => { 139 }, () => {
1 <template> 1 <template>
2 - <div id="header" class="blk-header-wrap top-box">  
3 - <div class="blk-header">  
4 - <div class="blk-header-left">  
5 - <span class="icon icon-setting" id="setting"></span>  
6 - </div>  
7 - </div>  
8 - </div> 2 + <cheader title="我的" class="ghost" fixed v-ref:header>
  3 + <i slot="left" class="icon icon-setting" id="setting"></i>
  4 + </cheader>
9 <div class="my-header"> 5 <div class="my-header">
10 <a class="user-info auth" id="user-info" href='/me/mydetails'> 6 <a class="user-info auth" id="user-info" href='/me/mydetails'>
11 <span class="user-avatar" :style="data.headIco ? 'background-image: url(' + data.headIco + ')' : ''"></span> 7 <span class="user-avatar" :style="data.headIco ? 'background-image: url(' + data.headIco + ')' : ''"></span>
@@ -80,6 +76,7 @@ @@ -80,6 +76,7 @@
80 const yoho = require('yoho'); 76 const yoho = require('yoho');
81 const $ = require('jquery'); 77 const $ = require('jquery');
82 const interceptClick = require('common/intercept-click'); 78 const interceptClick = require('common/intercept-click');
  79 + const cheader = require('component/header.vue');
83 80
84 module.exports = { 81 module.exports = {
85 data() { 82 data() {
@@ -87,6 +84,9 @@ @@ -87,6 +84,9 @@
87 data: {} 84 data: {}
88 }; 85 };
89 }, 86 },
  87 + components: {
  88 + cheader
  89 + },
90 methods: { 90 methods: {
91 reload() { 91 reload() {
92 $('#address').off('click', this.addressClick) 92 $('#address').off('click', this.addressClick)
@@ -154,6 +154,16 @@ @@ -154,6 +154,16 @@
154 } 154 }
155 }); 155 });
156 156
  157 + window.addEventListener('scroll', () => {
  158 + let transparent = true;
  159 +
  160 + if (window.scrollY > 20 ) {
  161 + transparent = false;
  162 + }
  163 +
  164 + this.$refs.header.$el.classList.toggle('ghost', transparent);
  165 + });
  166 +
157 document.addEventListener('visibilitychange', () => { 167 document.addEventListener('visibilitychange', () => {
158 if (!document.hidden) { 168 if (!document.hidden) {
159 this.reload(); 169 this.reload();
@@ -172,29 +182,6 @@ @@ -172,29 +182,6 @@
172 color: #000; 182 color: #000;
173 } 183 }
174 184
175 - .blk-header {  
176 - box-sizing: content-box;  
177 - position: fixed;  
178 - top: 0;  
179 - right: 0;  
180 - left: 0;  
181 - z-index: 210;  
182 - padding: 20px 30px;  
183 - height: 70px;  
184 - max-width: 750px;  
185 - margin-left: auto;  
186 - margin-right: auto;  
187 - line-height: 70px;  
188 - font-size: 48px;  
189 - background-color: #fff;  
190 - border-bottom: 1px solid #eee;  
191 - color: #000;  
192 -  
193 - .icon {  
194 - vertical-align: middle;  
195 - }  
196 - }  
197 -  
198 .top-box { 185 .top-box {
199 .blk-header { 186 .blk-header {
200 background-color: transparent; 187 background-color: transparent;
@@ -208,15 +195,6 @@ @@ -208,15 +195,6 @@
208 } 195 }
209 } 196 }
210 197
211 - .blk-header-left {  
212 - float: left;  
213 - }  
214 -  
215 - .blk-header-gap {  
216 - height: calc(70 + 20 * 2 + 1)px;  
217 - background-color: transparent;  
218 - }  
219 -  
220 .my-header { 198 .my-header {
221 height: 469px; 199 height: 469px;
222 background: resolve("me/header-bg.png"); 200 background: resolve("me/header-bg.png");
1 <template> 1 <template>
2 - <cheader :title="title" :class='topClass'> 2 + <cheader :title="title" class="ghost" fixed v-ref:header>
3 <template slot="right"> 3 <template slot="right">
4 <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span> 4 <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
5 <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span> 5 <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
@@ -10,28 +10,9 @@ @@ -10,28 +10,9 @@
10 </template> 10 </template>
11 11
12 <style> 12 <style>
13 - .blk-header-gap {  
14 - display: none;  
15 - }  
16 -  
17 .blk-header { 13 .blk-header {
18 transition: 0.3s all; 14 transition: 0.3s all;
19 } 15 }
20 -  
21 - .top-box {  
22 - .blk-header {  
23 - background-color: transparent;  
24 - color: #fff;  
25 - border-bottom: 0;  
26 - }  
27 - }  
28 -  
29 - .top-change {  
30 - .blk-header {  
31 - background-color: #fff;  
32 - color: #000;  
33 - }  
34 - }  
35 </style> 16 </style>
36 17
37 <script> 18 <script>
@@ -41,9 +22,7 @@ @@ -41,9 +22,7 @@
41 22
42 module.exports = { 23 module.exports = {
43 data() { 24 data() {
44 - return {  
45 - topChange: false  
46 - }; 25 + return {};
47 }, 26 },
48 props: { 27 props: {
49 shareData: { 28 shareData: {
@@ -51,12 +30,6 @@ @@ -51,12 +30,6 @@
51 } 30 }
52 }, 31 },
53 computed: { 32 computed: {
54 - topClass() {  
55 - return {  
56 - 'top-change': this.topChange || !this.shareData.isBlkShop,  
57 - 'top-box': true  
58 - };  
59 - },  
60 title() { 33 title() {
61 let result = ''; 34 let result = '';
62 35
@@ -106,13 +79,14 @@ @@ -106,13 +79,14 @@
106 this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible; 79 this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
107 }, 80 },
108 changeTopStatus() { 81 changeTopStatus() {
  82 + let topChange = true;
109 let topHeight = document.body.scrollTop; 83 let topHeight = document.body.scrollTop;
110 84
111 if (topHeight > 100) { 85 if (topHeight > 100) {
112 - this.topChange = true;  
113 - } else {  
114 - this.topChange = false;  
115 - } 86 + topChange = false;
  87 + }
  88 +
  89 + this.$refs.header.$el.classList.toggle('ghost', topChange);
116 } 90 }
117 }, 91 },
118 created() { 92 created() {