Merge branch 'master' of ssh://10.10.101.21/source/mall-web-ssr into HEAD

搜索页面调整，分页组件调整

components/common/page/pageComponent.vue

@@ -1,32 +1,22 @@
 <template>
-  <page :total="total" :page-size="pageSize" :current="current"
-        show-elevator v-on:on-change="listenPage"></page>
+  <div style="float: right;">
+    <el-pagination
+      :current-page.sync="current"
+      :page-size="pageSize"
+      layout="prev, pager, next, jumper"
+      :total="total"
+      @current-change="handleCurrentChange">
+    </el-pagination>
+  </div>
 </template>
 
 <script>
-  import Page from 'iview/src/components/page'
   export default {
-    props: {
-      current: {
-        default: 1
-      },
-      total: {
-        default: 100
-      },
-      pageSize: {
-        default: 10
-      },
-      showType: {
-        default: 'show-elevator'
-      }
-    },
+    props: ['current', 'total', 'pageSize'],
     methods: {
-      listenPage: function (changedPage) {
+      handleCurrentChange: function (changedPage) {
         this.$emit('childEvent', changedPage)
       }
-    },
-    components: {
-      Page
     }
   }
 </script>
@@ -40,188 +30,33 @@
     cursor: pointer;
     transition: color .2s ease;
   }
