实现tab筛选状态存储

@@ -23,7 +23,6 @@
             {{/each}}
         </div>
         <div id='fixedTab' class="tab-filter">
-            {{!-- {{#if floatTab}} float{{/if}}{{#if !tabs.showTab}} only-filter{{/if}} --}}
             {{#if tabs.showTab}}
             <div class="tab group-tab">
                 <div class="tab-item">

@@ -7,7 +7,7 @@
     </li> --}}
     <li class="new active" data-type="new" data-order="s_t_desc">
         <a href="javascript:void(0);">
-            <span class="span-test">新品</span>
+            <span class="span-test">最新</span>
         </a>
     </li>
     <li class="popularity" data-type="popularity" data-order="h_v_desc">

@@ -21,33 +21,35 @@ class Group extends Page {
         };
         this.navInfo = {
             new: {
-                order: 1,
                 reload: true,
                 page: 1,
                 end: false
             },
             popularity: {
-                order: 1,
                 reload: true,
-                page: 1,
+                page: 0,
                 end: false
             },
             price: {
-                order: 1,
+                order: 's_p_asc',
                 reload: true,
                 page: 0,
                 end: false
             }
         };
         this.noResult = '<p class="no-result">未找到相关搜索结果</p>';
-        this.$pre = this.selector.filterTab.find('.active');
+
+
+
         this.selectedChannel = 'newGroup';
         this.filterTab = {
             newGroup: {
+                $pre: this.selector.filterTab.find('.active'), // 记录新团筛选tab的激活项
                 joinLimit: 1,
                 order: 's_t_desc'
             },
             normalGroup: {
+                $pre: this.selector.filterTab.find('.active'), // 记录普通团筛选tab的激活项
                 joinLimit: 2,
                 order: 's_t_desc'
             }
@@ -94,38 +96,68 @@ class Group extends Page {
     }
     filterTabChange(e) {
         let $this = $(e.currentTarget);
-        let order = $this.data('order');
         let navType = $this.data('type');
         let currentChannel = this.selectedChannel;
         let nav = this.navInfo[navType];
 
-        if ($this.hasClass('new') || $this.hasClass('popularity')) {
-            this.selector.filterTab.children('li').removeClass('active');
-            $this.addClass('active');
-            this.filterTab[currentChannel].order = order;
+        this.selector.filterTab.children('li').removeClass('active');
+        $this.addClass('active');
+        this.filterTab[currentChannel].$pre = $this;
 
-            this.search();
+        // 最新和人气
+        if ($this.hasClass('new') || $this.hasClass('popularity')) {
+            nav.reload = true;
+            nav.order = $this.data('order');
+            this.filterTab[currentChannel].order = nav.order;
         }
-        if ($this.hasClass('price') || $this.hasClass('discount')) {
 
-            // 价格/折扣切换排序状态
+        // 价格切换排序状态
+        if ($this.hasClass('price')) {
             $this.find('.icon > .iconfont').toggleClass('cur');
-            nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
-            nav.order = nav.order === 0 ? 1 : 0; // 切换排序
-
-
+            nav.reload = true;
+            nav.order = nav.order === 's_p_asc' ? 's_p_desc' : 's_p_asc'; // 切换排序
+            this.filterTab[currentChannel].order = nav.order;
         }
+        this.search();
     }
 
     groupTabChange(e) {
         let target = $(e.target);
         let channel = target.data('channel');
+        let navInfo = this.navInfo;
+        let filterTab = this.filterTab[channel];
 
+        // 切换tab
         if (!target.hasClass('active')) {
             this.selector.groupTab.find('.tiptext').removeClass('active');
             target.addClass('active');
         }
         this.selectedChannel = channel;
+
+        // 筛选tab状态重置
+        for (let i in navInfo) {
+            if (navInfo.hasOwnProperty(i)) {
+                navInfo[i].reload = true;
+                navInfo[i].end = false;
+
+                if (navInfo[i].hasOwnProperty('order')) {
+                    navInfo[i].order = 's_p_asc';
+                }
+            }
+        }
+        this.selector.filterTab.children('li').removeClass('active');
+        filterTab.$pre.addClass('active');
+
+        // 价格筛选状态设置
+        if (filterTab.$pre.hasClass('price')) {
+            navInfo.price.order = filterTab.order;
+            filterTab.$pre.find('.icon > .iconfont').removeClass('cur');
+            if (navInfo.price.order === 's_p_asc') {
+                filterTab.$pre.find('.icon > .up').addClass('cur');
+            } else {
+                filterTab.$pre.find('.icon > .down').addClass('cur');
+            }
+        }
         this.search();
     }
 
@@ -154,7 +186,7 @@ class Group extends Page {
     search() {
         let params = this.filterTab[this.selectedChannel];
 
-        console.log(params);
+        console.log(params, this.navInfo.price);
 
         // let setting;
 

@@ -34,6 +34,10 @@
             &.cur {
                 color: #000;
             }
+
+            &.drop {
+                color: #000;
+            }
         }
     }
 
@@ -70,3 +74,103 @@
         }
     }
 }
+
+.filter-mask,
+.filter-body {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+}
+
+.filter-mask {
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.filter-body {
+    height: 1000px;
+    background: #fff;
+    color: #000;
+    font-size: 28px;
+    cursor: pointer;
+
+    .classify {
+        width: 50%;
+        height: 100%;
+        background: #f8f8f8;
+
+        > li {
+            height: 120px;
+            line-height: 120px;
+
+            > * {
+                box-sizing: border-box;
+            }
+
+            &.active {
+                background: #fff;
+            }
+
+            .shower {
+                overflow: hidden;
+                padding-left: 40px;
+                width: 100%;
+                color: #333;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                &.highlight {
+                    background: #eee;
+                }
+            }
+
+            .default {
+                color: #999;
+            }
+
+            .title {
+                float: left;
+                color: #000;
+            }
+        }
+    }
+
+    .sub-classify {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        display: none;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        width: 50%;
+        height: 880px;
+
+        > li {
+            overflow: hidden;
+            padding-left: 30px;
+            height: 120px;
+            border-bottom: 1px solid #e6e6e6;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 120px;
+
+            &.highlight {
+                background: #eee;
+            }
+        }
+
+        .chosed-icon {
+            display: none;
+        }
+
+        .chosed .chosed-icon {
+            display: inline;
+        }
+    }
+
+    .active > .sub-classify {
+        display: block;
+    }
+}