2023年度河北省職業(yè)院校技能競賽“Web技術(shù)”（高職組）賽項（樣卷B）競賽任務(wù)

模塊一系統(tǒng)設(shè)計任務(wù)一PC端商品分類功能設(shè)計說明書文檔的編寫任務(wù)描述：分析商品分類模塊的功能，根據(jù)任務(wù)十的功能需求，參照U盤中“Web前端開發(fā)賽項試卷”目錄中的“系統(tǒng)設(shè)計說明書（模板）”文檔格式，完成管理端商品分類管理模塊設(shè)計說明書文檔的編寫。要求：文檔要符合軟件規(guī)范要求。提交作品：需要提交管理端商品分類管理模塊設(shè)計說明書。分值：本任務(wù)共10分。模塊二程序排錯任務(wù)二在移動商城端商城首頁的精品推薦商品顯示異常任務(wù)描述：進入移動商城端的商城頁面，商城頁面顯示如圖2-1所示。精品推薦商品價格不顯示，正常情況應(yīng)為顯示銷售價與市場價如圖2-1右圖所示，請查明原因并修改。圖2-1APP商城頁面要求：修改完代碼之后，應(yīng)為四個宮格一字排開且無邊框。提交作品：保存修改之后的頁面。分值：本任務(wù)共5分。任務(wù)三PC端商城購物車合計金額不能正確顯示任務(wù)描述：在PC端商城進入購物車頁面。如圖2-2所示，選中購物車里面的商品，修改商品數(shù)量，下方合計金額不能正確顯示。圖2-2購物車列表頁面要求：修改完代碼之后，選中商品、修改商品數(shù)量后可成功計算出合計金額。提交作品：保存修改之后的頁面。分值：本任務(wù)共5分。任務(wù)四APP端商城輸入相同的手機號注冊新用戶時，頁面顯示了SQL錯誤。任務(wù)描述：在APP端商城輸入相同的手機號注冊新用戶時，頁面顯示了SQL錯誤。正常情況應(yīng)該顯示該手機號已存在。要求：修改完代碼之后，相同手機號注冊時應(yīng)提示手機號已存在。提交作品：保存修改之后的代碼。分值：本任務(wù)共10分。

