WIP MMCM

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

@@ -1,21 +1,34 @@
 <template>
   <div class="step_title">Mode de livraison</div>
-  <div class="row">
-    <div class="col-lg-6" v-for="(product, i) in store.productList">
-      <div class="card">
-        <div class="card-header fw-bold"><img :alt="product.name" :src="product.media_list[0].filename" class="me-2" height="50"/> {{ product.name }}</div>
-        <div class="card-body">
-          <div class="fw-bold mb-2 text-primary"><i class="fa-solid fa-calendar-days"></i> {{store.msgDelivery[i]}}</div>
-          <div v-html="(store.withPrescription ? product.description1 : product.description2)"></div>
-          <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(store.withPrescription ? product.price :  product.price2) }} TTC</button>
+
+  <div v-if="store.productList.length === 0">Nada</div>
+
+  <div v-else class="d-flex flex-lg-row flex-column align-items-stretch">
+    <FlexCard v-for="(product, i) in store.productList" :card="product">
+
+      <template v-slot:card-image><img :alt="product.name" :src="product.media_list[0].filename" class="me-2"
+                                       height="50"/></template>
+
+      <template v-slot:card-body>
+        <div class="fw-bold mb-2 text-primary"><i class="fa-solid fa-calendar-days"></i> {{ store.msgDelivery[i] }}
         </div>
-      </div>
-    </div>
+        <div v-html="(store.withPrescription ? product.description1 : product.description2)"></div>
+      </template>
+
+      <template v-slot:btn-card>
+        <button class="btn btn-primary" @click="goNexStep(product.id)">
+          {{ formatPrice(store.withPrescription ? product.price : product.price2) }} TTC
+        </button>
+      </template>
+
+    </FlexCard>
   </div>
 </template>
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
+import FlexCard from "../components/FlexCard.vue";
+
 
 export default {
   setup() {
@@ -24,6 +37,7 @@ export default {
       store
     }
   },
+  components: {FlexCard},
   name: "delivery-option-step-2",
   methods: {
     goNexStep: function (idProduct) {