【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

         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

         5、观察效果

 9、订单详情页

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

         2、事件处理函数show实现

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

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

         5、订单详情页面结构

         6、订单详情页CSS样式

         7、观察效果

 10、取消订单

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

        2、事件处理函数cancel实现

 11、从商品详情页下单

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

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

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

 至此订单相关功能完成