2023年度河北省职业院校技能竞赛“Web技术”（高职组）赛项（样卷E）竞赛任务

模块一系统设计任务一移动端联系人地址功能设计说明书文档的编写任务描述：分析端联系人地址模块的功能，根据任务十的功能需求，参照U盘中“Web前端开发赛项试卷”目录中的“系统设计说明书（模板）”文档格式，完成管理端商品分类管理模块设计说明书文档的编写。要求：文档要符合软件规范要求。提交作品：需要提交管理端商品分类管理模块设计说明书。分值：本任务共10分。模块二程序排错任务二在移动商城端商城首页的精品推荐商品显示异常任务描述：进入移动商城端的商城页面，商城页面显示如图2-1右所示。精品推荐商品价格不显示，正常情况应为显示销售价与市场价如图2-1左图所示，请查明原因并修改。图2-1APP商城页面要求：修改完代码之后，应带有市场价与销售价。提交作品：保存修改之后的页面。分值：本任务共5分。任务三在PC端商城，点击分类进入商品列表，在商品列表页点击价格排序无反应。任务描述：在PC商城端，点击首页分类进入商品列表页，点击价格排序无反应。如图2-2所示。图2-2商品列表要求：点击价格排序根据商品价格进行升序或降序。提交作品：保存修改之后的页面。分值：本任务共5分。任务四PC端商城购物车合计金额不能正确显示。任务描述：在PC端商城进入购物车页面，选中购物车里面的商品，修改商品数量，下方合计金额不能正确显示。图2-3购物车要求：修改完代码之后，选中商品、修改商品数量后可成功计算出合计金额。提交作品：保存修改之后的代码。分值：本任务共10分。

模块三功能编码任务五在移动端，实现个人中心的订单详情功能任务描述：在移动商城端个人中心，进入订单列表页如图3-1所示，点击立即查看按钮可进入订单详情页如图3-2所示。图3-1订单列表图3-2订单详情要求：实现订单详情页面如图3-2所示，“服务商已发货”区域显示后台返回的订单的信息，如已发货为“服务商已发货”。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称订单详情APIAPI地址00:8008/api/order/detail/{key}详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务六在PC端商城，实现加入购物车功能任务描述：在PC商城端，点击商品进入商品详情页面，如图3-3所示，点击加入购物车按钮可将该商品加入到购物车，可在右上角购物车选项预览购物车列表，如图3-4所示。图3-3商品详情页面图3-4购物车预览要求：在商品详情页面，点击加入购物车按钮可将选中规格的商品加入到购物车列表。鼠标移入右上角购物车选项可预览购物车列表，点击删除按钮可删除购物车里面的商品，如图3-4所示。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称API添加购物车API00:8008/api/cart/add购物车列表API00:8008/api/cart/list详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务七移动端实现首页搜索功能任务描述：在移动商城端个人中心点击顶部搜索框进入搜索页面，如图3-5所示，输入关键字可查询出匹配的商品并显示最近搜索与热门搜索如图3-6所示。图3-5商品搜索图3-6搜索结果要求：实现输入关键字可查询出匹配的商品。显示最近搜索与热门搜索关键字如图3-6所示。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称API热门搜索api00:8008/api/search/keyword搜索商品api00:8008/api/products?keyword={keyword}详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务八在移动商城端实现商品列表功能任务描述：在移动商城端，点击首页菜单栏中的全部商品则可进入商品列表显示普通商品，且可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序，普通商品如图3-7所示，当列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，如图3-8所示，并且每次点击增加十条数据，当点击排序，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项。图3-7全部商品图3-8点击加载更多要求：点击首页菜单栏中的全部商品则可进入商品列表显示普通商品。可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序。当为任意类型排序时，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，并且每次点击增加十条数据。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称商品列表APIAPI地址00:8008/api/products详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务九在PC端商城个人中心实现修改密码功能任务描述：在PC商城端，进入个人中心下的个人资料页面，如图3-9所示，实现修改密码功能。图3-9个人资料页面要求：1.页面包括原密码、新密码、重复新密码输入框，如图3-5所示。2.点击修改密码按钮给出弹框提示是否继续操作，确定后修改成功跳转到登录页面，可使用新密码进行登录。提交作品：保存完成的页面。分值：本任务共8分。其他：【API接口参考】接口名称API修改密码API00:8008/api/user/password详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务十在APP端个人中心实现地址管理功能任务描述：在APP端个人中心点击地址管理可进入地址管理页面，实现收货地址的管理，包括收货地址显示、增加、删除、修改和设为默认地址。图3-10地址列表图3-11编辑、新增地址 要求：1.个人中心点击地址管理，进入地址列表页如图3-10所示，显示名字、电话、地址、是否默认，如不是默认则不显示标签。2.在地址列表页点击新增联系人可进入新增联系人页、联系人、手机号、选择地址、详细地址项为必填、收货邮政编码与设为默认为选填，需要相应的校验。3.在地址列表页点击编辑图标可进入编辑页面，可删除或修改联系人详细，联系人、手机号、选择地址、详细地址项为必填、收货邮政编码与设为默认为选填，需要相应的校验。提交作品：保存完成的页面。分值：本任务共10分。任务十一移动商城端实现我的收藏功能任务描述：设计系统移动商城端我的收藏页面，移动商城端我的收藏页面如图3-12所示，点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状态，不会随内容的变多而改变布局位置，点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商品详情页面如图3-13所示，在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”，为收藏状态