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

模塊一系統(tǒng)設(shè)計任務(wù)一收藏功能設(shè)計說明書文檔的編寫任務(wù)描述：分析移動端收藏模塊的功能，根據(jù)任務(wù)十的功能需求，參照U盤中“Web前端開發(fā)賽項試卷”目錄中的“系統(tǒng)設(shè)計說明書（模板）”文檔格式，完成管理端商品分類管理模塊設(shè)計說明書文檔的編寫。要求：文檔要符合軟件規(guī)范要求。提交作品：需要提交管理端商品分類管理模塊設(shè)計說明書。分值：本任務(wù)共10分。模塊二程序排錯任務(wù)二在移動商城端將商城首頁四個菜單標(biāo)簽一字排開顯示且無邊框任務(wù)描述：進(jìn)入移動商城端的商城頁面，商城頁面顯示如圖2-1所示。目前上方四個宮格為四宮格排列且?guī)в羞吙?，正常情況應(yīng)為四個宮格一字排開且無邊框如圖2-1右圖所示，請查明原因并修改。圖2-1APP商城頁面要求：修改完代碼之后，應(yīng)為四個宮格一字排開且無邊框。提交作品：保存修改之后的頁面。分值：本任務(wù)共5分。任務(wù)三在移動商城端，點(diǎn)擊全部商品進(jìn)入商品列表，點(diǎn)擊加載更多無反應(yīng)。任務(wù)描述：在移動商城端，點(diǎn)擊首頁菜單欄全部商品進(jìn)入商品列表頁，點(diǎn)擊加載更多無反應(yīng)，正常情況下應(yīng)加載額外十個商品請查明原因并修改。如圖2-2所示。圖2-2商品列表要求：點(diǎn)擊加載更多后額外加載十個商品，例如原十個商品加載后應(yīng)為二十個商品。提交作品：保存修改之后的頁面。分值：本任務(wù)共5分。任務(wù)四PC端商城輸入相同的手機(jī)號注冊新用戶時，頁面顯示了SQL錯誤。任務(wù)描述：在PC端商城輸入相同的手機(jī)號注冊新用戶時，頁面顯示了SQL錯誤。正常情況應(yīng)該顯示該手機(jī)號已存在。要求：修改完代碼之后，相同手機(jī)號注冊時應(yīng)提示手機(jī)號已存在。提交作品：保存修改之后的代碼。分值：本任務(wù)共10分。

