{"id":576182,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cdiv class=\\\"banner\\\"\u003e\\n \u003ch1\u003e購物大平台\u003c/h1\u003e\\n \u003cspan id=\\\"showProdPage\\\" class=\\\"tab active\\\"\u003e商品列表\u003c/span\u003e\\n \u003cspan id=\\\"showCartPage\\\" class=\\\"tab\\\"\u003e購物車\u003c/span\u003e\\n \u003cspan id=\\\"showInfoPage\\\" class=\\\"tab\\\"\u003e訂單資訊\u003c/span\u003e\\n \u003cspan id=\\\"showAdminPage\\\" class=\\\"tab\\\"\u003e管理後台\u003c/span\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"container\\\"\u003e\\n\\n \u003c!--======================商品列表======================--\u003e\\n \u003cdiv id=\\\"prodPage\\\" class=\\\"page\\\"\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"a.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e哈利波特 - 全新典藏版\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$1850\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$1400\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"哈利波特 - 全新典藏版\\\" data-price=\\\"1400\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"b.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e超輕薄遊戲繪圖筆記型電腦\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$25100\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$23100\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"超輕薄遊戲繪圖筆記型電腦\\\" data-price=\\\"23100\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"c.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e復古款情侶後背包\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$1200\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$888\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"復古款情侶後背包\\\" data-price=\\\"888\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"d.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e簡約質感短夾\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$399\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$299\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"簡約質感短夾\\\" data-price=\\\"299\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"e.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e23寸單板桃花心木烏克麗麗\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$2100\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$1800\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"23寸單板桃花心木烏克麗麗\\\" data-price=\\\"1800\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"f.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e小熊餅乾巧克力風味\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$28\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$25\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"小熊餅乾巧克力風味\\\" data-price=\\\"25\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"g.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e五月花新柔韌抽取式衛生紙110抽\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$750\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$685\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"五月花新柔韌抽取式衛生紙110抽\\\" data-price=\\\"685\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"h.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e炫彩運動水壺500ML大容量\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$329\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$259\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"炫彩運動水壺500ML大容量\\\" data-price=\\\"259\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"i.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003e[9折]深入淺出JavaScript程式設計\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$1000\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$900\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"[9折]深入淺出JavaScript程式設計\\\" data-price=\\\"900\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"prod card\\\"\u003e\\n \u003cimg class=\\\"screenshot\\\" src=\\\"j.jpeg\\\"/\u003e\u003cbr/\u003e\\n \u003cstrong\u003eiphone 11 64G\u003c/strong\u003e\u003cbr/\u003e\\n \u003cdel\u003e$26200\u003c/del\u003e\u003cbr\u003e\\n \u003cspan class=\\\"red\\\"\u003e$13200\u003c/span\u003e\u003cbr/\u003e\\n \u003cbutton class=\\\"fancy-button buy\\\" data-name=\\\"iPhone11 128G\\\" data-price=\\\"13200\\\"\u003e購買\u003c/button\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n\\n\\n \u003c!--======================購物車======================--\u003e\\n \u003cdiv id=\\\"cartPage\\\" class=\\\"page\\\"\u003e\\n \u003cstrong\u003e商品名稱:\u003c/strong\u003e\\n \u003cspan id=\\\"cartName\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e商品單價:\u003c/strong\u003e\\n \u003cspan id=\\\"cartPrice\\\"\u003e\u003c/span\u003e元\\n \u003cbr\u003e\\n \u003cinput id=\\\"cartAmount\\\" class=\\\"fancy-input\\\" type=\\\"number\\\" placeholder=\\\"購買數量\\\"/\u003e\\n \u003cinput id=\\\"cartPhone\\\" class=\\\"fancy-input\\\" type=\\\"phone\\\" placeholder=\\\"聯絡電話\\\"/\u003e\\n \u003cinput id=\\\"cartAddress\\\" class=\\\"fancy-input\\\" type=\\\"text\\\" placeholder=\\\"寄送地址\\\"/\u003e\\n \u003cbutton id=\\\"submit\\\" class=\\\"fancy-button\\\"\u003e送出訂單\u003c/button\u003e\\n \u003c/div\u003e\\n \\n\\n \u003c!--======================訂單資訊======================--\u003e\\n \u003cdiv id=\\\"infoPage\\\" class=\\\"page\\\"\u003e\\n \u003cinput class=\\\"fancy-input\\\" type=\\\"text\\\" id=\\\"orderId\\\" placeholder=\\\"訂單編號...\\\"\u003e\\n \u003cbutton class=\\\"fancy-button\\\" id=\\\"search\\\"\u003e訂單查詢\u003c/button\u003e\\n \u003cbutton class=\\\"fancy-button\\\" id=\\\"cancel\\\"\u003e取消訂單\u003c/button\u003e\\n \u003cp id=\\\"infoList\\\"\u003e\\n \u003cstrong\u003e訂單編號:\u003c/strong\u003e\\n \u003cspan id=\\\"infoId\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e訂單狀態:\u003c/strong\u003e\\n \u003cspan id=\\\"infoStatus\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e商品名稱:\u003c/strong\u003e\\n \u003cspan id=\\\"infoName\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e訂購數量:\u003c/strong\u003e\\n \u003cspan id=\\\"infoAmount\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e訂單價格:\u003c/strong\u003e\\n \u003cspan id=\\\"infoPrice\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e聯絡電話:\u003c/strong\u003e\\n \u003cspan id=\\\"infoPhone\\\"\u003e\u003c/span\u003e\\n \u003cbr\u003e\\n \u003cstrong\u003e寄送地址:\u003c/strong\u003e\\n \u003cspan id=\\\"infoAddress\\\"\u003e\u003c/span\u003e\\n \u003c/p\u003e\\n \u003cp id=\\\"nodata\\\"\u003e查無此訂單\u003c/p\u003e\\n \u003c/div\u003e\\n\\n\\n \u003c!--======================管理後台======================--\u003e\\n \u003cdiv id=\\\"adminPage\\\" class=\\\"page\\\"\u003e\\n \u003cbutton class=\\\"fancy-button\\\" id=\\\"updateAdminPage\\\"\u003e更新訂單列表\u003c/button\u003e\\n \u003ctable\u003e\\n \u003cthead\u003e\\n \u003ctr\u003e\\n \u003cth\u003e訂單編號\u003c/th\u003e\\n \u003cth\u003e商品名稱\u003c/th\u003e\\n \u003cth\u003e數量\u003c/th\u003e\\n \u003cth\u003e價格\u003c/th\u003e\\n \u003cth\u003e聯絡電話\u003c/th\u003e\\n \u003cth\u003e地址\u003c/th\u003e\\n \u003cth\u003e狀態\u003c/th\u003e\\n \u003c/tr\u003e\\n \u003c/thead\u003e\\n \u003ctbody\u003e\\n \u003c/tbody\u003e\\n \u003c/table\u003e\\n \u003chr /\u003e\\n \u003cinput class=\\\"fancy-input\\\" type=\\\"text\\\" id=\\\"adminOrderId\\\" placeholder=\\\"訂單編號\\\"\u003e\\n \u003cselect class=\\\"fancy-input\\\" id=\\\"status\\\"\u003e\\n \u003coption value=\\\"通知店家\\\"\u003e通知店家\u003c/option\u003e\\n \u003coption value=\\\"已出貨\\\"\u003e已出貨\u003c/option\u003e\\n \u003coption value=\\\"配送中\\\"\u003e配送中\u003c/option\u003e\\n \u003coption value=\\\"貨已送達\\\"\u003e貨已送達\u003c/option\u003e\\n \u003c/select\u003e\\n \u003cbutton class=\\\"fancy-button\\\" id=\\\"updateOrderStatus\\\"\u003e更新訂單狀態\u003c/button\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n text-align: center;\\n color: #555;\\n background-color: #f5f5f5;\\n}\\n\\n.red {\\n color: #f53d2d;\\n}\\n\\n.banner {\\n color: #fff;\\n background: linear-gradient(-180deg, #f53d2d, #f63);\\n position: fixed;\\n width: 100%;\\n z-index: 999;\\n}\\n\\n.container {\\n padding: 20px;\\n padding-top: 150px;\\n}\\n\\n/* 分頁樣式 */\\n.tab {\\n display: inline-block;\\n padding: 10px;\\n cursor: pointer;\\n}\\n.tab.active {\\n background-color: rgba(255, 255, 255, 0.4);\\n}\\n\\n/* 商品列表 */\\n#prodPage {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap;\\n}\\n\\n/* 購物車、訂單資訊、管理後台 */\\n#cartPage, #infoPage, #adminPage {\\n display: none;\\n max-width: 800px;\\n padding: 30px;\\n margin: auto;\\n border: 1px solid #eee;\\n background-color: #fff;\\n}\\n\\n.m-0 {\\n margin: 0;\\n}\\n\\n/* 輸入框樣式 */\\n.fancy-input {\\n outline: none;\\n padding: 10px;\\n border: 1px solid #ccc;\\n display: block;\\n box-sizing: border-box;\\n width: 100%;\\n margin: 15px auto;\\n font-size: 1rem;\\n}\\n.fancy-input:focus {\\n border: 1px solid #f63;\\n}\\n\\n/* 按鈕框樣式 */\\n.fancy-button {\\n padding: 10px 15px;\\n border-width: 0;\\n color: #fff;\\n background-color: #f63;\\n font-size: 1rem;\\n cursor: pointer;\\n position: absolute;\\n left: 0;\\n bottom: 0;\\n width: 100%;\\n border-radius: 0px 0px 10px 10px;\\n transition: 0.2s;\\n}\\n.fancy-button:hover {\\n background-color: #E24F3B;\\n}\\n\\n/* 商品樣式 */\\n.prod {\\n width: 150px;\\n margin: 10px;\\n height: 225px;\\n padding: 20px;\\n border: 1px solid #eee;\\n background-color: #fff;\\n position: relative;\\n border-radius: 12px;\\n}\\n.screenshot {\\n width: 80px;\\n height: 80px;\\n}\\n\\n/* 表格樣式 */\\ntable {\\n border-collapse: collapse;\\n width: 100%;\\n}\\nth, td {\\n text-align: left;\\n padding: 8px;\\n}\\ntr:nth-child(even) {\\n background-color: #f2f2f2;\\n}\",\"js\":\"\"}","created_at":"2023-07-28T10:07:22.655+08:00","updated_at":"2023-07-28T10:07:26.997+08:00","name":"【綜合練習】購物大平台(一):實作 3 - 解答","language":"web","screenshot":{"url":null},"parent_id":576181,"plugin":"$('#showProdPage').click(showProdPage);\n$('#showCartPage').click(showCartPage);\n$('#showInfoPage').click(showInfoPage);\n$('#showAdminPage').click(showAdminPage);\n\n// 顯示商品列表頁面\nfunction showProdPage () {\n $('.page').hide();\n $('#prodPage').show();\n $('.tab').removeClass('active');\n $('#showProdPage').addClass('active');\n}\n\n// 顯示購物車頁面\nfunction showCartPage () {\n $('.page').hide();\n $('#cartPage').show();\n $('.tab').removeClass('active');\n $('#showCartPage').addClass('active');\n}\n\n// 顯示訂單資訊頁面\nfunction showInfoPage () {\n $('.page').hide();\n $('#infoPage').show();\n $('.tab').removeClass('active');\n $('#showInfoPage').addClass('active');\n}\n\n// 顯示管理後台頁面\nfunction showAdminPage () {\n $('.page').hide();\n $('#adminPage').show();\n $('.tab').removeClass('active');\n $('#showAdminPage').addClass('active');\n}\n\n\nvar order = DB.table('order'); // 訂單的資料表\n$('.buy').click(buy);\n$('#submit').click(submit);\n$('#search').click(search);\n$('#cancel').click(cancel);\n$('#updateAdminPage').click(updateAdminPage);\n$('#updateOrderStatus').click(updateOrderStatus);\n\n\n// 點擊「購買」按鈕\nfunction buy () {\n var name = $(this).data('name');\n var price = $(this).data('price');\n $('#cartName').text(name);\n $('#cartPrice').text(price);\n showCartPage();\n}\n\n// 送出訂單\nfunction submit () {\n var nameVal = $('#cartName').text();\n var priceVal = $('#cartPrice').text();\n var amountVal = $('#cartAmount').val();\n var phoneVal = $('#cartPhone').val();\n var addressVal = $('#cartAddress').val();\n \n if (amountVal \u003e 0 \u0026\u0026 phoneVal != '' \u0026\u0026 addressVal != '') {\n order.create({\n name: nameVal,\n amount: amountVal,\n phone: phoneVal,\n address: addressVal,\n price: priceVal*amountVal,\n status: '訂單成立',\n }, updateInfoPage);\n showInfoPage(); \n } else {\n alert('資料有誤!')\n }\n}\n\n// 顯示訂單查詢資訊\nfunction updateInfoPage (data) {\n if (data == undefined) {\n $('#infoList').hide();\n $('#nodata').show();\n } else {\n $('#infoList').show();\n $('#nodata').hide(); \n\n $('#infoId').text(data.id);\n $('#infoStatus').text(data.status);\n $('#infoName').text(data.name);\n $('#infoAmount').text(data.amount);\n $('#infoPhone').text(data.phone);\n $('#infoAddress').text(data.address);\n $('#infoPrice').text(data.price); \n }\n}\n\n// 訂單查詢\nfunction search () {\n var orderId = $('#orderId').val();\n order.find({ id: orderId }, function (data) {\n updateInfoPage(data[0]);\n });\n}\n\n// 後台查詢所以訂單資訊\nfunction updateAdminPage () {\n order.find({}, updateTable);\n}\n\n// 管理後台將訂單資訊顯示在表格上\nfunction updateTable (data) {\n $('tbody').empty();\n data.forEach(function (o) {\n var row = `\n \u003ctr\u003e\n \u003ctd\u003e${o.id}\u003c/td\u003e\n \u003ctd\u003e${o.name}\u003c/td\u003e\n \u003ctd\u003e${o.amount}\u003c/td\u003e\n \u003ctd\u003e${o.price}\u003c/td\u003e\n \u003ctd\u003e${o.phone}\u003c/td\u003e\n \u003ctd\u003e${o.address}\u003c/td\u003e\n \u003ctd\u003e${o.status}\u003c/td\u003e\n \u003c/tr\u003e\n `\n $('tbody').append(row);\n });\n}\n\n// 更新指定的訂單狀態\nfunction updateOrderStatus () {\n var orderId = $('#adminOrderId').val();\n var status = $('#status').val();\n $('#adminOrderId').val('');\n order.update({id: orderId}, {status: status});\n updateAdminPage();\n}\n\n// 取消訂單\nfunction cancel () {\n var orderId = $('#orderId').val();\n order.find({ id: orderId }, function (data) {\n if (data[0].status == '訂單成立') {\n order.update({id: orderId}, {status: '取消訂單'});\n search();\n alert('取消成功!');\n }\n else {\n alert('訂單已出貨,無法取消!');\n }\n });\n}\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":81,"hashid":"36ysd6jk5","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}
[{"id":13054674,"file_name":"a.jpeg","project_id":576182,"asset_id":664073,"created_at":"2023-07-28T10:07:26.962+08:00","updated_at":"2023-07-28T10:07:26.962+08:00"},{"id":13054675,"file_name":"b.jpeg","project_id":576182,"asset_id":664074,"created_at":"2023-07-28T10:07:26.965+08:00","updated_at":"2023-07-28T10:07:26.965+08:00"},{"id":13054676,"file_name":"c.jpeg","project_id":576182,"asset_id":664075,"created_at":"2023-07-28T10:07:26.969+08:00","updated_at":"2023-07-28T10:07:26.969+08:00"},{"id":13054677,"file_name":"d.jpeg","project_id":576182,"asset_id":664076,"created_at":"2023-07-28T10:07:26.973+08:00","updated_at":"2023-07-28T10:07:26.973+08:00"},{"id":13054678,"file_name":"e.jpeg","project_id":576182,"asset_id":664077,"created_at":"2023-07-28T10:07:26.977+08:00","updated_at":"2023-07-28T10:07:26.977+08:00"},{"id":13054679,"file_name":"f.jpeg","project_id":576182,"asset_id":664078,"created_at":"2023-07-28T10:07:26.981+08:00","updated_at":"2023-07-28T10:07:26.981+08:00"},{"id":13054680,"file_name":"g.jpeg","project_id":576182,"asset_id":664079,"created_at":"2023-07-28T10:07:26.985+08:00","updated_at":"2023-07-28T10:07:26.985+08:00"},{"id":13054681,"file_name":"h.jpeg","project_id":576182,"asset_id":664080,"created_at":"2023-07-28T10:07:26.988+08:00","updated_at":"2023-07-28T10:07:26.988+08:00"},{"id":13054682,"file_name":"i.jpeg","project_id":576182,"asset_id":664081,"created_at":"2023-07-28T10:07:26.992+08:00","updated_at":"2023-07-28T10:07:26.992+08:00"},{"id":13054683,"file_name":"j.jpeg","project_id":576182,"asset_id":664082,"created_at":"2023-07-28T10:07:26.995+08:00","updated_at":"2023-07-28T10:07:26.995+08:00"}]
橘蘋學習平台
橘蘋學習平台
我的作品
檢視專案頁
匯出
複製
匯入
刪除
下載 Android APP (APK)
截圖
前往網站頁面
1:1:1
1:1
full
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