mall-web-ssr/components/search/ForwardGoodsList.vue

<template>
  <div class="forward-goods-list">
    <table>
      <thead>
        <tr>
          <th width="25%">型号/品牌</th>
          <th width="25%">卖家名称</th>
          <th width="25%">物料名称/库存(PCS)</th>
          <th width="15%">规格</th>
          <th width="15%"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in forwardGood.content">
          <td>
            <div class="line">
              <span class="title inline-block">型号</span>
              <span class="content inline-block" :title="item.cmpCode" v-text="item.cmpCode || '-'"></span>
            </div>
            <div class="line">
              <span class="title inline-block">品牌</span>
              <span class="content inline-block" :title="item.pbrand || item.pbranden">{{item.pbrand || item.pbranden ||  '-'}}</span>
            </div>
          </td>
          <td class="single">
            <div class="line">
              <span class="title inline-block">卖家</span>
              <span class="content inline-block" :title="item.enName">{{item.enName || '-'}}</span>
            </div>
          </td>
          <td>
            <div class="line">
              <span class="title inline-block">物料名称</span>
              <span class="content inline-block" :title="item.kind || item.kinden">{{item.kind || item.kinden || '-'}}</span>
            </div>
            <div class="line">
              <span class="title inline-block">库存(PCS)</span>
              <span class="content inline-block" :title="item.erpReserve">{{item.erpReserve || 0}}</span>
            </div>
          </td>
          <td class="single">
            <div class="line">
              <span class="title inline-block">规格</span>
              <span class="content inline-block" :title="item.spec">{{item.spec || '-'}}</span>
            </div>
          </td>
          <td><button @click="authenticateInterceptor(goSeek(item))">立即询价</button></td>
        </tr>
      </tbody>
    </table>
    <seek-product :productItem="productItem" :showObj="showSeekObj"></seek-product>
  </div>
</template>
<script>
  import { SeekProduct } from '~components/applyPurchase'
  export default {
    data () {
      return {
        showSeekObj: {
          show: false
        },
        productItem: {}
      }
    },
    components: {
      SeekProduct
    },
    computed: {
      goods () {
        return this.$store.state.searchData.searchList.listNew.data
      },
      forwardGood () {
        return this.goods ? this.goods.futures : {}
      }
    },
    methods: {
      goSeek: function (item) {
        this.productItem.cmpCode = item.cmpCode
        this.productItem.brand = item.pbrand || item.pbranden
        this.productItem.prodName = item.kind || item.kinden
        this.productItem.spec = item.spec
        this.showSeekObj.show = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .forward-goods-list {
    table {
      width: 100%;
      margin: 10px 0 50px;
      thead tr {
        background: #f7f7f7;
        font-size: 14px;
        color: #333;
        height: 40px;
        th {
          text-align: center;
        }
      }
      tbody tr {
        &:hover {
          background: #ecf2fd;
        }
        border: 1px solid #e8e8e8;
        border-bottom: none;
        &:last-child {
          border-bottom: 1px solid #e8e8e8;
        }
        td {
          padding: 24px 0;
          font-size: 12px;
          &.single {
            float: left;
            width: 100%;
            height: 100%;
          }
          .line {
            margin-top: 24px;
            &:first-child {
              margin-top: 0;
            }
            .title {
              color: #2496f1;
              width: 30%;
              text-align: right;
              vertical-align: top;
            }
            .content {
              width: 70%;
              padding-left: 10px;
              vertical-align: top;
              word-break: break-all;
              color: #666;
              height: 30px;
              overflow: hidden;
            }
          }
          button {
            width: 80px;
            text-align: center;
            border-radius: 3px;
            height: 30px;
            color: #fff;
            background: #2e91f0;
            border: none;
            outline: none;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }
  }
</style>