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

模塊一系統(tǒng)設(shè)計任務(wù)一移動端聯(lián)系人地址功能設(shè)計說明書文檔的編寫任務(wù)描述：分析端聯(lián)系人地址模塊的功能，根據(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端商城，點擊分類進入商品列表，在商品列表頁點擊價格排序無反應(yīng)。任務(wù)描述：在PC商城端，點擊首頁分類進入商品列表頁，點擊價格排序無反應(yīng)。如圖2-2所示。圖2-2商品列表要求：點擊價格排序根據(jù)商品價格進行升序或降序。提交作品：保存修改之后的頁面。分值：本任務(wù)共5分。任務(wù)四PC端商城購物車合計金額不能正確顯示。任務(wù)描述：在PC端商城進入購物車頁面，選中購物車里面的商品，修改商品數(shù)量，下方合計金額不能正確顯示。圖2-3購物車要求：修改完代碼之后，選中商品、修改商品數(shù)量后可成功計算出合計金額。提交作品：保存修改之后的代碼。分值：本任務(wù)共10分。

模塊三功能編碼任務(wù)五在移動端，實現(xiàn)個人中心的訂單詳情功能任務(wù)描述：在移動商城端個人中心，進入訂單列表頁如圖3-1所示，點擊立即查看按鈕可進入訂單詳情頁如圖3-2所示。圖3-1訂單列表圖3-2訂單詳情要求：實現(xiàn)訂單詳情頁面如圖3-2所示，“服務(wù)商已發(fā)貨”區(qū)域顯示后臺返回的訂單的信息，如已發(fā)貨為“服務(wù)商已發(fā)貨”。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱訂單詳情APIAPI地址00:8008/api/order/detail/{key}詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)六在PC端商城，實現(xiàn)加入購物車功能任務(wù)描述：在PC商城端，點擊商品進入商品詳情頁面，如圖3-3所示，點擊加入購物車按鈕可將該商品加入到購物車，可在右上角購物車選項預(yù)覽購物車列表，如圖3-4所示。圖3-3商品詳情頁面圖3-4購物車預(yù)覽要求：在商品詳情頁面，點擊加入購物車按鈕可將選中規(guī)格的商品加入到購物車列表。鼠標移入右上角購物車選項可預(yù)覽購物車列表，點擊刪除按鈕可刪除購物車里面的商品，如圖3-4所示。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API添加購物車API00:8008/api/cart/add購物車列表API00:8008/api/cart/list詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)七移動端實現(xiàn)首頁搜索功能任務(wù)描述：在移動商城端個人中心點擊頂部搜索框進入搜索頁面，如圖3-5所示，輸入關(guān)鍵字可查詢出匹配的商品并顯示最近搜索與熱門搜索如圖3-6所示。圖3-5商品搜索圖3-6搜索結(jié)果要求：實現(xiàn)輸入關(guān)鍵字可查詢出匹配的商品。顯示最近搜索與熱門搜索關(guān)鍵字如圖3-6所示。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API熱門搜索api00:8008/api/search/keyword搜索商品api00:8008/api/products?keyword={keyword}詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)八在移動商城端實現(xiàn)商品列表功能任務(wù)描述：在移動商城端，點擊首頁菜單欄中的全部商品則可進入商品列表顯示普通商品，且可以根據(jù)綜合（后臺默認排序）、價格（根據(jù)價格排序）、新品，三種情況進行排序，進入頁面默認為綜合排序，普通商品如圖3-7所示，當列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項，如圖3-8所示，并且每次點擊增加十條數(shù)據(jù)，當點擊排序，且列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項。圖3-7全部商品圖3-8點擊加載更多要求：點擊首頁菜單欄中的全部商品則可進入商品列表顯示普通商品?？梢愿鶕?jù)綜合（后臺默認排序）、價格（根據(jù)價格排序）、新品，三種情況進行排序，進入頁面默認為綜合排序。當為任意類型排序時，且列表商品超過10個時，只加載十個并在最底部顯示“點擊加載更多”選項，并且每次點擊增加十條數(shù)據(jù)。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱商品列表APIAPI地址00:8008/api/products詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)九在PC端商城個人中心實現(xiàn)修改密碼功能任務(wù)描述：在PC商城端，進入個人中心下的個人資料頁面，如圖3-9所示，實現(xiàn)修改密碼功能。圖3-9個人資料頁面要求：1.頁面包括原密碼、新密碼、重復(fù)新密碼輸入框，如圖3-5所示。2.點擊修改密碼按鈕給出彈框提示是否繼續(xù)操作，確定后修改成功跳轉(zhuǎn)到登錄頁面，可使用新密碼進行登錄。提交作品：保存完成的頁面。分值：本任務(wù)共8分。其他：【API接口參考】接口名稱API修改密碼API00:8008/api/user/password詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)十在APP端個人中心實現(xiàn)地址管理功能任務(wù)描述：在APP端個人中心點擊地址管理可進入地址管理頁面，實現(xiàn)收貨地址的管理，包括收貨地址顯示、增加、刪除、修改和設(shè)為默認地址。圖3-10地址列表圖3-11編輯、新增地址 要求：1.個人中心點擊地址管理，進入地址列表頁如圖3-10所示，顯示名字、電話、地址、是否默認，如不是默認則不顯示標簽。2.在地址列表頁點擊新增聯(lián)系人可進入新增聯(lián)系人頁、聯(lián)系人、手機號、選擇地址、詳細地址項為必填、收貨郵政編碼與設(shè)為默認為選填，需要相應(yīng)的校驗。3.在地址列表頁點擊編輯圖標可進入編輯頁面，可刪除或修改聯(lián)系人詳細，聯(lián)系人、手機號、選擇地址、詳細地址項為必填、收貨郵政編碼與設(shè)為默認為選填，需要相應(yīng)的校驗。提交作品：保存完成的頁面。分值：本任務(wù)共10分。任務(wù)十一移動商城端實現(xiàn)我的收藏功能任務(wù)描述：設(shè)計系統(tǒng)移動商城端我的收藏頁面，移動商城端我的收藏頁面如圖3-12所示，點擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可選擇一個或多個商品，在界面下方顯示全選選項和刪除按鈕該ui為吸附狀態(tài)，不會隨內(nèi)容的變多而改變布局位置，點擊刪除可刪除選中的收藏商品，點擊全選可選中所有的收藏商品，點擊商品可跳轉(zhuǎn)至該商品詳情頁面如圖3-13所示，在商品詳情頁中點擊收藏按鈕可收藏該商品，如果該商品已收藏則收藏圖標變?yōu)榧t色，“收藏”字樣變?yōu)椤耙咽詹亍?，為收藏狀態(tài)