Authored by Aiden Xu

Merge remote-tracking branch 'origin/develop' into develop

@@ -6,10 +6,28 @@ Name | Path | Note @@ -6,10 +6,28 @@ Name | Path | Note
6 品类 | /cate | 6 品类 | /cate |
7 全部分类 | /cate-all | 7 全部分类 | /cate-all |
8 品牌店铺 | /product/shop?domain=sctest1 | 8 品牌店铺 | /product/shop?domain=sctest1 |
9 -品牌店铺分享页面 | /product/brand-share?domain=colormad | 9 +品牌店铺分享页面 | /product/shop-share?domain=colormad |
10 商品详情 | /product/{productId} | 10 商品详情 | /product/{productId} |
  11 +新品抢先看 | /product/new |
11 资讯列表 | /news | 12 资讯列表 | /news |
12 资讯详情 | /news/{newsId} | 13 资讯详情 | /news/{newsId} |
  14 +个人中心 | /home |
  15 +个人信息 | /mydetails |
  16 +全部订单 | /home/orders?type=1 |
  17 +待付款 | /home/orders?type=2 |
  18 +待发货 | /home/orders?type=3 |
  19 +待收货 | /home/orders?type=4 |
  20 +订单详情 | /home/order-detail?orderCode=xxx |
  21 +退货申请 | /home/refund?orderId=160181661 |
  22 +收藏商品 | /home/favorite |
  23 +收藏品牌 | /home/favorite?tab=brand |
  24 +yoho币 | /home/mycurrency |
  25 +帮助中心 | /home/help |
  26 +帮助中心详情 | /home/help-detail |
  27 +意见反馈 | /home/feedback |
  28 +关于我们 | /home/about |
  29 +
  30 +--------------------------------------------------------------------------------
13 31
14 ---- 32 ----
15 ### order 常亮 33 ### order 常亮
@@ -18,9 +18,8 @@ const router = expressRouter(); @@ -18,9 +18,8 @@ const router = expressRouter();
18 18
19 // Your controller here 19 // Your controller here
20 router.get('/', home.index); // 个人中心主页 20 router.get('/', home.index); // 个人中心主页
  21 +
21 router.get('/orders', order.orders); // 订单 22 router.get('/orders', order.orders); // 订单
22 -router.get('/mycurrency', order.coin); // yoho币  
23 -router.get('/coin-detail', order.getCoinDetail); // yoho币明细  
24 router.get('/order-detail', order.orderDetail); // 订单详情 23 router.get('/order-detail', order.orderDetail); // 订单详情
25 router.get('/get-orders', order.getOrderData); // 获取订单数据 24 router.get('/get-orders', order.getOrderData); // 获取订单数据
26 router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据 25 router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
@@ -29,6 +28,9 @@ router.post('/cancel-order', order.cancelOrder); // 取消订单 @@ -29,6 +28,9 @@ router.post('/cancel-order', order.cancelOrder); // 取消订单
29 router.post('/delete-order', order.deleteOrder); // 删除订单 28 router.post('/delete-order', order.deleteOrder); // 删除订单
30 router.post('/confirm-order', order.confirmOrder); // 确认订单 29 router.post('/confirm-order', order.confirmOrder); // 确认订单
31 30
  31 +router.get('/mycurrency', order.coin); // yoho币
  32 +router.get('/coin-detail', order.getCoinDetail); // yoho币明细
  33 +
32 router.get('/help', home.help); // 帮助中心列表页 34 router.get('/help', home.help); // 帮助中心列表页
33 router.get('/help-detail', home.helpDetail); // 帮助中心详情页 35 router.get('/help-detail', home.helpDetail); // 帮助中心详情页
34 router.get('/feedback', home.feedback); // 个人中心-意见反馈 36 router.get('/feedback', home.feedback); // 个人中心-意见反馈
@@ -59,7 +61,7 @@ router.post('/save-mydetails', home.saveMydetails); // 保存个人信息 @@ -59,7 +61,7 @@ router.post('/save-mydetails', home.saveMydetails); // 保存个人信息
59 61
60 router.get('/about', home.about); // 个人中心 - 关于我们 62 router.get('/about', home.about); // 个人中心 - 关于我们
61 63
62 -router.get('/logistic', order.logistic); // 个人中心 - 订单物流详情页面 64 +router.get('/logistic', order.logistic); // 个人中心 - 退换货物流设置页面
63 router.get('/get-order-logistic-date', order.getOrderLogisticdate); // 个人中心 - 订单物流详情数据 65 router.get('/get-order-logistic-date', order.getOrderLogisticdate); // 个人中心 - 订单物流详情数据
64 66
65 module.exports = router; 67 module.exports = router;
This diff could not be displayed because it is too large.
@@ -144,3 +144,40 @@ Vue.filter('formatUnixTime', (value) => { @@ -144,3 +144,40 @@ Vue.filter('formatUnixTime', (value) => {
144 // return M + '.' + D + ' ' + h + ' ' + ' ' + m + ' ' + s; 144 // return M + '.' + D + ' ' + h + ' ' + ' ' + m + ' ' + s;
145 return `${M}.${D} ${h}:${m}`; 145 return `${M}.${D} ${h}:${m}`;
146 }); 146 });
  147 +
  148 +const zhDict = {
  149 + color: '颜色',
  150 + gender: '性别',
  151 + size: '尺寸',
  152 + brand: '品牌',
  153 + priceRange: '价格',
  154 + groupSort: '品类',
  155 + discount: '折扣',
  156 + style: '风格',
  157 + ageLevel: '年龄'
  158 +};
  159 +
  160 +const enDict = {
  161 + color: 'Color',
  162 + gender: 'Gender',
  163 + size: 'Size',
  164 + brand: 'Brand品牌',
  165 + priceRange: 'Price',
  166 + groupSort: 'Category',
  167 + discount: 'Sale',
  168 + style: 'Style',
  169 + ageLevel: 'Age'
  170 +};
  171 +
  172 +Vue.filter('filter-cn', (value, prefix) => {
  173 + prefix = prefix || '';
  174 + value = zhDict[value] || '';
  175 + return prefix + value || '';
  176 +});
  177 +
  178 +Vue.filter('filter-en-cn', value => {
  179 + const cn = zhDict[value] || '';
  180 + const en = enDict[value] || '';
  181 +
  182 + return en + cn;
  183 +});
@@ -8,7 +8,6 @@ @@ -8,7 +8,6 @@
8 line-height: 1; 8 line-height: 1;
9 text-align: center; 9 text-align: center;
10 white-space: nowrap; 10 white-space: nowrap;
11 -  
12 background-color: $blue; 11 background-color: $blue;
13 color: $white; 12 color: $white;
14 } 13 }
1 -@use postcss-clearfix; 1 +@use postcss-clearfix ;
2 2
3 .clearfix { 3 .clearfix {
4 clear: fix; 4 clear: fix;
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 } 7 }
8 8
9 .icon { 9 .icon {
  10 +
10 /* use !important to prevent issues with browser extensions that change fonts */ 11 /* use !important to prevent issues with browser extensions that change fonts */
11 font-family: "iconfont" !important; 12 font-family: "iconfont" !important;
12 speak: none; 13 speak: none;
@@ -15,6 +16,7 @@ @@ -15,6 +16,7 @@
15 font-variant: normal; 16 font-variant: normal;
16 text-transform: none; 17 text-transform: none;
17 line-height: 1; 18 line-height: 1;
  19 +
18 /* Better Font Rendering =========== */ 20 /* Better Font Rendering =========== */
19 -webkit-font-smoothing: antialiased; 21 -webkit-font-smoothing: antialiased;
20 -moz-osx-font-smoothing: grayscale; 22 -moz-osx-font-smoothing: grayscale;
@@ -32,10 +32,8 @@ @@ -32,10 +32,8 @@
32 &:nth-child($i) { 32 &:nth-child($i) {
33 animation: loading-scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 33 animation: loading-scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
34 } 34 }
35 -  
36 $init: calc(($i + 1) * 0.12); 35 $init: calc(($i + 1) * 0.12);
37 } 36 }
38 -  
39 display: inline-block; 37 display: inline-block;
40 margin: 4px; 38 margin: 4px;
41 width: 30px; 39 width: 30px;
@@ -53,6 +53,7 @@ @@ -53,6 +53,7 @@
53 } 53 }
54 54
55 /* stylelint-disable */ 55 /* stylelint-disable */
  56 +
56 /* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */ 57 /* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */
57 @keyframes animation { 58 @keyframes animation {
58 0% { 59 0% {
@@ -95,4 +96,5 @@ @@ -95,4 +96,5 @@
95 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 96 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
96 } 97 }
97 } 98 }
  99 +
98 /* stylelint-enable */ 100 /* stylelint-enable */
1 /* stylelint-disable */ 1 /* stylelint-disable */
  2 +