-  .ivu-page-item-jump-next, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
-    display: inline-block;
-    vertical-align: middle;
-    min-width: 32px;
-    height: 32px;
-    line-height: 30px;
-    list-style: none;
-    text-align: center;
-    cursor: pointer;
-    color: #666;
-    font-family: Arial;
-    border: 1px solid #dddee1;
-    border-radius: 4px;
-    transition: all .2s ease-in-out;
-}
-  .ivu-icon {
-    display: inline-block;
-    font-family: Ionicons;
-    speak: none;
-    font-style: normal;
-    font-weight: 400;
-    font-variant: normal;
-    text-transform: none;
-    text-rendering: auto;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .ivu-icon-ios-arrow-left{
-    display: inline-block;
-    font: normal normal normal 14px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .ivu-icon-ios-arrow-left:before{
-    content: "\f060";
-  }
-  .ivu-icon-ios-arrow-right{
-    display: inline-block;
-    font: normal normal normal 14px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .ivu-icon-ios-arrow-right:before{
-    content: "\f054";
-  }
-  .ivu-page-disabled:hover a {
-    color: #ccc;
-    cursor: not-allowed;
-  }
-  .ivu-page-next{
-    content: '<';
-  }
-  .ivu-page-next, .ivu-page-prev {
-    background-color: #fff;
-  }
-  .ivu-page-next a, .ivu-page-prev a {
-    color: #666;
-    font-size: 14px;
-  }
-  .ivu-icon {
-    display: inline-block;
-    font-family: Ionicons;
-    speak: none;
-    font-style: normal;
-    font-weight: 400;
-    font-variant: normal;
-    text-transform: none;
-    text-rendering: auto;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .ivu-page-item-active {
-    background-color: #2d8cf0;
-    border-color: #2d8cf0;
-  }
-  .ivu-page-item {
-    display: inline-block;
-    vertical-align: middle;
-    min-width: 32px;
-    height: 32px;
-    line-height: 30px;
-    margin-right: 4px;
-    text-align: center;
-    list-style: none;
-    background-color: #fff;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    font-family: Arial;
-    border: 1px solid #dddee1;
-    border-radius: 4px;
-    transition: border .2s ease-in-out,color .2s ease-in-out;
-  }
-  .ivu-page-item-active a {
-    color: #fff;
-  }
-  .ivu-page-item a {
-    margin: 0 6px;
+  .el-pager li{
+    color: #337ab7;
     text-decoration: none;
-    color: #495060;
-  }
-  .ivu-page-options {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 15px;
-  }
-  .ivu-page-options-elevator {
-    display: inline-block;
-    vertical-align: middle;
-    height: 32px;
-    line-height: 32px;
-  }
-  .ivu-page-options-elevator input {
-    display: inline-block;
-    width: 100%;
-    height: 32px;
-    line-height: 1.5;
-    padding: 4px 7px;
-    font-size: 12px;
-    border: 1px solid #dddee1;
-    color: #495060;
     background-color: #fff;
-    background-image: none;
-    position: relative;
-    cursor: text;
-    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
-    border-radius: 4px;
-    margin: 0 8px;
-    width: 50px;
-  }
-
-
-
-  .ivu-page{
-    display: inline-block;
-    padding-left: 0;
-    margin: 20px 0;
-    border-radius: 4px;
-    float: right;
-  }
-  .ivu-page >li{
-    margin: 0!important;
+    border: 1px solid #ddd;
+    font-size: 10px;
   }
-  .ivu-page >li:hover{
+  .el-pager li:not(.active):hover {
+    z-index: 3;
     color: #23527c;
     background-color: #eee;
+    border-color: #ddd;
   }
-
-  .ivu-page-item-jump-next, .ivu-page-item, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
-    width: 33.64px;
-    height: 30.8px!important;
-    font-family: normal!important;
-    border: 1px solid #ddd!important;
-    border-radius: 0px!important;
+  .el-pager li.active {
+    background: #5078cb!important;
   }
-  .ivu-page >li >a{
-    color: #337ab7;
-    font-size: 12px;
+  .el-icon-arrow-left:before {
+    content: "\f100";
+    font-family: FontAwesome;
   }
-
-  .ivu-page-item-active{
-    background-color: #5078cb!important;
-    border-color: #5078cb!important;
-    cursor: default!important;
+  .el-icon-arrow-right:before {
+    content: "\f101";
+    font-family: FontAwesome;
   }
-  .ivu-page-item-active >a{
-    color: #fff!important;
-    cursor: default!important;
-  }
-  .ivu-page-options-elevator input {
-    width: 33.64px!important;
-    height: 30.8px!important;
-    text-align: center;
-
+  .el-pagination button.disabled {
+    color: #337ab7;
+    background-color: #fff;
+    cursor: not-allowed;
   }
-
 </style>

components/home/Carousel.vue

@@ -29,7 +29,7 @@
           autoplay: 6000,
           pagination: '.swiper-pagination',
           paginationClickable: true,
-          mousewheelControl: true,
+          mousewheelControl: false,
           effect: 'fade',
           lazyLoading: true,
           prevButton: '.swiper-button-prev',

components/news/Right.vue

@@ -20,13 +20,13 @@
         </div>
       </div>
     </div>
-    <!--<page :total="totalCount" :page-size="pageSize"
-          :current="nowPage" v-on:childEvent="listenPage"></page>-->
+    <page :total="totalCount" :page-size="pageSize"
+          :current="nowPage" v-on:childEvent="listenPage"></page>
   </div>
 </template>
 
 <script>
-  // import Page from '~components/common/page/pageComponent.vue'
+  import Page from '~components/common/page/pageComponent.vue'
   export default {
     data () {
       return {
@@ -35,7 +35,7 @@
       }
     },
     components: {
-      // Page
+      Page
     },
     computed: {
       new () {

components/search/GoodList.vue

@@ -125,7 +125,7 @@
               </div>
             </td>
           </tr>
-          <tr v-if="good_list.components.length == 0">
+          <tr v-if="good_list.components.length == 'undefined' ||good_list.components.length == 0">
             <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
               <i class="fa fa-smile-o fa-lg"></i> 暂无产品信息
             </td>

components/search/Kind.vue

@@ -50,57 +50,85 @@
         </a>
       </div>
     </div>
-    <div class="sl-wrap" v-if="list_store_type.length > 0" style="height: 40px">
+    <div class="sl-wrap" v-if="list_store_type.length != 'undefined' && list_store_type.length > 0" style="height: 40px">
       <div class="sl-key f14">货源：</div>
       <div class="sl-value">
         <ul class="list-inline" >
           <li><a class="f14" >全部</a></li>
           <li>
-            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_co)">寄售</div>
-            <a class="f14" v-if="getType(list_store_type,store_type_co)" @click="click_store_type('CONSIGNMENT')">寄售</a>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_co)&&!co_click_flag">寄售</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_co)&&!co_click_flag" @click="click_store_type('CONSIGNMENT')">寄售</a>
+            <span v-if="co_click_flag" @click="cancel_store_type('CONSIGNMENT')">
+              <div class="sl-filter">
+                <a class="text-num" >寄售</a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
           <li>
-            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_di)">经销</div>
-            <a class="f14" v-if="getType(list_store_type,store_type_di)">经销</a>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_di)&&!di_click_flag">经销</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_di)&&!di_click_flag" @click="click_store_type('DISTRIBUTION')">经销</a>
+            <span v-if="di_click_flag" @click="cancel_store_type('DISTRIBUTION')">
+              <div class="sl-filter">
+                <a class="text-num" >经销</a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
           <li>
-            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_or)">原厂</div>
-            <a class="f14" v-if="getType(list_store_type,store_type_or)">原厂</a>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_or)&&!or_click_flag">原厂</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_or)&&!or_click_flag" @click="click_store_type('ORIGINAL_FACTORY')">原厂</a>
+            <span v-if="or_click_flag" @click="cancel_store_type('ORIGINAL_FACTORY')">
+              <div class="sl-filter">
+                <a class="text-num" >原厂</a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
           <li>
-            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_ag)">代理</div>
-            <a class="f14" v-if="getType(list_store_type,store_type_ag)">代理</a>
+            <div class="f14" style="color: #999;" v-if="!getType(list_store_type,store_type_ag)&&!ag_click_flag">代理</div>
+            <a class="f14" v-if="getType(list_store_type,store_type_ag)&&!ag_click_flag" @click="click_store_type('AGENCY')">代理</a>
+            <span v-if="ag_click_flag" @click="cancel_store_type('AGENCY')">
+              <div class="sl-filter" >
+                <a class="text-num" >代理</a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
         </ul>
       </div>
 
     </div>
-    <div class="sl-wrap" v-if="list_crname.length > 0" style="height: 40px">
+    <div class="sl-wrap" v-if="list_crname.length != 'undefined' && list_crname.length > 0" style="height: 40px">
       <div class="sl-key f14">仓库：</div>
       <div class="sl-value">
         <ul class="list-inline"  >
           <li><a class="f14">全部</a></li>
           <li v-for="cr in list_crname_temp">
-            <a v-text="cr.cr_name=='RMB'?'大陆':'香港'" class="f14" @click="click_crname(cr.cr_name)"></a>
-            <div class="sl-filter">
-              <a class="text-num" ></a>
-              <span><i class="fa fa-close"></i></span>
-            </div>
+            <a v-if="cr.cr_name=='RMB'?!rmb_click_flag:!usd_click_flag" v-text="cr.cr_name=='RMB'?'大陆':'香港'" class="f14" @click="click_crname(cr.cr_name)"></a>
+            <span v-if="cr.cr_name=='RMB'?rmb_click_flag:usd_click_flag" @click="cancel_crname(cr.cr_name)">
+              <div class="sl-filter">
+                <a class="text-num" v-text="cr.cr_name=='RMB'?'大陆':'香港'"></a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
         </ul>
       </div>
     </div>
-    <div class="sl-wrap" v-if="list_crname.length > 0" style="height: 40px">
+    <div class="sl-wrap" v-if="list_crname.length != 'undefined' && list_crname.length > 0" style="height: 40px">
       <div class="sl-key f14">货币：</div>
       <div class="sl-value">
         <ul class="list-inline"  >
           <li><a class="f14">全部</a></li>
           <li v-for="cr in list_crname_temp">
-            <a v-text="cr.cr_name=='RMB'?'人民币':'美元'" class="f14" @click="click_crname(cr.cr_name)"></a>
-            <div class="sl-filter">
-              <a class="text-num" ></a>
-              <span><i class="fa fa-close"></i></span>
-            </div>
+            <a v-if="cr.cr_name=='RMB'?!rmb_click_flag:!usd_click_flag" v-text="cr.cr_name=='RMB'?'人民币':'美元'" class="f14" @click="click_crname(cr.cr_name)"></a>
+            <span v-if="cr.cr_name=='RMB'?rmb_click_flag:usd_click_flag" @click="cancel_crname(cr.cr_name)">
+              <div class="sl-filter">
+                <a class="text-num" v-text="cr.cr_name=='RMB'?'人民币':'美元'"></a>
+                <span><i class="fa fa-close"></i></span>
+              </div>
+            </span>
           </li>
         </ul>
       </div>
@@ -126,7 +154,13 @@
         type_arr: [],
         crname_arr: [],
         kind_exp_arr: [],
-        brand_exp_arr: []
+        brand_exp_arr: [],
+        co_click_flag: false,
+        ag_click_flag: false,
+        di_click_flag: false,
+        or_click_flag: false,
+        rmb_click_flag: false,
+        usd_click_flag: false
       }
     },
     computed: {
@@ -204,12 +238,53 @@
       click_store_type: function (type) {
         this.type_arr.push(type)
         this.$emit('typeFilterEvent', this.type_arr)
+        if (type === 'CONSIGNMENT') {
+          this.co_click_flag = true
+        } else if (type === 'AGENCY') {
+          this.ag_click_flag = true
+        } else if (type === 'DISTRIBUTION') {
+          this.di_click_flag = true
+        } else if (type === 'ORIGINAL_FACTORY') {
+          this.or_click_flag = true
+        }
+      },
+      cancel_store_type: function (type) {
+        if (type === 'CONSIGNMENT') {
+          this.co_click_flag = false
+        } else if (type === 'AGENCY') {
+          this.ag_click_flag = false
+        } else if (type === 'DISTRIBUTION') {
+          this.di_click_flag = false
+        } else if (type === 'ORIGINAL_FACTORY') {
+          this.or_click_flag = false
+        }
+        let idx = this.getIndex(this.type_arr, type)
+        this.type_arr.splice(idx, idx + 1)
+        this.$emit('typeFilterEvent', this.type_arr)
       },
       click_crname: function (name) {
         this.crname_arr.push(name)
-        if (this.crname_arr.length === 2) {
+        if (this.getIndex(this.crname_arr, 'RMB-USD') === -1) {
           this.crname_arr.push('RMB-USD')
         }
+        if (name === 'RMB') {
+          this.rmb_click_flag = true
+        } else if (name === 'USD') {
+          this.usd_click_flag = true
+        }
+        this.$emit('crnameFilterEvent', this.crname_arr)
+      },
+      cancel_crname: function (name) {
+        let idx = this.getIndex(this.crname_arr, name)
+        this.crname_arr.splice(idx, idx + 1)
+        if (this.crname_arr.length === 1) {
+          this.crname_arr = []
+        }
+        if (name === 'RMB') {
+          this.rmb_click_flag = false
+        } else if (name === 'USD') {
+          this.usd_click_flag = false
+        }
         this.$emit('crnameFilterEvent', this.crname_arr)
       },
       click_kind_exp: function (id, index) {
@@ -230,6 +305,7 @@
             return i
           }
         }
+        return -1
       }
     }
   }
@@ -261,6 +337,8 @@
     padding-right: 30px;
     border: 1px solid #ccc;
     cursor: pointer;
+    height: 22px;
+    margin-right: 10px;
   }
   #searchResult .selector .sl-wrap .sl-value span >.sl-filter a{
     color: #666;

