排序

components/page-component/index/app-diy-page.vue

@@ -75,6 +75,15 @@
                             'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                             'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                         ]">
+                                <!--排序-->
+                                <view class="goods-rank">
+                                    <view class="item" :class="rr.is_choose?'active':''" v-for="(rr,rrindex) in goods_rank"
+                                          :key="rrindex" @click="changeRank(rr,temp.data.list)">
+                                        <text>{{rr.name}}</text>
+                                        <image :src="rr[rr.rank_type+'_img']"
+                                               v-if="rr.is_rank"></image>
+                                    </view>
+                                </view>
                                 <template v-if="temp.data.catPosition === 'top'">
                                     <u-ordinary-list
                                         v-bind:theme="theme"
@@ -710,7 +719,39 @@
                 nav_active: 0,
                 mp_link_top: false,
                 coupon_url: this.$api.diy.receive,
-                coupon_params: {}
+                coupon_params: {},
+                goods_rank:[{
+                    name:'综合',
+                    is_rank:false,
+                    is_choose: true,
+                },{
+                    name:'销量',
+                    is_rank:true,
+                    is_choose: false,
+                    rank_type:'default',
+                    key:'sale',
+                    default_img:'../../../static/image/icon/price-sort-default.png',
+                    top_img:'../../../static/image/icon/price-sort-to-high.png',
+                    low_img:'../../../static/image/icon/price-sort-to-low.png',
+                },{
+                    name:'价格',
+                    is_rank:true,
+                    is_choose: false,
+                    rank_type:'default',
+                    key:'price',
+                    default_img:'../../../static/image/icon/price-sort-default.png',
+                    top_img:'../../../static/image/icon/price-sort-to-high.png',
+                    low_img:'../../../static/image/icon/price-sort-to-low.png',
+                },/*{
+                    name:'最新上架',
+                    is_rank:true,
+                    is_choose: false,
+                    rank_type:'default',
+                    key:'time',
+                    default_img:'../../../static/image/icon/price-sort-default.png',
+                    top_img:'../../../static/image/icon/price-sort-to-high.png',
+                    low_img:'../../../static/image/icon/price-sort-to-low.png',
+                }*/]
             };
         },
 
@@ -796,6 +837,57 @@
 
             buyProduct(data) {
                 this.$emit('buyProduct', data);
+            },
+            changeRank(item,goods_list){
+                let _this = this;
+                _this.goods_rank.forEach(val => {
+                    if(item.key == val.key){
+                        val.is_choose = true;
+                        switch ( val.rank_type) {
+                            case 'default':
+                            case 'top':
+                                val.rank_type = 'low';
+                                break;
+                            case 'low':
+                                val.rank_type = 'top';
+                                break;
+                        }
+                    }else{
+                        val.is_choose = false;
+                        val.rank_type = 'default';
+                    }
+                });
+                if(!goods_list.old){
+                    goods_list.old = JSON.stringify(goods_list)
+
+                }
+                switch (item.key) {
+                    case 'sale':
+                        goods_list.sort(_this.compare('sales',item.rank_type))
+                        break;
+                    case 'price':
+                        goods_list.sort(_this.compare('price',item.rank_type))
+                        break;
+                    case 'time':
+                        goods_list.sort(_this.compare('age',item.rank_type))
+                        break;
+                    default:
+                        goods_list.sort(_this.compare('id',item.rank_type))
+                }
+            },
+            compare (property,type){
+                let regex = /\d+/;
+                return function (obj1, obj2) {
+                    let value1 = regex.exec(obj1[property]);
+                    let value2 = regex.exec(obj2[property]);
+                    value1 = value1[0];
+                    value2 = value2[0];
+                    if(type == 'top'){
+                        return value1 - value2;     // 升序
+                    }
+                    return value2 - value1;     // 降序
+
+                }
             }
         }
     }
@@ -869,4 +961,29 @@
             margin-top: #{168rpx};
         }
     }
+    .goods-rank{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20rpx 30rpx;
+        margin-bottom: -20rpx;
+        .item{
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            &.active{
+                font-weight: 600;
+                font-size: 32rpx;
+            }
+            text{
+                font-size: 28rpx;
+                margin-right: 10rpx;
+            }
+            image{
+                width: 20rpx;
+                height: 30rpx;
+            }
+        }
+    }
 </style>