Merge branch 'release/3.0' into 'master'
Release/3.0 See merge request !22
Showing
12 changed files
with
262 additions
and
317 deletions
@@ -16,7 +16,7 @@ | @@ -16,7 +16,7 @@ | ||
16 | </div> | 16 | </div> |
17 | <div class="icon-container"> | 17 | <div class="icon-container"> |
18 | <span class="blk-start-icon"></span> | 18 | <span class="blk-start-icon"></span> |
19 | - <p class="icon-label">BLK</p> | 19 | + <p class="icon-label app-version"></p> |
20 | </div> | 20 | </div> |
21 | <div class="description"> | 21 | <div class="description"> |
22 | <p>The world of fashion is</p> | 22 | <p>The world of fashion is</p> |
1 | <div class="vip-privilege-page yoho-page"> | 1 | <div class="vip-privilege-page yoho-page"> |
2 | - <div class="blk-header-wrap"> | ||
3 | - <div class="blk-header"> | ||
4 | - <div class="blk-header-left"> | ||
5 | - <i class="icon icon-back go-back-btn"></i> | ||
6 | - </div> | ||
7 | - <div class="blk-header-main"> | ||
8 | - <span class="blk-header-title">VIP特权</span> | ||
9 | - </div> | ||
10 | - </div> | 2 | + <div id="header"> |
3 | + <div class="blk-header-wrap"> | ||
4 | + <div class="blk-header"> | ||
5 | + <div class="blk-header-left"><i class="icon icon-back go-back-btn"></i></div> | ||
6 | + <div class="blk-header-right"></div> | ||
7 | + <div class="blk-header-main"><span class="blk-header-title">VIP特权</span></div> | ||
8 | + </div> | ||
9 | + <div class="blk-header-gap"></div> | ||
10 | + </div> | ||
11 | + </div> | ||
11 | <ul class="privilege-list"> | 12 | <ul class="privilege-list"> |
12 | - {{#each privilege}} | ||
13 | - <li> | ||
14 | - <span class="icon {{pic}}"></span> | ||
15 | - <p> | ||
16 | - {{title}} | ||
17 | - <span>{{description}}</span> | ||
18 | - </p> | ||
19 | - </li> | ||
20 | - {{/each}} | 13 | + {{#each privilege}} |
14 | + <li> | ||
15 | + <span class="icon {{pic}}"></span> | ||
16 | + <p> | ||
17 | + {{title}} | ||
18 | + <span>{{description}}</span> | ||
19 | + </p> | ||
20 | + </li> | ||
21 | + {{/each}} | ||
21 | </ul> | 22 | </ul> |
22 | </div> | 23 | </div> |
1 | import yoho from 'yoho'; | 1 | import yoho from 'yoho'; |
2 | import $ from 'jquery'; | 2 | import $ from 'jquery'; |
3 | +import Vue from 'vue'; | ||
4 | +import HeaderBox from 'component/header.vue'; | ||
5 | +import 'me/_vip-grade.css'; | ||
3 | 6 | ||
4 | -$('.go-back-btn').click(function() { | ||
5 | - yoho.goBack({}, function() {}, function() {}); | 7 | +new Vue({ |
8 | + el: '#header', | ||
9 | + render: h => h(HeaderBox, { | ||
10 | + props: { | ||
11 | + title: 'VIP特权' | ||
12 | + } | ||
13 | + }) | ||
6 | }); | 14 | }); |
7 | - | ||
8 | setTimeout(function() { | 15 | setTimeout(function() { |
9 | if ($('.vip-privilege-page').height() < $(window).height()) { | 16 | if ($('.vip-privilege-page').height() < $(window).height()) { |
10 | $('.vip-privilege-page').height($(window).height()); | 17 | $('.vip-privilege-page').height($(window).height()); |
1 | -.ios { | ||
2 | - .vip-grade-page, | ||
3 | - .vip-privilege-page { | ||
4 | - .blk-header { | ||
5 | - padding-top: 55px; | ||
6 | - font-family: "PingFangSC"; | ||
7 | - font-weight: 600; | ||
8 | - } | ||
9 | - | ||
10 | - .basic-info { | ||
11 | - margin-top: 25px; | ||
12 | - } | ||
13 | - | ||
14 | - .blk-header-left { | ||
15 | - position: relative; | ||
16 | - top: 2px; | ||
17 | - } | ||
18 | - | ||
19 | - .privilege-list { | ||
20 | - margin-top: 35px; | ||
21 | - } | ||
22 | - } | ||
23 | -} | ||
24 | - | ||
25 | -.vip-grade-page, | ||
26 | -.vip-privilege-page { | ||
27 | - .blk-header { | ||
28 | - box-sizing: content-box; | ||
29 | - position: fixed; | ||
30 | - top: 0; | ||
31 | - right: 0; | ||
32 | - left: 0; | ||
33 | - z-index: 210; | ||
34 | - padding: 20px 34px; | ||
35 | - height: 60px; | ||
36 | - max-width: 750px; | ||
37 | - margin-left: auto; | ||
38 | - margin-right: auto; | ||
39 | - line-height: 65px; | ||
40 | - font-size: 44px; | ||
41 | - background-color: #fff; | ||
42 | - border-bottom: 1px solid #eee; | ||
43 | - color: #000; | ||
44 | - | ||
45 | - .icon, | ||
46 | - .blk-header-title { | ||
47 | - vertical-align: middle; | ||
48 | - } | ||
49 | - | ||
50 | - .blk-header-right { | ||
51 | - margin-right: -32px; | ||
52 | - } | ||
53 | - | ||
54 | - .icon { | ||
55 | - min-width: 110px; | ||
56 | - min-height: 100px; | ||
57 | - line-height: 110px; | ||
58 | - margin-top: -20px; | ||
59 | - margin-left: -32px; | ||
60 | - text-indent: 32px; | ||
61 | - display: inline-block; | ||
62 | - } | ||
63 | - | ||
64 | - .go-back-btn { | ||
65 | - &:hover { | ||
66 | - background: #ccc; | ||
67 | - opacity: 0.5; | ||
68 | - } | ||
69 | - } | ||
70 | - } | ||
71 | - | ||
72 | - .blk-header-left { | ||
73 | - float: left; | ||
74 | - font-size: 42px; | ||
75 | - } | ||
76 | - | ||
77 | - .blk-header-main { | ||
78 | - display: block; | ||
79 | - text-align: center; | ||
80 | - margin-left: auto; | ||
81 | - margin-right: auto; | ||
82 | - font-size: 42px; | ||
83 | - overflow: hidden; | ||
84 | - white-space: nowrap; | ||
85 | - text-overflow: ellipsis; | ||
86 | - position: absolute; | ||
87 | - left: 0; | ||
88 | - right: 0; | ||
89 | - z-index: -1; | ||
90 | - } | ||
91 | -} | ||
92 | - | ||
93 | -.vip-grade-page { | ||
94 | - background: #f0f0f0; | ||
95 | - padding-bottom: 30px; | ||
96 | - | ||
97 | - .block { | ||
98 | - padding: 0 30px; | ||
99 | - margin-bottom: 30px; | ||
100 | - border-top: 1px solid #e0e0e0; | ||
101 | - border-bottom: 1px solid #e0e0e0; | ||
102 | - background: #fff; | ||
103 | - } | ||
104 | - | ||
105 | - .basic-info { | ||
106 | - padding-top: 130px; | ||
107 | - padding-bottom: 25px; | ||
108 | - | ||
109 | - p { | ||
110 | - width: 100%; | ||
111 | - height: auto; | ||
112 | - overflow: hidden; | ||
113 | - display: block; | ||
114 | - } | ||
115 | - | ||
116 | - span { | ||
117 | - overflow: hidden; | ||
118 | - } | ||
119 | - | ||
120 | - .user-name { | ||
121 | - float: left; | ||
122 | - max-width: 240px; | ||
123 | - text-overflow: ellipsis; | ||
124 | - white-space: nowrap; | ||
125 | - font-size: 40px; | ||
126 | - margin-right: 0.5rem; | ||
127 | - } | ||
128 | - | ||
129 | - .vip-icon { | ||
130 | - margin-top: 6px; | ||
131 | - float: left; | ||
132 | - width: 110px; | ||
133 | - height: 40px; | ||
134 | - line-height: 40px; | ||
135 | - } | ||
136 | - | ||
137 | - .vip-3 { | ||
138 | - background: resolve("me/vip-3.png"); | ||
139 | - } | ||
140 | 1 | ||
141 | - .vip-2 { | ||
142 | - background: resolve("me/vip-2.png"); | ||
143 | - } | ||
144 | - | ||
145 | - .vip-1 { | ||
146 | - background: resolve("me/vip-1.png"); | ||
147 | - } | ||
148 | - | ||
149 | - .vip-3, | ||
150 | - .vip-2, | ||
151 | - .vip-1 { | ||
152 | - background-size: 100%; | ||
153 | - } | ||
154 | - | ||
155 | - .grade-desc { | ||
156 | - margin-top: 20px; | ||
157 | - font-size: 26px; | ||
158 | - color: #b0b0b0; | ||
159 | - | ||
160 | - .sub-desc { | ||
161 | - margin-top: 10px; | ||
162 | - } | ||
163 | - } | ||
164 | - | ||
165 | - .sum-cost { | ||
166 | - margin-top: 10px; | ||
167 | - font-size: 26px; | ||
168 | - | ||
169 | - > span { | ||
170 | - font-style: italic; | ||
171 | - font-size: 34px; | ||
172 | - color: #000; | ||
173 | - font-weight: bold; | ||
174 | - } | ||
175 | - } | ||
176 | - | ||
177 | - .progresser { | ||
178 | - position: relative; | ||
179 | - width: 100%; | ||
180 | - padding: 15px 0; | ||
181 | - margin-bottom: 30px; | ||
182 | - } | ||
183 | - | ||
184 | - .outer { | ||
185 | - height: 20px; | ||
186 | - background: #e6e6e6; | ||
187 | - border-radius: 10px; | ||
188 | - } | ||
189 | - | ||
190 | - .inner { | ||
191 | - position: absolute; | ||
192 | - top: 15px; | ||
193 | - height: 20px; | ||
194 | - background: #000; | ||
195 | - border-radius: 10px; | ||
196 | - } | ||
197 | - | ||
198 | - .beacon { | ||
199 | - position: absolute; | ||
200 | - margin-top: 15px; | ||
201 | - font-style: italic; | ||
202 | - margin-bottom: 30px; | ||
203 | - } | ||
204 | - | ||
205 | - .beacon-max { | ||
206 | - right: 0; | ||
207 | - } | ||
208 | - | ||
209 | - .cost-limit { | ||
210 | - position: absolute; | ||
211 | - top: -30px; | ||
212 | - right: 0; | ||
213 | - color: #b0b0b0; | ||
214 | - } | ||
215 | - | ||
216 | - .cost-gap { | ||
217 | - color: #000; | ||
218 | - margin: 0 8px; | ||
219 | - } | ||
220 | - | ||
221 | - .sub-desc { | ||
222 | - display: block; | ||
223 | - } | ||
224 | - } | ||
225 | - | ||
226 | - .cost { | ||
227 | - padding: 0 0 0 30px; | ||
228 | - } | ||
229 | - | ||
230 | - .cost li { | ||
231 | - height: 90px; | ||
232 | - line-height: 90px; | ||
233 | - font-size: 34px; | ||
234 | - padding-right: 0; | ||
235 | - | ||
236 | - &:first-child { | ||
237 | - border-bottom: 1px solid #e0e0e0; | ||
238 | - } | ||
239 | - | ||
240 | - > span { | ||
241 | - float: right; | ||
242 | - padding: 0 30px 0 0; | ||
243 | - font-size: 28px; | ||
244 | - } | ||
245 | - } | ||
246 | - | ||
247 | - .privilege { | ||
248 | - padding-right: 0; | ||
249 | - padding-bottom: 40px; | ||
250 | - | ||
251 | - .title { | ||
252 | - height: 90px; | ||
253 | - line-height: 90px; | ||
254 | - font-size: 30px; | ||
255 | - border-bottom: 1px solid #e0e0e0; | ||
256 | - } | ||
257 | - } | ||
258 | - | ||
259 | - .all-privilege { | ||
260 | - display: block; | ||
261 | - height: 90px; | ||
262 | - line-height: 90px; | ||
263 | - font-size: 30px; | ||
264 | - margin-bottom: 0; | ||
265 | - | ||
266 | - span { | ||
267 | - float: right; | ||
268 | - color: #e0e0e0; | ||
269 | - line-height: 90px; | ||
270 | - } | ||
271 | - } | ||
272 | -} | ||
273 | 2 | ||
274 | .vip-privilege-page { | 3 | .vip-privilege-page { |
275 | - padding-top: 100px; | ||
276 | background: #f0f0f0; | 4 | background: #f0f0f0; |
277 | } | 5 | } |
278 | 6 |
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | <div v-if="channel.length" class="channel-tab"> | 2 | <div v-if="channel.length" class="channel-tab"> |
3 | <div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}" | 3 | <div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}" |
4 | @click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}"> | 4 | @click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}"> |
5 | - <span class="name">{{item.name && item.name.toUpperCase()}}</span> | 5 | + <span class="name">{{item.name | keepEn}}</span> |
6 | </div> | 6 | </div> |
7 | </div> | 7 | </div> |
8 | </template> | 8 | </template> |
@@ -89,6 +89,12 @@ | @@ -89,6 +89,12 @@ | ||
89 | } | 89 | } |
90 | } | 90 | } |
91 | }, | 91 | }, |
92 | + filters: { | ||
93 | + keepEn(name){ | ||
94 | + name = (name || '').toUpperCase(); | ||
95 | + return name.replace(/(男士|女士)$/g, ''); | ||
96 | + } | ||
97 | + }, | ||
92 | watch: { | 98 | watch: { |
93 | current(val) { | 99 | current(val) { |
94 | this.currentChannel = val; | 100 | this.currentChannel = val; |
1 | <template> | 1 | <template> |
2 | <ul class="list-box"> | 2 | <ul class="list-box"> |
3 | - <li v-for="item in items" :key="item.name"><a class="no-intercept" :href="'#' + item.index">{{item.name}}</a></li> | 3 | + <li v-for="item in items" :key="item.name"><a class="no-intercept" href="javascript:;" @click="() => {loc(item.index)}">{{item.name}}</a></li> |
4 | </ul> | 4 | </ul> |
5 | </template> | 5 | </template> |
6 | <style> | 6 | <style> |
@@ -47,6 +47,21 @@ | @@ -47,6 +47,21 @@ | ||
47 | } | 47 | } |
48 | } | 48 | } |
49 | }, | 49 | }, |
50 | + methods: { | ||
51 | + loc(index) { | ||
52 | + let $el = document.querySelector(`a[name="${index}"]`); | ||
53 | + | ||
54 | + if ($el) { | ||
55 | + let top = document.querySelector(`a[name=${index}]`).offsetTop; | ||
56 | + let header = document.querySelector('.blk-header'); | ||
57 | + | ||
58 | + if (header) { | ||
59 | + top -= header.clientHeight + 2; | ||
60 | + } | ||
61 | + window.scrollTo(0, top); | ||
62 | + } | ||
63 | + } | ||
64 | + }, | ||
50 | created() { | 65 | created() { |
51 | if (!this.indexList) { | 66 | if (!this.indexList) { |
52 | 67 |
@@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
6 | <div class="my-header" v-if="data.nickName"> | 6 | <div class="my-header" v-if="data.nickName"> |
7 | <a class="user-info auth" id="user-info" href='/me/mydetails'> | 7 | <a class="user-info auth" id="user-info" href='/me/mydetails'> |
8 | <img class="user-avatar" :src="headIco" @error="setEmptyimg"> | 8 | <img class="user-avatar" :src="headIco" @error="setEmptyimg"> |
9 | - <span class="username" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span> | 9 | + <span class="username ellipsis" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span> |
10 | <div class="account-mg">账号管理<span class="icon icon-right"></span></div> | 10 | <div class="account-mg">账号管理<span class="icon icon-right"></span></div> |
11 | </a> | 11 | </a> |
12 | <a :class="`vip-level level-${data.vipLevel}`" v-if="data.vipLevel" href='/me/grade'></a> | 12 | <a :class="`vip-level level-${data.vipLevel}`" v-if="data.vipLevel" href='/me/grade'></a> |
@@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
15 | <span class="username" @click="sign">登录/注册</span> | 15 | <span class="username" @click="sign">登录/注册</span> |
16 | </div> | 16 | </div> |
17 | <div class="change-channel" @click="goChannel"> | 17 | <div class="change-channel" @click="goChannel"> |
18 | - <span class="label">切换购物频道</span> | 18 | + <span class="label">默认购物频道</span> |
19 | <span class="channel">{{curChannel}}<span class="icon icon-right"></span></span> | 19 | <span class="channel">{{curChannel}}<span class="icon icon-right"></span></span> |
20 | </div> | 20 | </div> |
21 | <div class="group-list"> | 21 | <div class="group-list"> |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <div class="blk-header-wrap"> | ||
4 | - <div class="blk-header"> | ||
5 | - <div class="blk-header-left"> | ||
6 | - <i class="icon icon-back go-back-btn" @click="goBack"></i> | ||
7 | - </div> | ||
8 | - <div class="blk-header-main"> | ||
9 | - <span class="blk-header-title">会员等级</span> | ||
10 | - </div> | ||
11 | - </div> | ||
12 | - </div> | 3 | + <header-box title="会员等级" ref="header"></header-box> |
13 | <div class="basic-info block" v-if="vipGrade.vip3"> | 4 | <div class="basic-info block" v-if="vipGrade.vip3"> |
14 | <p> | 5 | <p> |
15 | <span class="user-name">{{vipGrade.name}}</span> | 6 | <span class="user-name">{{vipGrade.name}}</span> |
@@ -126,14 +117,193 @@ | @@ -126,14 +117,193 @@ | ||
126 | </div> | 117 | </div> |
127 | </template> | 118 | </template> |
128 | <style> | 119 | <style> |
129 | - .go-back-btn { | ||
130 | - font-size: 64px; | 120 | + .vip-grade-page { |
121 | + background: #f0f0f0; | ||
122 | + padding-bottom: 30px; | ||
123 | + | ||
124 | + .block { | ||
125 | + padding: 0 30px; | ||
126 | + margin-bottom: 30px; | ||
127 | + border-top: 1px solid #e0e0e0; | ||
128 | + border-bottom: 1px solid #e0e0e0; | ||
129 | + background: #fff; | ||
130 | + } | ||
131 | + | ||
132 | + .basic-info { | ||
133 | + padding-top: 30px; | ||
134 | + padding-bottom: 25px; | ||
135 | + border-top: none; | ||
136 | + | ||
137 | + p { | ||
138 | + width: 100%; | ||
139 | + height: auto; | ||
140 | + overflow: hidden; | ||
141 | + display: block; | ||
142 | + } | ||
143 | + | ||
144 | + span { | ||
145 | + overflow: hidden; | ||
146 | + } | ||
147 | + | ||
148 | + .user-name { | ||
149 | + float: left; | ||
150 | + max-width: 240px; | ||
151 | + text-overflow: ellipsis; | ||
152 | + white-space: nowrap; | ||
153 | + font-size: 40px; | ||
154 | + margin-right: 0.5rem; | ||
155 | + } | ||
156 | + | ||
157 | + .vip-icon { | ||
158 | + margin-top: 6px; | ||
159 | + float: left; | ||
160 | + width: 110px; | ||
161 | + height: 40px; | ||
162 | + line-height: 40px; | ||
163 | + } | ||
164 | + | ||
165 | + .vip-3 { | ||
166 | + background: resolve("me/vip-3.png"); | ||
167 | + } | ||
168 | + | ||
169 | + .vip-2 { | ||
170 | + background: resolve("me/vip-2.png"); | ||
171 | + } | ||
172 | + | ||
173 | + .vip-1 { | ||
174 | + background: resolve("me/vip-1.png"); | ||
175 | + } | ||
176 | + | ||
177 | + .vip-3, | ||
178 | + .vip-2, | ||
179 | + .vip-1 { | ||
180 | + background-size: 100%; | ||
181 | + } | ||
182 | + | ||
183 | + .grade-desc { | ||
184 | + margin-top: 20px; | ||
185 | + font-size: 26px; | ||
186 | + color: #b0b0b0; | ||
187 | + | ||
188 | + .sub-desc { | ||
189 | + margin-top: 10px; | ||
190 | + } | ||
191 | + } | ||
192 | + | ||
193 | + .sum-cost { | ||
194 | + margin-top: 10px; | ||
195 | + font-size: 26px; | ||
196 | + | ||
197 | + > span { | ||
198 | + font-style: italic; | ||
199 | + font-size: 34px; | ||
200 | + color: #000; | ||
201 | + font-weight: bold; | ||
202 | + } | ||
203 | + } | ||
204 | + | ||
205 | + .progresser { | ||
206 | + position: relative; | ||
207 | + width: 100%; | ||
208 | + padding: 15px 0; | ||
209 | + margin-bottom: 30px; | ||
210 | + } | ||
211 | + | ||
212 | + .outer { | ||
213 | + height: 20px; | ||
214 | + background: #e6e6e6; | ||
215 | + border-radius: 10px; | ||
216 | + } | ||
217 | + | ||
218 | + .inner { | ||
219 | + position: absolute; | ||
220 | + top: 15px; | ||
221 | + height: 20px; | ||
222 | + background: #000; | ||
223 | + border-radius: 10px; | ||
224 | + } | ||
225 | + | ||
226 | + .beacon { | ||
227 | + position: absolute; | ||
228 | + margin-top: 15px; | ||
229 | + font-style: italic; | ||
230 | + margin-bottom: 30px; | ||
231 | + } | ||
232 | + | ||
233 | + .beacon-max { | ||
234 | + right: 0; | ||
235 | + } | ||
236 | + | ||
237 | + .cost-limit { | ||
238 | + position: absolute; | ||
239 | + top: -30px; | ||
240 | + right: 0; | ||
241 | + color: #b0b0b0; | ||
242 | + } | ||
243 | + | ||
244 | + .cost-gap { | ||
245 | + color: #000; | ||
246 | + margin: 0 8px; | ||
247 | + } | ||
248 | + | ||
249 | + .sub-desc { | ||
250 | + display: block; | ||
251 | + } | ||
252 | + } | ||
253 | + | ||
254 | + .cost { | ||
255 | + padding: 0 0 0 30px; | ||
256 | + } | ||
257 | + | ||
258 | + .cost li { | ||
259 | + height: 90px; | ||
260 | + line-height: 90px; | ||
261 | + font-size: 34px; | ||
262 | + padding-right: 0; | ||
263 | + | ||
264 | + &:first-child { | ||
265 | + border-bottom: 1px solid #e0e0e0; | ||
266 | + } | ||
267 | + | ||
268 | + > span { | ||
269 | + float: right; | ||
270 | + padding: 0 30px 0 0; | ||
271 | + font-size: 28px; | ||
272 | + } | ||
273 | + } | ||
274 | + | ||
275 | + .privilege { | ||
276 | + padding-right: 0; | ||
277 | + padding-bottom: 40px; | ||
278 | + | ||
279 | + .title { | ||
280 | + height: 90px; | ||
281 | + line-height: 90px; | ||
282 | + font-size: 30px; | ||
283 | + border-bottom: 1px solid #e0e0e0; | ||
284 | + } | ||
285 | + } | ||
286 | + | ||
287 | + .all-privilege { | ||
288 | + display: block; | ||
289 | + height: 90px; | ||
290 | + line-height: 90px; | ||
291 | + font-size: 30px; | ||
292 | + margin-bottom: 0; | ||
293 | + | ||
294 | + span { | ||
295 | + float: right; | ||
296 | + color: #e0e0e0; | ||
297 | + line-height: 90px; | ||
298 | + } | ||
131 | } | 299 | } |
300 | +} | ||
132 | </style> | 301 | </style> |
133 | 302 | ||
134 | <script> | 303 | <script> |
135 | import $ from 'jquery'; | 304 | import $ from 'jquery'; |
136 | import yoho from 'yoho'; | 305 | import yoho from 'yoho'; |
306 | + import HeaderBox from 'component/header.vue'; | ||
137 | 307 | ||
138 | export default { | 308 | export default { |
139 | data() { | 309 | data() { |
@@ -155,11 +325,11 @@ | @@ -155,11 +325,11 @@ | ||
155 | $('.vip-grade-page').height($(window).height()); | 325 | $('.vip-grade-page').height($(window).height()); |
156 | } | 326 | } |
157 | }, 500); | 327 | }, 500); |
158 | - }, | ||
159 | - goBack() { | ||
160 | - yoho.goBack({}, function() {}, function() {}); | ||
161 | } | 328 | } |
162 | }, | 329 | }, |
330 | + components: { | ||
331 | + HeaderBox | ||
332 | + }, | ||
163 | mounted() { | 333 | mounted() { |
164 | this.reload(); | 334 | this.reload(); |
165 | } | 335 | } |
@@ -5,6 +5,7 @@ | @@ -5,6 +5,7 @@ | ||
5 | <product-list :data="productList" :state="listState"></product-list> | 5 | <product-list :data="productList" :state="listState"></product-list> |
6 | </div> | 6 | </div> |
7 | <filter-box :val="order" :filter="filterConfig" v-if="enableOrder" ref="filter"></filter-box> | 7 | <filter-box :val="order" :filter="filterConfig" v-if="enableOrder" ref="filter"></filter-box> |
8 | + <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag> | ||
8 | </div> | 9 | </div> |
9 | </template> | 10 | </template> |
10 | <style> | 11 | <style> |
@@ -35,6 +36,8 @@ | @@ -35,6 +36,8 @@ | ||
35 | import shopTop from 'product/shop/shop-top.vue'; // 店铺头部信息 | 36 | import shopTop from 'product/shop/shop-top.vue'; // 店铺头部信息 |
36 | import ProductList from 'component/product/list.vue'; | 37 | import ProductList from 'component/product/list.vue'; |
37 | import FilterBox from 'component/product/filter/index.vue'; | 38 | import FilterBox from 'component/product/filter/index.vue'; |
39 | + import ShoppingBag from 'component/product/shopping-bag.vue'; | ||
40 | + | ||
38 | 41 | ||
39 | const $shop = $('#shop'); | 42 | const $shop = $('#shop'); |
40 | 43 | ||
@@ -44,6 +47,7 @@ | @@ -44,6 +47,7 @@ | ||
44 | export default { | 47 | export default { |
45 | data() { | 48 | data() { |
46 | return { | 49 | return { |
50 | + isApp: yoho.isApp, | ||
47 | noheader: false, | 51 | noheader: false, |
48 | shareData: {}, // 分享相关数据 | 52 | shareData: {}, // 分享相关数据 |
49 | shopInfo: {}, // 店铺介绍相关数据 | 53 | shopInfo: {}, // 店铺介绍相关数据 |
@@ -64,6 +68,7 @@ | @@ -64,6 +68,7 @@ | ||
64 | inSearching: false, | 68 | inSearching: false, |
65 | enableOrder: false, | 69 | enableOrder: false, |
66 | order: '', | 70 | order: '', |
71 | + cartCount: 0 | ||
67 | }; | 72 | }; |
68 | }, | 73 | }, |
69 | computed: { | 74 | computed: { |
@@ -178,13 +183,22 @@ | @@ -178,13 +183,22 @@ | ||
178 | this.page = 0; | 183 | this.page = 0; |
179 | this.productList = []; | 184 | this.productList = []; |
180 | this.search(); | 185 | this.search(); |
186 | + }, | ||
187 | + | ||
188 | + refreshCart: function() { | ||
189 | + $.get('/product/cart-count.json').then(result=> { | ||
190 | + if (result.code === 200) { | ||
191 | + this.cartCount = result.data.cart_goods_count; | ||
192 | + } | ||
193 | + }); | ||
181 | } | 194 | } |
182 | }, | 195 | }, |
183 | components: { | 196 | components: { |
184 | topBar, | 197 | topBar, |
185 | shopTop, | 198 | shopTop, |
186 | ProductList, | 199 | ProductList, |
187 | - FilterBox | 200 | + FilterBox, |
201 | + ShoppingBag | ||
188 | }, | 202 | }, |
189 | created() { | 203 | created() { |
190 | const self = this; | 204 | const self = this; |
@@ -219,6 +233,12 @@ | @@ -219,6 +233,12 @@ | ||
219 | self.filter = val; | 233 | self.filter = val; |
220 | self.$refs.filter.isVisible = false; | 234 | self.$refs.filter.isVisible = false; |
221 | }); | 235 | }); |
236 | + | ||
237 | + // 读取购物车数量 | ||
238 | + if (this.isApp) { | ||
239 | + this.refreshCart(); | ||
240 | + bus.$on('app.shoppingcart.refresh', this.refreshCart); | ||
241 | + } | ||
222 | } | 242 | } |
223 | }; | 243 | }; |
224 | 244 |
-
Please register or login to post a comment