本章我们开始讲购物车结算页面的编写, 这个页面应该是整个项目里最复杂的页面了, ok, 这章讲下基本结构.
Github: https://github.com/Ewall1106/mall (请选择分支 chapter28)
1, 新建购物车页面
(1) 老规矩, 复制一份我们已经写好的 test.vue 页面初始化我们购物车页面 cart.vue
购物车页面构建
(2) 然后就是去注册下路由
这里就不废话了占据篇幅了, 这个应该很 easy 了.
2, 顶部导航栏
(1) 顶部的第一个块就是导航栏了, 跟前面的一样, 没什么难点的了.
导航栏
然后就是添加几个前进后退的事件, 我这里就直接复制前面章节中商品详情页里的头部了, 其实, 这里你也可以把部分抽离成一个组件从而实现复用, 我就懒得抽了.
3, 收货地址块
(1) 重点说下收货地址这部分内容的实现, 首先快速写下 html 和 CSS 完成基本布局:
收货地址
css 就是一些简单的 flex 布局及阿里巴巴 icon-font 的运用, 不贴代码了. 完成的基本效果:
基本头部效果
(2) 然后我们需要跳转到一个新页面完成地址选择功能, 所以我们再新建一个 address.vue 页面
同上, 复制一份我们 test.vue 重命名为 address 作为我们的地址选择页面;
注册路由
4, 小结
这章就是完成了购物车结算页面的部分布局, 下一章我们去 adress.vue 中借助 vant 组件实现地址选择功能, 然后我们在返回到这个页面来完成我们剩下的功能.
来源: http://www.jianshu.com/p/0c309ba9315a