模塊三功能編碼任務(wù)五實(shí)現(xiàn)移動端首頁猜你喜歡列表布局任務(wù)描述：在移動端首頁實(shí)現(xiàn)猜你喜歡列表布局如圖3-1所示，一行一個商品，最多展示十個商品，顯示商品圖片、名稱、市場價與銷售價。圖3-1猜你喜歡列表要求：一行一個商品，最多展示十個商品，顯示商品圖片、名稱、市場價與銷售價如圖3-1所示。提交作品：保存修改之后的頁面。分值：本任務(wù)共10分。API名稱：猜你喜歡API接口名稱猜你喜歡APIAPI地址00:8008/api/index/like詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)六在移動端，實(shí)現(xiàn)個人中心的訂單詳情功能任務(wù)描述：在移動商城端個人中心，進(jìn)入訂單列表頁如圖3-2所示，點(diǎn)擊立即查看按鈕可進(jìn)入訂單詳情頁如圖3-3所示。圖3-2訂單列表圖3-3訂單詳情要求：實(shí)現(xiàn)訂單詳情頁面如圖3-3所示，“服務(wù)商已發(fā)貨”區(qū)域顯示后臺返回的訂單的信息，如已發(fā)貨為“服務(wù)商已發(fā)貨”。提交作品：保存完成的頁面。分值：本任務(wù)共10分。API名稱：猜你喜歡API接口名稱訂單詳情APIAPI地址00:8008/api/order/detail/{key}詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)七在移動商城端實(shí)現(xiàn)用戶錢包余額查詢和充值功能任務(wù)描述：在移動商城端，單擊【個人中心】標(biāo)簽，進(jìn)入我的個人中心頁面，如圖3-4所示，在我的個人中心頁面單擊【我的錢包】打開我的錢包充值頁面，如圖3-5所示，在我的錢包充值頁面顯示當(dāng)前用戶的當(dāng)前總資產(chǎn)、累計充值、累計消費(fèi)以及充值方案，點(diǎn)擊充值可根據(jù)相應(yīng)的充值方案進(jìn)行充值。圖3-4我的個人中心頁面圖3-5我的錢包充值頁面要求：1.在我的錢包充值頁面顯示當(dāng)前用戶的當(dāng)前總資產(chǎn)、累計充值、累計消費(fèi)以及充值方案，如圖3-5所示。2.點(diǎn)擊充值可根據(jù)相應(yīng)的充值方案進(jìn)行充值。提交作品：保存完成的頁面。分值：本任務(wù)共8分。其他：【API接口參考】接口名稱API充值方案API00:8008/api/recharge/index查詢賬戶API00:8008/api/user/balance模擬充值A(chǔ)PI00:8008/api/recharge/test詳見U盤\02競賽平臺手冊\中慧Web前端開發(fā)平臺API穩(wěn)定性測試報告任務(wù)八在PC商城首頁實(shí)現(xiàn)商品分類和分類列表展示功能任務(wù)描述：在PC商城首頁顯示商品分類信息，包括二級分類。點(diǎn)擊二級分類可跳轉(zhuǎn)至商品列表頁面。商品列表頁面需分頁顯示，并可按價格排序。商品首頁分類信息商品列表顯示要求：1．首頁顯示商品分類信息，需要實(shí)現(xiàn)樹形結(jié)構(gòu)展示分類信息如圖3-8所示。2．點(diǎn)擊商品二級分類，跳轉(zhuǎn)至商品列表頁面如圖3-9所示。商品列表頁面中每行顯示4個商品，1頁顯示12個商品，每個商品顯示商品名稱、商品價格信息。3．商品列表頁面點(diǎn)擊“價格”可以按照價格對商品進(jìn)行排序提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API獲取商品分類API00:8008/api/category獲取商品列表API00:8008/api/products任務(wù)九在PC商城個人中心實(shí)現(xiàn)地址管理功能任務(wù)描述：在PC商城端【我的收貨地址】實(shí)現(xiàn)收貨地址的管理，包括收貨地址顯示、增加、刪除、修改和設(shè)為默認(rèn)地址。圖3-10新增地址欄 圖3-11新增地址欄-所在區(qū)域圖3-12我的地址列表頁要求：1.點(diǎn)擊新增收貨地址按鈕彈出新增地址頁面如圖3-10，頁面中有4個數(shù)據(jù)項：所在區(qū)域、詳細(xì)地址、收貨人簽名、手機(jī)號碼。所在區(qū)域需實(shí)現(xiàn)三級聯(lián)動功能如圖3-11所示。選中“設(shè)置為默認(rèn)收貨地址”時該地址被保存為默認(rèn)收貨地址。2.收貨地址列表頁面如圖3-12所示。點(diǎn)擊“設(shè)為默認(rèn)地址”開關(guān)，該地址被設(shè)置為默認(rèn)地址；點(diǎn)擊“修改”按鈕，彈出修改地址頁面進(jìn)行修改；點(diǎn)擊“刪除”按鈕，提醒用戶是否刪除該地址，確定后進(jìn)行刪除。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【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ù)十移動商城端實(shí)現(xiàn)我的收藏功能任務(wù)描述：設(shè)計系統(tǒng)移動商城端我的收藏頁面，移動商城端我的收藏頁面如圖3-13所示，點(diǎn)擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可選擇一個或多個商品，在界面下方顯示全選選項和刪除按鈕該ui為吸附狀態(tài)，不會隨內(nèi)容的變多而改變布局位置，點(diǎn)擊刪除可刪除選中的收藏商品，點(diǎn)擊全選可選中所有的收藏商品，點(diǎn)擊商品可跳轉(zhuǎn)至該商品詳情頁面如圖3-14所示，在商品詳情頁中點(diǎn)擊收藏按鈕可收藏該商品，如果該商品已收藏則收藏圖標(biāo)變?yōu)榧t色，“收藏”字樣變?yōu)椤耙咽詹亍保瑸槭詹貭顟B(tài)如圖3-14所示。圖3-13我的收藏頁面圖3-14商品詳情要求：1．設(shè)計移動商城端我的收藏頁面，如圖3-13所示。2．點(diǎn)擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可選擇一個或多個商品，在界面下方顯示全選選項和刪除按鈕該ui為吸附狀態(tài)，不會隨內(nèi)容的變多而改變布局位置。3．點(diǎn)擊刪除可刪除選中的收藏商品，點(diǎn)擊全選可選中所有的收藏商品，點(diǎn)擊商品可跳轉(zhuǎn)至該商品詳情頁面。4.在商品詳情頁中點(diǎn)擊收藏按鈕可收藏該商品，如果該商品已收藏則收藏圖標(biāo)變?yōu)榧t色，“收藏”字樣變?yōu)椤耙咽詹亍?。提交作品：保存完成的頁面。分值：本任?wù)共12分。任務(wù)十一PC商城訂單評論功能任務(wù)描述：在PC商城中增加商品評論功能。在待評價的訂單上對每個商品進(jìn)行評論，可以提交商品評分、服務(wù)評分、評價內(nèi)容、上傳圖片。在商品詳情中可以看到評價信息。圖3-15待評價訂單列表頁面圖3-16商品評價頁面圖3-17商品詳情評價要求：待評價訂單列表（如圖3-15所示）中點(diǎn)擊“評價”鏈接可跳轉(zhuǎn)至商品評價頁面，如圖3-16所示。商品評價頁面左側(cè)顯示訂單中的商品，右側(cè)顯示填寫商品評價區(qū)域。商品顯示商品圖片、商品價格、商品規(guī)格型號。商品評價區(qū)域填寫商品評分、服務(wù)評分、評語、圖片。點(diǎn)擊提交評價按鈕需校驗(yàn)評語是否填寫，如果沒有填寫則提示“評價內(nèi)容不能為空”。商品不能被重復(fù)評價。一個商品被評價后，商品評價頁面中將不會顯示該商品。一個訂單所有商品都被評價后，訂單狀態(tài)改為已完成。待評價訂單列表不顯示此訂單。商品詳情中顯示商品評價信息，包括用戶頭像、評論內(nèi)容、評論圖片、評論時間。評論信息可以分頁顯示。評價信息可以按照好評、中評、差評過濾。如圖3-17商品評價頁面所示。提交作品：保存完成的頁面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API圖片上傳API00:8008/api/uploads訂單評價API00:8008/api/order