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

任务一收藏功能设计说明书文档的编写任务描述：分析PC端收藏模块的功能，根据任务十的功能需求，参照U盘中“Web前端开发赛项试卷”目录中的“系统设计说明书(模板)”文档格式，完成PC端收藏模块设计说明书文档的编写。分值：本任务共10分。任务二在移动商城端将商城首页四个菜单标签一字排开显任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。目前上方四个宫格为四宫格排列且带有边框，正常情况应为四个宫格一字排开且无边框如图2-1右图所示，请查明原因并修改。☑全部商品精品推荐：积分商品精品推荐：膜☑全部商品积分商品积分签到积分签到优惠券优惠券要求：修改完代码之后，应为四个宫格一字排开且无边框。分值：本任务共5分。任务三在移动商城端商城首页的精品推荐商品显示异常任务描述：进入移动商城端的商城页面，商城页面显示如图2-2所示。精品推荐商品价格不显示，正常情况应为显示销售价与市场价如图2-2右图所示，请查明原因并修改。口口图2-2全部商品优惠券积分商品积分签到SδSδ要求：修改完代码之后，应为四个宫格一字排开且无边框。分值：本任务共5分。任务描述：在PC端商城进入购物车页面，选中购物车里面的商品，修改商品数量，下方合计金额不能正确显示。全部商品1☑小米(MI)MIX24+64G,黑色¥4699.00已选商品0件合计(不含运费):¥已选商品0件要求：修改完代码之后，选中商品、修改商品数量后可成功计算出合分值：本任务共10分。模块三功能编码任务五移动端实现首页搜索功能任务描述：在移动商城端个人中心点击顶部搜索框进入搜索页面，如图3-1所示，输入关键字可查询出匹配的商品并显示最近搜索与热门搜索如图3-2所示。QQ请输入搜索关键词照片springboot打印图3-1商品搜索照片springboot打印派滋小米5钢化膜只华为畅享6S钢化膜1.实现输入关键字可查询出匹配的商品。2.显示最近搜索与热门搜索关键字如图3-2所示。分值：本任务共10分。热门搜索aphttp://00:8008/api/search/khttp://00:8008/api/products?keyword=任务六在移动端，实现个人中心的订单详情功能任务描述：在移动商城端个人中心，进入订单列表页如图3-3所示，点击立即查看按钮可进入订单详情页如图3-4所示。8只8胡先单时间高清防爆，耐磨防刮 待收货免运费无优患1.实现订单详情页面如图3-4所示，“服务商已发货”区域显示后台返回分值：本任务共10分。接口名称订单详情APIAPI地址任务七在移动商城端实现用户钱包余额查询和充值功能任务描述：在移动商城端，单击【个人中心】标签，进入我的个人中心页面，如图3-5所示，在我的个人中心页面单击【我的钱包】打开我的钱包充值页面，如图3-6所示，在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，点击充值可根据相应的充值方案进行充值。充值¥100赠送¥10充值¥1赠送¥1000Q充值未支付待发货待收货待评价已完成Q地址管理我的钱包>B我的优患我的收藏>我的足迹◎修改密码合8①只8①只81.在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，如图3-6所示。2.点击充值可根据相应的充值方案进行充值。分值：本任务共8分。http://00:8008/api/recharge/http://00:8008/api/user/bahttp://00:8008/api/recharge任务八在PC商城首页实现商品分类和分类列表展示功能任务描述：在PC商城首页显示商品分类信息，包括二级分类。点击二级分类可跳转至商品列表页面。商品列表页面需分页显示，并可按价格排序。〇〇简约创图家用办公0请人意图3-9商品列表显示1.首页显示商品分类信息，需要实现树形结构展示分类信息如图3-82.点击商品二级分类，跳转至商品列表页面如图3-9所示。商品列表页面中每行显示4个商品，1页显示12个商品，每个商品显示商品名称、3.商品列表页面点击“价格”可以按照价格对商品进行排序分值：本任务共10分。获取商品分类APIhttp://00:8008/api/cat获取商品列表APIhttp://00:8008/api/pro任务九在移动商城端实现商品分类任务描述：在移动商城端点击分类标签可进入商品分类页，显示所有分类，左侧为一级分类，右侧为该分类下的分类，由图片与名称组成如图3-7所示。点击右侧带图的分类可跳转至商品列表且显示当前分类的商品如商品分类Q<商品分类Q1手机华为荣耀88商品列表商品列表价格化只8<1.显示所有分类，左侧为一级分类，右侧为该分类下的分类，由图片与名称组成如图3-7所示。2.点击右侧带图的分类可跳转至商品列表且显示当前分类的商品如3-8所示。3.列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，并且每次点击增加十条数据。分值：本任务共10分。nttp://00:8008/api/pro查询商品分类apihttp://75:8008/api/cate任务描述：在PC商城首页点击我的-个人信息-我的收藏可进入收藏页面，如图3-11所示。每行五件商品显示图片、名称、价格、取消收藏按钮、查看详情按钮，点击取消收藏可取消收藏该商品，点击查看详情按钮可跳转至商品详情页、点击批量管理，右上角为全选、取消收藏、保存三个选项，如图3-12所示。图3-11我的收藏钻石快线黄金戒心戒指钻石快线黄金戒心戒指取消收藏查看详情取消收藏查看详情取消收藏查看详情取消收藏查看详情取消收藏图3-12批量管理1.每行五件商品显示图片、名称、价格、取消收藏按钮、查看详情按2.点击取消收藏可取消收藏该商品，点击查看详情按钮可跳转至商品3.点击批量管理可显示全选、取消收藏、保存按钮、如图，点击全选可全选中商品，被选中的商品的右上角显示被选中状态(未选中灰色、选中橙色),也可单选后点击取消收藏可取消收藏。分值：本任务共10分。任务描述：在PC商城中增加商品评论功能。在待评价的订单上对每个商品进行评论，可以提交商品评分、服务评分、评价内容、上传图片。在商品详情中可以看到评价信息。2021-08-2611:12:48订单号：1430724+64G,金色数量操作1图3-13待评价订单列表页面+图3-14商品评价页面日☑ 加入购物车图3-15商品详情评价1.待评价订单列表(如图3-13所示)中点击“评价”链接可跳转至商品评价页面，如图3-14所示。2.商品评价页面左侧显示订单中的商品，右侧显示填写商品评价区域。商品显示商品图片、商品价格、商品规格型号。商品评价区域填写商品评分、服务评分、评语、图片。点击提交评价按钮需校验评语是否填写，3.商品不能被重复评价。一个商品被评价后，商品评价页面中将不会显示该商品。一个订单所