Un récapitulatif chiffré — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 12)

Un récapitulatif chiffré

Projet : la Librairie en application Vue · niveau 2

Énoncé

Écrire un composant RecapitulatifCommande.vue, qui reçoit le mode de retrait en prop et affiche, dans une liste de définitions, le montant des livres (avec leur nombre), les frais de livraison (« gratuite » en boutique) et le total à payer. Vérifier les montants pour trois exemplaires de L'Étranger et un Petit Prince, en boutique puis livrés.

Corrigé


<script setup>
import { computed } from "vue";
import { usePanierStore } from "@/stores/panier.js";
import { prixEnEuros } from "@/utils/format.js";

const props = defineProps({
  retrait: { type: String, required: true }, // "boutique" ou "campus"
});

const panier = usePanierStore();
const frais = computed(() => (props.retrait === "campus" ? 2 : 0));
// En centimes : des entiers, des sommes exactes (comme le serveur).
const total = computed(() => (Math.round(panier.total * 100) + frais.value * 100) / 100);
</script>

<template>
  <dl class="recapitulatif">
    <dt>Livres ({{ panier.nombre }})</dt>
    <dd>{{ prixEnEuros(panier.total) }}</dd>
    <dt>Livraison</dt>
    <dd>{{ frais === 0 ? "gratuite" : prixEnEuros(frais) }}</dd>
    <dt>Total à payer</dt>
    <dd><strong>{{ prixEnEuros(total) }}</strong></dd>
  </dl>
</template>


Livres (4) : 32,20 € | Livraison : gratuite | Total à payer : 32,20 €
Livres (4) : 32,20 € | Livraison : 2,00 € | Total à payer : 34,20 €

Les frais sont ajoutés en centimes, comme dans le store (exercice 10.4). Le serveur, lui, refera son propre calcul.