Skip to content

Commit cb6aac2

Browse files
mahedesmahedes
committed
05_07_f
1 parent 8c78778 commit cb6aac2

File tree

4 files changed

+339
-10
lines changed

4 files changed

+339
-10
lines changed

‎vuejs3-linkedin-project/src/components/Products.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<template>
2-
<article>
2+
<article v-for="(type, index) in types" :key="index">
33
<div class="product-img"></div>
44
<div class="product-description">
5-
<h3>{{ titre }}</h3>
5+
<h3>Pizza {{ type }}</h3>
66
<p>Prix : {{ price }} €</p>
77
<p>{{ ingredients }}</p>
8-
<a href="">
8+
<router-link
9+
:to="{ name: 'product-details', params: { name: 'un-parametre' } }"
10+
>
911
Commander >>
10-
</a>
12+
</router-link>
1113
</div>
1214
</article>
1315
</template>
@@ -18,7 +20,7 @@ export default {
1820
1921
data() {
2022
return {
21-
titre: "Pizza Royale",
23+
types: ["royale", "orientale", "4 fromages", "barbecue", "vegetarienne"],
2224
price: 12,
2325
image: "../assets/images/pizza2.jpg",
2426
ingredients: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

‎vuejs3-linkedin-project/src/router/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
22
import Home from "../views/Home.vue";
33
import Contact from "../views/Contact.vue";
44
import NotFound from "../views/NotFound.vue";
5-
5+
import ProductDetails from "../views/ProductDetails.vue";
66

77
const routes = [
88
{
@@ -16,6 +16,11 @@ const routes = [
1616
component: Contact,
1717
alias: "/contact"
1818
},
19+
{
20+
path: '/products/:name',
21+
name: "product-details",
22+
component: ProductDetails,
23+
},
1924
{
2025
path: '/:catchAll(.*)',
2126
component: NotFound

‎vuejs3-linkedin-project/src/views/Home.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@
77
</div>
88
<div id="product-menu">
99
<Products />
10-
<Products />
11-
<Products />
12-
<Products />
13-
<Products />
1410
</div>
1511
</template>
1612

‎vuejs3-linkedin-project/src/views/ProductDetails.vue‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
<template>
2+
<div id="section-product-details">
3+
<!-- Section Panier -->
4+
<div class="cart">
5+
<table>
6+
<thead>
7+
<tr>
8+
<th colspan="2">Votre commande</th>
9+
</tr>
10+
</thead>
11+
<tbody>
12+
<tr>
13+
<td>Nombre de Pizza</td>
14+
<td>x {{ nbrProduct }}</td>
15+
</tr>
16+
<tr>
17+
<td>Code Promo</td>
18+
<td class="code-promo">
19+
<input v-model="promo" placeholder="Ajouter un code promo" />
20+
</td>
21+
</tr>
22+
<tr>
23+
<td>Total à payer</td>
24+
25+
<td>
26+
<transition name="bounce">
27+
<div v-if="promo === 'royale'">
28+
(-5€)
29+
<span class="sale">{{ totalPrice }} €</span>
30+
{{ totalPrice - 5 }} €
31+
</div>
32+
<div v-else>{{ totalPrice }} €</div>
33+
</transition>
34+
</td>
35+
</tr>
36+
</tbody>
37+
</table>
38+
</div>
39+
<!-- Section Produit -->
40+
<div class="product-section">
41+
<!-- Image du produit -->
42+
<div class="product-image">
43+
<img :src="img" />
44+
</div>
45+
46+
<!-- Description du produit -->
47+
<div class="product-description">
48+
<h1>
49+
{{ $route.params.name }}
50+
<img class="img-best-seller" src="../assets/images/best-seller.png" />
51+
</h1>
52+
<p v-show="notAvailable">Momentanément indisponible</p>
53+
54+
<p v-if="sale">
55+
<span class="sale">{{ price }} € </span>
56+
<span class="new-price"> {{ price - 5 }} € PROMOTION</span>
57+
</p>
58+
<p v-else>
59+
<span class="price">{{ price }} €</span>
60+
</p>
61+
62+
<br />
63+
<strong>Ingrédients </strong>
64+
<div>
65+
<span v-for="(ingredient, index) in ingredients" :key="index"
66+
>{{ ingredient + ", " }}
67+
</span>
68+
</div>
69+
<br />
70+
<div class="sauces">
71+
<strong>Sauces au choix</strong>
72+
<ul>
73+
<li
74+
v-for="(sauce, index) in sauces"
75+
:key="index"
76+
@mouseover="updateImage(sauce.image)"
77+
:style="{ backgroundColor: sauce.color }"
78+
>
79+
{{ sauce.type }}
80+
</li>
81+
</ul>
82+
</div>
83+
<div>
84+
<strong>Valeurs nutritionnelles pour 100 grammes</strong>
85+
<ul>
86+
<li v-for="(value, name, index) in energy" :key="index">
87+
{{ name }} : {{ value }}
88+
</li>
89+
</ul>
90+
</div>
91+
92+
<!-- Bouton d'ajout au panier -->
93+
<button
94+
v-bind:class="{ notActiveBtn: notAvailable }"
95+
@click="addProduct()"
96+
:disabled="notAvailable"
97+
>
98+
Ajouter à ma commande
99+
</button>
100+
<br /><br />
101+
</div>
102+
</div>
103+
</div>
104+
</template>
105+
106+
<script>
107+
export default {
108+
data() {
109+
return {
110+
product: "Pizza",
111+
price: 12,
112+
img: require("../assets/images/pizza1-tomate.jpg"),
113+
sale: false,
114+
notAvailable: false,
115+
sauces: [
116+
{
117+
id: 1001,
118+
type: "Sauce Tomate",
119+
color: "#db4006",
120+
image: require("../assets/images/pizza1-tomate.jpg")
121+
},
122+
{
123+
id: 1002,
124+
type: "Crème Fraiche",
125+
color: "#e9cb8f",
126+
image: require("../assets/images/pizza1-creme.jpg")
127+
}
128+
],
129+
ingredients: [
130+
"Olives",
131+
"Poulet roti",
132+
"Bacon",
133+
"Poivrons",
134+
"Champignons",
135+
"Mozzarella",
136+
"Oeuf"
137+
],
138+
energy: {
139+
Kcal: 242,
140+
Glucides: 27.99,
141+
Fibres: 1.75,
142+
Proteines: 9.62,
143+
Sel: 11
144+
},
145+
totalPrice: 0,
146+
nbrProduct: 0,
147+
promo: ""
148+
};
149+
},
150+
151+
methods: {
152+
addProduct() {
153+
if (this.sale) {
154+
this.nbrProduct += 1;
155+
this.totalPrice += this.price - 5;
156+
} else {
157+
this.nbrProduct += 1;
158+
this.totalPrice += this.price;
159+
}
160+
},
161+
updateImage(newLinkImage) {
162+
this.img = newLinkImage;
163+
}
164+
},
165+
166+
computed: {
167+
title() {
168+
return this.product + " " + this.name;
169+
}
170+
}
171+
};
172+
</script>
173+
174+
<style scoped>
175+
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
176+
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
177+
178+
button {
179+
background-color: #d0021b;
180+
border-color: #d0021b;
181+
color: #fff;
182+
cursor: pointer;
183+
font-family: "Oswald", sans-serif !important;
184+
line-height: 20px;
185+
margin: 20px auto;
186+
max-width: initial;
187+
min-width: initial;
188+
padding: 12px;
189+
text-align: center;
190+
text-transform: uppercase !important;
191+
width: 350px;
192+
}
193+
button:hover {
194+
background-color: #b6132c;
195+
}
196+
.notActiveBtn {
197+
background-color: #f6f6f6;
198+
border-color: #f6f6f6;
199+
color: gray;
200+
cursor: not-allowed;
201+
text-decoration: line-through;
202+
}
203+
.notActiveBtn:hover {
204+
background-color: #f6f6f6;
205+
}
206+
strong {
207+
font-size: 18px;
208+
}
209+
body {
210+
/*background-color: #f2f2f2;*/
211+
margin: 0px;
212+
font-family: "Source Sans Pro";
213+
font-size: 20px;
214+
}
215+
#section-product-details {
216+
display: flex;
217+
flex-direction: row-reverse;
218+
text-align: left;
219+
}
220+
h1 {
221+
text-transform: capitalize;
222+
font-size: 50px;
223+
font-weight: 700;
224+
margin: 0;
225+
line-height: 1.1;
226+
font-family: "Roboto", sans-serif;
227+
}
228+
.new-price {
229+
color: #c10a28;
230+
font-weight: bold;
231+
text-decoration: underline;
232+
}
233+
.sale {
234+
color: #616161;
235+
margin-right: 5px;
236+
text-decoration: line-through;
237+
}
238+
img {
239+
width: 90%;
240+
padding: 15px;
241+
}
242+
.product {
243+
margin: 40px;
244+
padding: 15px;
245+
}
246+
span.price {
247+
color: #c10a28;
248+
font-family: "Source Sans Pro";
249+
font-size: 24px;
250+
font-weight: 400;
251+
}
252+
253+
.product-description {
254+
width: 47%;
255+
}
256+
.product-image {
257+
width: 52%;
258+
}
259+
.product-section {
260+
display: flex;
261+
flex-direction: row;
262+
flex-wrap: wrap;
263+
margin: 40px 0px 40px 40px;
264+
width: 80%;
265+
}
266+
.sauces li {
267+
list-style: none;
268+
padding: 5px 15px;
269+
margin: 10px 0px;
270+
width: fit-content;
271+
border-radius: 20px;
272+
color: white;
273+
cursor: pointer;
274+
}
275+
.sauces li:hover {
276+
color: black;
277+
}
278+
.img-best-seller {
279+
height: 60px;
280+
width: auto;
281+
padding: 0;
282+
margin-left: 10px;
283+
}
284+
.cart {
285+
margin-right: 40px;
286+
margin-top: 40px;
287+
}
288+
table {
289+
border-collapse: collapse;
290+
}
291+
292+
table,
293+
th,
294+
td {
295+
border: 1px solid black;
296+
text-align: right;
297+
padding-left: 10px;
298+
padding-right: 10px;
299+
}
300+
table thead th {
301+
text-align: center;
302+
}
303+
td {
304+
width: 170px;
305+
}
306+
td.code-promo {
307+
padding: 0;
308+
}
309+
310+
/* Transition */
311+
.bounce-enter-active {
312+
animation: bounce-in 0.5s;
313+
}
314+
315+
@keyframes bounce-in {
316+
0% {
317+
transform: scale(0);
318+
}
319+
50% {
320+
transform: scale(1.25);
321+
}
322+
100% {
323+
transform: scale(1);
324+
}
325+
}
326+
</style>

0 commit comments

Comments
 (0)