mall-web-ssr/components/product/component/StoreInfo.vue

<template>
  <div class="storeInfo container">
    <div class="form-group">
      <div class="storeIns">
        <div class="sign">选择商家：</div>
        <div class="storeInList" v-for="item in store">
          <div :class="{'storeIn-active' : item.isSelected, 'item' : !item.isSelected}">
          <a>
            <img :src="item.logoUrl || '/images/component/default.png'" :alt="item.storeName" :title="item.storeName">
          </a>
          </div>
        </div>
        <!--<div class="storeInList" ng-if="storeIns.length == 0" style="font-size: 14px">-->
        <div class="storeInList" style="font-size: 14px">
          暂无商家信息
        </div>
      </div>
    </div>
    <div class="form-group" style="margin-bottom: 40px;">
      <div>
        <div style="font-size: 14px">
          <span>产品匹配：</span>
          <input type="checkbox">
          <span>&nbsp;库存寄售</span>
          <input type="checkbox">
          <span>&nbsp;店铺自营</span>
          <!--<span v-if="storeIns.length==0">暂无可匹配的信息</span>-->
          <span>暂无可匹配的信息</span>
        </div>
      </div>
    </div>
    <div class="goodsList">
      <div class="goods-item">按商家列表</div>
      <table class="table">
        <thead>
          <tr class="height54">
            <th class="text-center" width="115">制造商型号</th>
            <th class="text-center" width="138">生产日期</th>
            <th class="text-center" width="92">包装方式</th>
            <th class="text-center" width="173">库存</th>
            <th class="text-center" width="92">数量</th>
            <th class="text-center" width="116">香港交货<span style="font-size: 12px;">($)</span></th>
            <th class="text-center" width="150">大陆交货<span style="font-size: 12px;">(￥)</span></th>
            <th class="text-center" width="139">交期</span></th>
            <th class="text-center" width="175">操作</th>
          </tr>
        </thead>
        <tbody class="text-center">
          <tr style="cursor: pointer;" v-for="list in storeList">
            <td>{{list.code}}</td>
            <td>{{list.produceDate}}</td>
            <td>{{list.packaging || '暂无包装方式'}}</td>
            <td style="text-align: left;padding-left: 25px;">
              <div>
                <span>库存：</span>
                <span>{{list.reserve}}</span>
              </div>
              <div>
                <span>起拍：</span>
                <span>{{list.minBuyQty}}</span>
              </div>
              <div>
                <span>倍数：</span>
                <span>{{list.minPackQty}}</span>
              </div>
            </td>
            <td>
              <div v-for="price in list.prices">
                <span>{{price.start}}</span>+
              </div>
            </td>
            <td>
              <div v-for="price in list.prices">
                <span>{{price.rMBPrice | formateNumber : 6 || ''}}</span>
              </div>
            </td>
            <td>
              <div v-for="price in list.prices">
                <span>{{price.rMBPrice | formateNumber : 6 || ''}}</span>
              </div>
            </td>
            <td>
              <div v-show="list.b2cMinDelivery">
                <span>香港：</span>
                <span>{{list.b2cMinDelivery}}</span>-<span>{{list.b2cMaxDelivery}}</span>
              </div>
            </td>
            <td>
              <button class="btn btn-buyNow">立即购买</button>
              <button class="btn btn-default">加入购物车</button>
            </td>
          </tr>
          <!--<tr ng-if="$data.length == 0">-->
          <tr>
            <td colspan="10" class="text-center" style="line-height: 40px; font-size: 14px;"><i class="fa fa-smile-o fa-lg"></i> 暂无现货</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'StoreInfo',
    computed: {
      stores () {
        return this.$store.state.componentStore.store
      },
      store () {
        console.log(this.stores.data)
        return this.stores.data
      },
      storeLists () {
        return this.$store.state.componentInformation.information
      },
      storeList () {
        console.log(this.storeLists.data)
        return this.storeLists.data
      }
    }
  }
</script>
<style scoped>
  .container .storeIns{
    margin-top: 20px;
    width: 1190px;
    height: 48px;
    line-height: 48px;
  }
  .container .storeIns .sign {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
  }
  .container .storeIns .storeInList {
    display: table-cell;
  }
  .container .storeIn {
    width: 98px;
    height: 49px;
    line-height: 30px;
    float: left;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .container .storeIn-active {
    width: 98px;
    float: left;
    border: 1px solid #5078cb;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .container .storeIn a,.componentDetail .storeIn-active a {
    display: table-cell;
    height: 46px;
    width: 98px;
    text-align: center;
    vertical-align: middle;
  }
  .storeIn a>img,.storeIn-active a>img {
    max-width: 95px;
    max-height: 46px;
  }
  .container .goodsList {
    clear: both;
    font-size: 14px;
  }
  .container .goodsList .goods-item {
    height: 30px;
    width: 120px;
    background-color: #5078cb;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
  }
  .container .goodsList thead {
    background-color: #F7F7F7;
  }
  .container .goodsList tbody tr td{
    vertical-align: middle;
    text-align: center;
  }
  .container .goodsList .btn{
    border-radius: 4px;
    width: 80px;
    height: 30px;
    color: #214797;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    margin: 5px 0;
    padding: 0;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    font-weight: 400;
  }
  .container .goodsList .btn-buyNow {
    color: #fff;
    background-color: #5078cb;
  }
  .container .goodsList .btn-default{
    background-color: #fff;
    border-color: #ccc;
  }
  .container .form-group input{
    vertical-align: sub;
  }
  .container .height54{
    height: 54px;
    background: none;
    color: #333;
  }
  .container .height54 th{
    line-height: 54px;
    border-bottom: none;
    padding: 0;
  }
  .container .table tbody td{
    border-bottom: #ddd 1px solid;
    border-top: none;
  }
  .container .table tbody{
    border-left: #ddd 1px solid;
    border-right: #ddd 1px solid;
  }
  .container .table tbody td div{
    text-align: left;
    margin-left: 10%;
  }
  .container .table tbody tr:hover{
    background: #f5f5f5;
  }
  .container .table tbody tr:hover{
    background: #f5f5f5;
  }
</style>