商品列表筛选组件修改

@@ -22,6 +22,7 @@
 
 
 .product-item .item-price .price2 {
 .product-item .item-price .price2 {
     color: #444;
     color: #444;
+    margin-left: 10rpx;
     text-decoration: line-through;
     text-decoration: line-through;
 }
 }
 
 

@@ -4,5 +4,65 @@ Component({
             type: Object,
             type: Object,
             value: {}
             value: {}
         }
         }
+    },
+    data: {
+        curSortType: 'def',
+        curSortField: '',
+        curGender: '',
+        showSubGender: false,
+        subFilterText: '筛选'
+    },
+    methods: {
+        sortChange: function ({target}) {
+            const sort = target.dataset.sort;
+            
+            const setSort = field => {
+                if (sort === this.data.curSortType && sort !== 'price') {
+                    return;
+                }
+                this.setData({
+                    curSortType: sort,
+                    curSortField: field,
+                    showSubGender: false
+                });
+                this.triggerEvent('sortchange', {curSort: field, gender: this.data.curGender})
+            };
+
+            switch (sort) {
+                case 'def':
+                    setSort('');
+                    break;
+                case 'time':
+                    setSort('s_t_desc');
+                    break;
+                case 'popular':
+                    setSort('s_n_asc');
+                    break;
+                case 'price':
+                    setSort(this.data.curSortField === 's_p_asc' ? 's_p_desc' : 's_p_asc');
+                    break;
+                default:
+                    break;
+            }
+
+        },
+        subFilterGenderTap: function (e) {
+            this.setData({
+                showSubGender: !this.data.showSubGender
+            });
+        },
+        selectGenderTap: function (e) {
+            const gender = e.target.dataset.gender;
+            
+            if (gender) {
+                this.setData({
+                    curGender: gender,
+                    showSubGender: false,
+                    subFilterText: gender === '1,3' ? '男生' : '女生' 
+                });
+            }
+
+            this.triggerEvent('sortchange', {curSort: this.data.curSortField, gender})
+        }
     }
     }
 });
 });

 <view class="product-list-filter">
 <view class="product-list-filter">
-    <ul class="filter-items">
-        <li class="item active">默认</li>
-        <li class="item">新品</li>
-        <li class="item">人气</li>
-        <li class="item">价格</li>
-        <li class="item">筛选</li>
+    <ul class="filter-items" bindtap="sortChange">
+        <li class="item {{curSortType == 'def' ? 'active' : ''}}" data-sort="def">默认</li>
+        <li class="item {{curSortType == 'time' ? 'active' : ''}}" data-sort="time">新品</li>
+        <li class="item {{curSortType == 'popular' ? 'active' : ''}}" data-sort="popular">人气</li>
+        <li class="item {{curSortType == 'price' ? 'active' : ''}}" data-sort="price">价格</li>
+        <li class="item {{curGender ? 'active' : ''}}" catchtap="subFilterGenderTap">{{subFilterText}}</li>
     </ul>
     </ul>
+    <view wx:if="{{showSubGender}}" class="sub-gender" bindtap="selectGenderTap">
+        <view class="gender-item {{curGender == '1,3' ? 'active' : ''}}" data-gender="1,3">男生/BOYS</view>
+        <view class="gender-item {{curGender == '2,3' ? 'active' : ''}}" data-gender="2,3">女生/GIRLS</view>
+    </view>
 </view>
 </view>

 .product-list-filter {
 .product-list-filter {
+    position: relative;
     font-size: 0;
     font-size: 0;
     height: 88rpx;
     height: 88rpx;
     line-height: 88rpx;
     line-height: 88rpx;
@@ -9,6 +10,7 @@
 }
 }
 
 
 .product-list-filter .item {
 .product-list-filter .item {
+    position: relative;
     flex: 1;
     flex: 1;
     font-family: PingFang-SC-Regular;
     font-family: PingFang-SC-Regular;
     text-align: center;
     text-align: center;
@@ -17,6 +19,57 @@
     letter-spacing: 0.33px;
     letter-spacing: 0.33px;
 }
 }
 
 
+.product-list-filter .item:after {
+    display: inline-block;
+    content: '';
+    height: 50rpx;
+    width: 1rpx;
+    position: absolute;
+    top: 19rpx;
+    right: 0;
+    background-color: #eee;
+    transform: scaleX(0.5);
+}
+
+.product-list-filter .item:last-child:after {
+    display: inline-block;
+    content: '';
+    height: 0;
+    width: 0;
+}
+
 .product-list-filter .item.active {
 .product-list-filter .item.active {
     color: #444;
     color: #444;
 }
 }
+
+.product-list-filter .sub-gender {
+    position: absolute;
+    top: 88rpx;
+    left: 0;
+    right: 0;
+    font-size: 28rpx;
+    background-color: #fff;
+    text-align: center;
+}
+
+.product-list-filter .sub-gender .gender-item {
+    height: 90rpx;
+    color: #b0b0b0;
+    position: relative;
+}
+
+.product-list-filter .sub-gender .gender-item.active {
+    color: #444;
+}
+
+.product-list-filter .sub-gender .gender-item:after {
+    display: inline-block;
+    content: '';
+    height: 1rpx;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #eee;
+    transform: scaleY(0.5);
+}

@@ -237,5 +237,8 @@ Page({
         // wx.navigateTo({
         // wx.navigateTo({
         //     url: '../goodsDetail/goodsDetail?productSkn=' + productSkn + '&page_name=' + 'home' + '&page_param=' + ''
         //     url: '../goodsDetail/goodsDetail?productSkn=' + productSkn + '&page_name=' + 'home' + '&page_param=' + ''
         // });
         // });
+    },
+    sortChange: function (e) {
+        console.log(e.detail);
     }
     }
 });
 });

@@ -11,7 +11,7 @@
     <view class="recommend-product">
     <view class="recommend-product">
         <view-title title="推荐商品" height="88"></view-title>
         <view-title title="推荐商品" height="88"></view-title>
         <view class="filter">
         <view class="filter">
-            <product-list-filter></product-list-filter>
+            <product-list-filter bind:sortchange="sortChange"></product-list-filter>
         </view>
         </view>
         <view class="list"><product-list></product-list></view>
         <view class="list"><product-list></product-list></view>
     </view>
     </view>