fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit 27a16f2972fdc5e007faf5c763a8cb9e109419ca 2 parents afc365f1 991704f2

Merge branch 'feature/template' into develop

Inline Side-by-side
Showing 25 changed files with 1294 additions and 194 deletions
@@ -2,5 +2,6 @@ var yohobuyMobile; @@ -2,5 +2,6 @@ var yohobuyMobile;
2 2
3 require('./public/js/saunter'); 3 require('./public/js/saunter');
4 require('./public/js/tag'); 4 require('./public/js/tag');
  5 +require('./public/js/template');
5 6
6 module.exports = yohobuyMobile; 7 module.exports = yohobuyMobile;
@@ -17,7 +17,9 @@ @@ -17,7 +17,9 @@
17 "jquery-pjax": "1.0.1", 17 "jquery-pjax": "1.0.1",
18 "mlellipsis": "0.0.2", 18 "mlellipsis": "0.0.2",
19 "lazyload": "1.9.5", 19 "lazyload": "1.9.5",
20 - "iscroll": "5.1.2" 20 + "iscroll": "5.1.2",
  21 + "mustache": "2.0.0",
  22 + "underscore": "1.6.0"
21 }, 23 },
22 "devDependencies": { 24 "devDependencies": {
23 "expect.js": "0.3.1" 25 "expect.js": "0.3.1"
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
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> 4 <metadata>
5 -Created by FontForge 20120731 at Tue Apr 14 13:26:42 2015 5 +Created by FontForge 20120731 at Wed Apr 22 10:17:10 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -16,10 +16,10 @@ Created by FontForge 20120731 at Tue Apr 14 13:26:42 2015 @@ -16,10 +16,10 @@ Created by FontForge 20120731 at Tue Apr 14 13:26:42 2015
16 ascent="812" 16 ascent="812"
17 descent="-212" 17 descent="-212"
18 x-height="792" 18 x-height="792"
19 - bbox="0 -224 1457 800" 19 + bbox="0 -224 5637 800"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E605" 22 + unicode-range="U+0078-E60A"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -51,5 +51,18 @@ d="M774 324q6 -9 9.5 -19t2.5 -20.5t-5.5 -20.5t-12.5 -18l-1 -1l-427 -428q-18 -17 @@ -51,5 +51,18 @@ d="M774 324q6 -9 9.5 -19t2.5 -20.5t-5.5 -20.5t-12.5 -18l-1 -1l-427 -428q-18 -17
51 <glyph glyph-name="uniE605" unicode="&#xe605;" 51 <glyph glyph-name="uniE605" unicode="&#xe605;"
52 d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5 52 d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5
53 t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" /> 53 t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
  54 + <glyph glyph-name="uniE606" unicode="&#xe606;" horiz-adv-x="5632"
  55 +d="M4316.5 156q54.5 0 93 38.5t38.5 93.5t-38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93.5 -38.5zM4910 156q27 0 51.5 10.5t42.5 28t28 42t10 51.5q0 55 -38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93 -38.5zM5504.5 156q54.5 0 93.5 38.5t39 93.5
  56 +t-39 93.5t-93.5 38.5t-93 -38.5t-38.5 -93.5t38.5 -93.5t93 -38.5z" />
  57 + <glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1643"
  58 +d="M547 190h-1l45 -46l248 239l-45 46l-201 -194l-195 201l-46 -44z" />
  59 + <glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1821"
  60 +d="M930 135q-14 -13 -33.5 -13t-33.5 13l-252 242q-14 13 -14 32t14 32t34 13t34 -13l251 -242q6 -5 9.5 -11.5t4.5 -13.5t0 -14t-4.5 -13.5t-9.5 -11.5zM360 135q-14 13 -14 32t14 32l251 242q14 13 34 13t34 -13q6 -6 9.5 -15t3.5 -17.5t-3.5 -17t-9.5 -14.5l-252 -242
  61 +q-14 -13 -33.5 -13t-33.5 13z" />
  62 + <glyph glyph-name="uniE609" unicode="&#xe609;" horiz-adv-x="1821"
  63 +d="M930 377l-251 -242q-14 -13 -34 -13t-34 13q-9 9 -12 20.5t0 23.5t12 20l252 242q14 13 33.5 13t33.5 -13t14 -32t-14 -32zM427 441l252 -242q9 -8 12 -20t0 -23.5t-12 -20.5q-14 -13 -34 -13t-34 13l-251 242q-14 13 -14 32t14 32q6 7 15 10.5t18 3.5t18 -3.5t16 -10.5z
  64 +" />
  65 + <glyph glyph-name="uniE60A" unicode="&#xe60a;"
  66 +d="M1024 288q0 -139 -68.5 -257t-186.5 -186.5t-257 -68.5t-257 68.5t-186.5 186.5t-68.5 257t68.5 257t186.5 186.5t257 68.5t257 -68.5t186.5 -186.5t68.5 -257zM801 498l-365 -366l-156 156l-37 -37l193 -193l403 403z" />
54 </font> 67 </font>
55 </defs></svg> 68 </defs></svg>
@@ -471,28 +471,30 @@ module.exports = function(flag) { @@ -471,28 +471,30 @@ module.exports = function(flag) {
471 } 471 }
472 ] 472 ]
473 }, 473 },
474 - brands: [  
475 - {  
476 - thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',  
477 - name: 'HALFGIRL',  
478 - url: ''  
479 - },  
480 - {  
481 - thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',  
482 - name: '黄伟文Wyman',  
483 - url: ''  
484 - },  
485 - {  
486 - thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',  
487 - name: 'HIPANDA',  
488 - url: ''  
489 - },  
490 - {  
491 - thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',  
492 - name: 'holymoly',  
493 - url: ''  
494 - }  
495 - ], 474 + brands: {
  475 + list: [
  476 + {
  477 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  478 + name: 'HALFGIRL',
  479 + url: ''
  480 + },
  481 + {
  482 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  483 + name: '黄伟文Wyman',
  484 + url: ''
  485 + },
  486 + {
  487 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  488 + name: 'HIPANDA',
  489 + url: ''
  490 + },
  491 + {
  492 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  493 + name: 'holymoly',
  494 + url: ''
  495 + }
  496 + ]
  497 + },
