用vue.js重构订单计算页面-白红宇

用vue.js重构订单计算页面

阅读量：5116 次

发布时间：2019-06-13

本文共 1990 字，大约阅读时间需要 6 分钟。

在很久很久以前做过一个很糟糕的订单结算页面，虽然里面各区域（收货地址）使用模块化加载，但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误。

大致问题如下：

1. 每个模块都采用usercontrol（收货地址、配送范围、支付方式、优惠券等等），维护起来很困难。

2. 每个模块的加载都是一个Ajax请求，并且根据前后顺序关系加载多个模块即多个Ajax请求。比如用户修改收货地址后系统重新计算配送方式和支付方式，并刷新配送方式、支付方式、订单总金额等数据，一般情况下没问题，但偶尔会遇到某个模块加载失败导致页面数据显示不正确。

所以必须要重构订单结算页面，使用模版引擎或Vue.js，这里就采用Vue.js重构页面。

订单结算页的页面区域模块大致如下：

根据页面区域定义数据模型，大致如下：

AddressList：用户收货地址列表

DeliveryList：配送方式

PaymentList：支付方式

DefaultAddress：用户默认收货地址

其他数据用于提交表单或页面显示金额用，就不介绍了。

初始化Vue对象

var model = {};var vue = new Vue({    el: '.order-form',    data: model,    computed: {    },    methods : {    }});

收货地址

view

其中v-model 采用的是双向数据绑定，它会根据控件类型自动选取正确的方法来更新model.AddressId。

view里绑定事件用v-on:事件名称

vue添加增加收货地址事件，这是Demo就写个简单的例子，建议用Ajax弹出层让用户填写收货地址。

methods : {        addressAdd : function(){            model.AddressList.push({AddressId : mode.AddressList.length + 1, Address : "随机添加的收货地址" + math.random()});        }    }

效果如下：

配送方式：

View代码：

{
     { delivery.DeliveryName }}（运费：￥{
     { delivery.DeliveryFee }}）

Vue代码：

deliverySelect :function(delivery){   model.DeliveryId = delivery.DeliveryId;   model.DeliveryFee = delivery.DeliveryFee;},

效果如下：

订单金额显示：

View：


     
                  订单总金额：            
      ￥{
   { orderAmount }}            = 商品总金额：            
      ￥{
   { ProductAmount }}            + 运费：            
      ￥{
   { DeliveryFee }}            - 优惠券：            
      ￥{
   { CouponAmount }}

Vue代码：

computed: {     orderAmount : function(){        return this.ProductAmount + this.DeliveryFee - this.CouponAmount;     } },

其他部分代码以此类推，就是绑定数据和事件就可以。

转载于:https://www.cnblogs.com/sobaby/p/6875112.html

你可能感兴趣的文章