Merge remote-tracking branch 'origin/develop' into develop
Showing
29 changed files
with
562 additions
and
186 deletions
@@ -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; |
public/js/common/anypicker.js
deleted
100644 → 0
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 | +}); |
@@ -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 */ |
@@ -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; |
@@ -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> |
public/vue/component/product/filter.vue.bk
0 → 100644
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 | }; |
@@ -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> |
-
Please register or login to post a comment