乐优商城（15）--订单服务

乐优商城（15）–订单服务

一、订单结算页

页面跳转

在购物车页面的最下方，有一个去结算按钮：

当点击结算，应该跳转到订单结算页，即：getOrderInfo.html

查看购物车的结算按钮：

可以看到，地址是正确的。但是只有登录用户才可以去结算付款，因此不能直接跳转，而是在跳转前校验用户的登录状态，如果发现是未登录，应该重定向到登录页！

给这个按钮绑定点击事件：

事件中判断登录状态，进行页面跳转：

toOrderInfo() {
   
    // 判断是否登录
    ly.verifyUser().then(() => {
   
        // 已登录
        window.location.href = "/getOrderInfo.html"
    }).catch(() => {
   
        // 未登录
        window.location.href = "/login.html?returnUrl=" + window.location.href;
    })
}

登录后测试：

此处页面需要渲染的内容主要包含3部分：

• 收货人信息
• 支付方式
• 商品信息

二、地址管理

2.1、页面效果

点击“新增收货地址”和“编辑”都会弹出模态框，如下所示：

2.2、数据库设计

CREATE TABLE `tb_address`  (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '地址id',
  `user_id` bigint(20) NULL DEFAULT NULL COMMENT '用户id',
  `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收货人姓名',
  `phone` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收货人电话',
  `zip_code` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮编',
  `state` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '省份',
  `city` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '市',
  `district` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '区/县',
  `address` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '详细地址',
  `default_address` tinyint(1) NULL DEFAULT NULL COMMENT '1：默认地址  0：非默认地址',
  `label` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '地址标签',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `userId`(`user_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

2.3、页面渲染

2.3.1、定义数据模型

2.3.2、表单改造

<div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" @click="clear" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
            <h4 id="myModalLabel" class="modal-title">{
  {isEdit ? "编辑" : "添加"}}收货地址</h4>
         </div>
         <div class="modal-body">
            <form id="myform" action="" class="sui-form form-horizontal">
               <div class="control-group">
                  <label class="control-label">收货人：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.name" class="input-medium">
                  </div>
               </div>
               <div class="control-group">
                  <label class="control-label">联系电话：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.phone" class="input-medium">
                  </div>
               </div>
               <div class="control-group">
                  <label class="control-label">省：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.state" class="input-medium">
                  </div>
               </div>
               <div class="control-group">
                  <label class="control-label">市：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.city" class="input-medium">
                  </div>
               </div>
               <div class="control-group">
                  <label class="control-label">区/县：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.district" class="input-medium">
                  </div>
               </div>

               <div class="control-group">
                  <label class="control-label">邮编：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.zipCode" class="input-medium">
                  </div>
               </div>

               <div class="control-group">
                  <label class="control-label">详细地址：</label>
                  <div class="controls">
                     <input type="text" v-model="addressForm.address" class="input-large">
                  </div