496 tags: [ 498 tags: [
497 { 499 {
498 name: '棒球服', 500 name: '棒球服',
@@ -571,5 +573,364 @@ module.exports = function(flag) { @@ -571,5 +573,364 @@ module.exports = function(flag) {
571 } 573 }
572 } 574 }
573 ]; 575 ];
  576 + case 'tpl':
  577 + return [
  578 + {
  579 + introduction: {
  580 + items: [
  581 + {
  582 + img: {
  583 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/pic01.png',
  584 + alt: '季末终极折扣'
  585 + }
  586 + },
  587 + {
  588 + text: '清水翔太的很多作品都是词曲包办，这次由三人作曲的作品依然一听就知道是他的作品。'
  589 + },
  590 + {
  591 + brands: {
  592 + list: [
  593 + {
  594 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  595 + name: 'HALFGIRL',
  596 + url: ''
  597 + },
  598 + {
  599 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  600 + name: '黄伟文Wyman',
  601 + url: ''
  602 + },
  603 + {
  604 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  605 + name: 'HIPANDA',
  606 + url: ''
  607 + },
  608 + {
  609 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  610 + name: 'holymoly',
  611 + url: ''
  612 + }
  613 + ]
  614 + }
  615 + }
  616 + ]
  617 + }
  618 + },
  619 + {
  620 + recommendation: {
  621 + recos: [
  622 + {
  623 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  624 + name: 'G-Star白色后腰拉链款男士牛仔裤',
  625 + price: 488,
  626 + salePrice: 139,
  627 + url: ''
  628 + },
  629 + {
  630 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  631 + name: 'G-Star白色后腰拉链款男士牛仔裤',
  632 + price: 488,
  633 + salePrice: 139,
  634 + url: ''
  635 + },
  636 + {
  637 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  638 + name: 'G-Star白色后腰拉链款男士牛仔裤',
  639 + price: 488,
  640 + salePrice: 139,
  641 + url: ''
  642 + }
  643 + ]
  644 + }
  645 + },
  646 + {
  647 + goods: {
  648 + newPatterns: [
  649 + {
  650 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  651 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  652 + isLike: false,
  653 + price: 1268,
  654 + salePrice: 589,
  655 + isSale: true,
  656 + isFew: true,
  657 + isNew: false,
  658 + url: ''
  659 + },
  660 + {
  661 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  662 + name: 'CLOTtee 撞色连帽外套',
  663 + isLike: false,
  664 + price: 488,
  665 + salePrice: 139,
  666 + isSale: true,
  667 + isFew: true,
  668 + isNew: false,
  669 + url: ''
  670 + },
  671 + {
  672 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  673 + name: 'HALFGIRL 插肩棒球服短裙套装',
  674 + isLike: true,
  675 + price: 478,
  676 + salePrice: 208,
  677 + isSale: true,
  678 + isFew: true,
  679 + isNew: false,
  680 + url: ''
  681 + },
  682 + {
  683 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  684 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  685 + isLike: false,
  686 + price: 589,
  687 + salePrice: 148,
  688 + isSale: false,
  689 + isFew: false,
  690 + isNew: true,
  691 + url: ''
  692 + }
  693 + ]
  694 + }
  695 + }
  696 + ];
  697 + case 'classification':
  698 + return {
  699 + brand: [
  700 + {
  701 + name: '所有品牌',
  702 + id: 0
  703 + },
  704 + {
  705 + name: 'HARDLYEVER\'S',
  706 + id: 1
  707 + },
  708 + {
  709 + name: 'DUNKELVOLK',
  710 + id: 2
  711 + },
  712 + {
  713 + name: 'izzue',
  714 + id: 3
  715 + },
  716 + {
  717 + name: ':CHOCOOLATE',
  718 + id: 4
  719 + },
  720 + {
  721 + name: 'Life·After Life',
  722 + id: 5
  723 + },
  724 + {
  725 + name: 'JOYRICH',
  726 + id: 6
  727 + },
  728 + {
  729 + name: '5CM',
  730 + id: 7
  731 + },
  732 + {
  733 + name: 'THETHING',
  734 + id: 8
  735 + }
  736 + ],
  737 + msort: [
  738 + {
  739 + name: '所有品类',
  740 + id: 0
  741 + },
  742 + {
  743 + name: '上衣',
  744 + id: 1
  745 + },
  746 + {
  747 + name: '裤装',
  748 + id: 2
  749 + },
  750 + {
  751 + name: '裙装',
  752 + id: 3
  753 + },
  754 + {
  755 + name: '鞋靴',
  756 + id: 4
  757 + },
  758 + {
  759 + name: '包类/装备',
  760 + id: 5
  761 + },
  762 + {
  763 + name: '服配',
  764 + id: 6
  765 + },
  766 + {
  767 + name: '创意生活',
  768 + id: 7
  769 + },
  770 + {
  771 + name: '内衣/泳衣',
  772 + id: 8
  773 + }
  774 + ],
  775 + color: [
  776 + {
  777 + name: '所有颜色',
  778 + id: 0
  779 + },
  780 + {
  781 + name: '黑色',
  782 + id: 1
  783 + },
  784 + {
  785 + name: '红色',
  786 + id: 2
  787 + },
  788 + {
  789 + name: '灰色',
  790 + id: 3
  791 + },
  792 + {
  793 + name: '黄色',
  794 + id: 4
  795 + },
  796 + {
  797 + name: '彩色',
  798 + id: 5
  799 + },
  800 + {
  801 + name: '棕色',
  802 + id: 6
  803 + },
  804 + {
  805 + name: '银色',
  806 + id: 7
  807 + },
  808 + {
  809 + name: '橙色',
  810 + id: 8
  811 + }
  812 + ],
  813 + size: [
  814 + {
  815 + name: '所有尺码',
  816 + id: 0
  817 + },
  818 + {
  819 + name: 'S',
  820 + id: 1
  821 + },
  822 + {
  823 + name: 'M',
  824 + id: 2
  825 + },
  826 + {
  827 + name: 'L',
  828 + id: 3
  829 + },
  830 + {
  831 + name: 'XL',
  832 + id: 4
  833 + },
  834 + {
  835 + name: 'XXL',
  836 + id: 5
  837 + },
  838 + {
  839 + name: 'XXXL',
  840 + id: 6
  841 + }
  842 + ],
  843 + price: [
  844 + {
  845 + name: '所有价格',
  846 + id: 0
  847 + },
  848 + {
  849 + name: '¥0-300',
  850 + id: 1
  851 + },
  852 + {
  853 + name: '¥300-600',
  854 + id: 2
  855 + },
  856 + {
  857 + name: '¥600-1000',
  858 + id: 3
  859 + },
  860 + {
  861 + name: '¥1000-2000',
  862 + id: 4
  863 + },
  864 + {
  865 + name: '¥2000以上',
  866 + id: 5
  867 + }
  868 + ],
  869 + discount: [
  870 + {
  871 + name: '所有折扣',
  872 + id: 0
  873 + },
  874 + {
  875 + name: '1~3折',
  876 + id: 1
  877 + },
  878 + {
  879 + name: '4~6折',
  880 + id: 2
  881 + },
  882 + {
  883 + name: '7~9折',
  884 + id: 3
  885 + }
  886 + ]
  887 + };
  888 + case 'search':
  889 + return [
  890 + {
  891 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  892 + name: 'HALFGIRL 插肩棒球服短裙套装',
  893 + isLike: true,
  894 + price: 478,
  895 + salePrice: 208,
  896 + isSale: true,
  897 + isFew: true,
  898 + isNew: false,
  899 + url: ''
  900 + },
  901 + {
  902 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  903 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  904 + isLike: false,
  905 + price: 1268,
  906 + salePrice: 589,
  907 + isSale: true,
  908 + isFew: true,
  909 + isNew: false,
  910 + url: ''
  911 + },
  912 + {
  913 + thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/04/20/09/02ef617e5704729b9e8741831d805fac20.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  914 + name: 'CLOTtee 撞色连帽外套',
  915 + isLike: false,
  916 + price: 488,
  917 + salePrice: 139,
  918 + isSale: true,
  919 + isFew: true,
  920 + isNew: false,
  921 + url: ''
  922 + },
  923 + {
  924 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/04/03/07/0235b2d48417d0e92b94484d284dca06fc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  925 + name: 'Lee Cooper 蓝色花丛系T恤',
  926 + isLike: false,
  927 + price: 589,
  928 + salePrice: 148,
  929 + isSale: false,
  930 + isFew: false,
  931 + isNew: true,
  932 + url: ''
  933 + }
  934 + ];
