Fri Aug 17 2018
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
<template>
    
  <div>
    <v-container grid-list-xl >
      <header>
      <h3>Select Your Crates</h3>
      <p>
        Select the quantity of each
        crate you'd like us to ship
      </p>  
      </header>

      <v-layout row wrap>
        
        <!-- Crate Selection -->
        <v-flex d-flex xs12 sm8>
          <v-layout row wrap>    
            <v-flex d-flex>
              <v-layout row wrap class='crate-selection'>               
                <v-flex d-flex xs12 v-for="crate in $store.state.crates" :key='crate.id'>
                  <v-card>
                    <v-card-text d-flex>

                      <NumberInput :crateId="crate.id" />

                      <div class="crate-info">
                        {{ crate.name }} crate
                        <small>
                          <span v-for="(item, k, i) in crate.items" :key='i'>
                            <span>{{item}}</span>
                            <!-- don't show last &mdash; -->
                            <span v-if="k+1 < Object.keys(crate.items).length">
                              &mdash;
                            </span>
                          </span>                     
                        </small>
                      </div>
                    </v-card-text>
                  </v-card>
                </v-flex>              
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>

        <!-- Right side -->
        <v-flex d-flex xs12 sm4 child-flex>
          <v-card class="green lighten-2" dark>
            <v-card-text>
              <div class="order-summary">           
                <div class="price">
                  <span class="currency">$</span>{{$store.getters.total}}
                </div>
                 <v-btn block large to="/checkout" :disabled='!crateCount' class="blue">OK, SHIP!</v-btn>
                 <div style="text-align:center">
                 <v-card-text>
                   (Shipping is <b>FREE</b>)
                   </v-card-text>
                 </div>
              </div>
              
              <!--
              <v-card dark class="premium">
                <div class="corner topleft"></div>
                <div class="corner topright"></div>
                <div class="corner bottomleft"></div>
                <div class="corner bottomright"></div>
                <v-card-text>
                  <v-switch label="Use Premium crates?" 
                    dark
                    v-model="$store.state.premium"
                    @change="$store.dispatch('togglePremium')"
                    color="primary"
                    hide-details>  
                  </v-switch>
                  <p>
                    Crates will be black with golden corners.<br>
                    Perfect for the business or executive guest. (+ $1)
                  </p>
                </v-card-text>
              </v-card>
              -->
            </v-card-text>
          </v-card>
        </v-flex>
    
      </v-layout>
    </v-container>

  </div>
</template>

<script>

import NumberInput from '~/components/NumberInput'
import axios from 'axios'

export default {
  layout: 'default',
  components: {
    NumberInput
  },
  data ()
  {
    return {
      products: []
    }
  },


  computed: {

    // Returns quantity of crates selected. If not at least 1, disable ship button
    crateCount ()
    {
      if (this.$store.state.crates && Object.keys(this.$store.state.crates).length)
      {
        return Object.keys(this.$store.state.crates)
        .map(e => parseInt(this.$store.state.crates[e].quantity))
        .reduce((acc,cv) =>  acc + cv)
      }
    }
  }
}
</script>

<style lang='stylus'>
  @import '../assets/css/variables'
    
  .container.order-form
    margin-top: 5em;


  .crate-selection
    font-size 2.3em
    color #444 
    small
      font-size 40%
      display block
      position relative
      line-height 35px
      span
        span:nth-of-type(even)
          color cadetblue
      @media $xs
        line-height inherit
        font-size 60%
        color #999
        
        
  div.crate-info
    margin-left 0.4em
    display inline-block
    vertical-align top
    @media $xs
      margin-left 84px
      font-size 24px
    
  .order-summary
    background rgba(228, 227, 227, 0.2)
    padding 2em
    border-radius 10px
    color #fff
    .price
      font-size 4em
      text-align center
      //color $salmon
    .currency
      font-size 60%
      position relative 
      top -19px
    
    @media $xs
      padding 1em
      .price
        color inherit
        font-size 2.5em
        .currency
          font-size 50%
      
  .premium
      margin-top 1em
      position relative
      p
        padding 9px 0
        color #ccc
      div.corner
        width 20px
        height 20px
        position absolute
        border-width 3px
        border-color gold
        border-style solid
        &.topleft
          top 0
          left 0
          border-right none
          border-bottom none
        &.topright
          top 0
          right 0
          border-left none
          border-bottom none
        &.bottomright
          bottom 0
          right 0
          border-left none
          border-top none
        &.bottomleft
          bottom 0
          left 0
          border-right none
          border-top none
      

    // a.order-button
    //   display block
    //   transition background .2s
    //   background $green
    //   letter-spacing 1px
    //   font-weight bold
    
    // &:hover
    //   background $darkblue

</style>