fe / yohoblk-wap · Commits

Go to a project

Authored by ccbikai
Commit 8c9a7b83601d1e58b6516a0bd0d501dbb837b4e9 2 parents 946b3e93 1849e94f

Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

Inline Side-by-side
Showing 14 changed files with 208 additions and 106 deletions
@@ -23,6 +23,8 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br> @@ -23,6 +23,8 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
23 <span class="icon icon-up"></span> 23 <span class="icon icon-up"></span>
24 <span class="icon icon-love"></span> 24 <span class="icon icon-love"></span>
25 <span class="icon icon-delete"></span> 25 <span class="icon icon-delete"></span>
  26 +<span class="icon icon-sort-asc"></span>
  27 +<span class="icon icon-sort-desc"></span>
26 28
27 29
28 <h2>button</h2> 30 <h2>button</h2>
@@ -14,13 +14,13 @@ const component = { @@ -14,13 +14,13 @@ const component = {
14 index: (req, res, next) => { 14 index: (req, res, next) => {
15 var testData = { 15 var testData = {
16 isLogin: false, 16 isLogin: false,
17 - head_ico: "",  
18 - profile_name: "XXX",  
19 - signinUrl: "/home", 17 + head_ico: '',
  18 + profile_name: 'XXX',
  19 + signinUrl: '/home',
20 wait_pay_num: 1, 20 wait_pay_num: 1,
21 wait_cargo_num: 2, 21 wait_cargo_num: 2,
22 send_cargo_num: 3 22 send_cargo_num: 3
23 - } 23 + };
24 res.render('index', _.merge({ 24 res.render('index', _.merge({
25 module: 'home', 25 module: 'home',
26 page: 'index' 26 page: 'index'
@@ -28,4 +28,4 @@ const component = { @@ -28,4 +28,4 @@ const component = {
28 } 28 }
29 }; 29 };
30 30
31 -module.exports = component;  
  31 +module.exports = component;
@@ -30,4 +30,4 @@ app.engine('.hbs', hbs({ @@ -30,4 +30,4 @@ app.engine('.hbs', hbs({
30 // router 30 // router
31 app.use(require('./router')); 31 app.use(require('./router'));
32 32
33 -module.exports = app;  
  33 +module.exports = app;
@@ -13,4 +13,4 @@ const home = require(cRoot); @@ -13,4 +13,4 @@ const home = require(cRoot);
13 // Your controller here 13 // Your controller here
14 router.get('/', home.index); // 个人中心主页 14 router.get('/', home.index); // 个人中心主页
15 15
16 -module.exports = router;  
  16 +module.exports = router;
1 <div id="product-list"> 1 <div id="product-list">
2 <Sort></Sort> 2 <Sort></Sort>
3 <List url="/product/list" :query='{a:1}'></List> 3 <List url="/product/list" :query='{a:1}'></List>
  4 + <div class="drawer-slide">
  5 + <div class="drawer-main">
  6 + <filter></filter>
  7 + </div>
  8 + </div>
4 </div> 9 </div>
No preview for this file type
1 <?xml version="1.0" standalone="no"?> 1 <?xml version="1.0" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 -<metadata>  
5 -Created by FontForge 20120731 at Mon Jul 18 12:07:13 2016  
6 - By admin  
7 -</metadata> 4 +<metadata>Generated by IcoMoon</metadata>
8 <defs> 5 <defs>
9 -<font id="iconfont" horiz-adv-x="1024" >  
10 - <font-face  
11 - font-family="iconfont"  
12 - font-weight="500"  
13 - font-stretch="normal"  
14 - units-per-em="1024"  
15 - panose-1="2 0 6 3 0 0 0 0 0 0"  
16 - ascent="896"  
17 - descent="-128"  
18 - x-height="792"  
19 - bbox="0 -212 1024 896"  
20 - underline-thickness="50"  
21 - underline-position="-100"  
22 - unicode-range="U+0078-E617"  
23 - />  
24 -<missing-glyph horiz-adv-x="374"  
25 -d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />  
26 - <glyph glyph-name=".notdef" horiz-adv-x="374"  
27 -d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />  
28 - <glyph glyph-name=".null" horiz-adv-x="0"  
29 - />  
30 - <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"  
31 - />  
32 - <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"  
33 -d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5  
34 -t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5  
35 -t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />  
36 - <glyph glyph-name="uniE600" unicode="&#xe600;"  
37 -d="M911 725h-242v123q0 21 -13.5 34.5t-34.5 13.5h-246q-20 0 -33.5 -13.5t-13.5 -34.5v-123h-246q-21 0 -34.5 -13.5t-13.5 -34t13.5 -34t34.5 -13.5h829q21 0 34.5 13.5t13.5 34t-13.5 34t-34.5 13.5zM423 725v72h147v-72h-147zM765 579q-21 0 -34.5 -14t-13.5 -34v-560  
38 -h-441v560q0 20 -13.5 34t-34 14t-34 -14t-13.5 -34v-611q0 -21 13.5 -34.5t34.5 -13.5h536q20 0 33.5 13.5t13.5 34.5v611q3 20 -11.5 34t-35.5 14zM447 67v389q0 20 -13.5 33.5t-34 13.5t-34 -13.5t-13.5 -33.5v-389q0 -21 13.5 -34.5t34 -13.5t34 13.5t13.5 34.5zM645 67  
39 -v389q0 20 -13.5 33.5t-34.5 13.5q-20 0 -35.5 -13.5t-15.5 -33.5v-389q0 -21 13.5 -34.5t34.5 -13.5t36 13.5t15 34.5z" />  
40 - <glyph glyph-name="uniE601" unicode="&#xe601;"  
41 -d="M512 812q43 0 82.5 -17t68 -45.5t45.5 -68t17 -82.5v-43h171v-640q0 -53 -37.5 -90.5t-90.5 -37.5h-512q-53 0 -90.5 37.5t-37.5 90.5v640h171v43q0 43 17 82.5t45.5 68t68 45.5t82.5 17zM811 -84v555h-598v-555q0 -18 12.5 -30.5t30.5 -12.5h512q18 0 30.5 12.5  
42 -t12.5 30.5zM512 727q-53 0 -90.5 -37.5t-37.5 -90.5v-43h256v43q0 53 -37.5 90.5t-90.5 37.5z" />  
43 - <glyph glyph-name="uniE602" unicode="&#xe602;"  
44 -d="M516 256l409 404q2 1 6 6t7 8t8 7t9 5.5t8.5 2t8.5 -2.5l38 -21q7 -7 7.5 -17.5t-6.5 -17.5l-476 -471q-7 -8 -17.5 -8t-17.5 7zM86 669zM531 158q-8 -7 -18.5 -7t-17.5 8l-475 471q-7 7 -7 17.5t7 17.5l38 21q4 3 8.5 2.5t8.5 -2t9 -5.5t8 -7t7 -8t6 -6l415 -407z  
45 -M945 669z" />  
46 - <glyph glyph-name="uniE603" unicode="&#xe603;"  
47 -d="M998.5 724.5q-12.5 11.5 -29.5 11t-29 -12.5l-552 -588l-302 297q-12 12 -29.5 12t-29.5 -12.5t-12 -29.5t13 -29l332 -327v-1q2 -1 9 -5q1 -1 2.5 -2t2.5 -1q7 -3 15 -3t16 3q1 1 3 2l1 1q7 5 9 6l1 1l581 619q12 13 11.5 30t-13 28.5z" />  
48 - <glyph glyph-name="uniE605" unicode="&#xe605;"  
49 -d="M512 415l360 360l45 -45l-360 -360l360 -359l-45 -45l-360 359l-360 -359l-45 45l360 359l-360 360l45 45z" />  
50 - <glyph glyph-name="uniE606" unicode="&#xe606;"  
51 -d="M245 384l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" />  
52 - <glyph glyph-name="uniE607" unicode="&#xe607;"  
53 -d="M785 384l13 13l-488 487l-84 -84l416 -416l-416 -416l84 -84l488 487z" />  
54 - <glyph glyph-name="uniE608" unicode="&#xe608;"  
55 -d="M682 74q-108 -89 -249 -89q-107 0 -197.5 53t-143.5 143.5t-53 197.5t53 197.5t143.5 143.5t197.5 53t197.5 -53t143.5 -143.5t53 -197.5q0 -141 -89 -249l286 -286l-56 -56zM433.5 64q130.5 0 222.5 92t92 222.5t-92 223t-222.5 92.5t-223 -92.5t-92.5 -223t92.5 -222.5  
56 -t223 -92z" />  
57 - <glyph glyph-name="uniE60D" unicode="&#xe60d;"  
58 -d="M734 860q-65 0 -123.5 -31t-99.5 -85q-41 54 -99.5 85t-124.5 31q-118 0 -202.5 -92t-84.5 -222q0 -37 7 -70.5t21.5 -65t25 -50t29.5 -48.5q31 -48 82.5 -105.5t98 -101.5t100 -90t75 -63.5t35.5 -28.5q17 -13 37 -13t37 13q13 11 35 28.5t75.5 63.5t100 90t98 101.5  
59 -t81.5 105.5q19 30 29.5 48.5t25.5 50t22 65t7 70.5q0 130 -84.5 222t-203.5 92zM886 352q-29 -45 -78 -100t-98.5 -101t-95.5 -85.5t-74 -62.5l-29 -23q-11 9 -30 24t-71.5 60t-98 88t-96 99t-79.5 101q-24 37 -37 60.5t-24 60t-11 73.5q0 101 65.5 172.5t157.5 71.5  
60 -q68 0 123 -40t82 -105v0q4 -15 19 -15t19 15q27 65 82 105t122 40q93 0 158.5 -71.5t65.5 -172.5q0 -37 -11.5 -73.5t-24 -60t-36.5 -60.5z" />  
61 - <glyph glyph-name="uniE617" unicode="&#xe617;"  
62 -d="M24 94l22 -22q9 -10 22 -10t23 10l424 430l420 -426q9 -9 21.5 -9t21.5 9l22 22q9 9 9 22t-9 23l-458 464q-5 5 -12 7q-9 7 -20.5 6t-20.5 -9l-465 -472q-9 -9 -9 -22t9 -23z" />  
63 - </font>  
64 -</defs></svg> 6 +<font id="iconfont" horiz-adv-x="1024">
  7 +<font-face units-per-em="1024" ascent="896" descent="-128" />
  8 +<missing-glyph horiz-adv-x="1024" />
  9 +<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
  10 +<glyph unicode="&#xe600;" glyph-name="delete" d="M911 809h-242v123q0 21-13.5 34.5t-34.5 13.5h-246q-20 0-33.5-13.5t-13.5-34.5v-123h-246q-21 0-34.5-13.5t-13.5-34 13.5-34 34.5-13.5h829q21 0 34.5 13.5t13.5 34-13.5 34-34.5 13.5zM423 809v72h147v-72h-147zM765 663q-21 0-34.5-14t-13.5-34v-560h-441v560q0 20-13.5 34t-34 14-34-14-13.5-34v-611q0-21 13.5-34.5t34.5-13.5h536q20 0 33.5 13.5t13.5 34.5v611q3 20-11.5 34t-35.5 14zM447 151v389q0 20-13.5 33.5t-34 13.5-34-13.5-13.5-33.5v-389q0-21 13.5-34.5t34-13.5 34 13.5 13.5 34.5zM645 151v389q0 20-13.5 33.5t-34.5 13.5q-20 0-35.5-13.5t-15.5-33.5v-389q0-21 13.5-34.5t34.5-13.5 36 13.5 15 34.5z" />
  11 +<glyph unicode="&#xe601;" glyph-name="bag" d="M512 896q43 0 82.5-17t68-45.5 45.5-68 17-82.5v-43h171v-640q0-53-37.5-90.5t-90.5-37.5h-512q-53 0-90.5 37.5t-37.5 90.5v640h171v43q0 43 17 82.5t45.5 68 68 45.5 82.5 17zM811 0v555h-598v-555q0-18 12.5-30.5t30.5-12.5h512q18 0 30.5 12.5t12.5 30.5zM512 811q-53 0-90.5-37.5t-37.5-90.5v-43h256v43q0 53-37.5 90.5t-90.5 37.5z" />
  12 +<glyph unicode="&#xe602;" glyph-name="down" d="M516 340l409 404q2 1 6 6t7 8 8 7 9 5.5 8.5 2 8.5-2.5l38-21q7-7 7.5-17.5t-6.5-17.5l-476-471q-7-8-17.5-8t-17.5 7zM531 242q-8-7-18.5-7t-17.5 8l-475 471q-7 7-7 17.5t7 17.5l38 21q4 3 8.5 2.5t8.5-2 9-5.5 8-7 7-8 6-6l415-407z" />
  13 +<glyph unicode="&#xe603;" glyph-name="check" d="M998.5 808.5q-12.5 11.5-29.5 11t-29-12.5l-552-588-302 297q-12 12-29.5 12t-29.5-12.5-12-29.5 13-29l332-327v-1q2-1 9-5 1-1 2.5-2t2.5-1q7-3 15-3t16 3q1 1 3 2l1 1q7 5 9 6l1 1 581 619q12 13 11.5 30t-13 28.5z" />
  14 +<glyph unicode="&#xe605;" glyph-name="close" d="M512 499l360 360 45-45-360-360 360-359-45-45-360 359-360-359-45 45 360 359-360 360 45 45z" />
  15 +<glyph unicode="&#xe606;" glyph-name="left" d="M245 468l-9 9 472 472 80-80-400-401 400-401-80-80-472 472z" />
  16 +<glyph unicode="&#xe607;" glyph-name="right" d="M785 468l13 13-488 487-84-84 416-416-416-416 84-84 488 487z" />
  17 +<glyph unicode="&#xe608;" glyph-name="search" d="M682 158q-108-89-249-89-107 0-197.5 53t-143.5 143.5-53 197.5 53 197.5 143.5 143.5 197.5 53 197.5-53 143.5-143.5 53-197.5q0-141-89-249l286-286-56-56zM433.5 148q130.5 0 222.5 92t92 222.5-92 223-222.5 92.5-223-92.5-92.5-223 92.5-222.5 223-92z" />
  18 +<glyph unicode="&#xe609;" glyph-name="print" horiz-adv-x="1001" d="M281 627q-27-1-53-1h-83q-18 0-36.5-6t-32.5-18.5-23-32-9-45.5v-76h912v41q0 16-0.5 30t-0.5 18q0 13-5 29t-17 29.5-31.5 22.5-49.5 9h-133v-97h-438v97zM955 394v-52q0-23 0.5-52t0.5-58-10.5-47.5-26-30-33-16-31.5-4.5q-14-1-29.5-0.5t-29.5 0.5h-32l-45 128h-439l-44-128h-63q-20 0-45 1-25 0-41 9.5t-25.5 23-13.5 29.5-4 30v167h911zM163 331q-12 0-21-8.5t-9-21.5 9-21.5 21-8.5q13 0 22 8.5t9 21.5-9 21.5-22 8.5zM316 207q-8-26-14-48-5-19-10.5-37t-7.5-25-3-15 1-14.5 9.5-10.5 21.5-4h365q23 0 34 12t2 38q-5 13-9.5 30.5t-9.5 34.5q-5 19-11 39h-368zM336 582v228q0 11 2.5 23t10 21.5 20.5 15.5 34 6h188q31 0 51.5-14.5t20.5-52.5v-227h-327z" />
  19 +<glyph unicode="&#xe60d;" glyph-name="love" d="M734 944q-65 0-123.5-31t-99.5-85q-41 54-99.5 85t-124.5 31q-118 0-202.5-92t-84.5-222q0-37 7-70.5t21.5-65 25-50 29.5-48.5q31-48 82.5-105.5t98-101.5 100-90 75-63.5 35.5-28.5q17-13 37-13t37 13q13 11 35 28.5t75.5 63.5 100 90 98 101.5 81.5 105.5q19 30 29.5 48.5t25.5 50 22 65 7 70.5q0 130-84.5 222t-203.5 92zM886 436q-29-45-78-100t-98.5-101-95.5-85.5-74-62.5l-29-23q-11 9-30 24t-71.5 60-98 88-96 99-79.5 101q-24 37-37 60.5t-24 60-11 73.5q0 101 65.5 172.5t157.5 71.5q68 0 123-40t82-105v0q4-15 19-15t19 15q27 65 82 105t122 40q93 0 158.5-71.5t65.5-172.5q0-37-11.5-73.5t-24-60-36.5-60.5z" />
  20 +<glyph unicode="&#xe617;" glyph-name="up" d="M24 178l22-22q9-10 22-10t23 10l424 430 420-426q9-9 21.5-9t21.5 9l22 22q9 9 9 22t-9 23l-458 464q-5 5-12 7-9 7-20.5 6t-20.5-9l-465-472q-9-9-9-22t9-23z" />
  21 +<glyph unicode="&#xe900;" glyph-name="sort-asc" horiz-adv-x="585" d="M585.143 475.428q0-14.857-10.857-25.714t-25.714-10.857h-512q-14.857 0-25.714 10.857t-10.857 25.714 10.857 25.714l256 256q10.857 10.857 25.714 10.857t25.714-10.857l256-256q10.857-10.857 10.857-25.714z" />
  22 +<glyph unicode="&#xe901;" glyph-name="sort-desc" horiz-adv-x="585" d="M585.143 256q0-14.857-10.857-25.714l-256-256q-10.857-10.857-25.714-10.857t-25.714 10.857l-256 256q-10.857 10.857-10.857 25.714t10.857 25.714 25.714 10.857h512q14.857 0 25.714-10.857t10.857-25.714z" />
  23 +</font></defs></svg>
No preview for this file type
No preview for this file type
1 -console.log("test");  
  1 +console.log('test');
1 const Vue = require('yoho-vue'); 1 const Vue = require('yoho-vue');
2 -const Sort = require('component/sort.vue');  
3 -const List = require('component/list.vue'); 2 +const sort = require('component/sort.vue');
  3 +const list = require('component/list.vue');
  4 +const filter = require('component/filter.vue');
  5 +
  6 +require('common/vue-filter');
4 7
5 new Vue({ 8 new Vue({
6 el: '#product-list', 9 el: '#product-list',
7 components: { 10 components: {
8 - List, Sort 11 + list, sort, filter
9 } 12 }
10 }); 13 });
1 @font-face { 1 @font-face {
2 font-family: "iconfont"; 2 font-family: "iconfont";
3 - src: resolve("iconfont.eot"); /* IE9 */  
4 - src: resolve("iconfont.eot?#iefix") format("embedded-opentype"), resolve("iconfont.woff") format("woff"), resolve("iconfont.ttf") format("truetype"), resolve("iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */ 3 + src: resolve("iconfont.eot?vqs6e2");
  4 + src: resolve("iconfont.eot?vqs6e2#iefix") format("embedded-opentype"), resolve("iconfont.ttf?vqs6e2") format("truetype"), resolve("iconfont.woff?vqs6e2") format("woff"), resolve("iconfont.svg?vqs6e2#iconfont") format("svg");
  5 + font-weight: normal;
  6 + font-style: normal;
5 } 7 }
6 8
7 .icon { 9 .icon {
8 - text-decoration: none;  
9 - font-style: normal;  
10 - font-size: 24px; 10 + /* use !important to prevent issues with browser extensions that change fonts */
11 font-family: "iconfont" !important; 11 font-family: "iconfont" !important;
  12 + speak: none;
  13 + font-style: normal;
  14 + font-weight: normal;
  15 + font-variant: normal;
  16 + text-transform: none;
  17 + line-height: 1;
  18 +
  19 + /* Better Font Rendering =========== */
12 -webkit-font-smoothing: antialiased; 20 -webkit-font-smoothing: antialiased;
13 - -webkit-text-stroke-width: 0.4px;  
14 -moz-osx-font-smoothing: grayscale; 21 -moz-osx-font-smoothing: grayscale;
15 } 22 }
16 23
  24 +.icon-sort-asc:before {
  25 + content: "\e900";
  26 +}
  27 +
  28 +.icon-sort-desc:before {
  29 + content: "\e901";
  30 +}
  31 +
  32 +.icon-print:before {
  33 + content: "\e609";
  34 +}
  35 +
  36 +.icon-delete:before {
  37 + content: "\e600";
  38 +}
  39 +
17 .icon-bag:before { 40 .icon-bag:before {
18 content: "\e601"; 41 content: "\e601";
19 } 42 }
20 43
  44 +.icon-down:before {
  45 + content: "\e602";
  46 +}
  47 +
21 .icon-check:before { 48 .icon-check:before {
22 content: "\e603"; 49 content: "\e603";
23 } 50 }
@@ -38,18 +65,11 @@ @@ -38,18 +65,11 @@
38 content: "\e608"; 65 content: "\e608";
39 } 66 }
40 67
41 -.icon-down:before {  
42 - content: "\e602"; 68 +.icon-love:before {
  69 + content: "\e60d";
43 } 70 }
44 71
45 .icon-up:before { 72 .icon-up:before {
46 content: "\e617"; 73 content: "\e617";
47 } 74 }
48 75
49 -.icon-love:before {  
50 - content: "\e60d";  
51 -}  
52 -  
53 -.icon-delete:before {  
54 - content: "\e600";  
55 -}  
  1 +<template>
  2 + <div class="filter">
  3 + <div class="filter-actions">
  4 + <a href="javascript:; filter-action">清空</a>
  5 + <button class="button button-small filter-action">确定</button>
  6 + </div>
  7 + <div class="filter-params">
  8 + <ul class="filter-cates">
  9 + <li class="filter-cate" v-for="filter in filters">
  10 + <i class="icon icon-right"></i>
  11 + <span>{{filter.classfly}}</span>
  12 + <span class="filter-cate-val">{{val[filter.key]}}</span>
  13 + </li>
  14 + </ul>
  15 + </div>
  16 + </div>
  17 +</template>
  18 +<style>
  19 +@import "../../scss/common/color";
  20 +
  21 +.filter {
  22 + padding: 0 20px;
  23 +}
  24 +
  25 +.filter-actions {
  26 + text-align: right;
  27 + padding: 10px 0;
  28 +}
  29 +
  30 +.filter-action {
  31 + margin-left: 20px;
  32 +}
  33 +
  34 +.filter-actions,
  35 +.filter-cate {
  36 + border-bottom: 1px solid $grey;
  37 +}
  38 +
  39 +.filter-cates {
  40 + list-style: none;
  41 + margin: 0;
  42 + padding: 0;
  43 +}
  44 +
  45 +.filter-cate {
  46 + .icon-right {
  47 + float: right;
  48 + }
  49 +}
  50 +
  51 +.filter-cate-val {
  52 + float: right;
  53 +}
  54 +
  55 +.filter-cate-val,
  56 +.filter-cate .icon {
  57 + color: $grey;
  58 +}
  59 +</style>
  60 +<script>
  61 +module.exports = {
  62 + data: function() {
  63 + return {
  64 + val: {
  65 + brand: 'Supreme',
  66 + category: '夹克'
  67 + },
  68 + filters: [{
  69 + classfly: 'Brand品牌',
  70 + key: 'brand',
  71 + itemArray: []
  72 + }, {
  73 + classfly: 'Category品类',
  74 + key: 'category',
  75 + itemArray: []
  76 + }, {
  77 + classfly: 'Color颜色',
  78 + key: 'color',
  79 + itemArray: []
  80 + }, {
  81 + classfly: 'Size尺寸',
  82 + key: 'size',
  83 + itemArray: []
  84 + }]
  85 + };
  86 + }
  87 +};
  88 +</script>
1 <template> 1 <template>
2 <div class="goods-box"> 2 <div class="goods-box">
3 <ul class="cardlist card-large"> 3 <ul class="cardlist card-large">
4 - <li class="card" v-for="item in items"> 4 + <li class="card" v-for="item in products">
5 <div class="card-pic"> 5 <div class="card-pic">
6 <a href=""> 6 <a href="">
7 - <img :src="item.img" alt="{{item.name}}"> 7 + <img :src="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
8 </a> 8 </a>
9 </div> 9 </div>
10 <div class="card-bd"> 10 <div class="card-bd">
11 <h2 class="card-label"> 11 <h2 class="card-label">
12 - <a href="">{{item.label}}</a> 12 + <a href="">{{item.productName}}</a>
13 </h2> 13 </h2>
14 - <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥ {{item.market_price}}</span>  
15 - <span class="good-price" :class="{'sale-price': item.market_price}">¥ {{item.sale_price}}</span> 14 + <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice}}</span>
  15 + <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice}}</span>
16 </div> 16 </div>
17 </li> 17 </li>
18 </ul> 18 </ul>
@@ -23,38 +23,45 @@ let $ = require('yoho-jquery'); @@ -23,38 +23,45 @@ let $ = require('yoho-jquery');
23 23
24 module.exports = { 24 module.exports = {
25 props: { 25 props: {
26 - //请求 地址 26 + /* 请求地址 */
27 url: { 27 url: {
28 type: String, 28 type: String,
29 required: true 29 required: true
30 }, 30 },
31 - //请求参数  
32 - query: Object 31 + initData: Array, /* 初始数据, 应该只单次绑定, 然后fetch数据全靠url */
  32 + query: Object /* 请求参数 */
33 }, 33 },
34 data: function() { 34 data: function() {
35 return { 35 return {
36 - items: []  
37 - } 36 + products: []
  37 + };
38 }, 38 },
39 methods: { 39 methods: {
40 fetch: function() { 40 fetch: function() {
  41 + let self = this;
  42 +
41 $.ajax({ 43 $.ajax({
42 url: this.url, 44 url: this.url,
43 type: 'POST', 45 type: 'POST',
44 }) 46 })
45 - .then(data=>{  
46 - console.log(data)  
47 - }) 47 + .then(result => {
  48 + self.$set('products', self.products.concat(result.data.productList));
  49 + });
48 } 50 }
49 }, 51 },
50 - ready: function() {  
51 - this.fetch() 52 + created: function() {
  53 + // 有初始数据，用初始数据
  54 + if (this.initData) {
  55 + self.$set('products', self.products.concat(this.initData));
  56 + } else if (this.url) {
  57 + this.fetch();
  58 + }
52 }, 59 },
53 -  
54 -} 60 +};
55 </script> 61 </script>
56 <style> 62 <style>
57 -@import '../../scss/common/color'; 63 +@import "../../scss/common/color";
  64 +
58 .cardlist { 65 .cardlist {
59 list-style: none; 66 list-style: none;
60 margin: 0; 67 margin: 0;
@@ -69,7 +76,6 @@ module.exports = { @@ -69,7 +76,6 @@ module.exports = {
69 &:nth-child(2n) { 76 &:nth-child(2n) {
70 margin-right: 0; 77 margin-right: 0;
71 } 78 }
72 - ;  
73 } 79 }
74 .card-pic { 80 .card-pic {
75 width: 100%; 81 width: 100%;
@@ -90,7 +96,7 @@ module.exports = { @@ -90,7 +96,7 @@ module.exports = {
90 font-size: 24px; 96 font-size: 24px;
91 } 97 }
92 .card-label { 98 .card-label {
93 - margin: 0 0 10px 0; 99 + margin: 0 0 10px;
94 font-size: inherit; 100 font-size: inherit;
95 font-weight: normal; 101 font-weight: normal;
96 } 102 }
@@ -109,4 +115,23 @@ module.exports = { @@ -109,4 +115,23 @@ module.exports = {
109 color: $red; 115 color: $red;
110 } 116 }
111 } 117 }
  118 +
  119 +.drawer-slide {
  120 + position: fixed;
  121 + top: 0;
  122 + right: 0;
  123 + bottom: 0;
  124 + left: 0;
  125 + background-color: rgba(0, 0, 0, 0.6);
  126 +}
  127 +
  128 +.drawer-main {
  129 + position: absolute;
  130 + top: 0;
  131 + right: 0;
  132 + bottom: 0;
  133 + min-width: 80%;
  134 + max-width: 100%;
  135 + background-color: #fff;
  136 +}
112 </style> 137 </style>