2023年河北省职业院校技能大赛“Web技术”（高职组）赛项样卷A

2023年度河北省职业院校技能竞赛

“Web技术”（高职组）赛项（样卷A）

竞赛任务

模块一 系统设计

任务一 收藏功能设计说明书文档的编写

任务描述：分析移动端收藏模块的功能，根据任务十的功能需求，参照U盘中“Web前端开发赛项试卷”目录中的“系统设计说明书（模板）”文档格式，完成管理端商品分类管理模块设计说明书文档的编写。

要求：文档要符合软件规范要求。

提交作品：需要提交管理端商品分类管理模块设计说明书。

分值：本任务共10分。

模块二 程序排错

任务二 在移动商城端将商城首页四个菜单标签一字排开显示且无边框

任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。目前上方四个宫格为四宫格排列且带有边框，正常情况应为四个宫格一字排开且无边框如图2-1右图所示，请查明原因并修改。

图2-1 APP商城页面

要求：修改完代码之后，应为四个宫格一字排开且无边框。

提交作品：保存修改之后的页面。

分值：本任务共5分。

任务三 在移动商城端，点击全部商品进入商品列表，点击加载更多无反应。

任务描述：在移动商城端，点击首页菜单栏全部商品进入商品列表页，点击加载更多无反应，正常情况下应加载额外十个商品请查明原因并修改。如图2-2所示。

图2-2 商品列表

要求：点击加载更多后额外加载十个商品，例如原十个商品加载后应为二十个商品。

提交作品：保存修改之后的页面。

分值：本任务共5分。

任务四 PC端商城输入相同的手机号注册新用户时，页面显示了SQL错误。

任务描述：在 PC端商城输入相同的手机号注册新用户时，页面显示了SQL错误。正常情况应该显示该手机号已存在。

要求：修改完代码之后，相同手机号注册时应提示手机号已存在。

提交作品：保存修改之后的代码。

分值：本任务共10分。

模块三 功能编码

任务五 实现移动端首页猜你喜欢列表布局

任务描述：在移动端首页实现猜你喜欢列表布局如图3-1所示，一行一个商品，最多展示十个商品，显示商品图片、名称、市场价与销售价。

图3-1 猜你喜欢列表

要求：一行一个商品，最多展示十个商品，显示商品图片、名称、市场价与销售价如图3-1所示。

提交作品：保存修改之后的页面。

分值：本任务共10分。

API名称：猜你喜欢API

详见U盘�2竞赛平台手册中慧Web前端开发平台API稳定性测试报告

任务六 在移动端，实现个人中心的订单详情功能

任务描述：在移动商城端个人中心，进入订单列表页如图3-2所示，点击立即查看按钮可进入订单详情页如图3-3所示。

图3-2 订单列表

图3-3 订单详情

要求：

1．实现订单详情页面如图3-3所示，“服务商已发货”区域显示后台返回的订单的信息，如已发货为“服务商已发货”。

提交作品：保存完成的页面。

分值：本任务共10分。

API名称：猜你喜欢API

详见U盘�2竞赛平台手册中慧Web前端开发平台API稳定性测试报告

任务七 在移动商城端实现用户钱包余额查询和充值功能

任务描述：在移动商城端，单击【个人中心】标签，进入我的个人中心页面，如图3-4所示，在我的个人中心页面单击【我的钱包】打开我的钱包充值页面，如图3-5所示，在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，点击充值可根据相应的充值方案进行充值。

图3-4 我的个人中心页面 图3-5 我的钱包充值页面

要求：

1.在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，如图3-5所示。

2.点击充值可根据相应的充值方案进行充值。

提交作品：保存完成的页面。

分值：本任务共8分。

其他：【API接口参考】

详见U盘�2竞赛平台手册中慧Web前端开发平台API稳定性测试报告

任务八 在PC商城首页实现商品分类和分类列表展示功能

任务描述： 在PC商城首页显示商品分类信息，包括二级分类。点击二级分类可跳转至商品列表页面。商品列表页面需分页显示，并可按价格排序。

图3-8 商品首页分类信息

图3-9 商品列表显示

要求：

1．首页显示商品分类信息，需要实现树形结构展示分类信息如图3-8所示。

2．点击商品二级分类，跳转至商品列表页面如图3-9所示。商品列表页面中每行显示4个商品，1页显示12个商品，每个商品显示商品名称、商品价格信息。

3．商品列表页面点击“价格”可以按照价格对商品进行排序

提交作品：保存完成的页面。

分值：本任务共10分。

其他：【API接口参考】

任务九 在PC商城个人中心实现地址管理功能

任务描述： 在PC商城端【我的收货地址】实现收货地址的管理，包括收货地址显示、增加、删除、修改和设为默认地址。

图3-10 新增地址栏

图3-11 新增地址栏-所在区域

图3-12 我的地址列表页

要求：

1.点击新增收货地址按钮弹出新增地址页面如图3-10，页面中有4个数据项：所在区域、详细地址、收货人签名、手机号码。所在区域需实现三级联动功能如图3-11所示。选中“设置为默认收货地址”时该地址被保存为默认收货地址。

2.收货地址列表页面如图3-12所示。点击“设为默认地址”开关，该地址被设置为默认地址；点击“修改”按钮，弹出修改地址页面进行修改；点击“删除”按钮，提醒用户是否删除该地址，确定后进行删除。

提交作品：保存完成的页面。

分值：本任务共10分。

其他：【API接口参考】

详见U盘�2竞赛平台手册中慧Web前端开发平台API稳定性测试报告V2.2

任务十 移动商城端实现我的收藏功能

任务描述：设计系统移动商城端我的收藏页面，移动商城端我的收藏页面如图3-13所示，点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状态，不会随内容的变多而改变布局位置，点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商品详情页面如图3-14所示，在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”，为收藏状态如图3-14所示。

图 3-13我的收藏页面

图3-14 商品详情

要求：

1．设计移动商城端我的收藏页面，如图3-13所示。

2．点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状态，不会随内容的变多而改变布局位置。

3．点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商品详情页面。

4.在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”。

提交作品：保存完成的页面。

分值：本任务共12分。

任务十一 PC商城订单评论功能

任务描述：在PC商城中增加商品评论功能。在待评价的订单上对每个商品进行评论，可以提交商品评分、服务评分、评价内容、上传图片。在商品详情中可以看到评价信息。

图3-15 待评价订单列表页面

图3-16 商品评价页面

图3-17 商品详情评价

要求：

1.待评价订单列表（如图3-15所示）中点击“评价”链接可跳转至商品评价页面，如图3-16所示。

2.商品评价页面左侧显示订单中的商品，右侧显示填写商品评价区域。商品显示商品图片、商品价格、商品规格型号。商品评价区域填写商品评分、服务评分、评语、图片。点击提交评价按钮需校验评语是否填写，如果没有填写则提示“评价内容不能为空”。

3.商品不能被重复评价。一个商品被评价后，商品评价页面中将不会显示该商品。一个订单所有商品都被评价后，订单状态改为已完成。待评价订单列表不显示此订单。

4.商品详情中显示商品评价信息，包括用户头像、评论内容、评论图片、评论时间。评论信息可以分页显示。评价信息可以按照好评、中评、差评过滤。如图3-17 商品评价页面所示。

提交作品：保存完成的页面。

分值：本任务共10分。

其他：【API接口参考】

职业院校技能大赛（高职组）智能财税赛项开幕式讲话致辞

“安全应急技术”（高职组）技能大赛细则

2019高职,学前教育,课件制作-端午节（赛项赛卷）

技能大赛闭赛式讲话

首届世界职业院校技能大赛开赛式观后感