feat(controller): 商品排序

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

@@ -75,15 +75,6 @@
                             '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"
@@ -107,6 +98,7 @@
                                         v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                         v-bind:fill="temp.data.fill"
                                         v-bind:isDIY="true"
+                                        v-bind:is-rank="true"
                                         v-on:buyProduct="buyProduct"
                                         :theme-object="themeObject"
                                     >
@@ -720,38 +712,6 @@
                 mp_link_top: false,
                 coupon_url: this.$api.diy.receive,
                 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',
-                }]
             };
         },
 
@@ -838,61 +798,6 @@
             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('created_at',item.rank_type,'time'))
-                        break;
-                    default:
-                        goods_list.sort(_this.compare('id',item.rank_type))
-                }
-            },
-            compare (property,type,fieldsType){
-                let regex = /\d+/;
-                return function (obj1, obj2) {
-                    if(fieldsType == 'time'){
-                        obj1[property] = new Date(obj1[property]).getTime();
-                        obj2[property] = new Date(obj2[property]).getTime();
-                    }
-                    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;     // 降序
-
-                }
-            }
         }
     }
 </script>
@@ -965,29 +870,4 @@
             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: center;
-            &.active{
-                font-weight: 600;
-                font-size: 32rpx;
-            }
-            text{
-                font-size: 28rpx;
-                margin-right: 10rpx;
-            }
-            image{
-                width: 20rpx;
-                height: 30rpx;
-            }
-        }
-    }
 </style>

components/page-component/u-goods-list/u-ordinary-list.vue

@@ -1,5 +1,14 @@
 <template>
     <view class="u-list" v-show="is_show_off">
+        <!--排序-->
+        <view class="goods-rank" v-if="isRank">
+            <view class="item" :class="rr.is_choose?'active':''" v-for="(rr,rrindex) in goods_rank"
+                  :key="rrindex" @click="changeRank(rr,goodsList)">
+                <text>{{rr.name}}</text>
+                <image :src="rr[rr.rank_type+'_img']"
+                       v-if="rr.is_rank"></image>
+            </view>
+        </view>
         <!--分类-->
         <template v-if="showCat && catList.length > 1">
             <scroll-view scroll-x v-bind:class="[theme, 'u-scroll-view', 'dir-left-nowrap']">
@@ -445,6 +454,11 @@
             activity: {
                 type: Object
             },
+            // 是否排序
+            isRank: {
+                type: Boolean,
+                default: true
+            },
             // 是否为DIY
             isDIY: {
                 type: Boolean,
@@ -690,10 +704,98 @@
                 // 临时列表
                 tempList: [],
                 // 商品数组
-                goodsList: []
+                goodsList: [],
+                // 排序
+                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',
+                }]
             }
         },
         methods: {
+            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(typeof goods_list.old == "undefined" || !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('created_at',item.rank_type,'time'))
+                        break;
+                    default:
+                        goods_list.sort(_this.compare('id',item.rank_type))
+                }
+            },
+            compare (property,type,fieldsType){
+                let regex = /\d+/;
+                return function (obj1, obj2) {
+                    if(fieldsType == 'time'){
+                        obj1[property] = new Date(obj1[property]).getTime();
+                        obj2[property] = new Date(obj2[property]).getTime();
+                    }
+                    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;     // 降序
+
+                }
+            },
             // 复制而不是引用对象和数组
             cloneData(data) {
                 return JSON.parse(JSON.stringify(data));
@@ -1147,4 +1249,29 @@
             font-size: 22upx;
         }
     }
+    .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: center;
+            &.active{
+                font-weight: 600;
+                font-size: 32rpx;
+            }
+            text{
+                font-size: 28rpx;
+                margin-right: 10rpx;
+            }
+            image{
+                width: 20rpx;
+                height: 30rpx;
+            }
+        }
+    }
 </style>