• 【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

    1. <style lang="scss" scoped>
    2. .flex {
    3.     display: flex;
    4. }
    5. .shopcart-container {
    6.   background: #eee;
    7.   overflow: hidden;
    8.   // 商品列表
    9.   .goods-list {
    10.     margin-top: 10px;
    11.     .mui-card {
    12.       margin: 0;
    13.       .mui-card-content {
    14.         border-bottom: 1px solid #eee;
    15.         .mui-card-content-inner {
    16.           align-items: center;
    17.           padding: 10px;
    18.           img {
    19.             width: 60px;
    20.           }
    21.           .info {
    22.             margin-left: 10px;
    23.             box-sizing: border-box;
    24.             width: 100%;
    25.             overflow: hidden;
    26.             h1 {
    27.               font-size: 13px;
    28.               font-weight: bold;
    29.               line-height: 20px;
    30.               padding-top: 22px;
    31.             }
    32.             p {
    33.               flex-direction: row;
    34.               align-items: center;
    35.               justify-content: space-between;
    36.               .price {
    37.                 font-size: 16px;
    38.                 font-weight: 700;
    39.                 color: red;
    40.                 flex: 1
    41.               }
    42.             }
    43.           }
    44.         }
    45.       }
    46.       // 配送信息
    47.       .process-info {
    48.         padding: 10px;
    49.         border-bottom: 1px solid #eee;
    50.         p {
    51.           display: flex;
    52.           flex-direction: row;
    53.           align-items: center;
    54.           justify-content: space-between;
    55.           color: #333;
    56.           span {
    57.             color:#999
    58.           }
    59.         }
    60.       }
    61.        // 店铺备注
    62.       .store-info {
    63.         padding: 10px;
    64.         textarea {
    65.           font-size: 13px;
    66.         }
    67.       }
    68.     }
    69.   }
    70.   // 运费信息
    71.   .fare-info {
    72.     padding: 10px;
    73.     margin: 10px 0 0 0;
    74.     .fare-price {
    75.       padding: 5px 0;
    76.       display: flex;
    77.       justify-content: space-between;
    78.       .red {
    79.         color: red;
    80.         font-size: 16px;
    81.       }
    82.     }
    83.   }
    84. }
    85. </style>

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

             

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

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

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

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

    1. .address-container {
    2.     .mui-card {
    3.       margin: 0;
    4.       padding: 10px;
    5.       text-align: left;
    6.       h3 {
    7.         color: #333;
    8.         font-size: 16px;
    9.         font-weight: bold;
    10.       }
    11.     }
    12.   }

            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

    1. <style lang="scss" scoped>
    2. .pay-list p {
    3.   padding: 0 10px;
    4.   text-align: right;
    5.   span {
    6.     color: #151515;
    7.   }
    8. }
    9. .mui-card-header {
    10.   color:#999;
    11.   font-size: 13px;
    12.   span.title {
    13.     font-size: 13px;
    14.     color: #888;
    15.   }
    16. }
    17. .mui-card-content-inner {
    18.   text-align: left;
    19.   .cover {
    20.     position: relative;
    21.     width: 70px;
    22.     height: 70px;
    23.     display: inline-block;
    24.     margin-right: 10px;
    25.     .img-con {
    26.       width: 100%;
    27.       height: 100%;
    28.       margin-right: 10px;
    29.       border-radius: 2px;
    30.       position: relative;
    31.       img {
    32.         width: 100%;
    33.         height: 100%;
    34.         border-radius: 2px;
    35.         position: absolute;
    36.         left: 50%;
    37.         top: 50%;
    38.         transform: translate3d(-50%,-50%,0);
    39.       }
    40.     }
    41.     .img-tag {
    42.       position: absolute;
    43.       opacity: .5;
    44.       background: #000;
    45.       color: #fff;
    46.       text-align: center;
    47.       font-size: 12px;
    48.       right: 0;
    49.       bottom: 0;
    50.       padding: 0 5px;
    51.       border-radius: 2px 0;
    52.     }
    53.   }
    54. }
    55. </style>

             5、观察效果

     9、订单详情页

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

             2、事件处理函数show实现

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

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

             5、订单详情页面结构

             6、订单详情页CSS样式

    1. <style lang="scss" scoped>
    2. .flex {
    3.   display: flex;
    4. }
    5. .shopcart-container {
    6.   background: #eee;
    7.   overflow: hidden;
    8.   // 商品列表
    9.   .goods-list {
    10.     margin-top: 10px;
    11.     .mui-card {
    12.       margin: 0;
    13.       .mui-card-content {
    14.         border-bottom: 1px solid #eee;
    15.         .mui-card-content-inner {
    16.           align-items: center;
    17.           padding: 10px;
    18.           img {
    19.             width: 60px;
    20.           }
    21.           .info {
    22.             margin-left: 10px;
    23.             box-sizing: border-box;
    24.             width: 100%;
    25.             overflow: hidden;
    26.             h1 {
    27.               font-size: 13px;
    28.               font-weight: bold;
    29.               line-height: 20px;
    30.               padding-top: 22px;
    31.             }
    32.             p {
    33.               flex-direction: row;
    34.               align-items: center;
    35.               justify-content: space-between;
    36.               .price {
    37.                 font-size: 16px;
    38.                 font-weight: 700;
    39.                 color: red;
    40.                 flex: 1
    41.               }
    42.             }
    43.           }
    44.         }
    45.       }
    46.       // 配送信息
    47.       .process-info {
    48.         padding: 10px;
    49.         border-bottom: 1px solid #eee;
    50.         p {
    51.           display: flex;
    52.           flex-direction: row;
    53.           align-items: center;
    54.           justify-content: space-between;
    55.           color: #333;
    56.           span {
    57.             color: #999
    58.           }
    59.         }
    60.       }
    61.     }
    62.   }
    63.   // 运费信息
    64.   .fare-info {
    65.     padding: 10px;
    66.     margin: 10px 0 0 0;
    67.     .fare-price {
    68.       padding: 5px 0;
    69.       display: flex;
    70.       justify-content: space-between;
    71.       .red {
    72.         color: red;
    73.         font-size: 16px;
    74.       }
    75.     }
    76.   }
    77. }
    78. </style>

             7、观察效果

     10、取消订单

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

            2、事件处理函数cancel实现

     11、从商品详情页下单

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

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

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

     至此订单相关功能完成

  • 相关阅读:
    群晖搭建 docker OpenGrok 浏览 Android 代码
    大数据-玩转数据-Centos7 升级JDK11
    牛客练习赛106
    第十一章《Java实战常用类》第6节：Object类
    linux uboot kenerl filesystem关系
    Docker swarm 管理 secrets
    学习Android的第二十九天
    如果Domino上的邮件无法直接发送到@outlook.com
    网络安全（黑客）自学
    9.现代循环神经网络
  • 原文地址：https://blog.csdn.net/u013301892/article/details/125499495