39、完成购物车页面

前言：很久没有更新这个项目了，加快进度，今天把购物车页面完成，然后下两章把前端方面的工作基本都做完，开始讲node后端数据库方面的知识点。
GitHub：https://github.com/Ewall1106/mall

1、商品列表

• 顶部导航栏的收货地址这里的内容前面都已经说过了，下面的商品列表部分我们还是借助vant中的Card卡片组件来实现这方面的功能。

• 首先当然是引入之类的功能罗，这里就不说了，前面已经讲得很透彻了，使用起来也很简单，我就简单贴个代码：

  
  cart组件的运用

2、商品总额及支付按钮

• 这里的商品总额就是一些简单的布局和样式了。

商品总额及支付按钮

小结

• 首先我们来看一看购物车的一个简单效果：

购物车的简单效果

• 效果就是上图中的这个样子了，先把页面做出来，后续功能在写前后端交互的时候一并处理。这章就先这样，下章把"个人中心"页面做完，我们就开始讲node及mongodb数据库。