pages/search/_keyword.vue

@@ -113,20 +113,38 @@
         }
       },
       listenTypeFilter: function (typearr) {
-        this.filter.goods_store_type = typearr
-        this.paramJSON.goods_store_type = typearr
-        this.reloadKind()
-        this.reloadBrand()
-        this.reloadList()
-        this.reloadCrname()
+        if (typearr.length === 0) {
+          delete this.filter.goods_store_type
+          delete this.paramJSON.goods_store_type
+          this.reloadKind()
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadCrname()
+        } else {
+          this.filter.goods_store_type = typearr
+          this.paramJSON.goods_store_type = typearr
+          this.reloadKind()
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadCrname()
+        }
       },
       listenCrnameFilter: function (crnamearr) {
-        this.filter.goods_crname = crnamearr
-        this.paramJSON.goods_crname = crnamearr
-        this.reloadKind()
-        this.reloadBrand()
-        this.reloadList()
-        this.reloadStoreType()
+        if (crnamearr.length === 0) {
+          delete this.filter.goods_crname
+          delete this.paramJSON.goods_crname
+          this.reloadKind()
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadStoreType()
+        } else {
+          this.filter.goods_crname = crnamearr
+          this.paramJSON.goods_crname = crnamearr
+          this.reloadKind()
+          this.reloadBrand()
+          this.reloadList()
+          this.reloadStoreType()
+        }
       }
     }
   }