Creating Estimate Page

src/model/Estimate.ts

@@ -2,7 +2,7 @@ import { tools } from '@src/store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 
 export interface IEstimate {
-  id: number
+  id?: number
   title: string
   advanced?: boolean
   description?: string
@@ -12,6 +12,7 @@ export interface IEstimate {
   icon?: string
   numpag?: number
   qta?: number
-  price: number
+  price?: number
+  pricebase?: number
   checksel?: boolean
 }

src/views/pages/estimate/estimate.ts

@@ -7,16 +7,46 @@ import { tools } from '@src/store/Modules/tools'
 export default class Estimate extends Vue {
   public arrEstimate: IEstimate[] = []
 
+  public features: IEstimate[] = [
+    {
+      title: '5 pagine principali: 1) Home principale con testo + slideshow di immagini, 2) Chi siamo, 3) Dove Siamo, 4) Contatti, 5) Servizi',
+      icon: 'looks_5'
+    },
+    {
+      title: 'Ottimizzato con tecnologia Responsive, visualizzabile su cellulare',
+      icon: 'devices_other'
+    },
+    {
+      title: 'Possibilità di modificare, in maniera autonoma, i testi delle pagine esistenti (Sito Dinamico)',
+      icon: 'edit'
+    },
+    {
+      title: 'Galleria d\'immagini Slideshow',
+      icon: 'photo_album'
+    },
+    {
+      title: 'Certificato SSL / HTTPS di sicurezza incluso',
+      icon: 'https'
+    },
+    {
+      title: 'GDPR privacy e cookie',
+      icon: 'verified_user'
+    },
+    {
+      title: 'Posizionamento motori di ricerca (Google)',
+      icon: 'search'
+    },
+    {
+      title: 'Statistica Visualizzazioni sito web (Google Analytics)',
+      icon: 'search'
+    }
+
+    ]
+
   public arrEstimateit: IEstimate[] = [
     {
       id: 1,
-      title: 'Pagina Web Base', description: 'Incluso nel prezzo:<br />' +
+      title: 'Pagina Web Base', description: '',
-      '- 5 pagine principali: Home principale con testo + slideshow di immagini, Chi siamo, Dove Siamo, Contatti<br />' +
-      '- Possibilità di modificare in maniera autonoma i testi delle pagine (Sito Dinamico)<br />' +
-      '- Galleria d\'immagini Slideshow ' +
-      '- Certificato SSL / HTTPS di sicurezza incluso<br />' +
-      '- GDPR privacy e cookie<br />' +
-      '- Posizionamento motori di ricerca<br />',
       price: 250,
       advanced: false,
       qta: 1,
@@ -79,6 +109,7 @@ export default class Estimate extends Vue {
       advanced: false,
       icon: 'language',
       price: 10,
+      pricebase: 50,
       qta: 1,
       numpag: 0,
       viewlist: null,
@@ -138,11 +169,14 @@ export default class Estimate extends Vue {
   }
 
   public getPrice(rec: IEstimate) {
+    let myprice = 0
     if (rec.id === tools.languageid) {
-      return rec.price * this.getNumpagTotal()
+      myprice = (rec.price * this.getNumpagTotal()) + rec.pricebase
     } else {
-      return rec.price
+      myprice = rec.price
     }
+
+    return myprice
   }
 
   public getNumpagTotal() {

src/views/pages/estimate/estimate.vue

@@ -1,7 +1,32 @@
 <template>
     <div>
         <q-list bordered padding>
-            <q-item-label header class="text-subtitle1 text-red">Presupuesto</q-item-label>
+            <q-item-label header class="text-subtitle1 text-blue text-center text-bold">Preventivo Sito Web
+            </q-item-label>
+            <p class="q-ml-md">
+                <q-chip color="primary" text-color="white" icon="">
+                    Funzionalità Incluse
+                </q-chip>
+            </p>
+            <!--<q-item-label header class="text-subtitle1 text-blue">Funzionalità Incluse</q-item-label>-->
+
+            <q-item tag="label" v-for="rec in features" :key="rec.title">
+                <q-item-section avatar top>
+                    <q-avatar :icon="rec.icon" color="green" text-color="white"/>
+                </q-item-section>
+
+                <q-item-section>
+                    <q-item-label>{{rec.title}}</q-item-label>
+                </q-item-section>
+            </q-item>
+
+        </q-list>
+        <q-list bordered padding>
+            <p class="q-ml-md">
+                <q-chip color="orange" text-color="white" icon="">
+                    Funzionalità Aggiuntive
+                </q-chip>
+            </p>
 
             <div style="text-align: right;">
                 <span class="est__totale_text">Pagine:</span>
@@ -12,6 +37,7 @@
             </div>
 
             <q-item tag="label" v-for="rec in arrEstimateit" :key="rec.title">
+
                 <q-item-section avatar top>
                     <q-avatar :icon="rec.icon" :color="getColor(rec)" text-color="white"/>
                 </q-item-section>