【VUE】微商城（十一）----购物车下订单 选择收货地址 商品详情页立即购买 取消订

微商城源码

微商城后端接口项目包含API接口说明文档

1、store-->modules-->shopcart.js中添加如下代码

2、ShopcartView.vue中找到去结算按钮，添加点击事件

3、创建下订单页面，并且配置路由

1、在pages目录下创建order目录 ，并在order目录中创建 OrderCreateView.vue

2、router--->index.js中导入刚才创建的下订单页面

3、配置路由

4、下订单页面数据的获取

1、store ---> modules--->shopcart.js 添加 getters 方法 getBuy

2、OrderCreateView.vue中 获取商品数据，以及商品总价格的计算实现

3、下订单页面布局，页面结构

4、下订单页面CSS

<style lang="scss" scoped>.flex {display: flex;}.shopcart-container {background: #eee;overflow: hidden;// 商品列表.goods-list {margin-top: 10px;.mui-card {margin: 0;.mui-card-content {border-bottom: 1px solid #eee;.mui-card-content-inner {align-items: center;padding: 10px;img {width: 60px;}.info {margin-left: 10px;box-sizing: border-box;width: 100%;overflow: hidden;h1 {font-size: 13px;font-weight: bold;line-height: 20px;padding-top: 22px;}p {flex-direction: row;align-items: center;justify-content: space-between;.price {font-size: 16px;font-weight: 700;color: red;flex: 1}}}}}// 配送信息.process-info {padding: 10px;border-bottom: 1px solid #eee;p {display: flex;flex-direction: row;align-items: center;justify-content: space-between;color: #333;span {color:#999}}}// 店铺备注.store-info {padding: 10px;textarea {font-size: 13px;}}}}// 运费信息.fare-info {padding: 10px;margin: 10px 0 0 0;.fare-price {padding: 5px 0;display: flex;justify-content: space-between;.red {color: red;font-size: 16px;}}}}</style>

5、观察效果，如下图所示

5、下订单页面展示默认收货地址

1、发送请求获取默认收货地址信息

2、默认收货地址区域页面结构

3、默认收货地址区域CSS样式

.address-container {.mui-card {margin: 0;padding: 10px;text-align: left;h3 {color: #333;font-size: 16px;font-weight: bold;}}}

4、观察效果

6、选择收货地址功能

1、给收货地址列表配置一个新路由，以区分是从下订单页面跳转的， 还是从我的页面中的收货地址按钮跳转的

2、下订单页面的收货地址区域用router-link添加点击跳转页面

3、收货地址列表页，添加从下订单跳转过来的 点击收货地址能跳回下订单页面

1）、下订单页面路由添加name属性，方便跳转的时候传参

2）、收货地址页添加跳转回下订单页面的点击事件

3）、点击事件select方法

4、下订单页面接收收货地址页跳转传的参数

5、获取默认收货地址的请求中添加 收货地址id参数，如果id有值时就根据id获取地址，没有的时候获取默认收货地址

发现一个bug 解决一下：

添加收货地址 这边少了一个$符号，添加上，否则添加完收货地址，无法返回上一页

6、获取默认收货地址的时候，如果没有收货地址，跳转到收货地址列表页去添加收货地址

至此，收货地址选择功能完成。

7、完成下订单操作

1、创建订单按钮添加点击事件

2、点击事件处理函数order实现

3、创建订单列表页，并且配置路由

发下一个bug：获取默认收货地址的时候没有复制addressId，这样下订单的时候获取不到addressId会出错

8、查看订单列表

1、我的页面，我的订单按钮跳转订单列表

2、发送请求获取订单列表数据

3、订单列表页页面结构

4、订单列表页CSS

<style lang="scss" scoped>.pay-list p {padding: 0 10px;text-align: right;span {color: #151515;}}.mui-card-header {color:#999;font-size: 13px;span.title {font-size: 13px;color: #888;}}.mui-card-content-inner {text-align: left;.cover {position: relative;width: 70px;height: 70px;display: inline-block;margin-right: 10px;.img-con {width: 100%;height: 100%;margin-right: 10px;border-radius: 2px;position: relative;img {width: 100%;height: 100%;border-radius: 2px;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);}}.img-tag {position: absolute;opacity: .5;background: #000;color: #fff;text-align: center;font-size: 12px;right: 0;bottom: 0;padding: 0 5px;border-radius: 2px 0;}}}</style>

5、观察效果

9、订单详情页

1、订单列表项添加点击事件，点击跳转详情页，并将id作为参数传递

2、事件处理函数show实现

3、创建订单详情页面，以及路由配置

4、订单详情页接收传递的参数id，并根据id去请求订单详情信息

5、订单详情页面结构

6、订单详情页CSS样式

<style lang="scss" scoped>.flex {display: flex;}.shopcart-container {background: #eee;overflow: hidden;// 商品列表.goods-list {margin-top: 10px;.mui-card {margin: 0;.mui-card-content {border-bottom: 1px solid #eee;.mui-card-content-inner {align-items: center;padding: 10px;img {width: 60px;}.info {margin-left: 10px;box-sizing: border-box;width: 100%;overflow: hidden;h1 {font-size: 13px;font-weight: bold;line-height: 20px;padding-top: 22px;}p {flex-direction: row;align-items: center;justify-content: space-between;.price {font-size: 16px;font-weight: 700;color: red;flex: 1}}}}}// 配送信息.process-info {padding: 10px;border-bottom: 1px solid #eee;p {display: flex;flex-direction: row;align-items: center;justify-content: space-between;color: #333;span {color: #999}}}}}// 运费信息.fare-info {padding: 10px;margin: 10px 0 0 0;.fare-price {padding: 5px 0;display: flex;justify-content: space-between;.red {color: red;font-size: 16px;}}}}</style>

7、观察效果

10、取消订单

1、取消订单按钮添加点击事件

2、事件处理函数cancel实现

11、从商品详情页下单

1、商品详情页的立即购买按钮添加点击事件

2、修改store--->modules--->shopcart.js 的mutations方法 setBuy

3、立即购买的时间处理函数buy实现

至此订单相关功能完成

【VUE】微商城（十一）----购物车下订单 选择收货地址 商品详情页立即购买 取消订单 查看订单详情