Skip to content

Commit f6b3594

Browse files
GitHubPlayerZeroGitHubPlayerZero
committed
1. 增加範例：元件共用模組
2. 微調 AxiosTest、CookieTest 畫面 3. 加入第三週作業
1 parent 9fb317b commit f6b3594

22 files changed

+1218
-3
lines changed

‎jsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"compilerOptions": {
33
"paths": {
44
"@/*": ["./src/*"]
5-
}
5+
},
6+
// "checkJs": true
67
},
78
"exclude": ["node_modules", "dist"]
89
}

‎src/router/index.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ const router = createRouter({
7676
path: 'cookie',
7777
component: () => import('../views/samples/CookieTest.vue'),
7878
},
79+
{
80+
path: 'comtest1',
81+
component: () => import('../views/samples/comTest1/ParentCom.vue'),
82+
},
7983
],
8084
},
8185
// 每日任務
@@ -180,7 +184,7 @@ const router = createRouter({
180184
{
181185
path: '',
182186
name: 'homework-default',
183-
component: () => import('../views/homework/WorkWeek1.vue'),
187+
component: () => import('../views/homework/week3_2/WorkWeek3_2.vue'),
184188
},
185189
{
186190
path: 'week1',
@@ -190,10 +194,18 @@ const router = createRouter({
190194
path: 'week2',
191195
component: () => import('../views/homework/WorkWeek2.vue'),
192196
},
197+
{
198+
path: 'week3nocomp',
199+
component: () => import('../views/homework/WorkWeek3NoComp.vue'),
200+
},
193201
{
194202
path: 'week3',
195203
component: () => import('../views/homework/week3/WorkWeek3.vue'),
196204
},
205+
{
206+
path: 'week3-2',
207+
component: () => import('../views/homework/week3_2/WorkWeek3_2.vue'),
208+
},
197209
// {
198210
// path: 'week4',
199211
// component: () => import('../views/homework/WorkWeek4.vue'),

‎src/views/homework/WorkCatalog.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<nav class="mb-16">
55
<RouterLink to="/homework/week1">第 1 週作業</RouterLink>｜
66
<RouterLink to="/homework/week2">第 2 週作業</RouterLink>｜
7-
<!-- <RouterLink to="/homework/week3">第 3 週作業</RouterLink>｜ -->
7+
<RouterLink to="/homework/week3nocomp">第 3 週作業 (沒有拆元件)</RouterLink>｜
8+
<RouterLink to="/homework/week3">第 3 週作業 - 拆元件寫法 1</RouterLink>｜
9+
<RouterLink to="/homework/week3-2">第 3 週作業 - 拆元件寫法 2</RouterLink>｜
810
<!-- <RouterLink to="/homework/week4">第 4 週作業</RouterLink>｜ -->
911
</nav>
1012

‎src/views/homework/WorkWeek3NoComp.vue

+270
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<script setup>
2+
import { computed, ref } from 'vue';
3+
4+
const productList = [
5+
{
6+
id: 1,
7+
name: '珍珠奶茶',
8+
description: '香濃奶茶搭配QQ珍珠',
9+
price: 50,
10+
},
11+
{
12+
id: 2,
13+
name: '冬瓜檸檬',
14+
description: '清新冬瓜配上新鮮檸檬',
15+
price: 45,
16+
},
17+
{
18+
id: 3,
19+
name: '翡翠檸檬',
20+
description: '綠茶與檸檬的完美結合',
21+
price: 55,
22+
},
23+
{
24+
id: 4,
25+
name: '四季春茶',
26+
description: '香醇四季春茶，回甘無比',
27+
price: 45,
28+
},
29+
{
30+
id: 5,
31+
name: '阿薩姆奶茶',
32+
description: '阿薩姆紅茶搭配香醇鮮奶',
33+
price: 50,
34+
},
35+
{
36+
id: 6,
37+
name: '檸檬冰茶',
38+
description: '檸檬與冰茶的清新組合',
39+
price: 45,
40+
},
41+
{
42+
id: 7,
43+
name: '芒果綠茶',
44+
description: '芒果與綠茶的獨特風味',
45+
price: 55,
46+
},
47+
{
48+
id: 8,
49+
name: '抹茶拿鐵',
50+
description: '抹茶與鮮奶的絕配',
51+
price: 60,
52+
},
53+
];
54+
55+
56+
/* 訂單 */
57+
const orderRemark = ref('');
58+
const orderTotal = ref(0);
59+
const order = ref([]);
60+
61+
/* 購物車 */
62+
const cartRemark = ref('');
63+
const cart = ref([
64+
// 結構範例
65+
// {
66+
// id: 1724052501829,
67+
// productId: 1,
68+
// name: '珍珠奶茶',
69+
// description: '香濃奶茶搭配QQ珍珠',
70+
// price: 50,
71+
// count: 1,
72+
// subtotal: 50,
73+
// },
74+
]);
75+
76+
// 總計
77+
const cartTotal = computed(() => {
78+
return cart.value.reduce((sum, elem) => (sum += elem.subtotal), 0);
79+
});
80+
81+
// 小計
82+
function processSubtotal(item) {
83+
item.subtotal = item.price * item.count;
84+
}
85+
86+
// 移出購物車
87+
function removeFromCart(id) {
88+
const index = cart.value.findIndex((elem) => elem.id === id);
89+
cart.value.splice(index, 1);
90+
}
91+
92+
// 送出訂單
93+
function sendOrder() {
94+
orderRemark.value = cartRemark.value;
95+
orderTotal.value = cartTotal.value;
96+
order.value = cart.value;
97+
98+
cartRemark.value = '';
99+
cart.value = [];
100+
}
101+
102+
/* 菜單 */
103+
// 加入購物車
104+
function addToCart(item)
105+
{
106+
// 判斷是否已加入過產品
107+
const product = cart.value.find(elem => elem.productId === item.id);
108+
109+
if (product) {
110+
alert(`[${product.name}] 已加入，請直接調整品項數量哦～`);
111+
return;
112+
}
113+
114+
// 將產品加入購物車
115+
cart.value.push({
116+
...item,
117+
count: 1,
118+
subtotal: item.price,
119+
productId: item.id,
120+
id: new Date().getTime(),
121+
});
122+
}
123+
</script>
124+
125+
<template>
126+
127+
<div class="container mt-5">
128+
<div class="row">
129+
<!-- 菜單 -->
130+
<div class="col-md-4">
131+
<div class="list-group">
132+
<a
133+
href="#"
134+
class="list-group-item list-group-item-action"
135+
v-for="product in productList"
136+
:key="product.id"
137+
@click.prevent="addToCart(product)"
138+
>
139+
<div class="d-flex w-100 justify-content-between">
140+
<h5 class="mb-1">{{ product.name }}</h5>
141+
<small>{{ product.price }}</small>
142+
</div>
143+
<p class="mb-1">{{ product.description }}</p>
144+
</a>
145+
</div>
146+
</div>
147+
148+
<!-- 購物車 -->
149+
<div class="col-md-8">
150+
<!-- 品項 -->
151+
<table class="table">
152+
<thead>
153+
<tr>
154+
<th scope="col" width="50">操作</th>
155+
<th scope="col">品項</th>
156+
<th scope="col">描述</th>
157+
<th scope="col" width="90">數量</th>
158+
<th scope="col">單價</th>
159+
<th scope="col">小計</th>
160+
</tr>
161+
</thead>
162+
<tbody>
163+
<tr v-for="product in cart" :key="product.id">
164+
<td>
165+
<button
166+
type="button"
167+
class="btn btn-sm"
168+
@click="removeFromCart(product.id)"
169+
>
170+
x
171+
</button>
172+
</td>
173+
<td>{{ product.name }}</td>
174+
<td>
175+
<small>{{ product.description }}</small>
176+
</td>
177+
<td>
178+
<select
179+
class="form-select"
180+
v-model="product.count"
181+
@change="processSubtotal(product)"
182+
>
183+
<option value="1">1</option>
184+
<option value="2">2</option>
185+
<option value="3">3</option>
186+
<option value="4">4</option>
187+
<option value="5">5</option>
188+
<option value="6">6</option>
189+
<option value="7">7</option>
190+
<option value="8">8</option>
191+
<option value="9">9</option>
192+
<option value="10">10</option>
193+
</select>
194+
</td>
195+
<td>{{ product.price }}</td>
196+
<td>{{ product.subtotal }}</td>
197+
</tr>
198+
</tbody>
199+
</table>
200+
201+
<div class="alert alert-warning text-center" v-if="cart.length <= 0">
202+
請選擇商品
203+
</div>
204+
<div v-else>
205+
<!-- 總計 -->
206+
<div class="text-end mb-3">
207+
<h5>
208+
總計: <span>${{ cartTotal }}</span>
209+
</h5>
210+
</div>
211+
212+
<!-- 備註 -->
213+
<textarea
214+
class="form-control mb-3"
215+
rows="3"
216+
placeholder="備註"
217+
v-model="cartRemark"
218+
></textarea>
219+
<div class="text-end">
220+
<button type="button" class="btn btn-primary" @click="sendOrder">
221+
送出
222+
</button>
223+
</div>
224+
</div>
225+
</div>
226+
</div>
227+
228+
<hr />
229+
230+
<!-- 訂單 -->
231+
<div class="row justify-content-center">
232+
<div class="col-8">
233+
<div class="alert alert-secondary" v-if="order.length <= 0">尚未建立訂單</div>
234+
<div class="card" v-else>
235+
<div class="card-body">
236+
<div class="card-title">
237+
<h5>訂單</h5>
238+
<table class="table">
239+
<thead>
240+
<tr>
241+
<th scope="col">品項</th>
242+
<th scope="col">數量</th>
243+
<th scope="col">小計</th>
244+
</tr>
245+
</thead>
246+
<tbody>
247+
<tr v-for="product in order" :key="product.id">
248+
<td>{{ product.name }}</td>
249+
<td>{{ product.count }}</td>
250+
<td>{{ product.subtotal }}</td>
251+
</tr>
252+
</tbody>
253+
</table>
254+
<div class="text-end">
255+
備註: <span>{{ orderRemark }}</span>
256+
</div>
257+
<div class="text-end">
258+
<h5>
259+
總計: <span>${{ orderTotal }}</span>
260+
</h5>
261+
</div>
262+
</div>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
267+
</div>
268+
</template>
269+
270+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)