商品列表页修改

@@ -37,7 +37,7 @@
         </li>
     </ul>
 
-    <div class="goods-box">
+    <div class="goods-box list-items">
         <ul class="cardlist card-large clearfix">
             {{#list}}
                 <li class="card">

@@ -25,6 +25,4 @@ $(function() {
     };
 
     let app = new Vue(search);
-
-    app.orderConfig = buildOrder();
 });

+<template>
+    <div class="top-filter clearfix">
+        <ul class="filter-type">
+            <li class="type-item" @click="toggleRec">推荐<i class="icon" :class="recClass"></i></li>
+            <li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>
+        </ul>
+        <div class="recommend-detail" v-show="!recDown">
+            <ul class="rec-items">
+                <li class="item active">推荐</li>
+                <li class="item">新品</li>
+                <li class="item">价格从高到低</li>
+                <li class="item">价格从低到高</li>
+            </ul>
+        </div>
+        <div class="recommend-detail" v-show="!filterDown">
+            <ul class="rec-items">
+                <li class="item">价格从高到低</li>
+                <li class="item">价格从低到高</li>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+const bus = require('common/vue-bus');
+
+module.exports = {
+    props: {
+        val: String
+    },
+    data(){
+        return {
+            recDown: true,
+            filterDown: true
+        }
+    },
+    components: {
+        simple,
+        updown
+    },
+    computed: {
+        recClass(){
+            return {
+                down: this.recDown,
+                'icon-sort-up': !this.recDown,
+                'icon-sort-down': this.recDown
+            }
+        },
+        filterClass(){
+            return {
+                down: this.filterDown,
+                'icon-sort-up': !this.filterDown,
+                'icon-sort-down': this.filterDown
+            }
+        }
+    },
+    methods: {
+        toggleRec(){
+            this.filterDown = true;
+            this.recDown = !this.recDown;
+
+        },
+        toggleFilter(){
+            this.recDown = true;
+            this.filterDown = !this.filterDown;
+        }
+    },
+    watch: {
+        val: function(newVal) {
+            bus.$emit('order.change', {
+                val: newVal,
+                ref: this._uid
+            });
+        }
+    }
+};
+</script>
+<style>
+@import "../../../scss/common/_color.css";
+
+.top-filter {
+    position: relative;
+    height: 81px;
+    border-bottom: 1px solid #eee;
+
+    .filter-type {
+        font-size: 0;
+        list-style: none;
+        padding: 16px 30px 0;
+
+        .type-item {
+            display: inline-block;
+            width: 344px;
+            font-size: 32px;
+            text-align: center;
+            font-weight: bold;
+            border-right: 1px solid $grey;
+
+            &:nth-child(2n) {
+                 border-right: none;
+            }
+        }
+
+        .icon {
+            position: relative;
+            top: 14px;
+            left: 20px;
+            font-size: 40px;
+            font-weight: bold;
+
+            &.down {
+                top: -10px;
+            }
+        }
+    }
+
+    .recommend-detail {
+        position: absolute;
+        top: 81px;
+        left: 0;
+        right: 0;
+    }
+
+    .rec-items {
+        .item {
+            height: 90px;
+            color: $black;
+            font-size: 32px;
+            text-align: center;
+            line-height: 89px;
+            border-bottom: 1px solid #eee;
+            background-color: #fff;
+
+            &.active {
+                 background: $grey;
+            }
+        }
+    }
+}
+</style>

@@ -4,8 +4,8 @@
             <i v-if="isiOS" class="icon icon-filter" slot="right" @touchstart="openFilter"></i>
             <i v-else class="icon icon-filter" slot="right" @click="openFilter"></i>
         </cheader>
-        <order :config="orderConfig" :val="order" v-if="enableOrder"></order>
-        <List :data="productList" :state="listState"></List>
+        <list-filter :val="order" v-if="enableOrder"></list-filter>
+        <List :data="productList" :state="listState" class="list-items"></List>
         <Filter :config="filterConfig" v-ref:filter></Filter>
         <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag>
     </div>
@@ -20,7 +20,7 @@
     const bus = require('common/vue-bus');
     const tip = require('common/tip');
     const cheader = require('component/header.vue');
-    const order = require('component/product/order.vue');
+    const listFilter = require('component/product/list-filter.vue');
     const list = require('component/product/list.vue');
     const filter = require('component/product/filter.vue');
     const shoppingBag = require('component/product/shopping-bag.vue');
@@ -82,7 +82,7 @@
         components: {
             cheader,
             list,
-            order,
+            listFilter,
             filter,
             shoppingBag
         },
@@ -194,6 +194,7 @@
                 this.refreshCart();
                 bus.$on('app.shoppingcart.refresh', this.refreshCart);
             }
+
         }
     };
 
@@ -202,4 +203,8 @@
     .list-header {
         background-color: white;
     }
+
+    .list-items {
+        padding-top: 30px;
+    }
 </style>

@@ -2,7 +2,7 @@
     <div>
         <Order :config="orderConfig" :val="order" v-if="enableOrder">
         </Order>
-        <List :data="productList" :state="listState"></List>
+        <List :data="productList" :state="listState" class="list-items"></List>
     </div>
 </template>
 <script>
@@ -142,3 +142,8 @@
         }
     };
 </script>
+<style>
+    .list-items {
+        padding-top: 30px;
+    }
+</style>