jonathan/mmcm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP MMCM

Browse Source
This commit is contained in:
Jonathan Chevalier
2022-09-29 16:03:50 +02:00
parent 96c063865a
commit 5192982555
7 changed files with 140 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.vue
View File

@@ -6,14 +6,37 @@ import Wizard from "./components/Wizard.vue";
</script>
<template>
<div class="PARA">
<div class="app_vue_mmcm">
<main id="product">
<wizard></wizard>
<wizard v-if="$route.path !== '/'"></wizard>
<router-view></router-view>
</main>
</div>
</template>
<style scoped>
<style lang="scss">
@import 'https://fonts.googleapis.com/css?family=Montserrat';
.app_vue_mmcm{
font-family: 'Montserrat',sans-serif;
}
.step_title{
text-align: left;
font-size: 1.125rem;
font-weight: 700;
color: #000;
font-family: 'Montserrat',sans-serif;
margin-bottom: 30px
}
.step_title:after {
width: 85px;
height: 3px;
background-color: #f91ea9;
content: "";
display: block;
margin: 10px 0 0;
}
</style>

100
src/components/Wizard.vue
View File

@@ -1,53 +1,75 @@
<template>
<ol class="step-indicator">
<li class="active">
<div class="step"><i class="fa-regular fa-location-dot fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>1</span>: <span>Mon adresse</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-file-medical fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>2</span>: <span>Mon ordonnance</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-truck fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>3</span>: <span>Ma livraison</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-calendar-days fa-fw"></i></div>
<div class="caption d-none d-sm-block">Etape <span>4</span>: <span>Date</span></div>
</li>
<li class="">
<div class="step"><i class="fa-solid fa-circle-check fa-fw"></i></div>
<div class="caption d-none d-sm-block">Step <span>5</span>: <span>Confirmation</span></div>
<li v-for="step in stepList" :class="(step.stepNumber<currentStep) ? 'complete' : ''">
<router-link :to="step.path">
<div class="step"><i :class="step.class"></i></div>
<div class="caption d-none d-sm-block">Etape <span>{{step.stepNumber}}</span>: <span>{{ step.name }}</span></div>
</router-link>
</li>
</ol>
</template>
<script>
import {useMMCMStore} from "../stores/mmcm";
import {ref, computed} from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
name: "Wizard"
setup() {
const stepList = [
{
class: 'fa-regular fa-location-dot fa-fw',
name: 'Mon adresse',
path: '/address-check',
stepNumber : 1
},
{
class: 'fa-solid fa-file-medical fa-fw',
name: 'Mon ordonnance',
path: '/delivery-option-step-1',
stepNumber : 2
},
{
class: 'fa-solid fa-truck fa-fw',
name: 'Ma livraison',
path: '/delivery-option-step-2',
stepNumber : 3
},
{
class: 'fa-solid fa-calendar-days fa-fw',
name: 'Date',
path: '/delivery-option-step-3',
stepNumber : 4
},
{
class: 'fa-solid fa-cart-shopping fa-fw',
name: 'Ajout au panier',
path: '/delivery-option-summary',
stepNumber : 5
},
]
const router = useRouter()
const route = useRoute()
const currentStep = computed(() => stepList.filter(step=>step.path === route.path)[0].stepNumber)
return {
stepList,
currentStep
}
},
name: "Wizard",
}
</script>
<style lang="scss">
$wizard-color-neutral: #ccc !default;
$wizard-color-active: #4183D7 !default;
$wizard-color-active: #f91ea9 !default;
$wizard-color-complete: #87D37C !default;
$wizard-step-width-height: 64px !default;
$wizard-step-font-size: 24px !default;
@import 'https://fonts.googleapis.com/css?family=Roboto';
body {
padding: 0;
margin: 0;
background-color: #f6f6f6;
font-family: 'Roboto', sans-serif;
}
.container {
background-color: #fff;
}
$wizard-step-width-height: 48px !default;
$wizard-step-font-size: 18px !default;
.step-wrapper {
padding: 20px 0;
@@ -97,7 +119,11 @@ body {
}
}
&.active {
a{
text-decoration:none
}
.router-link-active {
.step {
border-color: $wizard-color-active;
color: $wizard-color-active;

2
src/views/address-check.vue
View File

@@ -1,5 +1,5 @@
<template>
<h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
<div class="step_title">Indiquez votre adresse de livraison (domicile, travail...) :</div>
<div class="input-group mb-3">
<div class="input-group-text">

37
src/views/delivery-option-step-1.vue
View File

@@ -1,11 +1,10 @@
<template>
<div class="card">
<div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
<div class="card-body">
<div class="row text-start">
<div class="step_title"> Avec ou sans ordonnance ?</div>
<div class="row">
<div class="col-lg-6">
<h4>Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</h4>
<div class="card">
<div class="card-header fw-bold">Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</div>
<div class="card-body text-start">
<ol>
<li>Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai
une) dans une enveloppe fermée.
@@ -16,30 +15,30 @@
<li>Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
<li>Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
</ol>
</div>
<div class="col-lg-6">
<h4>Sans ordonnance (mon pharmacien a déjà mon ordonnance) :</h4>
<ol>
<li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
<li>Le livreur me livre à l’adresse renseignée.</li>
</ol>
</div>
</div>
<div class="row text-center">
<div class="col-lg-6">
<div class="text-center">
<button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
Choisir
</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header fw-bold">Sans ordonnance (mon pharmacien a déjà mon ordonnance)</div>
<div class="card-body text-start">
<ol>
<li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
<li>Le livreur me livre à l’adresse renseignée.</li>
</ol>
<div class="text-center">
<button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i> Choisir
</button>
</div>
</div>
</div>
</div>
</div>
</template>

10
src/views/delivery-option-step-2.vue
View File

@@ -1,15 +1,17 @@
<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"><h2>Mode de livraison</h2></div>
<div class="card-body row">
<div v-for="(product, i) in store.productList" class="col-lg-6">
<h4>{{ product.name }}</h4>
<div class="card-header fw-bold">{{ product.name }}</div>
<div class="card-body">
<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>
</div>
</template>
<script>

11
src/views/delivery-option-step-3.vue
View File

@@ -1,10 +1,8 @@
<template>
<div class="card">
<div class="card-header"><h4>Date de livraison des médicaments :</h4></div>
<div class="card-body">
<div class="step_title">Date de livraison des médicaments :</div>
<div class="input-group has-validation">
<Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false" model-type="timestamp" select-text="Choisir" cancel-text="Annuler"
<Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false" model-type="timestamp"
select-text="Choisir" cancel-text="Annuler"
monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :enableTimePicker="false"
:disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
<button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
@@ -13,9 +11,6 @@
Merci de renseigner la date
</div>
</div>
</div>
</div>
</template>
<script>

16
src/views/delivery-option-summary.vue
View File

@@ -1,16 +1,14 @@
<template>
<div class="card">
<div class="card-header"><h4>Recapitulatif</h4></div>
<div class="card-body">
<div><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
<div><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
<div><strong>Collecte de l'ordonnnace : </strong>
<div class="step_title">Recapitulatif :</div>
<div class="text-start">
<div class="mb-2"><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
<div class="mb-2"><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
<div class="mb-2"><strong>Collecte de l'ordonnnace : </strong>
<span v-if="store.widthPrescription">Oui</span>
<span v-else>Non</span>
</div>
<div><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
<button class="btn btn-primary" @click="addToCart">Valider</button>
</div>
<div class="mb-2"><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
<button class="btn btn-primary" @click="addToCart"><i class="fa-regular fa-circle-check fa-fw"></i> Ajouter au panier</button>
</div>
</template>