Merge branch 'release-201819-wangcz' into feature-201820-wangcz

assets/scss/mobileCommon.scss

@@ -130,6 +130,19 @@ html {
     border: none;
   }
 
+  input::-webkit-input-placeholder{
+    color:#999;
+  }
+  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+    color:#999;
+  }
+  input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+    color:#999;
+  }
+  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
+    color:#999;
+  }
+
 
 
   /*search*/

components/mobile/Home.vue

@@ -1,7 +1,33 @@
 <template>
   <div class="home">
     <div v-if="!showMainSearch">
+      <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
+        <li @click.stop="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
+          <i class="icon-sousuo iconfont"></i>
+          <span>{{Getsimilar(similar)}}</span>
+          <!--<span v-if="ChooseTop === 'component'">{{similar.code}}</span>-->
+          <!--<span v-else-if="ChooseTop === 'product'">{{similar}}</span>-->
+          <!--<span v-else-if="ChooseTop === 'store'">{{similar}}</span>-->
+          <!--<span v-else-if="ChooseTop === 'brand'">{{similar.nameEn}}</span>-->
+        </li>
+        <li @click.stop="onSearch(keyword)">查找“{{baseUtils.filterStringEllipsis(keyword, 30)}}”</li>
+      </ul>
       <div class="header">
+        <div class="search-content" @touchmove="preventTouchMove($event)">
+          <div class="main-search-header-controll clearfix">
+            <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
+              <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
+              <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
+              <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
+              <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
+            </div>
+          </div>
+          <input type="text" v-model="keyword" id="search-box" @keyup.13="onSearch()" :placeholder="placeholder">
+          <span @click="onSearch()">
+          <i class="iconfont icon-sousuo"></i>
+        </span>
+          <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
+        </div>
         <div v-swiper:mySwiper="swiperOption">
           <div class="swiper-wrapper">
             <div class="swiper-slide">
@@ -16,13 +42,6 @@
           </div>
           <div class="swiper-pagination swiper-pagination-bullets"></div>
         </div>
-        <div class="search-content">
-          <input type="text" placeholder="请输入您要查找的型号、品牌或店铺" @click="onHomeSearchClick()">
-          <span>
-          <i class="iconfont icon-sousuo"></i>
-        </span>
-          <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
-        </div>
       </div>
       <ul class="link-list">
         <li>
@@ -113,7 +132,12 @@
         isChange: false,
         isDataChange: false,
         url: '',
-        isValid: true
+        isValid: true,
+        ChooseTop: 'component',
+        keyword: '',
+        associate: {
+          show: false
+        }
       }
     },
     components: {
@@ -147,6 +171,12 @@
           }
         },
         immediate: true
+      },
+      'keyword': function (val, oldVal) {
+        let keywords = this.similarKeywords.data
+        if (!keywords || !keywords.length) {
+          this.onChange()
+        }
       }
 //      $route: {
 //        handler: function (val) {