模塊三功能編碼任務(wù)五在PC商城個人中心實現(xiàn)收藏商品頁面布局任務(wù)描述：在PC商城首頁點擊我的-個人信息-我的收藏可進入收藏頁面，如圖所示。每行五件商品顯示圖片、名稱、價格、取消收藏按鈕、查看詳情按鈕，點擊取消收藏可取消收藏該商品，點擊查看詳情按鈕可跳轉(zhuǎn)至商品詳情頁、點擊批量管理，右上角為全選、取消收藏、保存三個選項，如圖所示。圖3-1我的收藏圖3-2批量管理要求：1．每行五件商品顯示圖片、名稱、價格、取消收藏按鈕、查看詳情按鈕。2．點擊取消收藏可取消收藏該商品，點擊查看詳情按鈕可跳轉(zhuǎn)至商品詳情頁。3．點擊批量管理可顯示全選、取消收藏、保存按鈕、如圖，點擊全選可全選中商品，被選中的商品的右上角顯示被選中狀態(tài)（未選中灰色、選中橙色），也可單選后點擊取消收藏可取消收藏。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API我的收藏API00:8086/api/collect/user?type=collect取消收藏api00:8086/api/collect/del批量取消收藏api00:8086/api/collect/dels/{id},{id},{id}任務(wù)六在PC商城首頁實現(xiàn)商品搜索功能任務(wù)描述：在PC商城首頁點擊搜索欄輸入搜索信息點擊搜索按鈕，可查詢出相關(guān)商品，顯示商品圖片、商品名稱、商品市場價與商品價格，商品簡介，點擊價格可根據(jù)價格進行排序，默認每頁顯示12個商品，左上角“全部結(jié)果”后顯示搜索內(nèi)容名稱。圖3-3搜索商品信息要求：1．輸入搜索信息點擊搜索按鈕，可查詢出相關(guān)商品，顯示商品圖片、商品名稱、商品市場價與商品價格，商品簡介。2．點擊價格可根據(jù)價格進行排序。3．默認每頁顯示12個商品，左上角“全部結(jié)果”后顯示搜索內(nèi)容名稱。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API搜索商品API00:8086/api/products任務(wù)七在PC商城端實現(xiàn)錢包充值功能任務(wù)描述：設(shè)計PC商城端錢包充值頁面，進入個人中心下的錢包充值頁面，顯示充值方案，如圖3-4所示，點擊充值可根據(jù)相應(yīng)的充值方案進行充值。圖3-4我的錢包充值頁面要求：1．設(shè)計PC商城端錢包充值頁面，如圖3-4所示。2．顯示充值方案列表。3．點擊立即使用按鈕可根據(jù)充值方案進行充值。提交作品：保存完成的頁面。分值：本任務(wù)共8分。其他：【API接口參考】接口名稱API充值方案API00:8008/api/recharge/index模擬充值A(chǔ)PI00:8008/api/recharge/test詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)八在移動商城端實現(xiàn)商品列表功能任務(wù)描述：在移動商城端，點擊首頁菜單欄中的全部商品則可進入商品列表顯示普通商品，且可以根據(jù)綜合（后臺默認排序）、價格（根據(jù)價格排序）、新品，三種情況進行排序，進入頁面默認為綜合排序，普通商品如圖3-5所示，當列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項，如圖3-6所示，并且每次點擊增加十條數(shù)據(jù)，當點擊排序，且列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項。圖3-5全部商品圖3-6點擊加載更多要求：點擊首頁菜單欄中的全部商品則可進入商品列表顯示普通商品?？梢愿鶕?jù)綜合（后臺默認排序）、價格（根據(jù)價格排序）、新品，三種情況進行排序，進入頁面默認為綜合排序。當為任意類型排序時，且列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項，并且每次點擊增加十條數(shù)據(jù)。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：API名稱：商品列表API接口名稱商品列表APIAPI地址00:8008/api/products詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)九在PC商城個人中心實現(xiàn)地址管理功能任務(wù)描述：在PC商城端【我的收貨地址】實現(xiàn)收貨地址的管理，包括收貨地址顯示、增加、刪除、修改和設(shè)為默認地址。圖3-7新增地址欄 圖3-8新增地址欄-所在區(qū)域圖3-9我的地址列表頁要求：1.點擊新增收貨地址按鈕彈出新增地址頁面如圖3-7，頁面中有4個數(shù)據(jù)項：所在區(qū)域、詳細地址、收貨人簽名、手機號碼。所在區(qū)域需實現(xiàn)三級聯(lián)動功能如圖3-8所示。選中“設(shè)置為默認收貨地址”時該地址被保存為默認收貨地址。2.收貨地址列表頁面如圖3-9所示。點擊“設(shè)為默認地址”開關(guān)，該地址被設(shè)置為默認地址；點擊“修改”按鈕，彈出修改地址頁面進行修改；點擊“刪除”按鈕，提醒用戶是否刪除該地址，確定后進行刪除。提交作品：保存完成的頁面。分值：本任務(wù)共12分。其他：【API接口參考】接口名稱API獲取地址列表API00:8008/api/address/list獲取城市列表API00:8008/api/city_list新增/編輯地址API00:8008/api/address/edit刪除地址API00:8008/api/address/del詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告V2.2任務(wù)十在PC商城首頁實現(xiàn)商品分類和分類列表展示功能任務(wù)描述：在PC商城首頁顯示商品分類信息，包括二級分類。點擊二級分類可跳轉(zhuǎn)至商品列表頁面。商品列表頁面需分頁顯示，并可按價格排序。圖3-10商品首頁分類信息圖3-11商品列表顯示要求：1．首頁顯示商品分類信息，需要實現(xiàn)樹形結(jié)構(gòu)展示分類信息如圖3-10所示。2．點擊商品二級分類，跳轉(zhuǎn)至商品列表頁面如圖3-11所示。商品列表頁面中每行顯示4個商品，1頁顯示12個商品，每個商品顯示商品名稱、商品價格信息。3．商品列表頁面點擊“價格”可以按照價格對商品進行排序提交作品：保存完成的頁面。分值：本任務(wù)共12分