vue+coffee+pug+stylus

smthingilove.vue

<template lang="pug">
  div.cart-popup
    div.header
      div.counter {{counter}}
      div.title Корзина
    div.items-list
      div.cart-item(v-for="item in items")
        div.preview
          image-preloader(:src="staticUrl + item.image.id + '/127x158.jpg'" method="fit")
        div.description
          div.title {{item.title}}
          div.info
            span(v-if="item.price.label") Размер: {{item.price.label}}
            span(v-if="item.price.label") ,&nbsp;
            span {{item.quantity}}шт
        div.price-box
          div.price {{makePrice(item.price.price)}} ₽
          div.remove(@click="removeItem(item)")
            img(src="~/assets/icons/close.svg")
    div.total
      div.total-price {{makePrice(cartService.totalPrice)}} ₽
      div.label Всего:
    div.submit
      router-link.button(:to="{path:'/cart/'}") Оформить
</template>

<script lang="coffee">

numeral = require('numeral')

import {STATIC, cartService} from '~/api/index.coffee'
import ImagePreloader from '~/components/ImagePreloader'

export default {
  components: {
    ImagePreloader
  }
  data: ->
    cartService: cartService
    staticUrl: STATIC

  computed:
    items: -> @cartService.store
    ids: ->
      ids = []
      for k,v of @items
        ids.push k if k not in ids
      ids

    counter: ->
      n = Math.abs @cartService.count
      n %= 100
      if n >= 5 and n <= 20
        return @cartService.count + ' товаров'
      n %= 10
      if n == 1
        return @cartService.count + ' товар'
      if n >= 2 and n <= 4
        return @cartService.count + ' товара'
      return @cartService.count + ' товаров'

  methods:
    makePrice: (price) -> numeral(price).format '0,0'
    removeItem: (item) ->
      if confirm 'Удалить ' + item.title + ' из корзины?'
        @cartService.removeItem item.item_id

}
</script>

<style lang="stylus">
.cart-popup
  width: 382px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(40,39,49,0.16)
  border-radius: 4px

  .header
    height: 56px;
    width: 100%;
    // border-bottom 1px solid #E1E4E9

    .counter
      float: right;
      margin: 20px 26px
      font-family: "WhitneyMedium"
      color #BBC0CA
      font-size: 14px;

    .title
      float: left;
      margin: 20px 24px
      text-transform: uppercase;
      font-family: "WhitneyMedium"
      font-size: 14px;
      color #8C92A1

  .items-list

    .cart-item
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      border-top 1px solid #E1E4E9

      .preview
        margin: 10px;
        width: 60px;
        height: 60px;

      .description
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1

        .title
          font-family: "WhitneySemiBold"
          font-size: 14px;
          line-height: 17px
          color #282731
          margin-bottom: 7px;

        .info
          font-family: "WhitneyMedium";
          font-size: 12px;
          color: #8C92A1

      .price-box
        text-align: right;
        padding-right: 25px;

        .price
          font-family: "WhitneyMedium"
          font-size: 12px;
          line-height: 15px
          height: 15px;
          color #2246B4
          margin-top: 21px;

        .remove
          margin-top: 5px;
          cursor: pointer;

  .total
    background: #282731;
    width: 100%;
    height: 48px;
    color: #fff
    font-family: "WhitneyMedium"
    font-size: 16px;

    .label
      margin-left: 16px;
      line-height: 48px;

    .total-price
      float: right;
      margin-right: 24px;
      line-height: 48px

  .submit
    height: 73px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center
    justify-content: center;

    .button
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      color #4169E4
      font-family: "WhitneyBlack"
      font-size: 14px;
      padding: 10px 15px
      cursor: pointer;
</style>