新增搜索信号现货组件

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

@@ -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() {
@@ -700,7 +617,8 @@
       LoginBox,
       PublishSupplierSeek,
       ModalWrapper,
-      PullUp
+      PullUp,
+      componentItem
     },
     watch: {
       '$route' (to, from) {
@@ -841,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);*/