mall-web-ssr/components/mobile/share/store/CommodityList.vue

<template>
  <div class="share-store-commodity">
    <div class="title" v-if="commodities.content && commodities.content.length">
      <img src="/images/mobile/@2x/shareStore/commodity-title@2x.png" alt="">
      <div class="date">
        <span>{{date.month}}</span>月<span>{{date.day}}</span>日
      </div>
      <div class="fr">真实库存、真实价格</div>
    </div>
    <ul>
      <li v-for="commodity in commodities.content">
        <div class="fl">
          <p>{{commodity.code || '-'}}</p>
          <span v-if="commodity.brandNameEn || commodity.brandEn">{{commodity.brandNameEn || commodity.brandEn || '-'}}</span>
        </div>
        <div class="fr">
          <span>{{commodity.currencyName === 'USD' ? '$' : '¥'}}</span>
          <span>{{commodity.prices[0].rMBPrice}}</span>
        </div>
      </li>
    </ul>
    <div v-if="!commodities.content || !commodities.content.length" class="empty">
      <img src="/images/mobile/@2x/shareStore/empty.png" alt="">
      <p>抱歉，该店铺暂未上架商品</p>
    </div>
  </div>
</template>
<script>
  export default {
    filters: {
      price: function (val) {
        return val.toFixed(2)
      }
    },
    computed: {
      commodities () {
        return this.$store.state.shop.storeInfo.storeCommodity.data
//        return []
      },
      date () {
        let now = new Date()
        const monthTemp = now.getMonth() + 1
        const dayTemp = now.getDate()
        const month = monthTemp < 10 ? '0' + monthTemp : monthTemp
        const day = dayTemp < 10 ? '0' + dayTemp : dayTemp
        return {
          month: month,
          day: day
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .share-store-commodity {
    padding: .24rem .3rem;
    .title {
      margin-bottom: .2rem;
      img {
        width: 1.59rem;
        height: .45rem;
      }
      .date {
        display: inline-block;
        font-size: .21rem;
        color: #fa3f46;
        position: relative;
        top: .06rem;
        left: .32rem;
        span {
          color: #fff;
          font-size: .24rem;
          display: inline-block;
          width: .32rem;
          height: .28rem;
          line-height: .28rem;
          text-align: center;
          border-radius: 2px;
          background: #fa3f46;
          margin: .04rem;
        }
      }
      .fr {
        font-size: .24rem;
        color: #666;
        position: relative;
        top: .16rem;
      }
    }
    > ul {
      li {
        height: .82rem;
        border-bottom: .02rem solid rgba(217, 217, 217, .35);
        > div {
          height: .82rem;
          &.fl {
            line-height: .4rem;
            p {
              font-size: .24rem;
              color: #f1a850;
            }
            span {
              font-size: .21rem;
              color: #999;
            }
          }
          &.fr {
            font-size: .24rem;
            color: #e21616;
            line-height: .82rem;
            width: 1.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              &:nth-child(2) {
                font-size: .26rem;
              }
            }
          }
        }
      }
    }
    .empty {
      text-align: center;
      padding: 1.44rem 0 2.04rem 0;
      img {
        width: 1.21rem;
        height: 1.21rem;
      }
      p {
        font-size: .24rem;
        color: #ddd;
        margin-top: .17rem;
      }
    }
  }
</style>