课程名称：Java支付全家桶 企业级各类支付手段一站式解决方案
课程章节：6-3 实现结账页面
主讲老师：神思者
课程内容：
今天课程学习的主要知识点内容包括：
前端收款码付款显示订单交互页面的开发、开发根据订单id查找商品订单概要信息的接口。
课程收获：
1、payment.html 页面的开发，html 页面的主要核心代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="payment.css">
</head>
<body>
<div class="panel">
<h3>订单结算</h3>
<div>
<div class="row">
<div>
流水号：<span id="code"></span>
</div>
<div>
状态：<span id="status"></span>
</div>
</div>
<div class="row">
<div>日期：<span id="date"></span></div>
<div>总计：<span id="amount"></span>元</div>
<div>实付：<span id="pay"></span>元</div>
</div>
</div>
<table>
<tr>
<th>序号</th>
<th>餐品</th>
<th>数量</th>
<th>单价</th>
<th>折扣价</th>
</tr>
<tr>
<td>1</td>
<td>海鲜汤</td>
<td>1</td>
<td>￥58</td>
<td>无</td>
</tr>
<tr>
<td>2</td>
<td>法式焗蜗牛</td>
<td>1</td>
<td>￥88</td>
<td>无</td>
</tr>
<tr>
<td>3</td>
<td>吞拿鱼沙拉</td>
<td>1</td>
<td>￥129</td>
<td>无</td>
</tr>
<tr>
<td>4</td>
<td>香煎菲力牛排</td>
<td>1</td>
<td>￥155</td>
<td>无</td>
</tr>
<tr>
<td>5</td>
<td>海鲜意粉</td>
<td>1</td>
<td>￥56</td>
<td>无</td>
</tr>
</table>
<div class="operation">
<input type="button" class="pay-btn" value="结算支付" data-order-id="2"/>
</div>
<div class="message">支付设备已经准备好</div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/config.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="payment.js"></script>
</body>
</html>
2、开发根据订单id查找商品订单概要信息的接口：
（1）封装根据订单id查找商品订单的请求对象，主要代码如下：
@Data
@ApiModel(value = "订单结算")
public class SearchOrderForm {
@Min(1)
@ApiModelProperty(value = "订单id")
private Integer orderId;
}
（2）在 controller 层开发根据订单id查找商品订单概要信息的接口，主要代码如下：
@Login
@PostMapping("/searchOrderById")
@ApiModelProperty("查询订单")
public R searchOrderById(@RequestBody SearchOrderForm form, @RequestHeader HashMap header) {
ValidatorUtils.validateEntity(form);
String token = header.get("token").toString();
int userId = Integer.parseInt(
jwtUtils.getClaimByToken(token).getSubject()
);
OrderEntity order = orderService.getOne(
Wrappers.<OrderEntity>lambdaQuery()
.eq(OrderEntity::getUserId, userId)
.eq(OrderEntity::getId, form.getOrderId())
.last("limit 1")
);
return R.ok().put("order", order);
}
3、在前端 config.js 文件配置对应的后端接口：
......
let wxUrl = {
......
searchOrderById: baseUrl + "/app/order/searchOrderById",
}
4、编写前端 payment.js 的业务逻辑，其主要核心代码如下：
$(() => {
$.ajax({
url: wxUrl.searchOrderById,
type: "post",
dataType: "json",
contentType: "application/json",
beforeSend: (req) => {
req.setRequestHeader("token", localStorage.getItem("token"));
},
data: JSON.stringify({
"orderId": 1
}),
success: (resp) => {
let order = resp.order;
if (1 == order.status) {
order.status="未付款"
}
else if (2 == order.status) {
order.status="已付款"
}
else if (3 == order.status) {
order.status="已发货"
}
else if (4 == order.status) {
order.status="已签收"
}
else if (5 == order.status) {
order.status="退款中"
}
else if (6 == order.status) {
order.status="已退款"
}
$("#code").text(order.code);
$("#status").text(order.status);
$("#date").text(order.createTime);
$("#amount").text(order.amount);
$("#pay").text(order.amount);
$(".pay-btn").attr("data-order-id", order.id);
if (order.status != "未付款") {
$(".pay-btn").attr("disable", true);
$(".pay-btn").css({
"background-color": "#666"
});
}
},
fail: (err) => {
console.log(err.errMsg);
}
});
})
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