@@ -155,6 +185,20 @@
 //      }
     },
     computed: {
+      similarKeywords () {
+        return this.$store.state.search.keywords.data
+      },
+      placeholder() {
+        if (this.ChooseTop === 'component') {
+          return '请输入您要搜索的型号'
+        } else if (this.ChooseTop === 'kind') {
+          return '请输入您要搜索的物料名称'
+        } else if (this.ChooseTop === 'store') {
+          return '请输入您要搜索的卖家名称'
+        } else if (this.ChooseTop === 'brand') {
+          return '请输入您要搜索的品牌'
+        }
+      },
       purchaseManList () {
         return this.$store.state.applyPurchase.purchaseManList.purchaseHomeList.data
       },
@@ -166,6 +210,58 @@
       }
     },
     methods: {
+      onSearch (item) {
+        if (item) {
+          this.keyword = item
+        }
+        if (this.keyword) {
+          this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${encodeURIComponent(this.keyword)}`)
+        }
+      },
+      onChange () {
+        if (!this.keyword) {
+          this.associate.show = false
+          this.$store.dispatch('resetSearchKeywords')
+        } else {
+          this.searchKeywords()
+        }
+        if (this.click_flag) {
+          this.associate.show = false
+        }
+      },
+      setChangelistHander(str) {
+        this.ChooseTop = str
+        if (!this.keyword) return
+        this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
+        this.associate.show = true
+      },
+      searchKeywords () {
+        this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
+        this.associate.show = true
+      },
+      onAssociateClick (word) {
+        if (this.ChooseTop === 'component') {
+          this.keyword = word.code
+        } else if (this.ChooseTop === 'kind') {
+          this.keyword = word.nameCn
+        } else if (this.ChooseTop === 'store') {
+          this.keyword = word.name
+        } else if (this.ChooseTop === 'brand') {
+          this.keyword = word.nameEn
+        }
+        this.onSearch()
+      },
+      Getsimilar(word) {
+        if (this.ChooseTop === 'component') {
+          return word.code
+        } else if (this.ChooseTop === 'kind') {
+          return word.nameCn
+        } else if (this.ChooseTop === 'store') {
+          return word.name
+        } else if (this.ChooseTop === 'brand') {
+          return word.nameEn
+        }
+      },
 //      scroll: function () {
 //         let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
 //         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
@@ -224,28 +320,118 @@
   }
 </script>
 <style lang="scss">
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
   @import '~assets/scss/mobileCommon';
+  .swiper-slide1 {
+    background: url('/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
   .home {
     padding-bottom: 1rem;
     background: #f3f3f7;
-    .header {
-      height: 3.26rem;
-      position: relative;
-      .home-bg {
-        height: 3.26rem;
-        width: 100%;
+    .search-content {
+      padding: 0.15rem 0;
+      position: absolute;
+      z-index: 11;
+      width: 100%;
+      input {
+        margin-top: -0.02rem;
+        outline: 0;
+        border: 0;
       }
-      .search-content {
-        position: absolute;
-        top: 0;
-        width: 100%;
+    }
+    .main-search-header-controll {
+      width: 5.48rem;
+      margin-left: 0.21rem;
+      transform: translateY(1px);
+      div {
+        div {
+          font-size: 0.28rem;
+          color: #fff;
+          margin: 0;
+          border-radius: 0;
+          padding: 0.1rem 0.1rem;
+          a {
+            font-size: .26rem;
+            color: #f1f1f1;
+          }
+          &.active {
+            background: #fff;
+            border-top-left-radius: 0.05rem;
+            border-top-right-radius: 0.05rem;
+          }
+          &.active a {
+            color: #40b6fc;
+          }
+        }
       }
+    }
+    .associate-list {
+      position: absolute;
+      width: 100%;
+      background: #fff;
+      top: 1.25rem;
+      border: 1px solid #dcdcdc;
+      z-index: 100;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      overflow-y: auto;
+      li {
+        height: 0.7rem;
+        line-height: .9rem;
+        margin: 0 .45rem;
+        border-bottom: .04rem solid #f1f0f0;
+        @include overFlowHidden();
+        i {
+          font-size: .36rem;
+          margin-right: .24rem;
+          color: #ddd;
+        }
+        span {
+          color: #999;
+          font-size: .28rem;
+          line-height: .58rem;
+          height: .58rem;
+          display: inline-block;
+        }
+        &:active, &:hover {
+          background: #eee;
+        }
+        &:last-child {
+          text-align: center;
+          font-size: .3rem;
+          color: #3976f4;
+          border-bottom: none;
+          &:active, &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+    .header {
+      position: relative;
+      height: 4.08rem;
+      overflow: hidden;
       .swiper-container {
-        height: 3.26rem;
-        position: absolute;
-        top: 0;
         width: 100%;
         z-index: 0;
+        height: 4.08rem;
+        overflow: hidden;
+        img {
+          max-width: 100%;
+          /*height: 4.08rem;*/
+        }
       }
       .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
         bottom: .1rem !important;

components/mobile/search/componet-item.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="middle">
+    <div class="list">
+      <div class="name">品牌：</div>
+      <div class="text overHidden">{{item.brand && item.brand.nameEn || '-'}}</div>
+    </div>
+    <div class="list">
+      <div class="name">物料名称(类目)：</div>
+      <div class="text overHidden">{{item.kindNameCn || '-'}}</div>
+    </div>
+    <div class="list">
+      <div class="name">型号：</div>
+      <div class="text overHidden">{{item.code || '-'}}</div>
+    </div>
+    <div class="list">
+      <div class="name">规格：</div>
+      <div class="text overHidden">{{item.spec || '-'}}</div>
+    </div>
+    <div class="list">
+      <div class="fl">
+        <div class="name">包装：</div>
+        <div class="text overHidden" style="width: 2.3rem">{{item.packaging || '无包装信息'}}</div>
+      </div>
+      <div class="fl">
+        <div class="name">交期(天)：</div>
+        <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
+        <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="fl">
+        <div class="name">生产日期：</div>
+        <div class="text overHidden" style="width: 1.75rem" :title="item.produceDate">{{item.produceDate || '-'}}</div>
+      </div>
+      <div class="fl">
+        <div class="name">库存：</div>
+        <div class="text overHidden" style="width: 2.3rem">{{item.reserve || '-'}}</div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="fl" @click.stop="goAttach(item.attach)">
+        <div class="name">规格书：</div>
+        <div class="text">
+          <a :href="item.attach" target="_blank" v-if="item.attach && item.attach !== '' && item.attach !== '1'">
+            <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
+          </a>
+          <template v-else>
+            <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
+          </template>
+        </div>
+      </div>
+      <div class="fl">
+        <div class="name">起拍：</div>
+        <div class="text overHidden" style="width: 2.3rem">{{item.minBuyQty || '-'}}</div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="name">卖家名称：</div>
+      <div class="text overHidden">{{item.storeName}}</div>
+    </div>
+    <div class="list">
+      <div class="name left">价格梯度<p>(pcs):</p></div>
+      <div class="table left">
+        <ul>
+          <li class="title">
+            <div>分段数量/PCS</div>
+            <div>分段单价</div>
+          </li>
+          <li v-for="price in item.prices">
+            <div>{{price.start}}+</div>
+            <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
+            <div v-else>${{price.uSDPrice}}</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="list clearfix">
+      <div class="pull-left cancat" @click.stop="cancatSeller(item)">
+        <i class="iconfont icon-kefu1"></i>联系卖家
+      </div>
+      <div class="pull-right clearfix">
+        <div class="pull-left" @click="buy(item, false, $event)">加入购物车</div>
+        <div class="pull-left" @click="buy(item, true, $event)">立即购买</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      item: {
+        type: Object,
+        default: {}
+      }
+    },
+    methods: {
+      cancatSeller(item) {
+        this.$emit('cancatSeller', item)
+      },
+      buy(item, flag, e) {
+        this.baseUtils.buyOrCar(flag, e, this, item, '/mobile/center/user/pay/')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
+  .middle {
+    background: #fff;
+    padding: 0.2rem;
+    .lookMoreBtn {
+      font-size: 0.28rem;
+      color: #2d8cf0
+    }
+    .more_icon {
+      font-size: 0.34rem;
+      color: #999;
+    }
+    .order-tag {
+      display: inline-block;
+      font-size: .18rem;
+      color: #fff;
+      font-weight: bold;
+      background: #ee1717;
+      height: .27rem;
+      width: .27rem;
+      line-height: .27rem;
+      text-align: center;
+      border-radius: .05rem;
+      position: relative;
+      top: -.05rem;
+      margin-right: .05rem;
+      &.reserve-tag {
+        background: #07bb1c;
+      }
+    }
+    text-align: left;
+    background: #fff;
+    /*border-radius: 5px;*/
+    margin-bottom: 0.2rem;
+    .overHidden {
+      @include overFlowHidden()
+    }
+    .pms {
+      color: #f57710;
+      border: 1px solid #f57710;
+      border-radius: 0.4rem;
+      background: #fff;
+      font-size: 0.24rem;
+      height: 0.4rem;
+      line-height: 0.4rem;
+      width: 0.8rem;
+      text-align: center;
+    }
+    .list {
+      @include overFlowHidden();
+      width: 100%;
+      .left {
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .textinfo {
+        font-size: 0.18rem;
+        margin-left: 0.1rem;
+        display: inline-block;
+        background: #3f84f6;
+        color: #fff;
+        font-weight: bold;
+        border-radius: 3px;
+        width: 0.8rem;
+        height: 0.32rem;
+        line-height: 0.32rem;
+        text-align: center
+      }
+      .button {
+        font-size: 0.3rem;
+        color: #1a58dd;
+        width: 0.92rem;
+        height: 0.43rem;
+        line-height: 0.43rem;
+        text-align: center;
+        border-radius: 5px;
+        border:1px solid #1a58dd;
+        display: inline-block;
+        margin-right: 0.2rem;
+      }
+      margin-bottom: 0.18rem;
+      &::after{
+        clear: both;
+        display: block;
+        content: ' ';
+        visibility: hidden;
+        zoom: 1;
+      }
+      .fl {
+        width: 3.5rem;
+        float: left;
+      }
+      .fr {
+        text-align: left;
+        width: 2.6rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      &.list-long {
+        .fl {
+          width: 100% !important;
+        }
+      }
+      .name {
+        color: #666;
+        font-size: 0.28rem;
+        display: inline-block;
+      }
+      .text {
+        display: inline-block;
+        color: #333;
+        font-size: 0.28rem;
+        vertical-align: top;
+        width: 5.5rem;
+        @include overFlowHidden();
+      }
+      .table {
+        width: 5.85rem;
+        margin-bottom: 0;
+        margin-top: 0;
+        margin-left: 0.1rem;
+        li {
+          height: 0.43rem;
+          line-height: 0.43rem;
+          border-left: .01rem solid #c5c5c5;
+          font-size: .28rem;
+          &::after {
+            clear: both;
+            display: block;
+            content: ' ';
+            visibility: hidden;
+            zoom: 1;
+          }
+          div {
+            text-align: center;
+            width: 50%;
+            float: left;
+            border-right: .01rem solid #c5c5c5;
+            border-bottom: .01rem solid #c5c5c5;
+          }
+          &:nth-child(odd) {
+            background: #ddd;
+            color: #333;
+            font-size: 0.28rem;
+          }
+          &:nth-child(even) {
+            background: #fcfcfc;
+            color: #333;
+            font-size: 0.28rem;
+          }
+          &:nth-last-of-type(1){
+            color: #f31919;
+          }
+          &.title {
+            font-size: 0.28rem;
+            color: #333;
+          }
+        }
+      }
+      .pull-right {
+        div {
+          color: #3f84f6;
+          font-size: 0.28rem;
+          border-radius: 0.07rem;
+          border: 1px solid #3f84f6;
+          background: #fff;
+          width: 2rem;
+          line-height: 0.56rem;
+          height: 0.56rem;
+          text-align: center;
+        }
+        div:last-child {
+          margin-left: 0.2rem;
+          color: #fff;
+          background: #3f84f6;
+        }
+      }
+      i {
+        &.icon-pdf {
+          color: #929292;
+          font-size: 0.4rem;
+        }
+        &.active {
+          color: #eb062b;
+        }
+      }
+      .cancat {
+        height: 0.56rem;
+        line-height: 0.56rem;
+        border: 1px solid #3f84f6;
+        color: #3f84f6;
+        font-size: 0.26rem;
+        text-align: center;
+        border-radius: 3px;
+        padding: 0 0.1rem;
+        overflow: hidden;
+        width: auto;
+      }
+      img.pull-left {
+        width: 1.21rem;
+        height: 0.8rem;
+        border: 1px solid #dcdcdc;
+        border-radius: 0.07rem;
+        margin-top: 0;
+      }
+    }
+    .sayPriBtn {
+      width: 2rem;
+      @include lineHeight(0.54rem);
+      color: #fff;
+      font-size: 0.28rem;
+      background: #3f84f6;
+      border-radius: 3px;
+      text-align: center;
+      margin-top: -0.1rem;
+    }
+    .middle_bottom {
+      .middle_bottom-left {
+        float: left;
+        img {
+          width: 1.21rem;
+          height: 1.21rem;
+          border: 1px solid #4290f7;
+          border-radius: 0.07rem;
+          overflow: hidden;
+        }
+        div.middle_bottom-leftitem {
+          line-height: 0.5rem;
+          font-size: 0.28rem;
+          div {
+            display: inline-block;
+            color: #666;
+            height: 100%;
+            float: left;
+            &.bottom-title {
+              display: inline-block;
+              text-align: justify;
+              vertical-align: top;
+              width: 1.5rem;
+              height: 0.5rem;
+              &::after {
+                content: "";
+                display: inline-block;
+                width: 100%;
+                overflow: hidden;
+                height: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/search/newkeycode.vue

@@ -2,17 +2,17 @@
  <div class="search-wrapper">
    <!-- 头部搜索 -->
    <div class="main-search-header">
-     <input type="text" id="search-box" v-model="keyword" @keyup.13="onClickSearchHander()" :placeholder="placeholder" @input="changeKeyWord()">
-     <span @click="onClickSearchHander()">搜索</span>
-     <a @click="cancelSearchHander()">取消</a>
      <div class="main-search-header-controll clearfix">
        <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
          <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
-           <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
-           <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
+         <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
+         <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
          <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
        </div>
      </div>
+     <input type="text" id="search-box" v-model="keyword" @keyup.13="onClickSearchHander()" :placeholder="placeholder" @input="changeKeyWord()">
+     <span @click="onClickSearchHander()">搜索</span>
+     <a @click="cancelSearchHander()" style="margin-top: 0.14rem;display: inline-block;">取消</a>
    </div>
    <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
      <li @click.stop="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
@@ -118,91 +118,7 @@
                <div v-if="resourceList&&resourceList.stock&&resourceList.stock.content.length > 0">
                  <div v-for="(item, index) in resourceList.stock.content">
                    <!--@click="goProductDetail(item)"-->
-                   <div class="middle">
-                     <div class="list">
-                       <div class="name">品牌：</div>
-                       <div class="text overHidden">{{item.brand && item.brand.nameEn || '-'}}</div>
-                     </div>
-                     <div class="list">
-                       <div class="name">物料名称(类目)：</div>
-                       <div class="text overHidden">{{item.kindNameCn || '-'}}</div>
-                     </div>
-                     <div class="list">
-                       <div class="name">型号：</div>
-                       <div class="text overHidden">{{item.code || '-'}}</div>
-                     </div>
-                     <div class="list">
-                       <div class="name">规格：</div>
-                       <div class="text overHidden">{{item.spec || '-'}}</div>
-                     </div>
-                     <div class="list">
-                       <div class="fl">
-                         <div class="name">包装：</div>
-                         <div class="text overHidden" style="width: 2.3rem">{{item.packaging || '无包装信息'}}</div>
-                       </div>
-                       <div class="fl">
-                         <div class="name">交期(天)：</div>
-                         <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
-                         <div class="text overHidden" style="width: 1.8rem" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
-                       </div>
-                     </div>
-                     <div class="list">
-                       <div class="fl">
-                         <div class="name">生产日期：</div>
-                         <div class="text overHidden" style="width: 1.75rem" :title="item.produceDate">{{item.produceDate || '-'}}</div>
-                       </div>
-                       <div class="fl">
-                         <div class="name">库存：</div>
-                         <div class="text overHidden" style="width: 2.3rem">{{item.reserve || '-'}}</div>
-                       </div>
-                     </div>
-                     <div class="list">
-                       <div class="fl" @click.stop="goAttach(item.attach)">
-                         <div class="name">规格书：</div>
-                         <div class="text">
-                           <a :href="item.attach" target="_blank" v-if="item.attach && item.attach !== '' && item.attach !== '1'">
-                             <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
-                           </a>
-                           <template v-else>
-                             <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
-                           </template>
-                         </div>
-                       </div>
-                       <div class="fl">
-                         <div class="name">起拍：</div>
-                         <div class="text overHidden" style="width: 2.3rem">{{item.minBuyQty || '-'}}</div>
-                       </div>
-                     </div>
-                     <div class="list">
-                       <div class="name">卖家名称：</div>
-                       <div class="text overHidden">{{item.storeName}}</div>
-                     </div>
-                     <div class="list">
-                       <div class="name left">价格梯度<p>(pcs):</p></div>
-                       <div class="table left">
-                         <ul>
-                           <li class="title">
-                             <div>分段数量/PCS</div>
-                             <div>分段单价</div>
-                           </li>
-                           <li v-for="price in item.prices">
-                             <div>{{price.start}}+</div>
-                             <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
-                             <div v-else>${{price.uSDPrice}}</div>
-                           </li>
-                         </ul>
-                       </div>
-                     </div>
-                     <div class="list clearfix">
-                       <div class="pull-left cancat" @click.stop="cancatSeller(item)">
-                         <i class="iconfont icon-kefu1"></i>联系卖家
-                       </div>
-                       <div class="pull-right clearfix">
-                         <div class="pull-left" @click="buy(item, false, $event)">加入购物车</div>
-                         <div class="pull-left" @click="buy(item, true, $event)">立即购买</div>
-                       </div>
-                     </div>
-                   </div>
+                   <component-item :item="item" @cancatSeller="cancatSeller"></component-item>
                  </div>
                </div>
              </template>
@@ -395,6 +311,7 @@
   import { RemindBox, Loading, LoginBox, PullUp } from '~components/mobile/common'
   import { ModalWrapper } from '~components/mobile/base'
   import axios from '~plugins/axios'
+  import componentItem from '~components/mobile/search/componet-item'
   export default {
     layout: 'mobile',
     data() {
@@ -511,7 +428,7 @@
       // 搜索点击事件
       onClickSearchHander() {
         console.log(this.keyword)
-        if (!this.keyword) {this.setRemindText('请输入关键字')}
+        if (!this.keyword) { this.setRemindText('请输入关键字') }
         this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${this.keyword}`)
         // this.setChangelistHander(this.ChooseTop)
         // window.location.href =
@@ -700,7 +617,8 @@
       LoginBox,
       PublishSupplierSeek,
       ModalWrapper,
-      PullUp
+      PullUp,
+      componentItem
     },
     watch: {
       '$route' (to, from) {
@@ -732,34 +650,34 @@
     .main-search-header {
       position: absolute;
       background: #3e82f5;
-      line-height: .88rem;
+      padding: .15rem 0;
       margin-top: 0;
       z-index: 1;
       width: 100%;
       input {
-        width: 4.88rem;
-        height: .62rem;
-        line-height: .62rem;
+        width: 5.1rem;
+        height: .58rem;
+        line-height: .58rem;
         font-size: .26rem;
         color: #333;
-        margin-left: 0.3rem;
+        margin-left: 0.11rem;
         /*padding-left: 1.26rem;*/
         border: .04rem solid #fff;
         background: #fff;
         outline: none;
         border-radius: 0;
         float: left;
-        margin-top: .12rem;
         -webkit-appearance: none;
         border-top-left-radius: .14rem;
         border-bottom-left-radius: .14rem;
+        padding-left: 0.21rem;
       }
       span {
         display: inline-block;
         width: 1.02rem;
         text-align: center;
-        height: .62rem;
-        line-height: .62rem;
+        height: .58rem;
+        line-height: .58rem;
         color: #366df3;
         font-size: .28rem;
         margin-left: .02rem;
@@ -767,7 +685,6 @@
         border-bottom-right-radius: .14rem;
         background: #fff;
         float: left;
-        margin-top: .12rem;
       }
       a {
         font-size: .28rem;
@@ -775,24 +692,31 @@
         margin-left: .2rem;
       }
       .main-search-header-controll {
-        background: #3e82f5;
-        width: 5.9rem;
-        margin-left: 0.3rem;
+        width: 5.48rem;
+        margin-left: 0.21rem;
+        transform: translateY(1px);
         div {
-          @include lineHeight(0.66rem);
-          font-size: 0.28rem;
-          color: #fff;
-          margin: 0;
-          background: rgba(0,0,0,0);
-          border-radius: 0;
-          &.active a {
-            color: #fff;
-            border-bottom: 0.02rem solid #fff;
-          }
-          a {
-            margin-left: 0 !important;
+          div {
+            color: #f1f1f1;
+            margin: 0;
+            background: rgba(0, 0, 0, 0);
+            border-radius: 0;
+            padding: 0.1rem 0.1rem;
+            &.active a {
+              color: #40b6fc;
+            }
+            &.active {
+              background: #fff;
+              border-top-left-radius: 0.05rem;
+              border-top-right-radius: 0.05rem;
+            }
+            a {
+              color: #f1f1f1;
+              font-size: 0.26rem;
+              margin-left: 0 !important;
+            }
           }
-       }
+        }
       }
     }
     .main-search-wrapper {
@@ -835,261 +759,6 @@
       position: absolute;
       width: 100%;
       bottom: 0;
-      .middle {
-        background: #fff;
-        padding: 0.2rem;
-        .lookMoreBtn {
-          font-size: 0.28rem;
-          color: #2d8cf0
-        }
-        .more_icon {
-          font-size: 0.34rem;
-          color: #999;
-        }
-        .order-tag {
-          display: inline-block;
-          font-size: .18rem;
-          color: #fff;
-          font-weight: bold;
-          background: #ee1717;
-          height: .27rem;
-          width: .27rem;
-          line-height: .27rem;
-          text-align: center;
-          border-radius: .05rem;
-          position: relative;
-          top: -.05rem;
-          margin-right: .05rem;
-          &.reserve-tag {
-            background: #07bb1c;
-          }
-        }
-        text-align: left;
-        background: #fff;
-        /*border-radius: 5px;*/
-        margin-bottom: 0.2rem;
-        .overHidden {
-          @include overFlowHidden()
-        }
-        .pms {
-          color: #f57710;
-          border: 1px solid #f57710;
-          border-radius: 0.4rem;
-          background: #fff;
-          font-size: 0.24rem;
-          height: 0.4rem;
-          line-height: 0.4rem;
-          width: 0.8rem;
-          text-align: center;
-        }
-        .list {
-          @include overFlowHidden();
-          width: 100%;
-          .left {
-            float: left;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          .textinfo {
-            font-size: 0.18rem;
-            margin-left: 0.1rem;
-            display: inline-block;
-            background: #3f84f6;
-            color: #fff;
-            font-weight: bold;
-            border-radius: 3px;
-            width: 0.8rem;
-            height: 0.32rem;
-            line-height: 0.32rem;
-            text-align: center
-          }
-          .button {
-            font-size: 0.3rem;
-            color: #1a58dd;
-            width: 0.92rem;
-            height: 0.43rem;
-            line-height: 0.43rem;
-            text-align: center;
-            border-radius: 5px;
-            border:1px solid #1a58dd;
-            display: inline-block;
-            margin-right: 0.2rem;
-          }
-          margin-bottom: 0.18rem;
-          &::after{
-            clear: both;
-            display: block;
-            content: ' ';
-            visibility: hidden;
-            zoom: 1;
-          }
-          .fl {
-            width: 3.5rem;
-            float: left;
-          }
-          .fr {
-            text-align: left;
-            width: 2.6rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &.list-long {
-            .fl {
-              width: 100% !important;
-            }
-          }
-          .name {
-            color: #666;
-            font-size: 0.28rem;
-            display: inline-block;
-          }
-          .text {
-            display: inline-block;
-            color: #333;
-            font-size: 0.28rem;
-            vertical-align: top;
-            width: 5.5rem;
-            @include overFlowHidden();
-          }
-          .table {
-            width: 5.85rem;
-            margin-bottom: 0;
-            margin-top: 0;
-            margin-left: 0.1rem;
-            li {
-              height: 0.43rem;
-              line-height: 0.43rem;
-              border-left: .01rem solid #c5c5c5;
-              font-size: .28rem;
-              &::after {
-                clear: both;
-                display: block;
-                content: ' ';
-                visibility: hidden;
-                zoom: 1;
-              }
-              div {
-                text-align: center;
-                width: 50%;
-                float: left;
-                border-right: .01rem solid #c5c5c5;
-                border-bottom: .01rem solid #c5c5c5;
-              }
-              &:nth-child(odd) {
-                background: #ddd;
-                color: #333;
-                font-size: 0.28rem;
-              }
-              &:nth-child(even) {
-                background: #fcfcfc;
-                color: #333;
-                font-size: 0.28rem;
-              }
-              &:nth-last-of-type(1){
-                color: #f31919;
-              }
-              &.title {
-                font-size: 0.28rem;
-                color: #333;
-              }
-            }
-          }
-          .pull-right {
-            div {
-              color: #3f84f6;
-              font-size: 0.28rem;
-              border-radius: 0.07rem;
-              border: 1px solid #3f84f6;
-              background: #fff;
-              width: 2rem;
-              line-height: 0.56rem;
-              height: 0.56rem;
-              text-align: center;
-            }
-            div:last-child {
-              margin-left: 0.2rem;
-              color: #fff;
-              background: #3f84f6;
-            }
-          }
-          i {
-            &.icon-pdf {
-              color: #929292;
-              font-size: 0.4rem;
-            }
-            &.active {
-              color: #eb062b;
-            }
-          }
-          .cancat {
-            height: 0.56rem;
-            line-height: 0.56rem;
-            border: 1px solid #3f84f6;
-            color: #3f84f6;
-            font-size: 0.26rem;
-            text-align: center;
-            border-radius: 3px;
-            padding: 0 0.1rem;
-            overflow: hidden;
-            width: auto;
-          }
-          img.pull-left {
-            width: 1.21rem;
-            height: 0.8rem;
-            border: 1px solid #dcdcdc;
-            border-radius: 0.07rem;
-            margin-top: 0;
-          }
-        }
-        .sayPriBtn {
-          width: 2rem;
-          @include lineHeight(0.54rem);
-          color: #fff;
-          font-size: 0.28rem;
-          background: #3f84f6;
-          border-radius: 3px;
-          text-align: center;
-          margin-top: -0.1rem;
-        }
-        .middle_bottom {
-          .middle_bottom-left {
-            float: left;
-            img {
-              width: 1.21rem;
-              height: 1.21rem;
-              border: 1px solid #4290f7;
-              border-radius: 0.07rem;
-              overflow: hidden;
-            }
-            div.middle_bottom-leftitem {
-              line-height: 0.5rem;
-              font-size: 0.28rem;
-              div {
-                display: inline-block;
-                color: #666;
-                height: 100%;
-                float: left;
-                &.bottom-title {
-                  display: inline-block;
-                  text-align: justify;
-                  vertical-align: top;
-                  width: 1.5rem;
-                  height: 0.5rem;
-                  &::after {
-                    content: "";
-                    display: inline-block;
-                    width: 100%;
-                    overflow: hidden;
-                    height: 0;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
     }
     .searchContent2 {
       /*height: calc(100vh - 7.3rem);*/