mall-web-ssr/components/mobile/search/componet-item.vue

<template>
  <div class="middle">
    <div class="list">
      <div class="name">品牌：</div>
      <div class="text overHidden">{{item.brandNameEn || item.brandNameCn || '-'}}</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 class="fl">
        <div class="name">起拍：</div>
        <div class="text overHidden" style="width: 2.3rem">{{item.minBuyQty || '-'}}</div>
      </div>
    </div>
    <div class="list">
      <div class="fl">
        <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>
    <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>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>

<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    props: {
      item: {
        type: Object,
        default: {}
      }
    },
    components: {
      RemindBox
    },
    data () {
      return {
        remindText: '',
        timeoutCount: 0
      }
    },
    methods: {
      cancatSeller(item) {
        this.$emit('cancatSeller', item)
      },
      buy(item, flag, e) {
        this.baseUtils.buyOrCar(flag, e, this, item, '/mobile/center/user/pay/')
      },
      setRemindText (str) {
        this.remindText = str
        this.timeoutCount++
      }
    }
  }
</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>