购物车页面是电商APP中必不可少的页面，此页面有多个子页面，设计时进行考虑个页面之间的逻辑关系，为用户提供良好的购物体验，实现产品的最终转化。

        涉及多个页面，工作量上会有所增加，我们要具有精益求精的工匠精神，要力求作品的完整性和可用性。

【 任务引入 】

【 项目思维导图 】

学习任务

重点、难点

突破方法

1. 购物车页面绘制；

2.购物车编辑页面绘制；

3.购物车支付页面绘制；

4.购物车地址编辑页面绘制；

5.购物车支付成功页面绘制。

重点：1. 购物车页面绘制；

          2.购物车支付页面；

          3.购物车地址编辑页面；

难点：1. 购物车页面绘制；

          2.购物车支付页面绘制。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握购物车页面逻辑关系。

2.掌握购物车页面的绘制。

3.了解购物流程逻辑。

1.能够了解购物车页面编辑的逻辑关系；

2.能进行购物车各页面的绘制。

1. 精益求精的工匠精神；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——工匠精神

效果图

【 视频讲解】

知识储备

    1、购物车页面任务分析

任务实现

    1、购物车页面绘制1

    2、购物车页面绘制2

    3、支付页面绘制1

    4、支付页面绘制2

    5、支付页面地址修改

    6、优惠券、添加地址、修改地址页面

    7、支付页面

    8、购物车支付成功页面

拓展任务实现

    1、购物车页面编辑1

    2、购物车页面编辑2

【 资料下载 】

活页教材

          电商APP购物车页设计

课程教案

           电商APP购物车页设计

演示文稿

        5、电商APP购物车页设计.pdf

任务工单

           电商APP购物车页设计

素材下载

     口红2.jpg

         口红1.jpg

         化妆品.jpg

         口红3.jpg

         微信.png

         消息 图标.png

         支付宝.png

         支付页面.jpg

         素材.rar

        1、购物车页面3(原型图).jpg

        1、购物车页面3.jpg

        5、购物车页面（支付成功页面2）(原型图).jpg

        5、购物车页面（支付成功页面2）.jpg

课后同步项目

          购物车页面编辑

练习题

       1、练习1

疑难问题解答

     1、理清购物车页面的逻辑关系？