Showing
10 changed files
with
198 additions
and
53 deletions
@@ -64,6 +64,8 @@ const component = { | @@ -64,6 +64,8 @@ const component = { | ||
64 | product.formatPrice = product.format_sales_price !== '0' ? product.format_sales_price : product.format_market_price;//eslint-disable-line | 64 | product.formatPrice = product.format_sales_price !== '0' ? product.format_sales_price : product.format_market_price;//eslint-disable-line |
65 | product.isDiscount = product.market_price > product.sales_price; | 65 | product.isDiscount = product.market_price > product.sales_price; |
66 | 66 | ||
67 | + product.coverImage = product.goods_list[0].color_image; | ||
68 | + | ||
67 | res.render('pdetail', { | 69 | res.render('pdetail', { |
68 | module: 'product', | 70 | module: 'product', |
69 | page: 'detail', | 71 | page: 'detail', |
@@ -83,7 +83,7 @@ const model = { | @@ -83,7 +83,7 @@ const model = { | ||
83 | * 判断是否收藏 | 83 | * 判断是否收藏 |
84 | * @param params | 84 | * @param params |
85 | */ | 85 | */ |
86 | - isFavorite(params){ | 86 | + isFavorite(params) { |
87 | return api.get('/favorite', Object.assign({ | 87 | return api.get('/favorite', Object.assign({ |
88 | method: 'app.favorite.isFavoriteNew' | 88 | method: 'app.favorite.isFavoriteNew' |
89 | }, params)); | 89 | }, params)); |
@@ -4,15 +4,11 @@ | @@ -4,15 +4,11 @@ | ||
4 | <div class="ssr show-box first-box"> | 4 | <div class="ssr show-box first-box"> |
5 | <div class="image-swipe"> | 5 | <div class="image-swipe"> |
6 | <div class="swipe-wrap"> | 6 | <div class="swipe-wrap"> |
7 | - <div class="swiper-container swiper-container-horizontal"> | 7 | + <div class="ssr-swiper-container"> |
8 | <div class="swiper-wrapper"> | 8 | <div class="swiper-wrapper"> |
9 | - {{#each goods_list}} | ||
10 | - {{#if color_image}} | ||
11 | - <div class="swiper-slide" style="width: 300px;" data-swiper-slide-index="0"> | ||
12 | - <img width="100%" src="{{image2 color_image w=580 h=770 q=80}}/interlace/1"> | 9 | + <div class="ssr-swiper"> |
10 | + <img width="100%" src="{{image2 coverImage w=580 h=770 q=80}}/interlace/1"> | ||
13 | </div> | 11 | </div> |
14 | - {{/if}} | ||
15 | - {{/each}} | ||
16 | </div> | 12 | </div> |
17 | </div> | 13 | </div> |
18 | </div> | 14 | </div> |
@@ -283,6 +283,23 @@ const yoho = { | @@ -283,6 +283,23 @@ const yoho = { | ||
283 | }, | 283 | }, |
284 | 284 | ||
285 | /** | 285 | /** |
286 | + * 频道跳转 | ||
287 | + * @param args {""} | ||
288 | + * @param success | ||
289 | + * @param fail | ||
290 | + */ | ||
291 | + goChannel(args, success, fail) { | ||
292 | + if (this.isApp && window.yohoInterface) { | ||
293 | + window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, { | ||
294 | + method: 'go.channel', | ||
295 | + arguments: args | ||
296 | + }); | ||
297 | + } else { | ||
298 | + tip(tipInfo); | ||
299 | + } | ||
300 | + }, | ||
301 | + | ||
302 | + /** | ||
286 | * 分享 | 303 | * 分享 |
287 | * @param args {"title":"标题","des":"描述","img":"icon地址","url":"网页地址"} | 304 | * @param args {"title":"标题","des":"描述","img":"icon地址","url":"网页地址"} |
288 | * @param success | 305 | * @param success |
@@ -39,11 +39,18 @@ export default { | @@ -39,11 +39,18 @@ export default { | ||
39 | return { | 39 | return { |
40 | chosenVal: '', | 40 | chosenVal: '', |
41 | show: false, | 41 | show: false, |
42 | - chosen: {}, | 42 | + chosen: [], |
43 | choiceName: '品牌', | 43 | choiceName: '品牌', |
44 | showMore: false, | 44 | showMore: false, |
45 | allChoices: [], | 45 | allChoices: [], |
46 | - initialChoices: [] | 46 | + initialChoices: [], |
47 | + gsFilter: null, | ||
48 | + secondSort: [] | ||
49 | + } | ||
50 | + }, | ||
51 | + computed: { | ||
52 | + isGs() { | ||
53 | + return typeMap[this.name] === 'group_sort'; | ||
47 | } | 54 | } |
48 | }, | 55 | }, |
49 | methods: { | 56 | methods: { |
@@ -56,15 +63,54 @@ export default { | @@ -56,15 +63,54 @@ export default { | ||
56 | bus.$emit('expand.choice.only', this.name); | 63 | bus.$emit('expand.choice.only', this.name); |
57 | }, | 64 | }, |
58 | toggleChoice(index, choice) { | 65 | toggleChoice(index, choice) { |
59 | - choice.isChosen = !choice.isChosen; | 66 | + let change; |
67 | + | ||
68 | + this.isGs && this.delSecondSort(); | ||
69 | + if (this.isGs) { | ||
70 | + change = { | ||
71 | + isChosen: !choice.isChosen, | ||
72 | + category_name: choice.category_name, | ||
73 | + relation_parameter: choice.relation_parameter | ||
74 | + }; | ||
75 | + } else { | ||
76 | + change = { | ||
77 | + id: choice.id, | ||
78 | + name: choice.name, | ||
79 | + isChosen: !choice.isChosen | ||
80 | + }; | ||
81 | + } | ||
82 | + this.allChoices.splice(index, 1, change); | ||
83 | + | ||
84 | + if (!change.isChosen) { | ||
85 | + let id1, id2; | ||
60 | 86 | ||
61 | - !choice.isChosen && (delete this.chosen[index]); | ||
62 | - choice.isChosen && (this.chosen[index] = choice); | 87 | + _.each(this.chosen, (ch, idx) => { |
88 | + id1 = this.isGs ? ch.relation_parameter.sort : ch.id; | ||
89 | + id2 = this.isGs ? choice.relation_parameter.sort : choice.id; | ||
90 | + | ||
91 | + if (id1 === id2) { | ||
92 | + this.chosen.splice(idx, 1); | ||
93 | + return false; | ||
94 | + } | ||
95 | + }); | ||
96 | + } else { | ||
97 | + this.chosen.push(change); | ||
98 | + } | ||
63 | 99 | ||
64 | - this.calcChosenVal(); | 100 | + this.calcChosenStr(); |
65 | bus.$emit('subChosen.change', typeMap[this.name], this.chosen); | 101 | bus.$emit('subChosen.change', typeMap[this.name], this.chosen); |
66 | }, | 102 | }, |
67 | - calcChosenVal() { | 103 | + delSecondSort(){ |
104 | + if (this.chosen.length && this.secondSort.length) { // 选择三级分类时排除所有二级分类 | ||
105 | + _.each(this.chosen, (item, index) => { | ||
106 | + if (this.secondSort.indexOf(item.relation_parameter.sort.replace(/,$/, '')) > -1) { | ||
107 | + this.chosen.splice(index, 1); | ||
108 | + } | ||
109 | + }); | ||
110 | + this.calcChosenStr(); | ||
111 | + } | ||
112 | + }, | ||
113 | + calcChosenStr(){ | ||
68 | let name; | 114 | let name; |
69 | let names = []; | 115 | let names = []; |
70 | let keys = Object.keys(this.chosen); | 116 | let keys = Object.keys(this.chosen); |
@@ -96,10 +142,10 @@ export default { | @@ -96,10 +142,10 @@ export default { | ||
96 | }, | 142 | }, |
97 | clearChosenVal(){ | 143 | clearChosenVal(){ |
98 | this.show = false; | 144 | this.show = false; |
99 | - this.chosen = {}; | 145 | + this.chosen = []; |
100 | this.chosenVal = ''; | 146 | this.chosenVal = ''; |
101 | this.allChoices = this.initialChoices.slice(); | 147 | this.allChoices = this.initialChoices.slice(); |
102 | - bus.$emit('subChosen.change', this.name, this.chosen); | 148 | + bus.$emit('subChosen.change', typeMap[this.name], this.chosen); |
103 | }, | 149 | }, |
104 | searchChosenVal() { | 150 | searchChosenVal() { |
105 | this.show = false; | 151 | this.show = false; |
@@ -107,29 +153,78 @@ export default { | @@ -107,29 +153,78 @@ export default { | ||
107 | foldExcept(name) { | 153 | foldExcept(name) { |
108 | this.show = this.name === name; | 154 | this.show = this.name === name; |
109 | }, | 155 | }, |
110 | - subFilterChange(sub) { | 156 | + subFilterChange(sub, filter){ |
111 | if (typeMap[this.name] === sub.subType) { | 157 | if (typeMap[this.name] === sub.subType) { |
112 | let names = []; | 158 | let names = []; |
159 | + const len = sub.value.length; | ||
113 | 160 | ||
114 | - if (sub.value && sub.value.length) { | ||
115 | - this.allChoices = this.initialChoices.slice(); | 161 | + if (!len) { |
162 | + this.chosen = []; | ||
163 | + this.chosenVal = ''; | ||
164 | + } else { | ||
165 | + const gs = sub.subType === 'group_sort'; | ||
116 | 166 | ||
117 | - _.each(sub.value, item => { | 167 | + // 所有品类信息 |
168 | + // 用于选择三级分类的时候清除非三级分类 | ||
169 | + if (gs && !this.gsFilter) { | ||
170 | + this.calcSecondSort(filter); | ||
171 | + } | ||
172 | + | ||
173 | + this.chosen = []; | ||
174 | + this.allChoices = this.initialChoices.slice(); | ||
175 | + _.each(sub.value, (item, index) => { | ||
118 | names.push(item.name); | 176 | names.push(item.name); |
177 | + | ||
119 | _.each(this.allChoices, (choice, index) => { | 178 | _.each(this.allChoices, (choice, index) => { |
120 | - const isSort = this.name === '品类'; | ||
121 | - const id = isSort ? choice.category_id : choice.id; | 179 | + const id = gs ? |
180 | + choice.relation_parameter.sort : | ||
181 | + choice.id; | ||
122 | 182 | ||
123 | if (item.id === id) { | 183 | if (item.id === id) { |
124 | - choice.isChosen = !choice.isChosen; | ||
125 | - this.chosen[index] = choice; | 184 | + let chosen = {}; |
185 | + | ||
186 | + if (gs) { | ||
187 | + chosen = { | ||
188 | + isChosen: true, | ||
189 | + category_name: item.name, | ||
190 | + relation_parameter: choice.relation_parameter | ||
191 | + }; | ||
192 | + } else { | ||
193 | + chosen = { | ||
194 | + id: choice.id, | ||
195 | + name: choice.name, | ||
196 | + isChosen: true | ||
197 | + }; | ||
198 | + } | ||
199 | + | ||
200 | + this.allChoices.splice(index, 1, chosen); | ||
126 | } | 201 | } |
127 | }); | 202 | }); |
203 | + | ||
204 | + if (gs) { | ||
205 | + item.relation_parameter = { | ||
206 | + sort: item.id | ||
207 | + }; | ||
208 | + item.category_name = item.name; | ||
209 | + } | ||
210 | + | ||
211 | + this.chosen.push(item); | ||
128 | }); | 212 | }); |
129 | - this.show = false; | ||
130 | this.chosenVal = names.join(','); | 213 | this.chosenVal = names.join(','); |
131 | } | 214 | } |
215 | + | ||
216 | + this.show = false; | ||
217 | + bus.$emit('subChosen.change', typeMap[this.name], this.chosen); | ||
132 | } | 218 | } |
219 | + }, | ||
220 | + calcSecondSort(filter){ | ||
221 | + _.each(filter, item => { | ||
222 | + let idArr = []; | ||
223 | + _.each(item.sub, subItm => { | ||
224 | + idArr.push(subItm.relation_parameter.sort); | ||
225 | + }); | ||
226 | + this.secondSort.push(idArr.join(',')); | ||
227 | + }); | ||
133 | } | 228 | } |
134 | }, | 229 | }, |
135 | created(){ | 230 | created(){ |
@@ -233,23 +233,27 @@ export default { | @@ -233,23 +233,27 @@ export default { | ||
233 | this.$refs.filterSub.isVisible = true; | 233 | this.$refs.filterSub.isVisible = true; |
234 | }, | 234 | }, |
235 | subFilterChange(sub){ | 235 | subFilterChange(sub){ |
236 | - bus.$emit('subFilter.change', sub); | 236 | + let filter = {}; |
237 | + | ||
238 | + if (sub.subType === 'group_sort') { | ||
239 | + filter = this.filter['group_sort']; | ||
240 | + } | ||
241 | + | ||
242 | + bus.$emit('subFilter.change', sub, filter); | ||
237 | }, | 243 | }, |
238 | subChosenChange(name, chosen) { | 244 | subChosenChange(name, chosen) { |
239 | - let keyArr = Object.keys(chosen); | ||
240 | - | ||
241 | - if (keyArr.length) { | 245 | + if (chosen.length) { |
242 | let id, nm; | 246 | let id, nm; |
243 | 247 | ||
244 | this.values[name] = []; | 248 | this.values[name] = []; |
245 | - _.each(keyArr, key => { | 249 | + _.each(chosen, item => { |
246 | id = name !== 'group_sort' ? | 250 | id = name !== 'group_sort' ? |
247 | - chosen[key].id : | ||
248 | - chosen[key].relation_parameter.sort; | 251 | + item.id : |
252 | + item.relation_parameter.sort; | ||
249 | 253 | ||
250 | nm = name !== 'group_sort' ? | 254 | nm = name !== 'group_sort' ? |
251 | - chosen[key].name : | ||
252 | - chosen[key].category_name; | 255 | + item.name : |
256 | + item.category_name; | ||
253 | 257 | ||
254 | this.values[name].push({ | 258 | this.values[name].push({ |
255 | id, | 259 | id, |
@@ -14,7 +14,7 @@ | @@ -14,7 +14,7 @@ | ||
14 | <div class="my-header unlisted" v-else> | 14 | <div class="my-header unlisted" v-else> |
15 | <span class="auth username">登录/注册</span> | 15 | <span class="auth username">登录/注册</span> |
16 | </div> | 16 | </div> |
17 | - <div class="change-channel" @click="isShowChannel = true"> | 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> |
@@ -36,13 +36,6 @@ | @@ -36,13 +36,6 @@ | ||
36 | </div> | 36 | </div> |
37 | <div class="my-order"> | 37 | <div class="my-order"> |
38 | 38 | ||
39 | - <!--<a class="order-title auth" href="/me/order?type=1"> | ||
40 | - 我的订单 | ||
41 | - <span class="read-order"> | ||
42 | - 查看全部订单 <span class="icon icon-right"></span> | ||
43 | - </span> | ||
44 | - </a>--> | ||
45 | - | ||
46 | <div class="order-type clearfix"> | 39 | <div class="order-type clearfix"> |
47 | <a class="type-item auth" href="/me/order?type=2"> | 40 | <a class="type-item auth" href="/me/order?type=2"> |
48 | <span class="icon icon-card"></span> | 41 | <span class="icon icon-card"></span> |
@@ -164,6 +157,10 @@ | @@ -164,6 +157,10 @@ | ||
164 | channel_id: data | 157 | channel_id: data |
165 | }); | 158 | }); |
166 | }, | 159 | }, |
160 | + goChannel() { | ||
161 | + yoho.goChannel(); | ||
162 | + return false; | ||
163 | + }, | ||
167 | goTel() { | 164 | goTel() { |
168 | yoho.goTel({ | 165 | yoho.goTel({ |
169 | tel: '400-889-9646' | 166 | tel: '400-889-9646' |
@@ -345,8 +342,6 @@ | @@ -345,8 +342,6 @@ | ||
345 | 342 | ||
346 | .my-header { | 343 | .my-header { |
347 | height: 260px; | 344 | height: 260px; |
348 | - | ||
349 | - /* background: resolve("me/header-bg.png"); */ | ||
350 | background: #fff; | 345 | background: #fff; |
351 | background-size: cover; | 346 | background-size: cover; |
352 | padding: 0 30px; | 347 | padding: 0 30px; |
@@ -368,8 +363,6 @@ | @@ -368,8 +363,6 @@ | ||
368 | height: 170px; | 363 | height: 170px; |
369 | border-radius: 50%; | 364 | border-radius: 50%; |
370 | margin: 0 auto; | 365 | margin: 0 auto; |
371 | - | ||
372 | - /* border: 3px solid #b0b0b0; */ | ||
373 | background: resolve("me/user-icon.png"); | 366 | background: resolve("me/user-icon.png"); |
374 | background-size: 100%; | 367 | background-size: 100%; |
375 | vertical-align: middle; | 368 | vertical-align: middle; |
@@ -539,7 +532,7 @@ | @@ -539,7 +532,7 @@ | ||
539 | font-size: 34px; | 532 | font-size: 34px; |
540 | line-height: 72px; | 533 | line-height: 72px; |
541 | color: #fff; | 534 | color: #fff; |
542 | - background: #ff081c; | 535 | + background: #000; |
543 | text-align: center; | 536 | text-align: center; |
544 | border-radius: 50%; | 537 | border-radius: 50%; |
545 | transform: scale(0.5); | 538 | transform: scale(0.5); |
@@ -596,8 +589,6 @@ | @@ -596,8 +589,6 @@ | ||
596 | } | 589 | } |
597 | 590 | ||
598 | .tel { | 591 | .tel { |
599 | - | ||
600 | - /* padding-right: 10px; */ | ||
601 | .icon-right { | 592 | .icon-right { |
602 | margin-left: 10px; | 593 | margin-left: 10px; |
603 | } | 594 | } |
@@ -111,6 +111,28 @@ | @@ -111,6 +111,28 @@ | ||
111 | }; | 111 | }; |
112 | </script> | 112 | </script> |
113 | <style> | 113 | <style> |
114 | + | ||
115 | + | ||
116 | +#ssr { | ||
117 | + .ssr-swiper-container { | ||
118 | + background-color: #f7f7f7; | ||
119 | + } | ||
120 | + .ssr-swiper { | ||
121 | + width: 620px; | ||
122 | + padding: 0 20px; | ||
123 | + background-color: #fff; | ||
124 | + transform: translateX(590px); | ||
125 | + font-size: 0; | ||
126 | + | ||
127 | + img { | ||
128 | + width: 580px; | ||
129 | + height: 770px; | ||
130 | + } | ||
131 | + } | ||
132 | +} | ||
133 | + | ||
134 | + | ||
135 | + | ||
114 | .image-swipe { | 136 | .image-swipe { |
115 | overflow: hidden; | 137 | overflow: hidden; |
116 | 138 |
@@ -3,6 +3,7 @@ | @@ -3,6 +3,7 @@ | ||
3 | <cheader title="新品抢先看"></cheader> | 3 | <cheader title="新品抢先看"></cheader> |
4 | <filter-box :val="order" :filter="filterConfig" v-if="enableOrder"></filter-box> | 4 | <filter-box :val="order" :filter="filterConfig" v-if="enableOrder"></filter-box> |
5 | <product-list :data="productList" :state="listState" class="list-items"></product-list> | 5 | <product-list :data="productList" :state="listState" class="list-items"></product-list> |
6 | + <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag> | ||
6 | </div> | 7 | </div> |
7 | </template> | 8 | </template> |
8 | <script> | 9 | <script> |
@@ -16,6 +17,7 @@ | @@ -16,6 +17,7 @@ | ||
16 | import lazyload from 'vue-lazyload'; | 17 | import lazyload from 'vue-lazyload'; |
17 | import infinitScroll from 'vue-infinite-scroll'; | 18 | import infinitScroll from 'vue-infinite-scroll'; |
18 | import ProductList from 'component/product/list.vue'; | 19 | import ProductList from 'component/product/list.vue'; |
20 | + import shoppingBag from 'component/product/shopping-bag.vue'; | ||
19 | import FilterBox from 'component/product/filter/index.vue'; | 21 | import FilterBox from 'component/product/filter/index.vue'; |
20 | 22 | ||
21 | let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); | 23 | let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); |
@@ -27,6 +29,7 @@ | @@ -27,6 +29,7 @@ | ||
27 | export default { | 29 | export default { |
28 | data: function() { | 30 | data: function() { |
29 | return { | 31 | return { |
32 | + isApp: yoho.isApp, | ||
30 | isiOS: yoho.isiOS, | 33 | isiOS: yoho.isiOS, |
31 | sortName: locationQuery.sort_name, | 34 | sortName: locationQuery.sort_name, |
32 | filterConfig: null, | 35 | filterConfig: null, |
@@ -43,7 +46,8 @@ | @@ -43,7 +46,8 @@ | ||
43 | // state | 46 | // state |
44 | inSearching: false, // 请求中 | 47 | inSearching: false, // 请求中 |
45 | enableOrder: false, | 48 | enableOrder: false, |
46 | - order: '' | 49 | + order: '', |
50 | + cartCount: 0 | ||
47 | }; | 51 | }; |
48 | }, | 52 | }, |
49 | computed: { | 53 | computed: { |
@@ -68,7 +72,8 @@ | @@ -68,7 +72,8 @@ | ||
68 | components: { | 72 | components: { |
69 | cheader, | 73 | cheader, |
70 | ProductList, | 74 | ProductList, |
71 | - FilterBox | 75 | + FilterBox, |
76 | + shoppingBag | ||
72 | }, | 77 | }, |
73 | methods: { | 78 | methods: { |
74 | search() { | 79 | search() { |
@@ -120,6 +125,14 @@ | @@ -120,6 +125,14 @@ | ||
120 | this.page = 0; | 125 | this.page = 0; |
121 | this.productList = []; | 126 | this.productList = []; |
122 | this.search(); | 127 | this.search(); |
128 | + }, | ||
129 | + | ||
130 | + refreshCart: function() { | ||
131 | + $.get('/product/cart-count.json').then(result=> { | ||
132 | + if (result.code === 200) { | ||
133 | + this.cartCount = result.data.cart_goods_count; | ||
134 | + } | ||
135 | + }); | ||
123 | } | 136 | } |
124 | }, | 137 | }, |
125 | watch: { | 138 | watch: { |
@@ -146,6 +159,11 @@ | @@ -146,6 +159,11 @@ | ||
146 | self.filter = val; | 159 | self.filter = val; |
147 | }); | 160 | }); |
148 | 161 | ||
162 | + // 读取购物车数量 | ||
163 | + if (this.isApp) { | ||
164 | + this.refreshCart(); | ||
165 | + } | ||
166 | + | ||
149 | this.search(); | 167 | this.search(); |
150 | } | 168 | } |
151 | }; | 169 | }; |
-
Please register or login to post a comment