574 } 935 }
575 }; 936 };
1 -seajs.use(['jquery/1.8.3/jquery-debug','yohobuy-mobile/1.0.0/public/js/tag-debug'], function($,tag) {  
2 - 1 +seajs.use(['jquery/1.8.3/jquery-debug','yohobuy-mobile/1.0.0/public/js/tag-debug'], function($, tag) {
3 $("#container").removeClass('hide'); 2 $("#container").removeClass('hide');
4 3
5 if(tag) { 4 if(tag) {
  1 +/**
  2 + * 模板页js
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date；2015/4/14
  5 + */
  6 +
  7 +var $ = require('jquery'),
  8 + _ = require('underscore'),
  9 + Mustache = require('mustache'),
  10 + timer = null;
  11 +
  12 +require('lazyload');
  13 +
  14 +/**
  15 + * 页面加载初始化
  16 + */
  17 +exports.init = function() {
  18 + $(function() {
  19 + var $navItem = $('#goods-nav .nav-item'),
  20 + $goodsContainer = $('#goods-content'),
  21 + $goodList = $('#goods-content > div'),
  22 + $npc = $goodList.filter('.new-patterns-container'),
  23 + $svc = $goodList.filter('.sales-volume-container'),
  24 + $pc = $goodList.filter('.price-container'),
  25 + tpl; //商品信息模板
  26 +
  27 + //筛选相关变量
  28 + var curFilter = {
  29 + brand: 0,
  30 + msort: 0,
  31 + color: 0,
  32 + size: 0,
  33 + price: 0,
  34 + discount: 0
  35 + },
  36 + navInfo = {
  37 + newest: {
  38 + direction: 1, //排序方向;NOTE:最新保持升序排序
  39 + reload: false, //是否需要重新加载
  40 + deviation: $npc.children('.good-info').length,
  41 + end: false
  42 + },
  43 + sale: {
  44 + direction: 0, //销量降序排列
  45 + reload: true,
  46 + deviation: 0,
  47 + end: false
  48 + },
  49 + price: {
  50 + direction: 1,
  51 + reload: true,
  52 + deviation: 0,
  53 + end: false
  54 + }
  55 + },
  56 + classifyItemTpl = '<li class="{{^ id}}chosed{{/ id}}" data-id="{{id}}">' +
  57 + '<span class="text">{{name}}</span>' +
  58 + '<span><i class="chosed-icon iconfont">&#xe60a;</i></span>' +
  59 + '</li>',
  60 + $screen = $('#screen-content, #screen-mask'),
  61 + $prevFocusNav = $navItem.filter('.focus'), //初始化为已选项
  62 + classification; //分类数据
  63 +
  64 + //加载更多
  65 + var winH = $(window).height();
  66 +
  67 + //read good-info template
  68 + $.get('/tpl/readTpl', function(data) {
  69 + if (data.success) {
  70 + tpl = data.data;
  71 + Mustache.parse(tpl);
  72 + }
  73 + });
  74 +
  75 + Mustache.parse(classifyItemTpl); //cache tpl
  76 +
  77 + /**
  78 + * Mustache 渲染数组数据
  79 + * @params data Array 数据数组
  80 + * @return html html字符串
  81 + */
  82 + function renderArrData(data) {
  83 + var i = 0,
  84 + html = '';
  85 + for (i = 0; i < data.length; i++) {
  86 + html += Mustache.render(classifyItemTpl, data[i]);
  87 + }
  88 + return html;
  89 + }
  90 +
  91 + /**
  92 + * 获取当前选中导航的类别
  93 + * @return string/undefined
  94 + */
  95 + function getFocusNavType() {
  96 + var type;
  97 + if ($prevFocusNav.hasClass('sales-volume-nav')) {
  98 + type = 'sale';
  99 + } else if ($prevFocusNav.hasClass('price-nav')) {
  100 + type = 'price';
  101 + } else if ($prevFocusNav.hasClass('new-patterns-nav')) {
  102 + type = 'newest';
  103 + }
  104 + return type;
  105 + }
  106 +
  107 + /**
  108 + * 查找当前状态下的商品列表并填充HTML
  109 + */
  110 + function search() {
  111 + var type = getFocusNavType(),
  112 + setting = {},
  113 + nav;
  114 +
  115 + nav = navInfo[type];
  116 +
  117 + //请求数据setting
  118 + $.extend(setting, curFilter, {
  119 + type: type,
  120 + direction: nav.direction,
  121 + deviation: nav.deviation
  122 + });
  123 +
  124 + if (nav.reload) {
  125 + setting.deviation = 0;
  126 + } else if (nav.end) {
  127 + //不需要重新加载并且数据请求结束
  128 + return;
  129 + }
  130 +
  131 + $.ajax({
  132 + type: 'GET',
  133 + url: '/tpl/search',
  134 + data: setting
  135 + }).then(function(data) {
  136 + var html = '',
  137 + $container,
  138 + res,
  139 + goods,
  140 + len,
  141 + i;
  142 + if (data.success) {
  143 + res = data.data;
  144 + goods = res.goods;
  145 + len = goods.length;
  146 +
  147 + //插入HTML
  148 + switch (setting.type) {
  149 + case 'newest':
  150 + $container = $npc;
  151 + break;
  152 + case 'price':
  153 + $container = $pc;
  154 + break;
  155 + case 'sale':
  156 + $container = $svc;
  157 + break;
  158 + }
  159 + for (i = 0; i < len; i++) {
  160 + html += Mustache.render(tpl, goods[i]);
  161 + }
  162 + if (nav.reload) {
  163 + $container.html(html);
  164 + } else {
  165 + $container.append(html);
  166 + }
  167 +
  168 + //lazyload
  169 + $container.find('img.lazy').lazyload();
  170 + //重置navInfo
  171 + if (res.end) {
  172 + nav.end = true;
  173 + }
  174 + nav.reload = false;
  175 + nav.deviation = setting.deviation + len;
  176 + }
  177 + });
  178 + }
  179 + //读取筛选时的分类信息
  180 + $.get('/tpl/classification', function(data) {
  181 + var c,
  182 + html;
  183 + if (data.success) {
  184 + classification = data.data;
  185 + for (c in classification) {
  186 + if(classification.hasOwnProperty(c)) {
  187 + $('#sub-' + c).html(renderArrData(classification[c]));
  188 + }
  189 + }
  190 + }
  191 + });
  192 +
  193 + //img lazyload
  194 + $('img.lazy').lazyload({
  195 + skip_invisible : false
  196 + });
  197 +
  198 + /**
  199 + * 切换排序
  200 + * @params $cur 当前选中nav-item
  201 + */
  202 + function toggleSort($cur) {
  203 + var type = getFocusNavType(),
  204 + nav = navInfo[type],
  205 + direction;
  206 +
  207 + $cur.find('.sort i').toggleClass('cur');
  208 +
  209 + if ($cur.find('.sort .cur').hasClass('up')) {
  210 + direction = 1;
  211 + } else {
  212 + direction = 0;
  213 + }
  214 +
  215 + nav.direction = direction;
  216 + nav.reload = true;
  217 + search();
  218 + }
  219 +
  220 + /**
  221 + * 导航 touch/click处理句柄
  222 + */
  223 + function navTouchEvt(e) {
  224 + var $cur = $(e.currentTarget),
  225 + type;
  226 +
  227 + if ($cur.hasClass('screen-nav')) {
  228 + //筛选
  229 + $screen.toggleClass('hide');
  230 + $prevFocusNav.toggleClass('focus');
  231 + $cur.toggleClass('focus');
  232 + } else {
  233 + if ($cur.hasClass('focus')) {
  234 + if (!$cur.hasClass('new-patterns-nav')) {
  235 + //销量和价格
  236 + toggleSort($cur);
  237 + }
  238 + return;
  239 + }
  240 +
  241 + $prevFocusNav = $cur;
  242 +
  243 + $navItem.removeClass('focus');
  244 + $cur.addClass('focus');
  245 +
  246 + type = getFocusNavType(); //当前focus项(new/sale/price)
  247 +
  248 + $goodList.addClass('hide');
  249 + switch (type) {
  250 + case 'newest':
  251 + $npc.removeClass('hide');
  252 + break;
  253 + case 'sale':
  254 + $svc.removeClass('hide');
  255 + break;
  256 + case 'price':
  257 + $pc.removeClass('hide');
  258 + break;
  259 + }
  260 +
  261 + if (navInfo[type].reload) {
  262 + search();
  263 + }
  264 + }
  265 + }
  266 +
  267 + //切换“最新”，“销量”，“价格”以及“筛选”功能
  268 + $('#goods-nav').delegate('.nav-item', 'touchstart', function(e) {
  269 + e.preventDefault();
  270 + navTouchEvt(e);
  271 + }).delegate('.nav-item', 'click', function(e) {
  272 + navTouchEvt(e);
  273 + });
  274 +
  275 +
  276 + /**
  277 + * 筛选分类点击事件句柄
  278 + */
  279 + function scTouchEvt(e) {
  280 + var $cur = $(e.currentTarget),
  281 + cs = ['brand', 'msort', 'color', 'size', 'price', 'discount'],
  282 + curType;
  283 +
  284 + if ($cur.hasClass('active')) {
  285 + return;
  286 + }
  287 +
  288 + $('#screen-content .c-item').removeClass('active');
  289 + $cur.addClass('active');
  290 +
  291 + curType = _.filter(cs, function(c) {
  292 + return $cur.hasClass(c);
  293 + });
  294 +
  295 + $('.sub-classify:not(.hide)').addClass('hide');
  296 + $('#sub-' + curType).removeClass('hide');
  297 + }
  298 +
  299 + $('#screen-content').delegate('.c-item', 'touchstart', function(e) {
  300 + e.preventDefault();
  301 + scTouchEvt(e);
  302 + }).delegate('.c-item', 'click', function(e) {
  303 + scTouchEvt(e);
  304 + });
  305 +
  306 + /**
  307 + * 筛选
  308 + * @params string 数据id
  309 + * @params string 数据类型
  310 + * @name string 值
  311 + * @navNam string 最新/销量/价格
  312 + * @direction int 0(降序)/1(升序)
  313 + */
  314 + function doFilter(id, type, name, navName) {
  315 + var $shower = $('#show-' + type),
  316 + att,
  317 + req;
  318 + //更新当前过滤项
  319 + curFilter[type] = id;
  320 +
  321 + //更新显示值
  322 + if (id === 0) {
  323 + $shower.addClass('default');
  324 + } else {
  325 + $shower.removeClass('default');
  326 + }
  327 +
  328 + $shower.text(name);
  329 +
  330 + //重置reload
  331 + for (att in navInfo) {
  332 + if (navInfo.hasOwnProperty(att)) {
  333 + navInfo[att].reload = true;
  334 + }
  335 + }
  336 + search();
  337 + }
  338 +
  339 + /**
  340 + * 筛选子类点击事件句柄
  341 + */
  342 + function subScTouchEvt(e) {
  343 + var cur = e.currentTarget,
  344 + $cur = $(cur),
  345 + $parent = $cur.closest('ul'),
  346 + id = cur.dataset.id * 1,
  347 + type = $parent[0].dataset.type,
  348 + name = $cur.children('.text').text();
  349 +
  350 + $parent.children('li.chosed').removeClass('chosed');
  351 + $cur.addClass('chosed');
  352 +
  353 + doFilter(id, type, name);
  354 + }
  355 +
  356 + $('.sub-classify').delegate('li', 'click', function(e) {
  357 + subScTouchEvt(e);
  358 + });
  359 +
  360 + //加载更多
  361 + $(document).on('touchmove', function(e) {
  362 + //当scroll到1/4$goodsContainer高度后继续请求
  363 + if ($(window).scrollTop() + winH >
  364 + $(document).height() - 0.25 * $goodsContainer.height()) {
  365 + search();
  366 + }
  367 + });
  368 + });
  369 +};
  1 +seajs.use(['jquery/1.8.3/jquery-debug', 'yohobuy-mobile/1.0.0/public/js/template-debug'], function($, tpl) {
  2 + $("#container").removeClass('hide');
  3 +
  4 + if (tpl) {
  5 + tpl.init();
  6 + }
  7 +});
1 -.brand {  
2 - float: left;  
3 - width: 158rem / $pxConvertRem;  
4 - height: 120rem / $pxConvertRem;  
5 - border-left: 1px solid #e0e0e0; 1 +.brand-list {
  2 + padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
  3 + background: #fff;
6 4
7 - a {  
8 - display: block;  
9 - text-decoration: none;  
10 - }  
11 -  
12 - .brand-logo {  
13 - display: table-cell; 5 + .brand {
  6 + float: left;
14 width: 158rem / $pxConvertRem; 7 width: 158rem / $pxConvertRem;
15 - height: 94rem / $pxConvertRem;  
16 - vertical-align:middle; 8 + height: 120rem / $pxConvertRem;
  9 + border-left: 1px solid #e0e0e0;
17 10
18 - img { 11 + a {
19 display: block; 12 display: block;
20 - max-width: 158rem / $pxConvertRem;  
21 - max-height: 94rem / $pxConvertRem; 13 + text-decoration: none;
  14 + }
  15 +
  16 + .brand-logo {
  17 + display: table-cell;
  18 + width: 158rem / $pxConvertRem;
  19 + height: 94rem / $pxConvertRem;
22 vertical-align: middle; 20 vertical-align: middle;
23 - margin: 0 auto; 21 +
  22 + img {
  23 + display: block;
  24 + max-width: 158rem / $pxConvertRem;
  25 + max-height: 94rem / $pxConvertRem;
  26 + vertical-align: middle;
  27 + margin: 0 auto;
  28 + }
24 } 29 }
  30 +
  31 + .brand-name {
  32 + margin: 10rem / $pxConvertRem 0 0 0;
  33 + line-height: 24rem / $pxConvertRem;
  34 + font-size: 18rem / $pxConvertRem;
  35 + color: #babac2;
  36 + text-align: center;
  37 + text-decoration: none;
  38 + border-bottom: none;
  39 + overflow: hidden;
  40 + }
  41 +
25 } 42 }
26 -  
27 - .brand-name {  
28 - margin: 10rem / $pxConvertRem 0 0 0;  
29 - line-height: 24rem / $pxConvertRem;  
30 - font-size: 18rem / $pxConvertRem;  
31 - color: #babac2;  
32 - text-align: center;  
33 - text-decoration: none;  
34 - border-bottom: none;  
35 - overflow: hidden;  
36 - }  
37 -  
38 -}  
39 43
40 -.brand:first-child {  
41 - border-left: none; 44 + .brand:first-child {
  45 + border-left: none;
  46 + }
42 } 47 }
  1 +@import "compass", "compass/reset";
  2 +$pxConvertRem : 40;
  3 +
  4 +body {
  5 + font-family: helvetica,Arial,"黑体";
  6 + background: #f0f0f0;
  7 +}
  8 +
  9 +ol, ul {
  10 + list-style: none;
  11 +}
  12 +
  13 +.hide {
  14 + display: none !important;
  15 +}
  16 +
  17 +/**
  18 + * 闭合浮动
  19 + * @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
  20 + */
  21 +
  22 +.clearfix:before,
  23 +.clearfix:after {
  24 + content: "";
  25 + display: table;
  26 +}
  27 +
  28 +.clearfix:after {
  29 + clear: both;
  30 +}
  31 +
  32 +.clearfix {
  33 + *zoom: 1; /* IE6-7 触发 hasLayout */
  34 +}
  35 +
  36 +
  37 +/**
  38 + * 字体图标样式
  39 + */
  40 +@font-face {
  41 + font-family: "iconfont";
  42 + src: url('../fonts/iconfont.eot'); /* IE9*/
  43 + src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  44 + url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  45 + url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  46 + url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  47 +}
  48 +
  49 +.iconfont {
  50 + font-family: "iconfont" !important;
  51 + font-size: 16px;
  52 + font-style: normal;
  53 + text-decoration: none;
  54 + -webkit-font-smoothing: antialiased;
  55 + -webkit-text-stroke-width: 0.2px;
  56 + -moz-osx-font-smoothing: grayscale;
  57 +}
  58 +.icon-sharedviewicon:before {
  59 + content: "\e60c";
  60 +}
  61 +.icon-sharedtimeicon:before {
  62 + content: "\e60d";
  63 +}
  64 +.icon-sharedlikebuttomhighlighted:before {
  65 + content: "\e60f";
  66 +}
  67 +.icon-sharedenterbuttomnormal:before {
  68 + content: "\e612";
  69 +}
1 -$pxConvertRem : 40;  
2 -@import "compass";  
3 -@include global-reset();  
4 -@import "saunter/article-author", "saunter/article", "saunter/related-brand", "saunter/article-tag", "saunter/related-post";  
5 -  
6 -  
7 -body {  
8 - font-family: helvetica,Arial,"黑体";  
9 - background: #f0f0f0;  
10 -}  
11 -  
12 -.hide {  
13 - display: none;  
14 -}  
15 -  
16 -/**  
17 -* 闭合浮动  
18 -* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/  
19 -*/  
20 -  
21 -.clearfix:before,  
22 -.clearfix:after {  
23 - content: "";  
24 - display: table;  
25 -}  
26 -  
27 -.clearfix:after {  
28 - clear: both;  
29 -}  
30 -  
31 -.clearfix {  
32 - *zoom: 1; /* IE6-7 触发 hasLayout */  
33 -}  
34 -  
35 -  
36 -/**  
37 - * 字体图标样式  
38 - */  
39 -@font-face {font-family: "iconfont";  
40 - src: url('../fonts/iconfont.eot'); /* IE9*/  
41 - src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
42 - url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */  
43 - url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
44 - url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */  
45 -}  
46 -  
47 -.iconfont {  
48 - font-family: "iconfont" !important;  
49 - font-size: 16px;  
50 - font-style: normal;  
51 - -webkit-font-smoothing: antialiased;  
52 - -webkit-text-stroke-width: 0.2px;  
53 - -moz-osx-font-smoothing: grayscale;  
54 -}  
55 -.icon-sharedviewicon:before { content: "\e60c"; }  
56 -.icon-sharedtimeicon:before { content: "\e60d"; }  
57 -.icon-sharedlikebuttomhighlighted:before { content: "\e60f"; }  
58 -.icon-sharedenterbuttomnormal:before { content: "\e612"; } 1 +@import "common/common", "saunter/article-author", "saunter/article", "saunter/related-brand", "saunter/article-tag", "saunter/related-post";
59 2
60 #wrapper { 3 #wrapper {
61 position: absolute; 4 position: absolute;
@@ -19,8 +19,6 @@ @@ -19,8 +19,6 @@
19 } 19 }
20 20
21 .brand-list { 21 .brand-list {
22 - padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;  
23 - background: #fff;  
24 border-top: 1px solid #e0e0e0; 22 border-top: 1px solid #e0e0e0;
25 border-bottom: 1px solid #e0e0e0; 23 border-bottom: 1px solid #e0e0e0;
26 } 24 }
1 -$pxConvertRem : 40;  
2 -@import "compass", "common/time-view-like-share";  
3 -@include global-reset();  
4 -  
5 -  
6 -body {  
7 - font-family: helvetica,Arial,"黑体";  
8 - background: #f0f0f0;  
9 -}  
10 -  
11 -.hide {  
12 - display: none;  
13 -}  
14 -  
15 -/**  
16 -* 闭合浮动  
17 -* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/  
18 -*/  
19 -  
20 -.clearfix:before,  
21 -.clearfix:after {  
22 - content: "";  
23 - display: table;  
24 -}  
25 -  
26 -.clearfix:after {  
27 - clear: both;  
28 -}  
29 -  
30 -.clearfix {  
31 - *zoom: 1; /* IE6-7 触发 hasLayout */  
32 -}  
33 -  
34 -  
35 -/**  
36 - * 字体图标样式  
37 - */  
38 -@font-face {font-family: "iconfont";  
39 - src: url('../fonts/iconfont.eot'); /* IE9*/  
40 - src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
41 - url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */  
42 - url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
43 - url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */  
44 -}  
45 -  
46 -.iconfont {  
47 - font-family: "iconfont" !important;  
48 - font-size: 16px;  
49 - font-style: normal;  
50 - -webkit-font-smoothing: antialiased;  
51 - -webkit-text-stroke-width: 0.2px;  
52 - -moz-osx-font-smoothing: grayscale;  
53 -}  
54 -.icon-sharedviewicon:before { content: "\e60c"; }  
55 -.icon-sharedtimeicon:before { content: "\e60d"; }  
56 -.icon-sharedlikebuttomhighlighted:before { content: "\e60f"; }  
57 -.icon-sharedenterbuttomnormal:before { content: "\e612"; }  
58 - 1 +@import "common/common", "common/time-view-like-share";
59 2
60 .tag-content { 3 .tag-content {
61 margin: 30rem / $pxConvertRem 0 0 0; 4 margin: 30rem / $pxConvertRem 0 0 0;
  1 +@import "common/common", "common/brands", "common/good-info";
  2 +
  3 +body {
  4 + background-color: #f0f0f0;
  5 +}
  6 +
  7 +.template-container .tpl-block:first-child {
  8 + border-top: none;
  9 +}
  10 +
  11 +.tpl-block {
  12 + border-bottom: 1px solid #e0e0e0;
  13 + border-top: 1px solid #e0e0e0;
  14 + margin-bottom: 30rem / $pxConvertRem;
  15 + background-color: #fff;
  16 +}
  17 +
  18 +.intro .img-container {
  19 + width: 100%;
  20 + height: 304rem / $pxConvertRem;
  21 +
  22 + .img {
  23 + width: 100%;
  24 + height: 100%;
  25 + }
  26 +}
  27 +
  28 +.intro .text {
  29 + padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
  30 + padding-bottom: 0;
  31 + line-height: 46rem / $pxConvertRem;
  32 + font-size: 28rem / $pxConvertRem;
  33 + color: #444;
  34 +}
  35 +
  36 +.reco .reco-good-info {
  37 + float: left;
  38 + width: 212rem / $pxConvertRem;
  39 + border-left: 1px solid #e0e0e0;
  40 +
  41 + .thumb {
  42 + width: 100%;
  43 + height: 285rem / $pxConvertRem;
  44 + }
  45 +}
  46 +
  47 +.reco .reco-good-info:first-child {
  48 + border-left: none;
  49 +}
  50 +
  51 +.reco .reco-good-info .text-container {
  52 + padding: 10rem / $pxConvertRem 15rem / $pxConvertRem;
  53 +}
  54 +
  55 +.reco .reco-good-info .name {
  56 + display: block;
  57 + line-height: 28rem / $pxConvertRem;
  58 + text-decoration: none;
  59 + font-size: 22rem / $pxConvertRem;
  60 + color: #444;
  61 + margin-bottom: 10rem / $pxConvertRem;
  62 +}
  63 +
  64 +.reco .reco-good-info .price {
  65 + line-height: 22rem / $pxConvertRem;
  66 + font-size: 22rem / $pxConvertRem;
  67 + color: #b0b0b0;
  68 + text-decoration: line-through;
  69 +}
  70 +
  71 +.reco .reco-good-info .sale-price {
  72 + line-height: 22rem / $pxConvertRem;
  73 + font-size: 22rem / $pxConvertRem;
  74 + color: #d62927;
  75 +}
  76 +
  77 +.goods .goods-nav {
  78 + width: 100%;
  79 + padding: 20rem / $pxConvertRem 0;
  80 + border-bottom: 1px solid #e0e0e0;
  81 +}
  82 +
  83 +.nav-item {
  84 + position: relative;
  85 + display: inline-block;
  86 + color: #c0c0c0;
  87 + text-align: center;
  88 + width: 140rem / $pxConvertRem;
  89 + border-left: 1px solid #e0e0e0;
  90 + font-size: 35rem / $pxConvertRem;
  91 +
  92 + &:first-child {
  93 + border-left: none;
  94 + }
  95 +
  96 + &.focus {
  97 + color: #444;
  98 +
  99 + .iconfont {
  100 + color: #c0c0c0;
  101 + }
  102 +
  103 + .iconfont.cur {
  104 + color: #444;
  105 + }
  106 + }
  107 +}
  108 +
  109 +.sort {
  110 + position: absolute;
  111 + right: 0;
  112 + top: -14rem / $pxConvertRem;
  113 + width: 12px;
  114 + overflow: hidden;
  115 + vertical-align: top;
  116 +
  117 + i {
  118 + font-size: 10px;
  119 + position: relative;
  120 +
  121 + &.down {
  122 + top: -18rem / $pxConvertRem;
  123 + }
  124 + }
  125 +}
  126 +
  127 +.goods .goods-container {
  128 + padding: 0 14rem / $pxConvertRem;
  129 +
  130 + .goods-content {
  131 + position: relative;
  132 + padding-top: 30rem / $pxConvertRem;
  133 + min-height: 500rem / $pxConvertRem;
  134 + }
  135 +}
  136 +
  137 +.c-item {
  138 + vertical-align: top;
  139 +
  140 + .chosed {
  141 + display: inline-block;
  142 + max-width: 168rem / $pxConvertRem;
  143 + overflow: hidden;
  144 + white-space: nowrap;
  145 + text-overflow: ellipsis;
  146 + }
  147 +}
  148 +
  149 +.screen-mask, .screen-content{
  150 + position: absolute;
  151 + margin: 0 -14rem / $pxConvertRem;
  152 + left: 0;
  153 + right: 0;
  154 + top: 1px;
  155 +}
  156 +
  157 +.screen-mask {
  158 + height: 100%;
  159 + background-color: #000;
  160 + opacity: 0.1;
  161 + filter: Alpha(opacity=10);
  162 +}
  163 +
  164 +.screen-content {
  165 + z-index: 100;
  166 + background-color: #fff;
  167 + font-size: 28rem / $pxConvertRem;
  168 + color: #000;
  169 + height: 500rem / $pxConvertRem;
  170 +
  171 + .classify, .sub-classify-container {
  172 + float: left;
  173 + width: 50%;
  174 + height: 100%;
  175 + }
  176 +
  177 + .classify {
  178 + background-color: #f8f8f8;
  179 +
  180 + li {
  181 + height: 60rem / $pxConvertRem;
  182 + line-height: 60rem / $pxConvertRem;
  183 + padding: 0 30rem / $pxConvertRem 0 20rem / $pxConvertRem;
  184 +
  185 + &.active {
  186 + background-color: #fff;
  187 + }
  188 + }
  189 + }
  190 +
  191 + .classify .default {
  192 + color: #999;
  193 + }
  194 +
  195 + .sub-classify-container {
  196 + overflow: auto;
  197 +
  198 + .sub-classify {
  199 + padding-left: 15rem / $pxConvertRem;
  200 +
  201 + li {
  202 + height: 60rem / $pxConvertRem;
  203 + line-height: 60rem / $pxConvertRem;
  204 + border-bottom: 1px solid #e6e6e6;
  205 + }
  206 + }
  207 + }
  208 +}
  209 +
  210 +.sub-classify .chosed-icon {
  211 + display: none;
  212 + margin-left: 10rem / $pxConvertRem;
  213 +}
  214 +
  215 +.sub-classify li.chosed .chosed-icon {
  216 + display: inline-block;
  217 +}
@@ -4,11 +4,17 @@ @@ -4,11 +4,17 @@
4 * @date: 2015/3/27 4 * @date: 2015/3/27
5 */ 5 */
6 var saunter = require('./views/controller/saunter'), 6 var saunter = require('./views/controller/saunter'),
7 - tag = require('./views/controller/tag'); 7 + tag = require('./views/controller/tag'),
  8 + template = require('./views/controller/template');
8 9
9 module.exports = function(app) { 10 module.exports = function(app) {
10 app.get('/', saunter.show); //着陆页 11 app.get('/', saunter.show); //着陆页
11 app.get('/optimize', saunter.optimize); //优化着陆页 12 app.get('/optimize', saunter.optimize); //优化着陆页
12 13
13 app.get('/tag', tag.show); //标签页 14 app.get('/tag', tag.show); //标签页
  15 +
  16 + app.get('/tpl', template.show); //模板页
  17 + app.get('/tpl/readTpl', template.readTpl); //读取模板
  18 + app.get('/tpl/classification', template.readClassification); //读取分类数据
  19 + app.get('/tpl/search', template.search); //筛选查询
14 }; 20 };
@@ -10,7 +10,7 @@ exports.show = function(req, res) { @@ -10,7 +10,7 @@ exports.show = function(req, res) {
10 data: data, 10 data: data,
11 layout: '../layouts/layout', 11 layout: '../layouts/layout',
12 css: '../css/saunter.css', 12 css: '../css/saunter.css',
13 - usejs: 'saunter/saunter-footer' 13 + usejs: 'saunter/footer'
14 }); 14 });
15 }; 15 };
16 16
@@ -19,6 +19,6 @@ exports.optimize = function(req, res) { @@ -19,6 +19,6 @@ exports.optimize = function(req, res) {
19 data: data, 19 data: data,
20 layout: '../layouts/layout', 20 layout: '../layouts/layout',
21 css: '../css/saunter.css', 21 css: '../css/saunter.css',
22 - usejs: 'saunter/saunter-optimize-footer' 22 + usejs: 'saunter/optimize-footer'
23 }); 23 });
24 }; 24 };
@@ -10,6 +10,6 @@ exports.show = function(req, res) { @@ -10,6 +10,6 @@ exports.show = function(req, res) {
10 data: data, 10 data: data,
11 layout: '../layouts/layout', 11 layout: '../layouts/layout',
12 css: '../css/tag.css', 12 css: '../css/tag.css',
13 - usejs: 'tag/tag-footer' 13 + usejs: 'tag/footer'
14 }); 14 });
15 }; 15 };
  1 +/**
  2 + * 模板页控制器文件
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/4/14
  5 + */
  6 +var datas = require('../../public/js/data'),
  7 + data = datas('tpl'),
  8 + classification = datas('classification'),
  9 + search = datas('search'),
  10 + fs = require('fs'),
  11 + path = require('path'),
  12 + tplPath = path.normalize(path.join(__dirname, '../partials/common/good-info.html'));;
  13 +
  14 +exports.show = function(req, res) {
  15 + res.render('pages/template', {
  16 + data: data,
  17 + layout: '../layouts/layout',
  18 + css: '../css/template.css',
  19 + usejs: 'template/footer'
  20 + });
  21 +};
  22 +
  23 +exports.readTpl = function(req, res) {
  24 + fs.readFile(tplPath, 'utf8', function(err, data) {
  25 + if (err) {
  26 + res.send({
  27 + success: false
  28 + });
  29 + }
  30 +
  31 + res.send({
  32 + success: true,
  33 + data: data
  34 + });
  35 + });
  36 +};
  37 +
  38 +exports.readClassification = function(req, res) {
  39 + res.send({
  40 + success: true,
  41 + data: classification
  42 + });
  43 +};
  44 +
  45 +exports.search = function(req, res) {
  46 + res.send({
  47 + success: true,
  48 + data: {
  49 + end: false, //数据是否结束
  50 + goods: search //商品数据
  51 + }
  52 + });
  53 +};
  1 +<div class="template-container">
  2 + {{# data}}
  3 + <div class="tpl-block clearfix {{# introduction}}intro{{/ introduction}}{{# recommendation}}reco{{/ recommendation}}{{# goods}}goods{{/ goods}}">
  4 + {{# introduction.items}}
  5 + {{# img}}
  6 + <div class="img-container">
  7 + <img class="img lazy" data-original="{{src}}" alt="{{alt}}">
  8 + </div>
  9 + {{/ img}}
  10 + {{# text}}
  11 + <p class="text">{{.}}</p>
  12 + {{/ text}}
  13 + {{> common/brands}}
  14 + {{/ introduction.items}}
  15 + {{# recommendation.recos}}
  16 + <div class="reco-good-info">
  17 + <div class="img-container">
  18 + <a href="{{url}}">
  19 + <img class="thumb lazy" data-original="{{thumb}}">
  20 + </a>
  21 + </div>
  22 + <div class="text-container">
  23 + <a class="name" href="{{url}}">{{name}}</a>
  24 + <div class="sale-price">
  25 + ￥{{salePrice}}
  26 + </div>
  27 + <div class="price">
  28 + ￥{{price}}
  29 + </div>
  30 + </div>
  31 + </div>
  32 + {{/ recommendation.recos}}
  33 +
  34 + {{# goods}}
  35 + <div class="goods-container">
  36 + <ul id="goods-nav" class="goods-nav">
  37 + <li class="nav-item new-patterns-nav focus">最新</li>
  38 + <li class="nav-item sales-volume-nav">
  39 + 销量
  40 + <span class="sort">
  41 + <i class="up iconfont">&#xe608;</i>
  42 + <i class="down iconfont cur">&#xe609;</i>
  43 + </span>
  44 + </li>
  45 + <li class="nav-item price-nav">
  46 + 价格
  47 + <span class="sort">
  48 + <i class="up iconfont cur">&#xe608;</i>
  49 + <i class="down iconfont">&#xe609;</i>
  50 + </span>
  51 + </li>
  52 + <li class="nav-item screen-nav">筛选</li>
  53 + </ul>
  54 + <div id="goods-content" class="goods-content clearfix">
  55 + <div class="new-patterns-container">
  56 + {{# newPatterns}}
  57 + {{> common/good_info}}
  58 + {{/ newPatterns}}
  59 + </div>
  60 + <div class="sales-volume-container hide">
  61 + {{# salesVolume}}
  62 + {{> common/good_info}}
  63 + {{/ salesVolume}}
  64 + </div>
  65 + <div class="price-container hide">
  66 + {{# price}}
  67 + {{> common/good_info}}
  68 + {{/ price}}
  69 + </div>
  70 + <div id="screen-mask" class="screen-mask hide"></div>
  71 + <div id="screen-content" class="screen-content hide">
  72 + <ul class="classify">
  73 + <li class="brand c-item active">
  74 + 品牌：
  75 + <h1 id="show-brand" class="chosed default">所有品牌</h1>
  76 + </li>
  77 + <li class="msort c-item">
  78 + 品类：
  79 + <h1 id="show-msort" class="chosed default">所有品类</h1>
  80 + </li>
  81 + <li class="color c-item">
  82 + 颜色：
  83 + <h1 id="show-color" class="chosed default">所有颜色</h1>
  84 + </li>
  85 + <li class="size c-item">
  86 + 尺码：
  87 + <h1 id="show-size" class="chosed default">所有尺码</h1>
  88 + </li>
  89 + <li class="price c-item">
  90 + 价格：
  91 + <h1 id="show-price" class="chosed default">所有价格</h1>
  92 + </li>
  93 + <li class="discount c-item">
  94 + 折扣：
  95 + <h1 id="show-discount" class="chosed default">所有折扣</h1>
  96 + </li>
  97 + </ul>
  98 + <div class="sub-classify-container">
  99 + <ul id="sub-brand" class="sub-classify" data-type="brand"></ul>
  100 + <ul id="sub-msort" class="sub-classify hide" data-type="msort"></ul>
  101 + <ul id="sub-color" class="sub-classify hide" data-type="color"></ul>
  102 + <ul id="sub-size" class="sub-classify hide" data-type="size"></ul>
  103 + <ul id="sub-price" class="sub-classify hide" data-type="price"></ul>
  104 + <ul id="sub-discount" class="sub-classify hide" data-type="discount"></ul>
  105 + </div>
  106 + </div>
  107 + </div>
  108 + </div>
  109 + {{/ goods}}
  110 + </div>
  111 + {{/ data}}
  112 +</div>
1 {{# brands}} 1 {{# brands}}
2 - <li class="brand">  
3 - <a href="{{url}}">  
4 - <div class="brand-logo">  
5 - <img class="lazy" data-original="{{thumb}}" alt="">  
6 - </div>  
7 - <p class="brand-name">{{name}}</p>  
8 - </a>  
9 - </li> 2 + <ul class="brand-list clearfix">
  3 + {{# list}}
  4 + <li class="brand">
  5 + <a href="{{url}}">
  6 + <div class="brand-logo">
  7 + <img class="lazy" data-original="{{thumb}}" alt="">
  8 + </div>
  9 + <p class="brand-name">{{name}}</p>
  10 + </a>
  11 + </li>
  12 + {{/ list}}
  13 + </ul>
10 {{/ brands}} 14 {{/ brands}}
1 <div class="related-brand"> 1 <div class="related-brand">
2 <h2>相关品牌</h2> 2 <h2>相关品牌</h2>
3 - <ul class="brand-list clearfix">  
4 - {{> common/brands}}  
5 - </ul> 3 + {{> common/brands}}
6 </div> 4 </div>