2 /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 3 /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
3 4
4 /** 5 /**
5 * 1. Change the default font family in all browsers (opinionated). 6 * 1. Change the default font family in all browsers (opinionated).
6 * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 7 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
7 */ 8 */
8 -  
9 html { 9 html {
10 font-family: sans-serif; /* 1 */ 10 font-family: sans-serif; /* 1 */
11 -ms-text-size-adjust: 100%; /* 2 */ 11 -ms-text-size-adjust: 100%; /* 2 */
@@ -15,7 +15,6 @@ html { @@ -15,7 +15,6 @@ html {
15 /** 15 /**
16 * Remove the margin in all browsers (opinionated). 16 * Remove the margin in all browsers (opinionated).
17 */ 17 */
18 -  
19 body { 18 body {
20 margin: 0; 19 margin: 0;
21 } 20 }
@@ -28,26 +27,26 @@ body { @@ -28,26 +27,26 @@ body {
28 * 1. Add the correct display in Edge, IE, and Firefox. 27 * 1. Add the correct display in Edge, IE, and Firefox.
29 * 2. Add the correct display in IE. 28 * 2. Add the correct display in IE.
30 */ 29 */
31 -  
32 article, 30 article,
33 aside, 31 aside,
34 -details, /* 1 */ 32 +details,
35 figcaption, 33 figcaption,
36 figure, 34 figure,
37 footer, 35 footer,
38 header, 36 header,
39 -main, /* 2 */ 37 +main,
40 menu, 38 menu,
41 nav, 39 nav,
42 section, 40 section,
43 -summary { /* 1 */ 41 +summary {
  42 +
  43 + /* 1 */
44 display: block; 44 display: block;
45 } 45 }
46 46
47 /** 47 /**
48 * Add the correct display in IE 9-. 48 * Add the correct display in IE 9-.
49 */ 49 */
50 -  
51 audio, 50 audio,
52 canvas, 51 canvas,
53 progress, 52 progress,
@@ -58,7 +57,6 @@ video { @@ -58,7 +57,6 @@ video {
58 /** 57 /**
59 * Add the correct display in iOS 4-7. 58 * Add the correct display in iOS 4-7.
60 */ 59 */
61 -  
62 audio:not([controls]) { 60 audio:not([controls]) {
63 display: none; 61 display: none;
64 height: 0; 62 height: 0;
@@ -67,7 +65,6 @@ audio:not([controls]) { @@ -67,7 +65,6 @@ audio:not([controls]) {
67 /** 65 /**
68 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 66 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
69 */ 67 */
70 -  
71 progress { 68 progress {
72 vertical-align: baseline; 69 vertical-align: baseline;
73 } 70 }
@@ -76,8 +73,7 @@ progress { @@ -76,8 +73,7 @@ progress {
76 * Add the correct display in IE 10-. 73 * Add the correct display in IE 10-.
77 * 1. Add the correct display in IE. 74 * 1. Add the correct display in IE.
78 */ 75 */
79 -  
80 -template, /* 1 */ 76 +template,
81 [hidden] { 77 [hidden] {
82 display: none; 78 display: none;
83 } 79 }
@@ -89,7 +85,6 @@ template, /* 1 */ @@ -89,7 +85,6 @@ template, /* 1 */
89 * 1. Remove the gray background on active links in IE 10. 85 * 1. Remove the gray background on active links in IE 10.
90 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 86 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
91 */ 87 */
92 -  
93 a { 88 a {
94 background-color: transparent; /* 1 */ 89 background-color: transparent; /* 1 */
95 -webkit-text-decoration-skip: objects; /* 2 */ 90 -webkit-text-decoration-skip: objects; /* 2 */
@@ -99,7 +94,6 @@ a { @@ -99,7 +94,6 @@ a {
99 * Remove the outline on focused links when they are also active or hovered 94 * Remove the outline on focused links when they are also active or hovered
100 * in all browsers (opinionated). 95 * in all browsers (opinionated).
101 */ 96 */
102 -  
103 a:active, 97 a:active,
104 a:hover { 98 a:hover {
105 outline-width: 0; 99 outline-width: 0;
@@ -112,7 +106,6 @@ a:hover { @@ -112,7 +106,6 @@ a:hover {
112 * 1. Remove the bottom border in Firefox 39-. 106 * 1. Remove the bottom border in Firefox 39-.
113 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 107 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
114 */ 108 */
115 -  
116 abbr[title] { 109 abbr[title] {
117 border-bottom: none; /* 1 */ 110 border-bottom: none; /* 1 */
118 text-decoration: underline; /* 2 */ 111 text-decoration: underline; /* 2 */
@@ -122,7 +115,6 @@ abbr[title] { @@ -122,7 +115,6 @@ abbr[title] {
122 /** 115 /**
123 * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 116 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
124 */ 117 */
125 -  
126 b, 118 b,
127 strong { 119 strong {
128 font-weight: inherit; 120 font-weight: inherit;
@@ -131,7 +123,6 @@ strong { @@ -131,7 +123,6 @@ strong {
131 /** 123 /**
132 * Add the correct font weight in Chrome, Edge, and Safari. 124 * Add the correct font weight in Chrome, Edge, and Safari.
133 */ 125 */
134 -  
135 b, 126 b,
136 strong { 127 strong {
137 font-weight: bolder; 128 font-weight: bolder;
@@ -140,7 +131,6 @@ strong { @@ -140,7 +131,6 @@ strong {
140 /** 131 /**
141 * Add the correct font style in Android 4.3-. 132 * Add the correct font style in Android 4.3-.
142 */ 133 */
143 -  
144 dfn { 134 dfn {
145 font-style: italic; 135 font-style: italic;
146 } 136 }
@@ -149,7 +139,6 @@ dfn { @@ -149,7 +139,6 @@ dfn {
149 * Correct the font size and margin on `h1` elements within `section` and 139 * Correct the font size and margin on `h1` elements within `section` and
150 * `article` contexts in Chrome, Firefox, and Safari. 140 * `article` contexts in Chrome, Firefox, and Safari.
151 */ 141 */
152 -  
153 h1 { 142 h1 {
154 font-size: 2em; 143 font-size: 2em;
155 margin: 0.67em 0; 144 margin: 0.67em 0;
@@ -158,7 +147,6 @@ h1 { @@ -158,7 +147,6 @@ h1 {
158 /** 147 /**
159 * Add the correct background and color in IE 9-. 148 * Add the correct background and color in IE 9-.
160 */ 149 */
161 -  
162 mark { 150 mark {
163 background-color: #ff0; 151 background-color: #ff0;
164 color: #000; 152 color: #000;
@@ -167,7 +155,6 @@ mark { @@ -167,7 +155,6 @@ mark {
167 /** 155 /**
168 * Add the correct font size in all browsers. 156 * Add the correct font size in all browsers.
169 */ 157 */
170 -  
171 small { 158 small {
172 font-size: 80%; 159 font-size: 80%;
173 } 160 }
@@ -176,7 +163,6 @@ small { @@ -176,7 +163,6 @@ small {
176 * Prevent `sub` and `sup` elements from affecting the line height in 163 * Prevent `sub` and `sup` elements from affecting the line height in
177 * all browsers. 164 * all browsers.
178 */ 165 */
179 -  
180 sub, 166 sub,
181 sup { 167 sup {
182 font-size: 75%; 168 font-size: 75%;
@@ -199,7 +185,6 @@ sup { @@ -199,7 +185,6 @@ sup {
199 /** 185 /**
200 * Remove the border on images inside links in IE 10-. 186 * Remove the border on images inside links in IE 10-.
201 */ 187 */
202 -  
203 img { 188 img {
204 border-style: none; 189 border-style: none;
205 } 190 }
@@ -207,7 +192,6 @@ img { @@ -207,7 +192,6 @@ img {
207 /** 192 /**
208 * Hide the overflow in IE. 193 * Hide the overflow in IE.
209 */ 194 */
210 -  
211 svg:not(:root) { 195 svg:not(:root) {
212 overflow: hidden; 196 overflow: hidden;
213 } 197 }
@@ -219,7 +203,6 @@ svg:not(:root) { @@ -219,7 +203,6 @@ svg:not(:root) {
219 * 1. Correct the inheritance and scaling of font size in all browsers. 203 * 1. Correct the inheritance and scaling of font size in all browsers.
220 * 2. Correct the odd `em` font sizing in all browsers. 204 * 2. Correct the odd `em` font sizing in all browsers.
221 */ 205 */
222 -  
223 code, 206 code,
224 kbd, 207 kbd,
225 pre, 208 pre,
@@ -231,7 +214,6 @@ samp { @@ -231,7 +214,6 @@ samp {
231 /** 214 /**
232 * Add the correct margin in IE 8. 215 * Add the correct margin in IE 8.
233 */ 216 */
234 -  
235 figure { 217 figure {
236 margin: 1em 40px; 218 margin: 1em 40px;
237 } 219 }
@@ -240,7 +222,6 @@ figure { @@ -240,7 +222,6 @@ figure {
240 * 1. Add the correct box sizing in Firefox. 222 * 1. Add the correct box sizing in Firefox.
241 * 2. Show the overflow in Edge and IE. 223 * 2. Show the overflow in Edge and IE.
242 */ 224 */
243 -  
244 hr { 225 hr {
245 box-sizing: content-box; /* 1 */ 226 box-sizing: content-box; /* 1 */
246 height: 0; /* 1 */ 227 height: 0; /* 1 */
@@ -254,7 +235,6 @@ hr { @@ -254,7 +235,6 @@ hr {
254 * 1. Change font properties to `inherit` in all browsers (opinionated). 235 * 1. Change font properties to `inherit` in all browsers (opinionated).
255 * 2. Remove the margin in Firefox and Safari. 236 * 2. Remove the margin in Firefox and Safari.
256 */ 237 */
257 -  
258 button, 238 button,
259 input, 239 input,
260 select, 240 select,
@@ -266,7 +246,6 @@ textarea { @@ -266,7 +246,6 @@ textarea {
266 /** 246 /**
267 * Restore the font weight unset by the previous rule. 247 * Restore the font weight unset by the previous rule.
268 */ 248 */
269 -  
270 optgroup { 249 optgroup {
271 font-weight: bold; 250 font-weight: bold;
272 } 251 }
@@ -275,9 +254,10 @@ optgroup { @@ -275,9 +254,10 @@ optgroup {
275 * Show the overflow in IE. 254 * Show the overflow in IE.
276 * 1. Show the overflow in Edge. 255 * 1. Show the overflow in Edge.
277 */ 256 */
278 -  
279 button, 257 button,
280 -input { /* 1 */ 258 +input {
  259 +
  260 + /* 1 */
281 overflow: visible; 261 overflow: visible;
282 } 262 }
283 263
@@ -285,9 +265,10 @@ input { /* 1 */ @@ -285,9 +265,10 @@ input { /* 1 */
285 * Remove the inheritance of text transform in Edge, Firefox, and IE. 265 * Remove the inheritance of text transform in Edge, Firefox, and IE.
286 * 1. Remove the inheritance of text transform in Firefox. 266 * 1. Remove the inheritance of text transform in Firefox.
287 */ 267 */
288 -  
289 button, 268 button,
290 -select { /* 1 */ 269 +select {
  270 +
  271 + /* 1 */
291 text-transform: none; 272 text-transform: none;
292 } 273 }
293 274
@@ -296,9 +277,8 @@ select { /* 1 */ @@ -296,9 +277,8 @@ select { /* 1 */
296 * controls in Android 4. 277 * controls in Android 4.
297 * 2. Correct the inability to style clickable types in iOS and Safari. 278 * 2. Correct the inability to style clickable types in iOS and Safari.
298 */ 279 */
299 -  
300 button, 280 button,
301 -html [type="button"], /* 1 */ 281 +html [type="button"],
302 [type="reset"], 282 [type="reset"],
303 [type="submit"] { 283 [type="submit"] {
304 -webkit-appearance: button; /* 2 */ 284 -webkit-appearance: button; /* 2 */
@@ -307,7 +287,6 @@ html [type="button"], /* 1 */ @@ -307,7 +287,6 @@ html [type="button"], /* 1 */
307 /** 287 /**
308 * Remove the inner border and padding in Firefox. 288 * Remove the inner border and padding in Firefox.
309 */ 289 */
310 -  
311 button::-moz-focus-inner, 290 button::-moz-focus-inner,
312 [type="button"]::-moz-focus-inner, 291 [type="button"]::-moz-focus-inner,
313 [type="reset"]::-moz-focus-inner, 292 [type="reset"]::-moz-focus-inner,
@@ -319,7 +298,6 @@ button::-moz-focus-inner, @@ -319,7 +298,6 @@ button::-moz-focus-inner,
319 /** 298 /**
320 * Restore the focus styles unset by the previous rule. 299 * Restore the focus styles unset by the previous rule.
321 */ 300 */
322 -  
323 button:-moz-focusring, 301 button:-moz-focusring,
324 [type="button"]:-moz-focusring, 302 [type="button"]:-moz-focusring,
325 [type="reset"]:-moz-focusring, 303 [type="reset"]:-moz-focusring,
@@ -330,7 +308,6 @@ button:-moz-focusring, @@ -330,7 +308,6 @@ button:-moz-focusring,
330 /** 308 /**
331 * Change the border, margin, and padding in all browsers (opinionated). 309 * Change the border, margin, and padding in all browsers (opinionated).
332 */ 310 */
333 -  
334 fieldset { 311 fieldset {
335 border: 1px solid #c0c0c0; 312 border: 1px solid #c0c0c0;
336 margin: 0 2px; 313 margin: 0 2px;
@@ -343,7 +320,6 @@ fieldset { @@ -343,7 +320,6 @@ fieldset {
343 * 3. Remove the padding so developers are not caught out when they zero out 320 * 3. Remove the padding so developers are not caught out when they zero out
344 * `fieldset` elements in all browsers. 321 * `fieldset` elements in all browsers.
345 */ 322 */
346 -  
347 legend { 323 legend {
348 box-sizing: border-box; /* 1 */ 324 box-sizing: border-box; /* 1 */
349 color: inherit; /* 2 */ 325 color: inherit; /* 2 */
@@ -356,7 +332,6 @@ legend { @@ -356,7 +332,6 @@ legend {
356 /** 332 /**
357 * Remove the default vertical scrollbar in IE. 333 * Remove the default vertical scrollbar in IE.
358 */ 334 */
359 -  
360 textarea { 335 textarea {
361 overflow: auto; 336 overflow: auto;
362 } 337 }
@@ -365,7 +340,6 @@ textarea { @@ -365,7 +340,6 @@ textarea {
365 * 1. Add the correct box sizing in IE 10-. 340 * 1. Add the correct box sizing in IE 10-.
366 * 2. Remove the padding in IE 10-. 341 * 2. Remove the padding in IE 10-.
367 */ 342 */
368 -  
369 [type="checkbox"], 343 [type="checkbox"],
370 [type="radio"] { 344 [type="radio"] {
371 box-sizing: border-box; /* 1 */ 345 box-sizing: border-box; /* 1 */
@@ -375,7 +349,6 @@ textarea { @@ -375,7 +349,6 @@ textarea {
375 /** 349 /**
376 * Correct the cursor style of increment and decrement buttons in Chrome. 350 * Correct the cursor style of increment and decrement buttons in Chrome.
377 */ 351 */
378 -  
379 [type="number"]::-webkit-inner-spin-button, 352 [type="number"]::-webkit-inner-spin-button,
380 [type="number"]::-webkit-outer-spin-button { 353 [type="number"]::-webkit-outer-spin-button {
381 height: auto; 354 height: auto;
@@ -385,7 +358,6 @@ textarea { @@ -385,7 +358,6 @@ textarea {
385 * 1. Correct the odd appearance in Chrome and Safari. 358 * 1. Correct the odd appearance in Chrome and Safari.
386 * 2. Correct the outline style in Safari. 359 * 2. Correct the outline style in Safari.
387 */ 360 */
388 -  
389 [type="search"] { 361 [type="search"] {
390 -webkit-appearance: textfield; /* 1 */ 362 -webkit-appearance: textfield; /* 1 */
391 outline-offset: -2px; /* 2 */ 363 outline-offset: -2px; /* 2 */
@@ -394,7 +366,6 @@ textarea { @@ -394,7 +366,6 @@ textarea {
394 /** 366 /**
395 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 367 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
396 */ 368 */
397 -  
398 [type="search"]::-webkit-search-cancel-button, 369 [type="search"]::-webkit-search-cancel-button,
399 [type="search"]::-webkit-search-decoration { 370 [type="search"]::-webkit-search-decoration {
400 -webkit-appearance: none; 371 -webkit-appearance: none;
@@ -403,7 +374,6 @@ textarea { @@ -403,7 +374,6 @@ textarea {
403 /** 374 /**
404 * Correct the text style of placeholders in Chrome, Edge, and Safari. 375 * Correct the text style of placeholders in Chrome, Edge, and Safari.
405 */ 376 */
406 -  
407 ::-webkit-input-placeholder { 377 ::-webkit-input-placeholder {
408 color: inherit; 378 color: inherit;
409 opacity: 0.54; 379 opacity: 0.54;
@@ -413,9 +383,9 @@ textarea { @@ -413,9 +383,9 @@ textarea {
413 * 1. Correct the inability to style clickable types in iOS and Safari. 383 * 1. Correct the inability to style clickable types in iOS and Safari.
414 * 2. Change font properties to `inherit` in Safari. 384 * 2. Change font properties to `inherit` in Safari.
415 */ 385 */
416 -  
417 ::-webkit-file-upload-button { 386 ::-webkit-file-upload-button {
418 -webkit-appearance: button; /* 1 */ 387 -webkit-appearance: button; /* 1 */
419 font: inherit; /* 2 */ 388 font: inherit; /* 2 */
420 } 389 }
  390 +
421 /* stylelint-enable */ 391 /* stylelint-enable */
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 .item-del { 18 .item-del {
19 margin-top: 10px; 19 margin-top: 10px;
20 border-top: 1px solid #e0e0e0; 20 border-top: 1px solid #e0e0e0;
21 - color: #5c99e4 21 + color: #5c99e4;
22 } 22 }
23 } 23 }
24 } 24 }
@@ -33,7 +33,6 @@ @@ -33,7 +33,6 @@
33 right: 0; 33 right: 0;
34 margin-left: auto; 34 margin-left: auto;
35 margin-right: auto; 35 margin-right: auto;
36 -  
37 } 36 }
38 37
39 .icon-label { 38 .icon-label {
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 font-size: 28px; 22 font-size: 28px;
23 } 23 }
24 } 24 }
  25 +
25 .coin-detail { 26 .coin-detail {
26 margin-top: 40px; 27 margin-top: 40px;
27 28
@@ -69,6 +70,7 @@ @@ -69,6 +70,7 @@
69 color: #b0b0b0; 70 color: #b0b0b0;
70 } 71 }
71 } 72 }
  73 +
72 .coin-num { 74 .coin-num {
73 font-size: 34px; 75 font-size: 34px;
74 line-height: 92px; 76 line-height: 92px;
@@ -16,7 +16,6 @@ @@ -16,7 +16,6 @@
16 height: 130px; 16 height: 130px;
17 line-height: 130px; 17 line-height: 130px;
18 } 18 }
19 -  
20 height: 90px; 19 height: 90px;
21 border-bottom: 1px solid #e0e0e0; 20 border-bottom: 1px solid #e0e0e0;
22 21
@@ -6,17 +6,20 @@ @@ -6,17 +6,20 @@
6 padding: 0 30px; 6 padding: 0 30px;
7 background: #fff; 7 background: #fff;
8 } 8 }
  9 +
9 .status-desc { 10 .status-desc {
10 display: flex; 11 display: flex;
11 height: 80px; 12 height: 80px;
12 line-height: 80px; 13 line-height: 80px;
13 color: $white; 14 color: $white;
14 background: $black; 15 background: $black;
  16 +
15 p:first-of-type { 17 p:first-of-type {
16 flex: 1; 18 flex: 1;
17 font-size: 34px; 19 font-size: 34px;
18 } 20 }
19 } 21 }
  22 +
20 .exchange-progress { 23 .exchange-progress {
21 border-bottom: 1px solid #eee; 24 border-bottom: 1px solid #eee;
22 25
@@ -67,9 +70,11 @@ @@ -67,9 +70,11 @@
67 color: #b0b0b0; 70 color: #b0b0b0;
68 } 71 }
69 } 72 }
  73 +
70 .progress-todo { 74 .progress-todo {
71 padding: 25px 0; 75 padding: 25px 0;
72 text-align: center; 76 text-align: center;
  77 +
73 p:first-of-type { 78 p:first-of-type {
74 font-size: 34px; 79 font-size: 34px;
75 80
@@ -83,6 +88,7 @@ @@ -83,6 +88,7 @@
83 } 88 }
84 } 89 }
85 } 90 }
  91 +
86 .exchange-details { 92 .exchange-details {
87 margin-top: 20px; 93 margin-top: 20px;
88 border-top: 1px solid #eee; 94 border-top: 1px solid #eee;
@@ -101,8 +107,8 @@ @@ -101,8 +107,8 @@
101 color: #b0b0b0; 107 color: #b0b0b0;
102 } 108 }
103 } 109 }
104 -  
105 } 110 }
  111 +
106 .exchange-product { 112 .exchange-product {
107 border-top: 1px solid #eee; 113 border-top: 1px solid #eee;
108 border-bottom: 1px solid #eee; 114 border-bottom: 1px solid #eee;
@@ -116,6 +122,7 @@ @@ -116,6 +122,7 @@
116 border-bottom: 0 none; 122 border-bottom: 0 none;
117 } 123 }
118 } 124 }
  125 +
119 .img-box { 126 .img-box {
120 position: relative; 127 position: relative;
121 width: 98px; 128 width: 98px;
@@ -133,11 +140,13 @@ @@ -133,11 +140,13 @@
133 color: $white; 140 color: $white;
134 text-align: center; 141 text-align: center;
135 } 142 }
  143 +
136 img { 144 img {
137 width: 100%; 145 width: 100%;
138 height: 100%; 146 height: 100%;
139 } 147 }
140 } 148 }
  149 +
141 .goods-detail { 150 .goods-detail {
142 flex: 1; 151 flex: 1;
143 margin: 0 20px; 152 margin: 0 20px;
@@ -146,6 +155,7 @@ @@ -146,6 +155,7 @@
146 span { 155 span {
147 margin-right: 40px; 156 margin-right: 40px;
148 } 157 }
  158 +
149 .name { 159 .name {
150 display: -webkit-box; 160 display: -webkit-box;
151 -webkit-line-clamp: 2; 161 -webkit-line-clamp: 2;
@@ -156,30 +166,36 @@ @@ -156,30 +166,36 @@
156 overflow: hidden; 166 overflow: hidden;
157 font-size: 28px; 167 font-size: 28px;
158 } 168 }
  169 +
159 .size { 170 .size {
160 color: #b0b0b0; 171 color: #b0b0b0;
161 } 172 }
162 } 173 }
  174 +
163 .goods-price { 175 .goods-price {
164 text-align: right; 176 text-align: right;
165 177
166 p:first-of-type { 178 p:first-of-type {
167 font-size: 28px; 179 font-size: 28px;
168 } 180 }
  181 +
169 p:last-of-type { 182 p:last-of-type {
170 font-size: 30px; 183 font-size: 30px;
171 color: #b0b0b0; 184 color: #b0b0b0;
172 } 185 }
173 } 186 }
174 } 187 }
  188 +
175 .exchange-reason { 189 .exchange-reason {
176 padding: 20px 0; 190 padding: 20px 0;
177 font-size: 28px; 191 font-size: 28px;
  192 +
178 blockquote { 193 blockquote {
179 margin-top: 20px; 194 margin-top: 20px;
180 color: #b0b0b0; 195 color: #b0b0b0;
181 } 196 }
182 } 197 }
  198 +
183 .exchange-img { 199 .exchange-img {
184 display: flex; 200 display: flex;
185 margin-top: 25px; 201 margin-top: 25px;
@@ -196,6 +212,7 @@ @@ -196,6 +212,7 @@
196 } 212 }
197 } 213 }
198 } 214 }
  215 +
199 .exchange-address { 216 .exchange-address {
200 position: relative; 217 position: relative;
201 padding: 20px 30px 27px; 218 padding: 20px 30px 27px;
@@ -211,14 +228,17 @@ @@ -211,14 +228,17 @@
211 margin-right: 40px; 228 margin-right: 40px;
212 } 229 }
213 } 230 }
  231 +
214 p:last-of-type { 232 p:last-of-type {
215 font-size: 28px; 233 font-size: 28px;
216 color: #b0b0b0; 234 color: #b0b0b0;
217 } 235 }
218 } 236 }
  237 +
219 .exchange-express { 238 .exchange-express {
220 margin-top: 20px; 239 margin-top: 20px;
221 } 240 }
  241 +
222 .exchange-order, 242 .exchange-order,
223 .exchange-type { 243 .exchange-type {
224 display: flex; 244 display: flex;
@@ -233,8 +253,10 @@ @@ -233,8 +253,10 @@
233 .primary { 253 .primary {
234 flex: 1; 254 flex: 1;
235 } 255 }
  256 +
236 .cell-ft { 257 .cell-ft {
237 color: #b0b0b0; 258 color: #b0b0b0;
  259 +
238 &:after { 260 &:after {
239 content: "\e607"; 261 content: "\e607";
240 display: inline-block; 262 display: inline-block;
@@ -248,6 +270,7 @@ @@ -248,6 +270,7 @@
248 } 270 }
249 } 271 }
250 } 272 }
  273 +
251 .exchange-options { 274 .exchange-options {
252 position: fixed; 275 position: fixed;
253 left: 0; 276 left: 0;
@@ -275,16 +298,19 @@ @@ -275,16 +298,19 @@
275 color: $white; 298 color: $white;
276 background: $black; 299 background: $black;
277 } 300 }
  301 +
278 &.countdown { 302 &.countdown {
279 color: $white; 303 color: $white;
280 background: $black; 304 background: $black;
281 } 305 }
  306 +
282 &.normal { 307 &.normal {
283 width: 188px; 308 width: 188px;
284 padding: 0; 309 padding: 0;
285 border: 1px solid $black; 310 border: 1px solid $black;
286 color: $black; 311 color: $black;
287 } 312 }
  313 +
288 &:focus { 314 &:focus {
289 outline: none; 315 outline: none;
290 } 316 }
@@ -94,11 +94,15 @@ @@ -94,11 +94,15 @@
94 border: none; 94 border: none;
95 } 95 }
96 96
97 - input::-webkit-input-placeholder { /* WebKit browsers */ 97 + input::-webkit-input-placeholder {
  98 +
  99 + /* WebKit browsers */
98 text-align: center; 100 text-align: center;
99 } 101 }
100 102
101 - input:-ms-input-placeholder { /* Internet Explorer 10+ */ 103 + input:-ms-input-placeholder {
  104 +
  105 + /* Internet Explorer 10+ */
102 text-align: center; 106 text-align: center;
103 } 107 }
104 } 108 }
@@ -42,6 +42,7 @@ body { @@ -42,6 +42,7 @@ body {
42 font-size: 34px; 42 font-size: 34px;
43 font-weight: 700; 43 font-weight: 700;
44 } 44 }
  45 +
45 p:last-of-type { 46 p:last-of-type {
46 font-size: 28px; 47 font-size: 28px;
47 color: #b0b0b0; 48 color: #b0b0b0;
@@ -63,10 +64,12 @@ body { @@ -63,10 +64,12 @@ body {
63 margin-right: 40px; 64 margin-right: 40px;
64 } 65 }
65 } 66 }
  67 +
66 p:last-of-type { 68 p:last-of-type {
67 font-size: 28px; 69 font-size: 28px;
68 color: #b0b0b0; 70 color: #b0b0b0;
69 } 71 }
  72 +
70 &:after { 73 &:after {
71 content: ""; 74 content: "";
72 position: absolute; 75 position: absolute;
@@ -78,6 +81,7 @@ body { @@ -78,6 +81,7 @@ body {
78 border-bottom: 1px solid #eee; 81 border-bottom: 1px solid #eee;
79 } 82 }
80 } 83 }
  84 +
81 .order-goods { 85 .order-goods {
82 padding-top: 20px; 86 padding-top: 20px;
83 border-top: 1px solid #eee; 87 border-top: 1px solid #eee;
@@ -92,6 +96,7 @@ body { @@ -92,6 +96,7 @@ body {
92 border-bottom: 0 none; 96 border-bottom: 0 none;
93 } 97 }
94 } 98 }
  99 +
95 .img-box { 100 .img-box {
96 position: relative; 101 position: relative;
97 width: 98px; 102 width: 98px;
@@ -109,11 +114,13 @@ body { @@ -109,11 +114,13 @@ body {
109 color: $white; 114 color: $white;
110 text-align: center; 115 text-align: center;
111 } 116 }
  117 +
112 img { 118 img {
113 width: 100%; 119 width: 100%;
114 height: 100%; 120 height: 100%;
115 } 121 }
116 } 122 }
  123 +
117 .goods-detail { 124 .goods-detail {
118 flex: 1; 125 flex: 1;
119 margin: 0 20px; 126 margin: 0 20px;
@@ -122,6 +129,7 @@ body { @@ -122,6 +129,7 @@ body {
122 span { 129 span {
123 margin-right: 40px; 130 margin-right: 40px;
124 } 131 }
  132 +
125 .name { 133 .name {
126 display: -webkit-box; 134 display: -webkit-box;
127 -webkit-line-clamp: 2; 135 -webkit-line-clamp: 2;
@@ -132,22 +140,26 @@ body { @@ -132,22 +140,26 @@ body {
132 overflow: hidden; 140 overflow: hidden;
133 font-size: 28px; 141 font-size: 28px;
134 } 142 }
  143 +
135 .size { 144 .size {
136 color: #b0b0b0; 145 color: #b0b0b0;
137 } 146 }
138 } 147 }
  148 +
139 .goods-price { 149 .goods-price {
140 text-align: right; 150 text-align: right;
141 151
142 p:first-of-type { 152 p:first-of-type {
143 font-size: 28px; 153 font-size: 28px;
144 } 154 }
  155 +
145 p:last-of-type { 156 p:last-of-type {
146 font-size: 30px; 157 font-size: 30px;
147 color: #b0b0b0; 158 color: #b0b0b0;
148 } 159 }
149 } 160 }
150 } 161 }
  162 +
151 .order-amount { 163 .order-amount {
152 padding: 30px 20px; 164 padding: 30px 20px;
153 margin-bottom: 20px; 165 margin-bottom: 20px;
@@ -163,11 +175,13 @@ body { @@ -163,11 +175,13 @@ body {
163 text-align: left; 175 text-align: left;
164 color: #b0b0b0; 176 color: #b0b0b0;
165 } 177 }
  178 +
166 span { 179 span {
167 display: inline-block; 180 display: inline-block;
168 width: 200px; 181 width: 200px;
169 text-align: left; 182 text-align: left;
170 } 183 }
  184 +
171 &:last-of-type { 185 &:last-of-type {
172 font-size: 34px; 186 font-size: 34px;
173 187
@@ -175,9 +189,9 @@ body { @@ -175,9 +189,9 @@ body {
175 color: $black; 189 color: $black;
176 } 190 }
177 } 191 }
178 -  
179 } 192 }
180 } 193 }
  194 +
181 .order-button { 195 .order-button {
182 position: fixed; 196 position: fixed;
183 left: 0; 197 left: 0;
@@ -204,16 +218,19 @@ body { @@ -204,16 +218,19 @@ body {
204 color: $white; 218 color: $white;
205 background: $black; 219 background: $black;
206 } 220 }
  221 +
207 &.countdown { 222 &.countdown {
208 color: $white; 223 color: $white;
209 background: $black; 224 background: $black;
210 } 225 }
  226 +
211 &.normal { 227 &.normal {
212 width: 188px; 228 width: 188px;
213 padding: 0; 229 padding: 0;
214 border: 1px solid $black; 230 border: 1px solid $black;
215 color: $black; 231 color: $black;
216 } 232 }
  233 +
217 &:focus { 234 &:focus {
218 outline: none; 235 outline: none;
219 } 236 }
@@ -15,6 +15,7 @@ $white: #fff; @@ -15,6 +15,7 @@ $white: #fff;
15 margin-top: 0; 15 margin-top: 0;
16 } 16 }
17 } 17 }
  18 +
18 .order-detail { 19 .order-detail {
19 padding: 0 30px; 20 padding: 0 30px;
20 21
@@ -28,6 +29,7 @@ $white: #fff; @@ -28,6 +29,7 @@ $white: #fff;
28 } 29 }
29 } 30 }
30 } 31 }
  32 +
31 .order-code { 33 .order-code {
32 height: 88px; 34 height: 88px;
33 font-size: 34px; 35 font-size: 34px;
@@ -38,6 +40,7 @@ $white: #fff; @@ -38,6 +40,7 @@ $white: #fff;
38 flex: 1; 40 flex: 1;
39 } 41 }
40 } 42 }
  43 +
41 .order-goods { 44 .order-goods {
42 .goods-info { 45 .goods-info {
43 position: relative; 46 position: relative;
@@ -58,6 +61,7 @@ $white: #fff; @@ -58,6 +61,7 @@ $white: #fff;
58 opacity: 0; 61 opacity: 0;
59 } 62 }
60 } 63 }
  64 +
61 .img-box { 65 .img-box {
62 position: relative; 66 position: relative;
63 width: 98px; 67 width: 98px;
@@ -81,6 +85,7 @@ $white: #fff; @@ -81,6 +85,7 @@ $white: #fff;
81 height: 100%; 85 height: 100%;
82 } 86 }
83 } 87 }
  88 +
84 .goods-detail { 89 .goods-detail {
85 flex: 1; 90 flex: 1;
86 margin: 0 20px; 91 margin: 0 20px;
@@ -101,10 +106,12 @@ $white: #fff; @@ -101,10 +106,12 @@ $white: #fff;
101 overflow: hidden; 106 overflow: hidden;
102 font-size: 28px; 107 font-size: 28px;
103 } 108 }
  109 +
104 .size { 110 .size {
105 color: #b0b0b0; 111 color: #b0b0b0;
106 } 112 }
107 } 113 }
  114 +
108 .goods-price { 115 .goods-price {
109 text-align: right; 116 text-align: right;
110 117
@@ -118,6 +125,7 @@ $white: #fff; @@ -118,6 +125,7 @@ $white: #fff;
118 } 125 }
119 } 126 }
120 } 127 }
  128 +
121 .order-option { 129 .order-option {
122 padding: 30px 0; 130 padding: 30px 0;
123 border-top: 1px solid #eee; 131 border-top: 1px solid #eee;
@@ -145,16 +153,19 @@ $white: #fff; @@ -145,16 +153,19 @@ $white: #fff;
145 color: $white; 153 color: $white;
146 background: $black; 154 background: $black;
147 } 155 }
  156 +
148 &.countdown { 157 &.countdown {
149 color: $white; 158 color: $white;
150 background: $black; 159 background: $black;
151 } 160 }
  161 +
152 &.normal { 162 &.normal {
153 width: 188px; 163 width: 188px;
154 padding: 0; 164 padding: 0;
155 border: 1px solid $black; 165 border: 1px solid $black;
156 color: $black; 166 color: $black;
157 } 167 }
  168 +
158 &:focus { 169 &:focus {
159 outline: none; 170 outline: none;
160 } 171 }
@@ -174,6 +185,7 @@ $white: #fff; @@ -174,6 +185,7 @@ $white: #fff;
174 margin-top: 8px; 185 margin-top: 8px;
175 line-height: 60px; 186 line-height: 60px;
176 } 187 }
  188 +
177 p:nth-child(2) { 189 p:nth-child(2) {
178 font-size: 28px; 190 font-size: 28px;
179 line-height: 30px; 191 line-height: 30px;
1 <template> 1 <template>
2 - <div class="header"> 2 + <div class="header {{class}}">
3 <div class="header-left"> 3 <div class="header-left">
4 <slot name="left"> 4 <slot name="left">
5 <i class="icon icon-left" @click="goBack"></i> 5 <i class="icon icon-left" @click="goBack"></i>
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 const yoho = require('yoho'); 18 const yoho = require('yoho');
19 19
20 module.exports = { 20 module.exports = {
21 - props: ['title'], 21 + props: ['title', 'class'],
22 methods: { 22 methods: {
23 goBack() { 23 goBack() {
24 yoho.goBack({}, function() {}, function() {}); 24 yoho.goBack({}, function() {}, function() {});
@@ -40,7 +40,6 @@ @@ -40,7 +40,6 @@
40 line-height: 60px; 40 line-height: 60px;
41 font-size: 48px; 41 font-size: 48px;
42 background-color: #fff; 42 background-color: #fff;
43 -  
44 .icon, 43 .icon,
45 .header-title { 44 .header-title {
46 vertical-align: middle; 45 vertical-align: middle;
1 <template> 1 <template>
  2 + <div class="filter-box">
2 <div class="filter" :class="{ 'filter-open': isVisible}"> 3 <div class="filter" :class="{ 'filter-open': isVisible}">
3 <div class="filter-actions"> 4 <div class="filter-actions">
4 <a href="javascript:;" class="filter-action" @click="clearVals">清空</a> 5 <a href="javascript:;" class="filter-action" @click="clearVals">清空</a>
@@ -8,18 +9,20 @@ @@ -8,18 +9,20 @@
8 <ul class="filter-cates"> 9 <ul class="filter-cates">
9 <li class="filter-cate" v-for="classify in config" @click="entrySub($key)"> 10 <li class="filter-cate" v-for="classify in config" @click="entrySub($key)">
10 <i class="icon icon-right right"></i> 11 <i class="icon icon-right right"></i>
11 - <span class="filter-cate-label">{{$key | txt }}</span>  
12 - <span class="filter-cate-val">{{params[$key] | unifyTxt $key }}</span> 12 + <span class="filter-cate-label">{{$key | filter-en-cn }}</span>
  13 + <span class="filter-cate-val">{{params[$key] && params[$key].name }}</span>
13 </li> 14 </li>
14 </ul> 15 </ul>
15 </div> 16 </div>
16 </div> 17 </div>
  18 + <filter-sub :type="subType" :data="config && config[subType]" v-ref:filter-sub @select="setParams"></filter-sub>
  19 + </div>
17 </template> 20 </template>
18 <script> 21 <script>
19 const $ = require('yoho-jquery'); 22 const $ = require('yoho-jquery');
20 const bus = require('common/vue-bus'); 23 const bus = require('common/vue-bus');
21 const Overlay = require('common/overlay'); 24 const Overlay = require('common/overlay');
22 - const yoho = require('yoho'); 25 + const filterSub = require('./filter/filter-sub.vue');
23 26
24 module.exports = { 27 module.exports = {
25 props: { 28 props: {
@@ -33,9 +36,14 @@ @@ -33,9 +36,14 @@
33 params: {}, 36 params: {},
34 37
35 // 确定的值 38 // 确定的值
36 - selected: {} 39 + selected: {},
  40 +
  41 + subType: ''
37 }; 42 };
38 }, 43 },
  44 + components: {
  45 + filterSub
  46 + },
39 watch: { 47 watch: {
40 isVisible(newVal) { 48 isVisible(newVal) {
41 if (newVal) { 49 if (newVal) {
@@ -66,16 +74,12 @@ @@ -66,16 +74,12 @@
66 }); 74 });
67 }, 75 },
68 entrySub: function(key) { 76 entrySub: function(key) {
69 - const urlQuery = $.param({  
70 - action: this.action,  
71 - f_type: key,  
72 - old_val: ''  
73 - }).concat('&', decodeURIComponent(location.search).replace(/^\?/, ''));  
74 -  
75 - const url = ['/product/sub-filter', '?', urlQuery].join(''); 77 + this.subType = key;
  78 + this.$refs.filterSub.isVisible = true;
  79 + },
76 80
77 - // console.log(location.host+url);  
78 - yoho.goNewPage({url}); 81 + setParams: function(item) {
  82 + this.$set(`params.${this.subType}`, item);
79 } 83 }
80 }, 84 },
81 filters: { 85 filters: {
@@ -94,21 +98,6 @@ @@ -94,21 +98,6 @@
94 $.each(val, foo); 98 $.each(val, foo);
95 txt = arr.join(','); 99 txt = arr.join(',');
96 return txt; 100 return txt;
97 - },  
98 - txt: function(val) {  
99 - const dict = {  
100 - color: 'Color颜色',  
101 - gender: 'Gender性别',  
102 - size: 'Size尺寸',  
103 - brand: 'Brand品牌',  
104 - priceRange: 'Price价格',  
105 - groupSort: 'Category品类',  
106 - discount: 'Sale折扣',  
107 - style: 'Style风格',  
108 - ageLevel: 'Age年龄'  
109 - };  
110 -  
111 - return dict[val] || '';  
112 } 101 }
113 }, 102 },
114 created() { 103 created() {
@@ -138,6 +127,7 @@ @@ -138,6 +127,7 @@
138 transform: translate3d(100%, 0, 0); 127 transform: translate3d(100%, 0, 0);
139 transition: all 0.3s 0.2s; 128 transition: all 0.3s 0.2s;
140 padding: 0 30px; 129 padding: 0 30px;
  130 + overflow: auto;
141 131
142 &.filter-open { 132 &.filter-open {
143 transform: translate3d(0, 0, 0); 133 transform: translate3d(0, 0, 0);
@@ -191,4 +181,8 @@ @@ -191,4 +181,8 @@
191 color: $grey; 181 color: $grey;
192 } 182 }
193 183
  184 + .filter-sub-header {
  185 + position: absolute;
  186 + }
  187 +
194 </style> 188 </style>
  1 +<template>
  2 + <div class="filter" :class="{ 'filter-open': isVisible}">
  3 + <div class="filter-actions">
  4 + <a href="javascript:;" class="filter-action" @click="clearVals">清空</a>
  5 + <button class="button button-small filter-action" @click="okAction">确定</button>
  6 + </div>
  7 + <div class="filter-params">
  8 + <ul class="filter-cates">
  9 + <li class="filter-cate" v-for="classify in config" @click="entrySub($key)">
  10 + <i class="icon icon-right right"></i>
  11 + <span class="filter-cate-label">{{$key | txt }}</span>
  12 + <span class="filter-cate-val">{{params[$key] | unifyTxt $key }}</span>
  13 + </li>
  14 + </ul>
  15 + </div>
  16 + </div>
  17 +</template>
  18 +<script>
  19 + const $ = require('yoho-jquery');
  20 + const bus = require('common/vue-bus');
  21 + const Overlay = require('common/overlay');
  22 + const yoho = require('yoho');
  23 +
  24 + module.exports = {
  25 + props: {
  26 + config: Object,
  27 + isVisible: Boolean,
  28 + action: '',
  29 + },
  30 + data: function() {
  31 + return {
  32 + // 选择的值
  33 + params: {},
  34 +
  35 + // 确定的值
  36 + selected: {}
  37 + };
  38 + },
  39 + watch: {
  40 + isVisible(newVal) {
  41 + if (newVal) {
  42 + this.overlay.show();
  43 + } else {
  44 + this.overlay.hide();
  45 + }
  46 + }
  47 + },
  48 + methods: {
  49 + clearVals: function() {
  50 + // remove all value
  51 + this.$set('params', {});
  52 + },
  53 +
  54 + /**
  55 + * 当二级筛选, 返回数据时, 调用该方法
  56 + * @param {[type]} cate [description]
  57 + * @param {[type]} val [description]
  58 + */
  59 + setCateParams: function(cate, val) {
  60 + this.$set(`params.${cate}`, val);
  61 + },
  62 + okAction: function() {
  63 + bus.$emit('filter.change', {
  64 + val: this.params,
  65 + ref: this._uid
  66 + });
  67 + },
  68 + entrySub: function(key) {
  69 + const urlQuery = $.param({
  70 + action: this.action,
  71 + f_type: key,
  72 + old_val: ''
  73 + }).concat('&', decodeURIComponent(location.search).replace(/^\?/, ''));
  74 +
  75 + const url = ['/product/sub-filter', '?', urlQuery].join('');
  76 +
  77 + // console.log(location.host+url);
  78 + yoho.goNewPage({url});
  79 + }
  80 + },
  81 + filters: {
  82 + unifyTxt: function(val, category) {
  83 + let txt = '';
  84 + let arr = [];
  85 + let foo = $.noop;
  86 +
  87 +
  88 + if ($.isArray(val)) { // [{categoryName,..},{}..]
  89 + foo = (index, obj) => {
  90 + arr.push(obj[category + 'Name']);
  91 + };
  92 + }
  93 +
  94 + $.each(val, foo);
  95 + txt = arr.join(',');
  96 + return txt;
  97 + },
  98 + txt: function(val) {
  99 + const dict = {
  100 + color: 'Color颜色',
  101 + gender: 'Gender性别',
  102 + size: 'Size尺寸',
  103 + brand: 'Brand品牌',
  104 + priceRange: 'Price价格',
  105 + groupSort: 'Category品类',
  106 + discount: 'Sale折扣',
  107 + style: 'Style风格',
  108 + ageLevel: 'Age年龄'
  109 + };
  110 +
  111 + return dict[val] || '';
  112 + }
  113 + },
  114 + created() {
  115 + const self = this;
  116 +
  117 + this.overlay = new Overlay({
  118 + disableScrolling: true,
  119 + onClose: function() {
  120 + self.isVisible = false;
  121 + }
  122 + });
  123 + }
  124 + };
  125 +
  126 +</script>
  127 +<style>
  128 + @import "../../../scss/common/color";
  129 +
  130 + .filter {
  131 + position: fixed;
  132 + z-index: 1001;
  133 + top: 0;
  134 + right: 0;
  135 + bottom: 0;
  136 + left: 20%;
  137 + background-color: #fff;
  138 + transform: translate3d(100%, 0, 0);
  139 + transition: all 0.3s 0.2s;
  140 + padding: 0 30px;
  141 +
  142 + &.filter-open {
  143 + transform: translate3d(0, 0, 0);
  144 + }
  145 + }
  146 +
  147 + .filter-actions {
  148 + font-size: 34px;
  149 + text-align: right;
  150 + padding: 45px 0;
  151 + }
  152 +
  153 + .filter-action {
  154 + font-size: inherit;
  155 + margin-left: 40px;
  156 + }
  157 +
  158 + .filter-actions,
  159 + .filter-cate {
  160 + border-bottom: 1px solid $grey;
  161 + }
  162 +
  163 + .filter-cates {
  164 + list-style: none;
  165 + margin: 0;
  166 + padding: 0;
  167 + }
  168 +
  169 + .filter-cate .icon-right {
  170 + margin-left: 24px;
  171 + }
  172 +
  173 + .filter-cate,
  174 + .icon-right {
  175 + height: 118px;
  176 + line-height: 118px;
  177 + }
  178 +
  179 + .filter-cate-label {
  180 + font-size: 36px;
  181 + font-weight: bold;
  182 + }
  183 +
  184 + .filter-cate-val {
  185 + float: right;
  186 + font-size: 28px;
  187 + }
  188 +
  189 + .filter-cate-val,
  190 + .filter-cate .icon {
  191 + color: $grey;
  192 + }
  193 +
  194 +</style>
1 <template> 1 <template>
2 <div class="filter-detail"> 2 <div class="filter-detail">
3 - <div class="item" @click="select('')"> 3 + <div class="item" @click="select({id: ''})">
4 <div class="item-inner">所有品牌</div> 4 <div class="item-inner">所有品牌</div>
5 </div> 5 </div>
6 - <dl v-for="(key, brands) in data"> 6 + <dl v-for="key in orderKeys">
7 <dt class="index" id="{{key}}">{{key}}</dt> 7 <dt class="index" id="{{key}}">{{key}}</dt>
8 - <dd class="item" v-for="brand in brands" :class="{'active': brand.id === val}" @click="select(brand.id)"> 8 + <dd class="item" v-for="brand in data[key]" :class="{'active': brand.id === val}" @click="select(brand)">
9 <div class="item-inner">{{brand.name}}</div> 9 <div class="item-inner">{{brand.name}}</div>
10 </dd> 10 </dd>
11 </dl> 11 </dl>
@@ -27,8 +27,8 @@ @@ -27,8 +27,8 @@
27 props: { 27 props: {
28 val: Number, 28 val: Number,
29 data: { 29 data: {
30 - coerce: (data) => {  
31 - // 以brand.alif 分组 30 + default: () => { return [];},
  31 + coerce(data) {
32 const res = {}; 32 const res = {};
33 33
34 $.each(data, (index, brand) => { 34 $.each(data, (index, brand) => {
@@ -38,29 +38,38 @@ @@ -38,29 +38,38 @@
38 res[groupName] = []; 38 res[groupName] = [];
39 } 39 }
40 res[groupName].push(brand); 40 res[groupName].push(brand);
41 -  
42 }); 41 });
43 - 42 + console.log(res);
44 return res; 43 return res;
45 } 44 }
46 } 45 }
47 }, 46 },
  47 + data() {
  48 + return {
  49 + indexList: []
  50 + };
  51 + },
  52 + watch: {
  53 + },
48 methods: { 54 methods: {
49 select: function(val) { 55 select: function(val) {
50 - this.val = val; 56 + this.$dispatch('select', val);
51 } 57 }
52 }, 58 },
53 computed: { 59 computed: {
54 - indexList() {  
55 - var arr = []; 60 + orderKeys() {
  61 + let keys = [];
  62 + const self = this;
56 63
57 - $.each(this.data, (key, val) => {  
58 - arr.push({  
59 - index: key,  
60 - name: key  
61 - });  
62 - });  
63 - return arr; 64 + keys = Object.keys(this.data).sort();
  65 + self.$set('indexList', keys.map(k => {
  66 + return {
  67 + index: k,
  68 + name: k
  69 + };
  70 + }));
  71 +
  72 + return keys;
64 } 73 }
65 }, 74 },
66 components: { 75 components: {
1 <template> 1 <template>
  2 + <div class="filter-sub" :class="{'filter-sub-open': isVisible}">
  3 + <c-header class="filter-sub-header" :title="type | filter-cn '选择'">
  4 + <i class="icon icon-left" slot="left" @click="hide"></i>
  5 + </c-header>
2 <div> 6 <div>
3 - <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val"></brand-filter>  
4 - <normal-filter v-else :data="data" :val.sync="val"></normal-filter> 7 + <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val" @select="selectItem"></brand-filter>
  8 + <normal-filter v-else :data="data" :type="type" :val.sync="val" @select="selectItem"></normal-filter>
  9 + </div>
5 </div> 10 </div>
6 </template> 11 </template>
7 <script> 12 <script>
8 -const $ = require('yoho-jquery');  
9 -const parser = require('yoho-qs/parse');  
10 -const tip = require('common/tip');  
11 -const brandFilter = require('./brand.vue');  
12 -const normalFilter = require('./normal.vue'); 13 + const cHeader = require('component/header.vue');
  14 + const brandFilter = require('./brand.vue');
  15 + const normalFilter = require('./normal.vue');
13 16
14 -module.exports = {  
15 - props: ['type', 'data', 'val'],  
16 - components: {  
17 - brandFilter,  
18 - normalFilter 17 + module.exports = {
  18 + components: {cHeader, brandFilter, normalFilter},
  19 + props: ['type', 'data'],
  20 + data() {
  21 + return {
  22 + isVisible: false
  23 + };
19 }, 24 },
20 - watch: {  
21 - val: function(newV, oldV) {  
22 - console.log(`type: ${this.type}, value: ${newV}`);  
23 - } 25 + methods: {
  26 + selectItem(item) {
  27 + this.hide();
  28 + return true;
24 }, 29 },
25 - created() {  
26 - const self = this;  
27 - const urlQuery = parser(decodeURIComponent(location.search.replace(/^\?/, '')));  
28 - const filterUrl = urlQuery.action;  
29 -  
30 - this.type = urlQuery.f_type;  
31 - this.val = urlQuery.old_val;  
32 -  
33 - delete urlQuery.f_type;  
34 - delete urlQuery.old_val;  
35 - delete urlQuery.action;  
36 -  
37 - $.get(filterUrl, urlQuery)  
38 - .done(result => {  
39 - if (!result.data) {  
40 - tip('加载失败~'); 30 + hide() {
  31 + console.log('hide');
  32 + this.isVisible = false;
41 } 33 }
42 - self.$set('data', result.data.filter[self.type]);  
43 - })  
44 - .fail(()=>{  
45 - tip('加载失败~');  
46 - });  
47 } 34 }
48 -}; 35 + };
49 </script> 36 </script>
50 <style> 37 <style>
51 @import "../../../../scss/common/_color.css"; 38 @import "../../../../scss/common/_color.css";
52 39
  40 +.filter-sub {
  41 + position: fixed;
  42 + top: 0;
  43 + right: 0;
  44 + bottom: 0;
  45 + left: 0;
  46 + transition: all 0.3s;
  47 + transform: translate3d(100%, 0, 0);
  48 + background-color: $white;
  49 + z-index: 2010;
  50 + overflow: auto;
  51 +
  52 +
  53 + &.filter-sub-open {
  54 + transform: translate3d(0, 0, 0);
  55 + }
  56 +}
  57 +
53 .filter-detail { 58 .filter-detail {
54 $w: 30px; 59 $w: 30px;
55 list-style: none; 60 list-style: none;
  1 +<template>
  2 + <div>
  3 + <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val"></brand-filter>
  4 + <normal-filter v-else :data="data" :val.sync="val"></normal-filter>
  5 + </div>
  6 +</template>
  7 +<script>
  8 +const $ = require('yoho-jquery');
  9 +const parser = require('yoho-qs/parse');
  10 +const tip = require('common/tip');
  11 +const brandFilter = require('./brand.vue');
  12 +const normalFilter = require('./normal.vue');
  13 +
  14 +module.exports = {
  15 + props: ['type', 'data', 'val'],
  16 + components: {
  17 + brandFilter,
  18 + normalFilter
  19 + },
  20 + watch: {
  21 + val: function(newV, oldV) {
  22 + console.log(`type: ${this.type}, value: ${newV}`);
  23 + }
  24 + },
  25 + created() {
  26 + const self = this;
  27 + const urlQuery = parser(decodeURIComponent(location.search.replace(/^\?/, '')));
  28 + const filterUrl = urlQuery.action;
  29 +
  30 + this.type = urlQuery.f_type;
  31 + this.val = urlQuery.old_val;
  32 +
  33 + delete urlQuery.f_type;
  34 + delete urlQuery.old_val;
  35 + delete urlQuery.action;
  36 +
  37 + $.get(filterUrl, urlQuery)
  38 + .done(result => {
  39 + if (!result.data) {
  40 + tip('加载失败~');
  41 + }
  42 + self.$set('data', result.data.filter[self.type]);
  43 + })
  44 + .fail(()=>{
  45 + tip('加载失败~');
  46 + });
  47 + }
  48 +};
  49 +</script>
  50 +<style>
  51 +@import "../../../../scss/common/_color.css";
  52 +
  53 +.filter-detail {
  54 + $w: 30px;
  55 + list-style: none;
  56 + margin: 0;
  57 + padding: 0;
  58 + font-size: 40px;
  59 + color: $grey;
  60 + .item,
  61 + .index {
  62 + margin-left: $w;
  63 + margin-right: $w;
  64 + border-bottom: 1px solid $division;
  65 + }
  66 + .index {
  67 + font-size: 32px;
  68 + font-weight: bold;
  69 + color: $black;
  70 + height: 60px;
  71 + line-height: 60px;
  72 + }
  73 + .item.active .item-inner {
  74 + color: $black;
  75 + background-color: #f6f6f6;
  76 + }
  77 + .item-inner {
  78 + margin-left: -$w;
  79 + margin-right: -$w;
  80 + padding: 0 $w;
  81 + height: 100px;
  82 + line-height: 100px;
  83 + }
  84 +}
  85 +</style>
1 <template> 1 <template>
2 <div class="filter-detail"> 2 <div class="filter-detail">
3 - <div class="item" v-for="item in data" :class="{active: item.id === val}" @click="toggleCheck(item.id)"> 3 + <div class="item">
  4 + <div class="item-inner" @click="select({id:''})">{{type | filter-cn '所有'}}</div>
  5 + </div>
  6 + <div class="item" v-for="item in data" :class="{active: item.id === val}" @click="select(item)">
4 <div class="item-inner"> 7 <div class="item-inner">
5 {{item.name}} 8 {{item.name}}
6 </div> 9 </div>
@@ -13,8 +16,8 @@ module.exports = { @@ -13,8 +16,8 @@ module.exports = {
13 props: ['data', 'type', 'val'], 16 props: ['data', 'type', 'val'],
14 computed: {}, 17 computed: {},
15 methods: { 18 methods: {
16 - toggleCheck: function(val) {  
17 - this.val = val; 19 + select: function(val) {
  20 + this.$dispatch('select', val);
18 } 21 }
19 } 22 }
20 }; 23 };
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 </div> 49 </div>
50 </div> 50 </div>
51 </template> 51 </template>
52 -<style class="scss"> 52 +<style class="scss" scoped>
53 $bgcolor: #fff; 53 $bgcolor: #fff;
54 54
55 .news-page { 55 .news-page {
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 </div> 9 </div>
10 </template> 10 </template>
11 <script> 11 <script>
  12 + const $ = require('yoho-jquery');
12 const Vue = require('yoho-vue'); 13 const Vue = require('yoho-vue');
13 const lazyload = require('yoho-vue-lazyload'); 14 const lazyload = require('yoho-vue-lazyload');
14 const infinitScroll = require('yoho-vue-infinite-scroll'); 15 const infinitScroll = require('yoho-vue-infinite-scroll');
@@ -72,9 +73,8 @@ @@ -72,9 +73,8 @@
72 this.inSearching = true; 73 this.inSearching = true;
73 $.get(this.url, Object.assign({ 74 $.get(this.url, Object.assign({
74 order: this.order, 75 order: this.order,
75 - filter: this.filter,  
76 page: nextPage 76 page: nextPage
77 - }, locationQuery)) 77 + }, this.filter, locationQuery))
78 .done(res => { 78 .done(res => {
79 if (res.code === 200) { 79 if (res.code === 200) {
80 self.page = res.data.page; 80 self.page = res.data.page;
@@ -129,9 +129,7 @@ @@ -129,9 +129,7 @@
129 self.search(); 129 self.search();
130 }); 130 });
131 131
132 - bus.$on('order.change', function({  
133 - val  
134 - }) { 132 + bus.$on('order.change', function({val}) {
135 console.log(val); 133 console.log(val);
136 self.order = val; 134 self.order = val;
137 }); 135 });
@@ -143,21 +141,17 @@ @@ -143,21 +141,17 @@
143 */ 141 */
144 bus.$on('filter.change', function({val}) { 142 bus.$on('filter.change', function({val}) {
145 console.log(val); 143 console.log(val);
146 - self.filter = val; 144 + let filter = {};
  145 +
  146 + $.each(val, (type, item) => {
  147 + if (item.id) {
  148 + filter[type] = item.id;
  149 + }
  150 + });
  151 + self.$set('filter', filter);
147 self.$refs.filter.isVisible = false; 152 self.$refs.filter.isVisible = false;
148 }); 153 });
149 154
150 - /**  
151 - * 筛选组件 打开二级晒寻,通过bridge 打开APP view  
152 - * 1. 打开view  
153 - * 2. 监听 router.back ,重新设置 筛选值  
154 - */  
155 - // bus.$on('filter.sub.show', function({  
156 - // val  
157 - // }) {  
158 - // self.openFilterSub(val);  
159 - // });  
160 -  
161 this.search(); 155 this.search();
162 } 156 }
163 }; 157 };
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 const filter = require('component/product/filter.vue'); 17 const filter = require('component/product/filter.vue');
18 18
19 const shareSubTitle = '我在BLK发现了一个不错的品牌,赶快来看看吧!'; 19 const shareSubTitle = '我在BLK发现了一个不错的品牌,赶快来看看吧!';
  20 + let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
20 21
21 require('common/vue-filter'); 22 require('common/vue-filter');
22 23
@@ -62,7 +63,9 @@ @@ -62,7 +63,9 @@
62 getShopInfo() { 63 getShopInfo() {
63 $.get({ 64 $.get({
64 url: '/product/shop/info.json', 65 url: '/product/shop/info.json',
65 - data: { domain: this.domain } 66 + data: {
  67 + domain: this.domain
  68 + }
66 }).done(result => { 69 }).done(result => {
67 if (result) { 70 if (result) {
68 this.shopInfo = result; 71 this.shopInfo = result;
@@ -95,11 +98,11 @@ @@ -95,11 +98,11 @@
95 98
96 this.inSearching = true; 99 this.inSearching = true;
97 this.page++; 100 this.page++;
98 - $.post(this.url, {  
99 - sort: this.sort,  
100 - filter: this.filter, 101 + $.post(this.url, Object.assign({
  102 + order: this.sort,
101 page: this.page 103 page: this.page
102 - }).done(result => { 104 + }, this.filter, locationQuery))
  105 + .done(result => {
103 this.productList = result.data.productList; 106 this.productList = result.data.productList;
104 this.filterConfig = result.data.filter; 107 this.filterConfig = result.data.filter;
105 }).fail(error => { 108 }).fail(error => {
@@ -130,13 +133,17 @@ @@ -130,13 +133,17 @@
130 filter 133 filter
131 }, 134 },
132 created() { 135 created() {
  136 + const self = this;
  137 +
133 this.getShopInfo(); 138 this.getShopInfo();
134 this.search(); 139 this.search();
135 - bus.$on('list.paging', () =>{ 140 + bus.$on('list.paging', () => {
136 this.search(); 141 this.search();
137 }); 142 });
138 143
139 - bus.$on('sort.change', ({ val }) => { 144 + bus.$on('sort.change', ({
  145 + val
  146 + }) => {
140 console.log(val); 147 console.log(val);
141 this.sort = val; 148 this.sort = val;
142 }); 149 });
@@ -147,20 +154,19 @@ @@ -147,20 +154,19 @@
147 * 1. 重新搜索 154 * 1. 重新搜索
148 * 2. 关闭 filter 组件 155 * 2. 关闭 filter 组件
149 */ 156 */
150 - bus.$on('filter.change', ({val}) => {  
151 - Object.assign(this.filter, val);  
152 - this.search();  
153 - this.$refs.filter.isVisible = false;  
154 - }); 157 + bus.$on('filter.change', function({val}) {
  158 + console.log(val);
  159 + let filter = {};
155 160
156 - /**  
157 - * 筛选组件 打开二级晒寻,通过bridge 打开APP view  
158 - * 1. 打开view  
159 - * 2. 监听 router.back ,重新设置 筛选值  
160 - */  
161 - bus.$on('filter.sub.show', ({val}) => {  
162 - this.openFilterSub(val); 161 + $.each(val, (type, item) => {
  162 + if (item.id) {
  163 + filter[type] = item.id;
  164 + }
  165 + });
  166 + self.$set('filter', filter);
  167 + self.$refs.filter.isVisible = false;
163 }); 168 });
164 } 169 }
165 }; 170 };
  171 +
166 </script> 172 </script>