乐优商城(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