Iniziato il SignUp

src/components/views/pricing/cardPlanOne.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card text-center">
+    <div class="card-title no-padding ">
+      <span class="label pointing-down text-white fit no-margin" :class="titleClasses">
+        <h5 class="">{{title}}</h5>
+      </span>
+    </div>
+    <div class="card-content bg-white" >
+      <h3>$ {{price}}</h3>
+      <h6 class="text-italic">{{priceSubtitle}}</h6>
+    </div>
+    <div class="card-actions">
+      <slot name="body"></slot>
+    </div>
+    <div class="card-content bg-white">
+      <button :class="buttonClasses" class="outline fit" @click="planSelected()">Choose</button>
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
+  data () {
+    return {}
+  },
+  methods: {
+    planSelected () {
+      this.$emit('card-selected', this.cardId)
+    }
+  }
+}
+</script>
+<style scoped>
+  .label{
+    min-height: 50px;
+  }
+  h5{
+    font-weight: 300;
+    flex: 1 1 auto;
+  }
+  h3, h6{
+    font-weight: 300;
+  }
+  .label.pointing-up:before, .label.pointing-right:before, .label.pointing-down:before, .label.pointing-left:before {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+  .card {
+    width: 332px;
+  }
+</style>

src/components/views/pricing/cardPlanTwo.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="card ">
+    <div class="card-content bg-white text-center" >
+      <h5>{{title}}</h5>
+      <h2 class="inline-block">$ {{price}}</h2> <span>{{priceSubtitle}}</span>
+      <div class="flex wrap gutter ">
+        <div class="auto">
+          <div class="label bg-faded text-white ">
+            Vitamin A
+            <span class="right-detail ">
+                <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                          :value="randomValueOne" :max="7" icon="thumb_up" readonly></q-rating>
+              </span>
+          </div>
+        </div>
+        <div class="auto">
+          <div class="label bg-faded text-white">
+            Vitamin K
+            <span class="right-detail">
+              <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                        :value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
+            </span>
+          </div>
+        </div>
+        <div class="auto">
+          <div class="label bg-faded text-white">
+            Vitamin B
+            <span class="right-detail">
+              <q-rating :class="buttonClasses" style="font-size: 1.5rem"
+                        :value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-actions">
+      <div class="list fit">
+        <q-collapsible group="somegroup" icon="format_list_bulleted" label="Check inside for itens" >
+          <slot name="body" ></slot>
+        </q-collapsible>
+      </div>
+    </div>
+    <div class="card-content bg-white">
+      <q-progress-button
+        :class="buttonClasses"
+        class="fit"
+        :percentage="progressBtn"
+        @click.native="workButton()"
+      >
+        Choose
+      </q-progress-button>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
+    data () {
+      return {
+        progressBtn: 0
+      }
+    },
+    computed: {
+      randomValueOne () {
+        return Math.floor((Math.random() * 5) + 1)
+      },
+      randomValueTwo () {
+        return Math.floor((Math.random() * 5) + 1)
+      },
+      randomValueThree () {
+        return Math.floor((Math.random() * 5) + 1)
+      }
+    },
+    methods: {
+      planSelected () {
+        this.$emit('card-selected', this.cardId)
+      },
+      workButton () {
+        this.stopWorkButton()
+        this.progressBtn = 15
+        this.workingButton = setInterval(() => {
+          this.progressBtn += parseInt(Math.random() * 12, 10)
+          if (this.progressBtn >= 100) {
+            this.stopWorkButton()
+          }
+        }, 500)
+      },
+      stopWorkButton (index) {
+        if (this.workingButton) {
+          clearInterval(this.workingButton)
+          this.workingButton = null
+          this.planSelected()
+        }
+        if (typeof index !== 'undefined') {
+          this.progressBtn = index
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  h5{
+    font-weight: 300;
+    text-decoration: underline;
+    margin-bottom: 5%;
+  }
+  .card {
+    min-width: 350px;
+    max-width: 700px;
+  }
+</style>

src/components/views/pricing/plansBenefits/benefitFour.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="list striped">
+    <div class="item">
+      <div class="item-content">8 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content">6 Limons</div>
+    </div>
+    <div class="item">
+      <div class="item-content">3 Grapes</div>
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>

src/components/views/pricing/plansBenefits/benefitOne.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="list ">
+    <q-collapsible icon="shopping_basket" label="Citrus">
+      <div class="item">
+        <div class="item-content">50 Oranges</div>
+      </div>
+      <div class="item" >
+        <div class="item-content">45 Limes</div>
+      </div>
+    </q-collapsible>
+    <q-collapsible icon="favorite" label="Berries">
+      <div class="item">
+        <div class="item-content">43 Blackberries</div>
+      </div>
+      <div class="item">
+        <div class="item-content">22 Grapes</div>
+      </div>
+    </q-collapsible>
+    <q-collapsible icon="opacity" label="Melons">
+      <div class="item" >
+        <div class="item-content">5 Watermelon</div>
+      </div>
+      <div class="item" >
+        <div class="item-content">10 Casaba</div>
+      </div>
+    </q-collapsible>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style>
+</style>

src/components/views/pricing/plansBenefits/benefitThree.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <div class="list-label inset">Citrus</div>
+    <div class="item">
+      <div class="item-content inset">16 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">12 Limes</div>
+    </div>
+    <hr class="inset">
+    <div class="list-label inset">Berries</div>
+    <div class="item">
+      <div class="item-content inset">14 Blackberries</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">6 Grapes</div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+<style>
+</style>

src/components/views/pricing/plansBenefits/benefitTwo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <div class="list-label inset">Citrus</div>
+    <div class="item">
+      <div class="item-content inset">24 Oranges</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">20 Limes</div>
+    </div>
+    <hr class="inset">
+    <div class="list-label inset">Berries</div>
+    <div class="item">
+      <div class="item-content inset">20 Blackberries</div>
+    </div>
+    <div class="item">
+      <div class="item-content inset">10 Grapes</div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+<style>
+</style>

src/components/views/pricing/pricing.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="layout-padding">
+      <div class="label bg-secondary text-white">
+        Plan model type <span class="right-detail"><em>{{cardType}}</em></span>
+      </div>
+      <div class="group inline-block">
+        <label >
+          <q-radio v-model="cardType" val="Vertical One"></q-radio> Vertical One
+        </label>
+        <label>
+          <q-radio v-model="cardType" val="Horizontal One" class="teal"></q-radio> Horizontal One
+        </label>
+      </div>
+
+      <div class="row wrap gutter justify-center">
+        <div class="auto " v-for="planData in plansData">
+          <component :is="componentInstanceBySelectedPlanType"
+                     :title="planData.title"
+                     :title-classes="planData.titleClasses"
+                     :price="planData.price"
+                     :price-subtitle="planData.priceSubtitle"
+                     :button-classes="planData.buttonClasses"
+                     :card-id="planData.cardId"
+                     v-on:card-selected="cardSelected"
+          >
+            <div slot="body" class="fit">
+              <component :is="planData.planBenefitComponent"></component>
+            </div>
+          </component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  /* eslint-disable */
+  import cardPlanOne from './cardPlanOne.vue'
+  import cardPlanTwo from './cardPlanTwo.vue'
+  import benefitOne from './plansBenefits/benefitOne.vue'
+  import benefitTwo from './plansBenefits/benefitTwo.vue'
+  import benefitThree from './plansBenefits/benefitThree.vue'
+  import benefitFour from './plansBenefits/benefitFour.vue'
+  //import { Toast } from 'quasar'
+  export default {
+    name: 'Pricing',
+    data () {
+      return {
+        cardType: 'Vertical One',
+        plansData: [
+          {
+            title: 'Basket Fruit One',
+            titleClasses: 'bg-primary',
+            price: '59',
+            priceSubtitle: 'per month',
+            buttonClasses: 'primary',
+            cardId: '1',
+            planBenefitComponent: 'benefit-one'
+          },
+          {
+            title: 'Basket Fruit Two',
+            titleClasses: 'bg-teal',
+            price: '39',
+            priceSubtitle: 'per month',
+            buttonClasses: 'teal',
+            cardId: '2',
+            planBenefitComponent: 'benefit-two'
+          },
+          {
+            title: 'Basket Fruit Three',
+            titleClasses: 'bg-red',
+            price: '29',
+            priceSubtitle: 'per month',
+            buttonClasses: 'red',
+            cardId: '3',
+            planBenefitComponent: 'benefit-three'
+          },
+          {
+            title: 'Basket Fruit Four',
+            titleClasses: 'bg-purple',
+            price: '19',
+            priceSubtitle: 'per month',
+            buttonClasses: 'purple',
+            cardId: '4',
+            planBenefitComponent: 'benefit-four'
+          }
+        ]
+      }
+    },
+    components: {
+      cardPlanOne,
+      benefitOne,
+      benefitTwo,
+      benefitThree,
+      benefitFour,
+      cardPlanTwo
+    },
+    computed: {
+      componentInstanceBySelectedPlanType () {
+        return this.cardType === 'Vertical One' ? 'card-plan-one' : 'card-plan-two'
+      }
+    },
+    methods: {
+      cardSelected (cardId) {
+        //Toast.create.positive({html: `Congratulations! You have choose the plan ${cardId}`})
+      },
+      chooseMostUsedPlan(cardId) {
+        return cardId == 1 ? 'animate-bounce shadow-3' : ''
+      }
+    }
+  }
+</script>
+<style scoped>
+  .inline-block {
+    margin-bottom: 7%;
+  }
+  .label{
+    padding: 1.2rem 0.7rem;
+    min-width: 260px;
+  }
+</style>