# 第三週作業繳交 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) 【題目】： 餐點管理工具 作業使用者故事： 1. 點餐人員可以將左側的品項加入購物車 2. 點餐人員，可以刪除、調整購物車品項數量（Level 1, 2 可不做） 3. 點餐人員可加入備註 4. 點餐人員可以建立訂單 解答連結： - 執行範例：https://www.casper.tw/2024-vue-homework/#/week3 - 原始碼：https://github.com/Wcc723/2024-vue-homework/blob/main/src/views/Week3View.vue ```html <div id="root"> <div class="container mt-5"> <div class="row"> <div class="col-md-4"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">珍珠奶茶</h5> <small>$50</small> </div> <p class="mb-1">香濃奶茶搭配QQ珍珠</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">冬瓜檸檬</h5> <small>$45</small> </div> <p class="mb-1">清新冬瓜配上新鮮檸檬</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">翡翠檸檬</h5> <small>$55</small> </div> <p class="mb-1">綠茶與檸檬的完美結合</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">四季春茶</h5> <small>$45</small> </div> <p class="mb-1">香醇四季春茶，回甘無比</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">阿薩姆奶茶</h5> <small>$50</small> </div> <p class="mb-1">阿薩姆紅茶搭配香醇鮮奶</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">檸檬冰茶</h5> <small>$45</small> </div> <p class="mb-1">檸檬與冰茶的清新組合</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">芒果綠茶</h5> <small>$55</small> </div> <p class="mb-1">芒果與綠茶的獨特風味</p></a ><a href="#" class="list-group-item list-group-item-action" ><div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">抹茶拿鐵</h5> <small>$60</small> </div> <p class="mb-1">抹茶與鮮奶的絕配</p></a > </div> </div> <div class="col-md-8"> <table class="table"> <thead> <tr> <th scope="col" width="50">操作</th> <th scope="col">品項</th> <th scope="col">描述</th> <th scope="col" width="90">數量</th> <th scope="col">單價</th> <th scope="col">小計</th> </tr> </thead> <tbody> <tr> <td><button type="button" class="btn btn-sm">x</button></td> <td>四季春茶</td> <td><small>香醇四季春茶，回甘無比</small></td> <td> <select class="form-select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> <td>45</td> <td>45</td> </tr> <tr> <td><button type="button" class="btn btn-sm">x</button></td> <td>翡翠檸檬</td> <td><small>綠茶與檸檬的完美結合</small></td> <td> <select class="form-select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> <td>55</td> <td>55</td> </tr> </tbody> </table> <div class="text-end mb-3"> <h5>總計: <span>$100</span></h5> </div> <textarea class="form-control mb-3" rows="3" placeholder="備註" ></textarea> <div class="text-end"> <button class="btn btn-primary">送出</button> </div> </div> </div> <hr /> <div class="row justify-content-center"> <div class="col-8"> <div class="card"> <div class="card-body"> <div class="card-title"> <h5>訂單</h5> <table class="table"> <thead> <tr> <th scope="col">品項</th> <th scope="col">數量</th> <th scope="col">小計</th> </tr> </thead> <tbody> <tr> <td>翡翠檸檬</td> <td>7</td> <td>385</td> </tr> <tr> <td>冬瓜檸檬</td> <td>7</td> <td>315</td> </tr> <tr> <td>冬瓜檸檬</td> <td>4</td> <td>180</td> </tr> </tbody> </table> <div class="text-end">備註: <span>都不要香菜</span></div> <div class="text-end"> <h5>總計: <span>$145</span></h5> </div> </div> </div> </div> </div> </div> </div> </div> ``` 資料： ```html const data = [ { "id": 1, "name": "珍珠奶茶", "description": "香濃奶茶搭配QQ珍珠", "price": 50 }, { "id": 2, "name": "冬瓜檸檬", "description": "清新冬瓜配上新鮮檸檬", "price": 45 }, { "id": 3, "name": "翡翠檸檬", "description": "綠茶與檸檬的完美結合", "price": 55 }, { "id": 4, "name": "四季春茶", "description": "香醇四季春茶，回甘無比", "price": 45 }, { "id": 5, "name": "阿薩姆奶茶", "description": "阿薩姆紅茶搭配香醇鮮奶", "price": 50 }, { "id": 6, "name": "檸檬冰茶", "description": "檸檬與冰茶的清新組合", "price": 45 }, { "id": 7, "name": "芒果綠茶", "description": "芒果與綠茶的獨特風味", "price": 55 }, { "id": 8, "name": "抹茶拿鐵", "description": "抹茶與鮮奶的絕配", "price": 60 } ] ``` :::info | Level | 說明 | |:-------------------:|:------------------------------ | | **（原版）LV1** | 僅將以上功能完成，不拆分成元件（可以**省略：刪除、調整數量的功能**） | | **（原版）LV2** | 包含以上功能，至少額外拆分兩個元件 | | **（原版挑戰）LV3** | **不參考解答**製作菜單工具，不省略任何功能<br />且至少包含額外三個元件<br />（重複品項無法重複加入） | ::: --- | # | Level | Discord | CodePen / 答案 | |:---:|:----- |:-------:|:--------------| | 範例 | LV1 | 卡斯伯 | [GitHub](https://github.com/Wcc723) / [GitHub Pages](https://github.com/Wcc723) | | 1 | LV3 | Aaron 謝宗佑 | [GitHub](https://github.com/happyloa/Hex2024-Vue-Week3-Homework) / [GitHub Pages](https://hex2024-vue-homework3.worksbyaaron.com/) | | 2 | LV3 | rjjq | [GitHub](https://github.com/rjjq/2024-vue-week3-hw) / [GitHub Pages](https://rjjq.github.io/2024-vue-week3-hw) | | 3 | LV3 | Eric0823 | [GitHub](https://github.com/eyeshot0823/2024-vue-homework) / [GitHub Pages](https://eyeshot0823.github.io/2024-vue-homework/#/week03) | | 4 | LV3 | Shin | [GitHub](https://github.com/penspulse326/vue-camp-week-3/) / [GitHub Pages](https://penspulse326.github.io/vue-camp-week-3/) | | 5 | LV3 | Aden | [GitHub](https://github.com/spikesandmaen484/vue-homework-week03) / [GitHub Pages](https://spikesandmaen484.github.io/vue-homework-week03/) | | 6 | LV3 | Terry.D | [GitHub](https://github.com/softwaltz/hexschoolVueWeek3/blob/main/src/views/HomeView.vue) / [GitHub Pages](https://softwaltz.github.io/hexschoolVueWeek3/) | | 7 | LV3 | YiShan | [GitHub](https://github.com/nju6g0/vue-practice/blob/main/src/views/OrderingService.vue) / [GitHub Pages](https://nju6g0.github.io/vue-practice/#/orderingService) | | 8 | LV3 | Kevin Wei | [GitHub](https://github.com/kevin21305991/hexschool-2024-vue3/blob/main/src/views/Week3.vue) / [GitHub Pages](https://hexschool-2024-vue3.vercel.app/week3) | | 9 | LV3 | Letitia | [GitHub](https://github.com/letitia-chiu/hexschool-vue-2024-w3-homework) / [GitHub Pages](https://letitia-chiu.github.io/hexschool-vue-2024-w3-homework/) | 10 | LV3 | Johnson | [GitHub](https://github.com/tttom3669/2024_hex_vue_homework) / [GitHub Pages](https://tttom3669.github.io/2024_hex_vue_homework/#/homework_3) | | 11 | LV3 | 阿B | [GitHub](https://github.com/Jfu90/vue-homework-week3) / [GitHub Pages](https://jfu90.github.io/vue-homework-week3/) | | 12 | LV2 | smart | [GitHub](https://github.com/KUO-CHIH-YU/vite-week3-2024/tree/main) / [GitHub Pages](https://kuo-chih-yu.github.io/vite-week3-2024/#/week3/) | | 13 | LV3 | zaoannihao | [GitHub](https://github.com/chenyu-0721/vue3shop) / [GitHub Pages](https://chenyu-0721.github.io/vue3shop/) | | 14 | LV3 | SKey | [GitHub](https://github.com/cyberseris/vue-2024-week03) / [GitHub Pages](https://cyberseris.github.io/vue-2024-week03/#) | | 15 | LV3 | Sandra191919 | [GitHub](https://github.com/sandralu11/vue-2024) / [GitHub Pages](https://sandralu11.github.io/vue-2024/#/week3) | | 16 | LV2 | 小葉 | [GitHub](https://github.com/maggie19921001/vite-orderManage) / [GitHub Pages](https://maggie19921001.github.io/vite-orderManage/) | | 17 | LV3 | Zhu | [GitHub](https://github.com/GitHubPlayerZero/hex-vue3-practise/tree/main/src/views/homework/week3) / [GitHub Pages](https://githubplayerzero.github.io/hex-vue3-practise/#/homework/week3) | | 18 | LV3 | Timo | [GitHub](https://github.com/timothy833/-HexagonClass.git) / [GitHub Pages](https://timothy833.github.io/-HexagonClass/#/Week3) | | 19 | LV2 | Vian | [GitHub](https://github.com/vianwu33116/vue-practice) / [GitHub Pages](https://vianwu33116.github.io/vue-practice/#/week3) | | 20 | LV3 | ling | [GitHub](https://github.com/huahhuah/Vue-Workspace-2024) / [GitHub Pages](https://huahhuah.github.io/Vue-Workspace-2024/#/week03) | | 21 | LV2 | 77 | [GitHub](https://github.com/kana7777/musical-journey/tree/main/allmax) / [GitHub Pages](https://kana7777.github.io/musical-journey/#/homework/OrderDrink) | | 22 | LV3 | Victor Lin | [GitHub](https://github.com/victorHLin/VuePractice/tree/main/VueHW) / [GitHub Pages](https://victorhlin.github.io/VuePractice/) | | 23 | LV3 | mu mu | [GitHub](https://github.com/ishuki916/for-first-vite) / [GitHub Pages](https://ishuki916.github.io/for-first-vite/) | | 24 | LV3 | 客家鬍渣貓 | [GitHub](https://github.com/DioDeng/vite-homework-2024/blob/main/src/views/Week3View.vue) / [GitHub Pages](https://diodeng.github.io/vite-homework-2024/#/week3) | | 25 | LV3 | imsmallnew | [GitHub](https://github.com/imsmallnew/vue-2024-week03-hw/blob/main/src/views/HomeView.vue) / [GitHub Pages](https://imsmallnew.github.io/vue-2024-week03-hw/) | | 26 | LV3 | Barry1104 | [GitHub](https://github.com/barrychen1104/vue-2024-hw) / [GitHub Pages](https://barrychen1104.github.io/vue-2024-hw/) | | 27 | LV1 | regal | [GitHub](https://github.com/regal1218/vue-week03) / [GitHub Pages](https://regal1218.github.io/vue-week03/) |28|LV2|好了啦|[GitHub](https://github.com/ZhangZJ0906/Vue-HomeWork3) / [GitHub Pages](https://zhangzj0906.github.io/Vue-HomeWork3/)| |29|LV1|Kevin Cheng|[GitHub](https://github.com/isolatedp/week3-vue) / [GitHub Pages](https://github.com/isolatedp/week3-vue/)| | 30 | Lv1 | Iris | [GitHub](https://github.com/iris831206/vue-homework) / [GitHub Pages](https://iris831206.github.io/vue-homework/#/week-3)| | 31 | Lv3 | Tough life |[Github](https://github.com/hakuei0115) / [GitHub Pages](https://hakuei0115.github.io/Vue_project/login)| | 32 | Lv3 | KK(kai.5075) | [Github](https://reurl.cc/jyRoVm) / [GitHub Pages](https://reurl.cc/myZAXl)| | 33 | Lv1 | anthy7154 | [Github](https://github.com/anthy7154/sso-vue2024) / [GitHub Pages](https://anthy7154.github.io/sso-vue2024/#/week3)| | 34 | Lv3 | 納豆 | [Github](https://github.com/LittleDreamerStar/vue_week_three) / [GitHub Pages](https://littledreamerstar.github.io/vue_week_three/)| | 35 | LV2 | 雷蒙レイ | [GitHub](https://github.com/Raymond870307/hex2024-vue-week1) / [GitHub Pages](https://raymond870307.github.io/hex2024-vue-week1) | 36 | LV3 | Michael | [GitHub](https://github.com/RenHuang-Huang/2024-vue-week2) / [GitHub Pages](https://renhuang-huang.github.io/2024-vue-week2/) | 37 | LV3 | Ching | [GitHub](https://github.com/huangching07/vue-2024-week3) / [GitHub Pages](https://huangching07.github.io/vue-2024-week3/) | 38 | LV3 | ABOOS | [GitHub](https://github.com/guhungyin/2024vue/blob/main/src/views/HomeWork3.vue) / [GitHub Pages](https://guhungyin.github.io/2024vue) | 39 | LV3 | Tatsu | [GitHub](https://github.com/chindesu0207/hexschool-vue-week03) / [GitHub Pages](https://chindesu0207.github.io/hexschool-vue-week03/) | 40 | LV2 | Mars | [GitHub](https://github.com/MarsKuo/vue-homework) / [GitHub Pages](https://marskuo.github.io/vue-homework/#/week3/) | 41 | LV3 | duchi | [GitHub](https://github.com/duchi321/Vue_Week_3_Lesson/blob/duchi321/git-demo/src/App.vue) / [GitHub Pages](https://duchi321.github.io/Vue_Week_3_Lesson/) | 42 | LV3 | Peter | [GitHub](https://github.com/peterhsj/vue-router-week03) / [GitHub Pages](https://peterhsj.github.io/vue-router-week03/) | 43 | LV1 | 蛋黃 |[Github](https://github.com/yiyun12o9/2024-vue-hw) / [Github Pages](https://yiyun12o9.github.io/2024-vue-hw/#/week3) | 44 | LV1 | An |[Github](https://github.com/andrewchou921/TodolistApp) / [GitPages](https://andrewchou921.github.io/TodolistApp/#/todolist)