WIP MMCM

src/views/delivery-option-step-2.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="card">
-    <div class="card-header">Mode de livraison</div>
+    <div class="card-header"><h2>Mode de livraison</h2></div>
     <div class="card-body row">
-      <div v-for="product in store.productList" class="col-lg-6">
-        <h1>{{ product.name }}</h1>
-        <p> {{ product.price }}</p>
-        <button @click="goNexStep(product.id)">Choisir</button>
+      <div v-for="(product, i) in store.productList" class="col-lg-6">
+        <h4>{{ product.name }}</h4>
+        <p>{{ text[i].short }}</p>
+        <p>{{ text[i].long }}</p>
+        <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(product.price)}} TTC</button>
       </div>
     </div>
   </div>
@@ -14,12 +15,32 @@
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
 
-
 export default {
   setup() {
+
+    const text = [{
+      short: 'Dès aujourd’hui en moins de 2 h.',
+      long: '\n' +
+          'En express\n' +
+          'dès aujourd’hui en moins de 2 h.\n' +
+          'La collecte de l’ordonnance originale et des documents de santé dans une enveloppe fermée et la livraison des médicaments sont réalisées en moins de 2 heures, du lundi au samedi.'
+
+    },
+      {
+        short: 'Dès aujourd’hui en moins de 2 h.',
+        long: '\n' +
+            'En express\n' +
+            'dès aujourd’hui en moins de 2 h.\n' +
+            'La collecte de l’ordonnance originale et des documents de santé dans une enveloppe fermée et la livraison des médicaments sont réalisées en moins de 2 heures, du lundi au samedi.'
+
+      }
+    ]
+
+
     const store = useMMCMStore()
     return {
-      store
+      store,
+      text
     }
   },
   name: "delivery-option-step-2",
@@ -27,6 +48,13 @@ export default {
     goNexStep: function (idProduct) {
       this.store.setIdProduct(idProduct);
       this.$router.push({path: '/delivery-option-step-3'});
+    },
+    formatPrice(price) {
+      return new Intl.NumberFormat('fr-FR', {
+        style: 'currency',
+        currency: 'EUR',
+        minimumFractionDigits: 2
+      }).format(price)
     }
   }
 }